@import "./variables.css";

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* ===== Accessibility — global ===== */

/* Honor user reduced-motion preference. Disables tooltip slides, hover
   transforms, drag feedback animations, and other motion-dependent
   feedback. Functional UI continues to work; only the animation is
   suppressed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Consistent focus-visible style across all interactive elements.
   Browser default outlines are inconsistent (some browsers no-op for
   <button>); this normalizes to a high-contrast gold outline. Cards
   already had a custom focus-visible style that wins via specificity. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex="0"]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-artist);
  outline-offset: 2px;
  border-radius: 4px;
}

.pill-container {
  display: flex;
  gap: 3px;
  align-items: center;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes spin-centered {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cover-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1;   }
}
/* === Style Room Artist Era Tier Outlines === */
.style-artist-group {
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 7px;
    margin: 0 0 6px 0;
    padding: 0.4em 0 0.7em 0;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.style-artist-group:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.discography-line {
  transition: background 0.15s ease;
}
.discography-line--active {
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
}
.discography-line--active .disc-title {
  color: var(--color-artist) !important;
}
.discography-line--no-art .disc-title a {
  opacity: 0.4;
}
.discography-line--no-art .disc-year,
.discography-line--no-art .disc-flag {
  opacity: 0.4;
}
.disc-title {
  color: rgba(255,255,255,0.72);
  font-style: italic;
  cursor: pointer;
}
.disc-title a {
  color: inherit;
  text-decoration: none;
}
.disc-year {
  text-align: right;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  padding-left: 10px;
  font-variant-numeric: tabular-nums;
}
.disc-flag {
  text-align: right;
  padding-left: 6px;
  font-size: 1.1em;
  line-height: 1;
}
.discography-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
  line-height: 1.8;
}
.discography-table td {
  padding: 1px 3px;
  vertical-align: middle;
}
.discography-section-header {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 0.72em;
  color: var(--color-artist);
  opacity: 0.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 5px 0;
}
.persona-divider-row td {
  padding-top: 7px;
  padding-bottom: 2px;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-size: 0.9em;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.album-cover-loading {
  display: none;
}

/* Active rules for .album-cover-img and .album-cover-placeholder live
   further down the file (around line 1248), paired with the absolutely-
   positioned .artist-album-cover-container layout. The earlier simple
   versions that used to live here were dead overrides from before the
   container existed; removed. */
/* Two-class selector to beat the gold chip bg from
   .artist-album-cover-container (defined later in the file). The
   placeholder reads as an album-cover slot, not a tinted chip. */
.artist-album-cover-container.album-cover-placeholder {
  background: hsl(0, 0%, 6%);
}
/* Album placeholder motif fills the cover slot like artwork would —
   no inset recess, just the motif on the near-black bg. */
.album-cover-placeholder .placeholder-recess {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: inherit;
}
.album-cover-placeholder .placeholder-motif {
  width: 60%;
  height: 60%;
}

.related-category-header {
  margin: 2px 0 4px 0;
  font-size: 0.9em;
  color: #ccc;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 0;
}

.meta-pill--more.era-extra-chip {
  background: var(--color-artist);
  color: #111;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 1px 7px;
  line-height: 1.4;
  cursor: cell;
  box-shadow: none;
}

.related-category-artists {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 0.6em;
  row-gap: 0.15em;
  margin-bottom: 2px;
  width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
}

.flex-break {
  flex-basis: 100%;
  height: 0;
}

.related-artist-wrapper {
  flex: 1 1 100%;
  text-align: center;
  overflow: visible;
}

.style-artist-tier-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: 18px;
  margin-bottom: 4px;
  width: 100%;
}

.style-artist-tier-header {
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translate(-50%, 0);
  padding-left: 1.2em;
  padding-right: 1.2em;
  font-family: 'Libre Baskerville', serif;
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  background: var(--color-room-artist);
  border-radius: 1.2em;
  z-index: 2;
  text-align: center;
  margin-bottom: 0;
  border-bottom: none;
  width: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  white-space: nowrap;
  pointer-events: auto;
  /* Do not set font-family here, inherit from body */
}



/* Reset / base layout */

* { box-sizing: border-box; }

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: var(--color-page);
  color: var(--color-text-main);
  font-family: var(--font-sans), sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

/* Typography */

h1, h2, h3{
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--fs-h1); margin: .5em 0 0 0; font-family: var(--font-display); font-weight: 700; }
h2{ font-size: var(--fs-h2); margin: .5em 0 0 0; }
h3{ font-size: var(--fs-h3); margin: .5em 0 0 0; margin-block-start: 0.5em; margin-block-end: 0; text-align: center;}

button{ font: inherit; }
button {
  border-radius: 6px;
}

/* Room header strip for style and artist rooms */
.room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-page);
  border-bottom: 1px solid var(--color-border-toolbar);
  padding: 0 1.2em;
  position: sticky;
  top: 0;
  /* z-index 60 — sticky creates a stacking context, which scopes the
     search-results dropdown's z-index:2000 *within* this header. To beat
     the mobile column-toggle bar (sticky, z-index 50, its own stacking
     context), the whole header has to outrank it at the root level. */
  z-index: 60;
  height: calc(var(--fs-h1) + 1.6rem);
  flex-shrink: 0;
}
.room-header h1 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-bottom: 0.15em;
}

/* Room header background tints */
#style-room-header {
  background: var(--color-page);
}
#artist-room-header {
  background: var(--color-page);
}

/* Room title color accents */
#style-room-header h1 {
  color: var(--color-style); /* brighter green */
  background: linear-gradient(180deg, var(--color-style-light) 10%, var(--color-style) 60%, var(--color-style-bdr) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(63,207,143,0.08);
}
#artist-room-header h1 {
  color: var(--color-artist); /* brighter gold */
  background: linear-gradient(180deg, var(--color-artist) 10%, var(--color-artist-light) 60%, var(--color-artist-bdr) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.32), 0 6px 14px rgba(255,210,122,0.08);
}
/* Summary name heading — smaller italic version of the room title above the lead text */
.summary-name-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  margin: 0 0 0.35em 0;
  display: block;
}
.artist-summary-name-heading {
  color: var(--color-artist);
}
.style-summary-name-heading {
  color: var(--color-style);
}

/* Icon buttons: shared image sizing */
.btn-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

/* Home button in room headers */
/* Three-zone room header layout */
.header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow: hidden;
}
.header-center {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0 0.75rem;
}
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn-home {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.header-laurel {
  height: 22px;
  width: auto;
  opacity: 0.8;
}
.header-laurel--right {
  transform: scaleX(-1);
}
@media (max-width: 768px) {
  .header-laurel { display: none; }
}

/* Icon button — header icons (home, save, maze) */
.icon-btn {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(1.4) saturate(1.1);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  display: block;
}
.icon-btn:hover  { opacity: 0.75; transform: scale(1.08); }
.icon-btn:active { transform: scale(0.93); }
.header-label {
  font-size: calc(var(--fs-h1) * 0.7);
  font-weight: 700;
  height: calc(var(--fs-h1) * 0.8);
  display: flex;
  align-items: center;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
#style-room-header .header-label {
  color: var(--color-style);
  background: linear-gradient(180deg, var(--color-style-light) 10%, var(--color-style) 60%, var(--color-style-bdr) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35), 0 6px 14px rgba(63,207,143,0.08);
}
#artist-room-header .header-label {
  color: var(--color-artist);
  background: linear-gradient(180deg, var(--color-artist) 10%, var(--color-artist-light) 60%, var(--color-artist-bdr) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.32), 0 6px 14px rgba(255,210,122,0.08);
}

/* Top containers / app layout */
#style-room-container {
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  transition: opacity 0.2s ease-in-out;
  overflow: visible;
  padding-bottom: 0.25em;
  /* Hidden by default until JS adds .full */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}
#style-room-container.full {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
#style-room-container.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

#artist-room-container {
  width: 100%;
  height: 100vh;
  background: var(--color-page);
  /* No border-top — the style-room and relics-page containers don't have
     one either, and the 2px previously here shifted the artist header
     down by 2px relative to its siblings. */
  overflow: auto;
  transition: opacity 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  /* Hidden by default until JS adds .full */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}

#artist-room-container.full {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
#artist-room-container.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 900px) {
  .artist-room, .style-room {
    flex-direction: row !important;
    height: auto;
  }
}



/* Room grid and columns */
.room.room-grid {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--gap);
  padding: var(--gap);
  min-height: 0;
  align-items: stretch;
  overflow: auto;
  flex: 1 1 auto;
}

.room-col {
  background: var(--color-bg-col);
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
  padding: 0;
  overflow: auto;
  min-width: 0;
  max-height: 100%;
}
.room-col .col-inner {
  padding: 0.5rem;
  padding-top: 0.4rem;
  min-height: 0;  /* keep flex scrolling sane */
  box-sizing: border-box;
}
.room-col--main {
  flex: 2 1 0;
  margin: auto;
  min-width: 0; min-height: 0; height: 100%;
  overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
}
#style-room-container .room-col--main {
  background: var(--color-room-style);
}
.room-col--side {
  flex: 1 1 0;
  min-width: 0; min-height: 0; height: 100%;
  overflow-y: auto; overflow-x: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 1.5em;
}
#style-room-container .room-col--side {
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 6px;
  padding: 0;
}

.style-side-panel {
  padding: 0.5rem;
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
}
#style-origins-panel,
#style-influenced-panel {
  background: var(--color-room-style);
}
#style-artists-panel {
  background: var(--color-room-artist);
}

.style-side-label {
  font-size: 1.1em;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.4em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
/* Local-random button is a flex sibling of the label text — keep the row
   visually centered even when the button is hidden by spacing the gap as
   part of the label, not the button. */
.style-side-label-text { display: inline-block; }
#style-origins-panel .style-side-label,
#style-influenced-panel .style-side-label {
  color: var(--color-style);
}
#style-artists-panel .style-side-label {
  color: var(--color-artist);
}
#artist-styles-panel .style-side-label {
  color: var(--color-style);
}
#artist-related-panel .style-side-label {
  color: var(--color-artist);
  margin-bottom: 1.4em;
}
.none-recorded {
  font-size: 0.75em;
  font-weight: normal;
  opacity: 0.7;
}
.inferred-label {
  font-size: 0.75em;
  font-weight: normal;
  opacity: 0.7;
  font-style: italic;
}
#artist-room-container .room-col--main {
  background: var(--color-room-artist);
}
#artist-room-container .room-col--side {
  background: transparent;
  border: none;
  border-radius: 0;
  gap: 6px;
  padding: 0;
}

.artist-side-panel {
  padding: 0.5rem;
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
}
#artist-styles-panel {
  background: var(--color-room-style);
}
#artist-related-panel {
  background: var(--color-room-artist);
}

/* Exits / meta chip rows */
.meta-chips-row {
  display: flex;
  gap: 0.7em;
  margin: 0.7em 1.2em 0.5em 1.2em;
}
.exits-row {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

#style-meta-chips { display: flex; gap: 0.5rem; align-items: stretch; flex-wrap: wrap; }
.artist-style-exits-label,
.style-artist-exits-label {
  font-weight: 400;
  font-size: 0.75em;
  color: #fff;
  margin-right: 0.5em;
  flex: 0 0 auto;
  white-space: nowrap;
  vertical-align: middle;
}
/* Both style and artist exits now flow vertically in sidebar */
#style-artist-exits,
#artist-style-exits,
#artist-related-exits,
#style-incoming,
#style-outgoing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  align-items: flex-start;
  justify-content: center;
}

.no-artists-msg {
  width: 100%;
  text-align: center;
  color: #888;
  font-style: italic;
  font-size: 0.85em;
  margin: 1em 0 0.5em;
}


/* Style vertical scrollbars similarly */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #161617; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12)); border-radius: 8px; border: 2px solid rgba(0,0,0,0); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.18)); }

/* Firefox equivalent */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) #161617; }


.exits-block {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.exits-block h2 {
  margin-top: 0.5em;
  margin-bottom: 0;
}
.exits-block h3,
.style-exits-block h3 {
  font-family: 'Libre Baskerville', serif;
}
.meta-chip {
  background: var(--color-meta-bg);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-chip);
  padding: 0.35em 1em;
  color: var(--color-meta-text);
  font-size: 1em;
  display: inline-block;
  margin-right: 0.5em;
  margin-bottom: 0.2em;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.1), 0 4px 10px rgba(0,0,0,0.42);
}
.meta-chip:empty { display: none !important; }

/* Meta-row: stat-box-like bordered widget with label floating on top border */
.meta-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
  padding: 0.25rem 0.4rem;
  padding-top: 0.5rem;
  flex-shrink: 0;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.36) 0%, rgba(0,0,0,0.56) 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.18), inset 0 -2px 5px rgba(0,0,0,0.5);
}
.meta-row .meta-label {
  position: absolute;
  top: -0.65em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7em;
  background: var(--color-page);
  padding: 0 0.3em;
  border: 1px solid;
  border-color: inherit;
  border-radius: 999px;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--color-text-dim);
}
.meta-row .meta-content {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
/* Strip inner chip's own box — meta-row provides the border */
.meta-row .meta-chip {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
}
#style-meta-chips .meta-row .meta-chip { color: var(--color-style); }
#artist-meta-chips .meta-row .meta-chip { color: var(--color-artist); }
#artist-meta-chips .meta-row .meta-pill {
  font-size: 18px;
  color: var(--color-artist);
  background: transparent;
  border: none;
  box-shadow: none;
}
#artist-meta-chips .meta-row .meta-pill--more {
  background: var(--color-artist);
  color: #111;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 1px 7px;
  border: none;
  cursor: pointer;
  line-height: 1.4;
}

/* Artist meta: single horizontal row of meta blocks (labels above chips) */
.artist-meta-grid {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-items: stretch;
  margin: 0.6em 0.6em 0.6em 0.6em;
  flex-wrap: wrap;
}
.meta-col { display: flex; flex-direction: row; gap: 0.4rem; align-items: stretch; }
.meta-cell { display: block; box-sizing: border-box; }
.meta-cell.meta-chip { padding: 0; }
.meta-cell .meta-pill { margin-right: 0.15em; padding: 1px 3px; line-height: 1; font-size: 0.92em; vertical-align: middle; }

/* Make inner pills match the dark chip appearance when used in the artist grid
   Keep inner pills compact and ensure the +N does not force extra outer height */

/* +N pill (compact) */
.artist-meta-grid .meta-pill {
  background: transparent;
  color: var(--color-text-main);
  border: none;
  box-shadow: none;
  display: inline-block;
}
.artist-meta-grid .meta-pill[title] { text-decoration: none; }
.artist-meta-grid .meta-pill--more {
  padding: 2px 6px;
  font-size: 0.85em;
  min-width: 22px;
  line-height: 1;
  /* keep compact +N pill visually consistent but metallic */
  background: var(--color-meta-bg);
  color: var(--color-meta-text);
  border-radius: 999px;
  border: none;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
}
.artist-meta-grid .meta-pill--more:focus { outline: none; }

.artist-meta-grid .meta-content { flex: 0 1 auto; display: inline-flex; align-items: center; }
/* Let chips size to their content; don't force full-column width */
.artist-meta-grid .meta-content > .meta-chip { width: auto; display: inline-block; }


/* Compact pill used inside meta chips (occupations, aliases, etc.) */
.meta-pill {
  display: inline-block;
  padding: 4px 2px;
  border-radius: 999px;
  background: var(--color-meta-bg);
  color: var(--color-meta-text);
  font-size: 0.9em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(0,0,0,0.22);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.1);
}
.meta-pill--more {
  background: var(--color-meta-bg);
  border: none;
  min-width: 30px;
  padding: 4px 8px;
  cursor: pointer;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0.1) 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25), inset 0 -1px 0 rgba(255,255,255,0.1);
}

/* Contaminated artist pills */
.pill--contaminated {
  opacity: 0.75;
  border-style: dashed;
}

.pill--contaminated .contamination-marker {
  margin-left: 4px;
  opacity: 0.6;
  font-size: 0.85em;
}

/* Popover container for +N lists */
.meta-popover {
  position: fixed;
  z-index: 99999;
  min-width: 220px;
  max-width: 360px;
  max-height: 60vh;
  overflow: auto;
  background: var(--color-bg-col-alt, #fff);
  color: var(--color-text-main, #111);
  min-height: 40px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding: 8px;
}
.meta-popover ul { list-style: none; padding: 0; margin: 0; }
.meta-popover li { padding: 6px 8px; border-radius: 6px; margin-bottom: 4px; cursor: default; color: #111; }
.meta-popover li:last-child { margin-bottom: 0; }


/* Normalize spacing for all exit buttons to match #style-artist-exits */
#style-artist-exits,
#artist-style-exits,
#artist-related-exits,
#style-incoming,
#style-outgoing,
#style-artist-exits button,
#artist-style-exits button,
#artist-related-exits button,
#style-incoming button,
#style-outgoing button,
#style-outgoing .btn,
#style-incoming .btn,
#style-artist-exits .btn,
#artist-related-exits .btn {
  padding: 0.1em 0.35em;
  margin: 0.06em 0.09em;
  border-radius: 6px;
  line-height: 1.1;
}

/* Summary hyperlinks (lead v2): styled like exit buttons by target room type */
a.summary-link {
  text-decoration: none;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 0.2em;
  margin: 0 0.05em;
  vertical-align: 1px;
  display: inline-block;
  line-height: 1;
  transition: filter 0.15s;
}
a.summary-link-style {
  background: linear-gradient(180deg, var(--color-style-light), var(--color-style) 45%, var(--color-style-bdr) 100%);
  color: #07120a;
  border: 1px solid rgba(6, 48, 24, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) inset;
}
a.summary-link-style:hover {
  filter: brightness(0.95);
}
a.summary-link-artist {
  background: linear-gradient(180deg, var(--color-artist), var(--color-artist-bdr));
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
a.summary-link-artist:hover {
  filter: brightness(0.95);
}

/* Color-code exit buttons:
   - Style exits (buttons that navigate to styles) should appear silver
   - Artist exits (buttons that navigate to artists) should appear gold
   Target containers by their IDs so we don't change other buttons. */
/* Metallic green: style exits (styles for an artist, and style incoming/outgoing lists) */
#artist-style-exits button,
#style-incoming button,
#style-outgoing button,
#style-outgoing .btn,
#style-incoming .btn {
  background: linear-gradient(180deg, var(--color-style-light), var(--color-style) 45%, var(--color-style-bdr) 100%);
  color: #07120a; /* dark green text for contrast */
  border: 1px solid rgba(6,48,24,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
#artist-style-exits button:hover,
#style-incoming button:hover,
#style-outgoing button:hover {
  filter: brightness(0.98);
  transform: translateY(-0.4px);
}

/* Gold: artist exits (artists for a style, related artists, artist lists) */
#style-artist-exits button,
#artist-related-exits button,
#style-artist-exits .btn,
#artist-related-exits .btn {
  background: linear-gradient(180deg, var(--color-artist), var(--color-artist-bdr));
  color: #111;
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
#style-artist-exits button:hover,
#artist-related-exits button:hover {
  filter: brightness(0.98);
  transform: translateY(-0.5px);
}
/* Search box + results */
.search{ position:relative; }
.search-input{
  width:min(26ch, 50vw);
  height: calc(var(--fs-h1) * 0.8);
  background: linear-gradient(180deg, #9b9da2 0%, #696f78 55%, #484c55 100%);
  color: #fff; caret-color: #fff; border:1px solid #666;
  border-radius:6px; padding:0 .65em; outline:none;
  box-sizing: border-box;
  line-height: 1.1;
}
#style-room-header .search-input {
  background: linear-gradient(180deg, var(--color-style-light), var(--color-style) 45%, var(--color-style-bdr) 100%);
  color: #07120a;
  caret-color: #07120a;
  border: 1px solid rgba(6,48,24,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
#style-room-header .search-input::placeholder {
  color: rgba(7, 18, 10, 0.5);
}
#artist-room-header .search-input {
  /* 3-stop light→mid→dark gradient + 0.06 inset shadow mirrors the
     style room treatment; the prior 2-stop + drop-shadow read as a
     subtly different "register" (flatter, heavier shadow) which the
     user perceived as the search/random pair sitting differently
     than in the style room and on the Relics page. */
  background: linear-gradient(180deg, var(--color-artist-light), var(--color-artist) 45%, var(--color-artist-bdr) 100%);
  color: #15110a;
  caret-color: #15110a;
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
#artist-room-header .search-input::placeholder {
  color: rgba(17, 17, 17, 0.5);
}
/* Relics page: red→gold gradient — bridges the style/red and artist/gold
   palettes since Relics holds both. Two stops for a smooth HSL
   interpolation through orange (the natural midpoint between hue 10
   and 51). Earlier 4-stop version produced a visible band where red
   met gold; simpler is cleaner. */
#relics-page-header .search-input {
  background: linear-gradient(180deg, var(--color-style), var(--color-artist-bdr));
  color: #1a0a05;
  caret-color: #1a0a05;
  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
#relics-page-header .search-input::placeholder {
  color: rgba(26, 10, 5, 0.55);
}
/* Relics random-room button — strip the default .btn chrome (gray bg,
   white border) and mirror the room random-button treatment. */
#btn-rand-relics {
  height: calc(var(--fs-h1) * 0.8);
  width: calc(var(--fs-h1) * 0.8);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.08s, filter 0.12s;
}
#btn-rand-relics:hover {
  transform: translateY(-0.4px);
  background: transparent;
  border: none;
}
.search-input::placeholder { color: rgba(255,255,255,0.75); opacity: 1; }
.search-input:focus{ border-color:#4a4a5a; box-shadow:0 0 0 2px rgba(140,140,255,.15); }

/* On small screens, hide the label and keep search box compact */
@media (max-width: 500px) {
  .header-label {
    display: none;
  }
  .search-input {
    width: min(17ch, 50vw);
  }
}

.search-results{
  /* z-index 2000: above the hover-state z-index 1001 used by button[data-tooltip]:hover
     elsewhere (which would otherwise let a hovered relic-thumb poke above the dropdown). */
  position:absolute; top:110%; left:0; right:0; z-index:2000;
  background: #0e0f11;
  border:1px solid #333; border-radius:8px;
  max-height:260px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,.35);
  padding: 4px;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 3px; align-content: flex-start;
}
.search-results button{
  display:inline-flex; align-items:center;
  width:auto; background:transparent; border:0; color:#fff;
  padding:.22em .55em; text-align:left; cursor:pointer; font:inherit;
  font-size: 0.82em; border-radius: 5px; white-space: nowrap;
}
.search-results button:hover{ background: rgba(255,255,255,0.03); }
.search-results button:focus, .search-results button:focus-visible {
  background: linear-gradient(180deg,#2b2f3a 0%, #16171a 100%);
  color: #fff;
  outline: none;
}
.search-results .score{ opacity:.6; font-variant-numeric:tabular-nums; }

.search-results .result-item.active, .result-item.active {
  background: linear-gradient(180deg,#2b2f3a 0%, #121316 100%) !important;
  color: #fff !important;
  outline: 2px solid rgba(255,255,255,0.06) !important;
  border-radius: 4px !important;
  z-index: 10 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  position: relative;
  transition: background 0.12s, color 0.12s;
}

/* License / fetched timestamp styling (de-emphasize) */
.style-license, .artist-license {
  font-size: 0.78em;          /* smaller */
  color: rgba(255,255,255,0.55); /* dimmer */
  font-style: italic;
  margin-top: 0.4em;
}
.style-license b, .artist-license b { font-weight: 600; }

#style-summary {
  /* in case any global “prose” styles cap width */
  max-width: none;
}
code, pre { font-family: var(--font-mono); }

.summary { 
  max-width: none; 
}

/* Historical rule removed: button[data-tooltip]:hover { z-index: 1001 }.
   Applied globally to every tooltip-bearing button, which meant any
   hovered relic-thumb, header button, exit pill, etc. floated to
   z-index 1001 — defeating dropdown / popover stacking elsewhere.
   No clear original intent could be found in git history. If a
   specific overlap regresses, add a tightly-scoped rule there. */

.style-exits-block h2 {
  margin-top: 0.5em;
  margin-bottom: 0;
}
.style-exits-block {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.artist-room {
  padding-top: 0;
}



/* Toolbars */
.toolbar{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.6em; padding:.5em 1.2em; background:var(--color-header); border-bottom:1px solid #333;
}
#artist-toolbar{ border-top:0; }

/* Random-room buttons (maze tile icons) */
#btn-rand-style, #btn-rand-artist {
  height: calc(var(--fs-h1) * 0.8);
  width: calc(var(--fs-h1) * 0.8);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: transform 0.08s, filter 0.12s;
}
#btn-rand-style:hover, #btn-rand-artist:hover {
  transform: translateY(-0.4px);
}

.btn{
  background:#23232a; color:#eee; border:1px solid #aaa;
  padding:.4em .8em; border-radius:8px; cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{ background:#2b2b37; color:#fff; border-color:#3a3a4a; }

/* Album cover sizing */
.artist-sidebar {
  width: 400px;
  float: right;
  margin: 0 0 15px 15px;
  padding: 0;
  background: rgba(0,0,0,0.18);
  border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  overflow: hidden;
}
.discography-section {
  padding: 10px 12px 12px;
}

.style-album-art-container {
  width: 380px;
}

.artist-album-cover-container,
.style-album-art-container > div {
  max-width: 380px;
}

.artist-album-cover-container {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-artist-chip);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

/* Style room art container background — used in place of inline gradient in app.js */
.style-album-art-bg {
  background: var(--color-style-chip);
}

.album-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.album-cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#album-art-container {
  position: relative;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#album-nav-left,
#album-nav-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 18px;
  user-select: none;
  transition: opacity 0.2s;
  z-index: 10;
}

#album-nav-left {
  left: 8px;
}

#album-nav-right {
  right: 8px;
}

/* Mobile: make album covers adapt to container width */
@media (max-width: 768px) {
  .artist-sidebar {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0 0 15px 0;
  }

  .style-album-art-container {
    width: 100%;
    max-width: 100%;
  }

  .artist-album-cover-container {
    max-width: 100%;
    width: 100%;
  }

  .style-album-art-container > div {
    max-width: 100%;
    width: 100%;
  }

  #album-art-container {
    max-width: 100%;
    width: 100%;
    overflow: visible;
  }

  #album-art-container > .artist-album-cover-container {
    overflow: hidden;
  }

  #album-art-container > .artist-album-cover-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #album-art-container img,
  #album-placeholder {
    max-width: 100%;
    width: 100%;
  }

  /* Ensure navigation arrows stay properly positioned */
  #album-nav-left,
  #album-nav-right {
    pointer-events: auto;
  }
}

/* ===== EXPERIMENT (2026-05-15): style-room album art on mobile as a
   centered 2x2 thumbnail grid — no titles, no float — so summary text
   flows beneath rather than wrapping a narrow side-column. May revert.
   To revert: remove this block AND the matching mobile guard in app.js
   _balanceStyleTiles(). Inline styles in app.js render() force !important
   here. */
@media (max-width: 600px) {
  .style-tile-column {
    float: none !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Hide the duplicate italic room name above the body text on mobile —
     the room header h1 already names the room. Redundant at narrow widths
     where vertical space is precious. Applies to both style and artist
     rooms. */
  .style-summary-name-heading,
  .artist-summary-name-heading {
    display: none !important;
  }
  .style-album-art-container {
    width: auto !important;
  }
  /* Hide the artist + album title text under each tile (the two divs that
     are siblings of .style-album-art-bg inside the tile container). */
  .style-album-art-container > div:not(.style-album-art-bg) {
    display: none !important;
  }
  /* Zero out the 8px bottom margin baked into the bg div's inline style —
     it was there to separate the image from the (now hidden) title text,
     and otherwise stacks with grid row-gap, making vertical gaps look
     larger than horizontal. */
  .style-album-art-bg {
    margin-bottom: 0 !important;
  }
  /* Balancer is guarded off on mobile, but if it ever runs and pushes
     tiles into the overflow row, make them span both columns rather than
     vanish. */
  .style-tile-overflow-row {
    grid-column: 1 / -1;
  }
}

/* Earlier narrow-screen override here forced justify-content:space-between
   + flex:1 1 auto on every exit button, stretching short pills like "Wale"
   or "Cro" to fill the row. The desktop default (justify-content:center,
   buttons at natural width, gap-wrap) reads correctly at mobile too — pills
   stay pill-shaped instead of becoming wide rectangles. */

/* Artist badges for era and location sharing */
.artist-badge {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.7;
  filter: grayscale(0.3);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.artist-badge.era-badge {
  /* Clock/time emoji for era */
}

.artist-badge.location-badge {
  /* Pin emoji for location */
}

/* Hover effects for badges */
span:hover .artist-badge {
  opacity: 1;
  filter: grayscale(0);
}
/* Tree structure styling for hierarchical display */
.tree-symbol {
  color: #8b7355;
  font-family: monospace;
  margin-right: 4px;
  font-size: 0.9em;
  opacity: 0.8;
}

.artist-tier-header {
  font-family: 'Libre Baskerville', serif;
}

/* === Related Artists Group Outlines === */

.related-artist-group {
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 7px;
  margin: 0 0 6px 0;
  padding: 0.4em 0 0.2em 0;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.15s;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.related-artist-group:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.related-artist-group .artist-tier-header {
  position: absolute;
  top: -1.1em;
  left: 50%;
  transform: translate(-50%, 0);
  padding-left: 1.2em;
  padding-right: 1.2em;
  font-size: 0.82em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to bottom, transparent 0%, var(--color-room-artist) 45%);
  border-radius: 1.2em;
  z-index: 2;
  text-align: center;
  margin-bottom: 0;
  margin-top: 0;
  border-bottom: none;
  width: auto;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  white-space: nowrap;
  pointer-events: auto;
}
.related-artist-group .artist-tier-header .meta-pill {
  pointer-events: auto;
}

.related-artist-same-era {
  border: 1px solid color-mix(in srgb, var(--color-style-bdr) 25%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-style) 10%, transparent);
  margin-bottom: 2px;
  padding: 2px 0 1px 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  max-width: 100%;
}
.related-artist-not-same-era {
  margin-top: 1px;
  padding: 2px 0 1px 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}


.meta-stat-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
  padding: 0.25rem 0.5rem;
  padding-top: 0.5rem;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.36) 0%, rgba(0,0,0,0.56) 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.18), inset 0 -2px 5px rgba(0,0,0,0.5);
}
/* Sparkline box holds a canvas — keep centered */
#style-sparkline-box,
#artist-sparkline-box {
  justify-content: center;
}

.stat-value-group {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
}
.stat-minibar {
  position: relative;
  width: 5px;
  border: 1px solid;
  border-radius: 1px;
  background: var(--color-page);
  overflow: hidden;
}
.stat-minibar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
}
#style-meta-chips .stat-minibar { border-color: var(--color-style-bdr); }
#style-meta-chips .stat-minibar-fill { background: var(--color-style); }
#artist-meta-chips .stat-minibar { border-color: var(--color-artist-bdr); }
#artist-meta-chips .stat-minibar-fill { background: var(--color-artist); }

.meta-stat-label {
  position: absolute;
  top: -0.65em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7em;
  background: var(--color-page);
  padding: 0 0.3em;
  border: 1px solid;
  border-color: inherit;
  border-radius: 999px;
  line-height: 1.1;
}

.meta-stat-value {
  font-size: 1.2em;
  font-weight: bold;
  cursor: help;
}
.meta-stat-value--style { color: var(--color-style); }
.meta-stat-value--artist { color: var(--color-artist); }

#artist-type-display {
  font-size: 18px;
  color: var(--color-artist);
  font-weight: normal;
  white-space: nowrap;
  align-self: center;
  padding-top: 0.4rem; /* nudge baseline to align with chip text */
}

/* Thematic border + label colors for style room */
#style-meta-chips .meta-stat-box,
#style-meta-chips .meta-row { border-color: var(--color-style-bdr); }
#style-meta-chips .meta-stat-label,
#style-meta-chips .meta-row .meta-label { color: var(--color-style); }

/* Thematic border + label colors for artist room */
#artist-meta-chips .meta-stat-box,
#artist-meta-chips .meta-row { border-color: var(--color-artist-bdr); }
#artist-meta-chips .meta-stat-label,
#artist-meta-chips .meta-row .meta-label { color: var(--color-artist); }

.era-legend {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  align-items: start;
}

.era-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.era-legend-chip {
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

.era-legend-label {
  color: white;
  font-size: 0.85em;
}

.global-tooltip {
  position: fixed;
  pointer-events: none;
  background: #222;
  color: var(--color-artist);
  padding: 0.7em 1.2em;
  border-radius: 8px;
  font-family: var(--font-sans);
  white-space: pre-line;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  display: none;
  border: none;
}
@keyframes tooltip-slide-down {
  from { clip-path: inset(0 0 100% 0 round 8px); }
  to   { clip-path: inset(0 0 0% 0 round 8px); }
}
.global-tooltip.tooltip-slide-down {
  animation: tooltip-slide-down 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes tooltip-drawer {
  from { clip-path: inset(0 100% 0 0 round 1.2em); }
  to   { clip-path: inset(0 0% 0 0 round 1.2em); }
}
.global-tooltip.tooltip-drawer {
  animation: tooltip-drawer 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Variant: themed tooltip for UI buttons (replaces native title="").
   Tighter padding, smaller serif italic text, gold-on-dark with subtle
   gold-tinted border — reads as page chrome rather than the chip/exit
   tooltip register used elsewhere. */
.global-tooltip.global-tooltip--themed {
  background: #1a1a1a;
  color: var(--color-artist-light);
  border: 1px solid rgba(255, 210, 122, 0.25);
  padding: 0.32em 0.7em;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Variant: +N popover on style section sub-heads (extra style names
   overflowing the header). Desktop register is "sub-head continuation
   text" — no background, no pill, same font/size/weight/color as the
   surrounding sub-head (.related-category-header) so the popover reads
   as if the chip expanded into the list it represents. Positioned at
   the chip's left edge, vertically centered on the header row (see
   app.js:2022). The original implementation lived in 54e602c; a pair
   of later commits (3f8fa90 + 103421a) moved it to "centered below"
   to handle tall popovers on narrow viewports — that fallback is now
   mobile-only (see @media block below). */
.global-tooltip.global-tooltip--extras {
  /* Match the artist-room sub-head bg so the popover reads as the
     chip expanding into its list — same surface color, no border to
     break the continuation. +N popovers only appear in artist rooms
     (style rooms don't have sub-heads), so this fixed brown is safe. */
  background: var(--color-room-artist);
  color: #ccc;
  border: none;
  padding: 0.25em 0.7em;
  font-family: var(--font-sans);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  width: auto;
  max-width: none;
  text-align: left;
  border-radius: 0.5em;
}
/* Mobile: not enough horizontal room to extend rightward, so render
   as a contained pill below the chip. Keeps the artist-room brown bg
   for register consistency with desktop; adds a gold edge since the
   popover sits below the sub-head row (against the artists list)
   rather than continuing it, so it needs visible separation. */
@media (max-width: 768px) {
  .global-tooltip.global-tooltip--extras {
    background: var(--color-room-artist);
    color: #ccc;
    border: 1px solid var(--color-border-main);
    padding: 0.4em 1em;
    line-height: 1.35;
    border-radius: 0.9em;
    white-space: normal;
    width: fit-content;
    max-width: min(560px, calc(100vw - 1.5rem));
    text-align: center;
  }
}

/* Variant: rich tooltip for relic cards. Multi-line, wraps long content. */
.global-tooltip.global-tooltip--relic {
  background: #1a1a1a;
  color: var(--color-artist-light);
  border: 1px solid rgba(255, 210, 122, 0.3);
  padding: 0.5em 0.8em;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.78rem;
  white-space: normal;
  max-width: 320px;
  line-height: 1.45;
}
.relic-tt-title {
  font-weight: 700;
  font-style: italic;
  margin-bottom: 0.15em;
}
.relic-tt-meta {
  font-size: 0.92em;
  font-style: italic;
  opacity: 0.85;
}
.relic-tt-type--style  { color: var(--color-style-light); }
.relic-tt-type--artist { color: var(--color-artist-light); }
.relic-tt-score {
  font-variant-numeric: tabular-nums;
}
.relic-tt-when {
  margin-top: 0.3em;
  font-size: 0.92em;
  font-style: italic;
  opacity: 0.85;
  color: var(--color-artist);
}
.relic-tt-summary {
  margin-top: 0.45em;
  font-size: 0.88em;
  font-style: italic;
  opacity: 0.85;  /* bumped from 0.78 for WCAG AA contrast on body text */
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.relic-tt-aliases {
  margin-top: 0.35em;
  font-size: 0.85em;
  opacity: 0.78;  /* bumped from 0.65 for WCAG AA contrast on body text */
}
.relic-tt-date {
  margin-top: 0.25em;
  font-size: 0.78em;
  font-style: italic;
  opacity: 0.72;  /* bumped from 0.55 for WCAG AA contrast on body text */
}

.album-lightbox-placeholder {
  width: min(90vw, 80vh);
  height: min(90vw, 80vh);
  background: hsl(0,0%,11%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-size: 1.2em;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
/* Lightbox placeholder: same proportions as the inline album slot —
   so zooming into the lightbox feels like zooming the art itself,
   not a layout change. Recess fills 100%; motif at the same 60%
   relative size, just larger absolute. */
.album-lightbox-placeholder .placeholder-recess {
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border-radius: inherit;
}
.album-lightbox-placeholder .placeholder-motif {
  width: 60%;
  height: 60%;
}

.album-lightbox-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 50;
  border-radius: 8px;
}

.album-lightbox-spinner {
  display: none;
}

.album-lightbox-img {
  width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.album-lightbox-nav-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
}

.album-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  font-size: 32px;
  user-select: none;
  transition: opacity 0.2s, background 0.2s;
  z-index: 100;
  font-weight: bold;
  pointer-events: auto;
}
.album-lightbox-arrow--left  { left:  20px; }
.album-lightbox-arrow--right { right: 20px; }

.album-lightbox-labels {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 15px;
  width: 100%;
}

.album-lightbox-nav-label {
  color: rgba(255,255,255,0.6);
  font-size: 0.85em;
  flex: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  cursor: pointer;
  transition: color 0.2s;
}
.album-lightbox-nav-label--prev { text-align: left;  padding-right: 10px; }
.album-lightbox-nav-label--next { text-align: right; padding-left:  10px; }

.album-lightbox-caption {
  color: white;
  text-align: center;
  font-size: 1.1em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  flex: 1;
  padding: 0 10px;
}

.album-lightbox-content {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-popup-container {
  max-width: min(90vw, 80vh);
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s ease-out;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.album-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* ===== Landing Page ===== */
#landing-container {
  width: 100%;
  height: 100vh;
  background: var(--color-page);
  overflow: hidden;
  transition: opacity 0.2s ease-in-out;
  /* Hidden by default until JS adds .full */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}
#landing-container.full {
  opacity: 1;
  pointer-events: auto;
  position: relative;
  height: auto;
  overflow: visible;
}
#landing-container.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}

#landing-content {
  max-width: 1100px;
  width: 100%;
  padding: 0 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#landing-title {
  text-align: center;
  font-size: 2.4em;
  margin: 0;
  background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Landing nav: two-column layout */
#landing-nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.landing-nav-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.landing-nav-label {
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
}
.landing-nav-label--style {
  color: var(--color-style);
}
.landing-nav-label--artist {
  color: var(--color-artist);
}
.landing-nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
  position: relative;
}
.landing-search-style {
  background: var(--color-style-chip);
  color: var(--color-style-light);
  caret-color: var(--color-style-light);
  border: 1px solid var(--color-style-bdr);
  width: 100%;
}
.landing-search-style::placeholder { color: color-mix(in srgb, var(--color-style-light) 55%, transparent); }
.landing-search-artist {
  background: var(--color-artist-chip);
  color: var(--color-artist-light);
  caret-color: var(--color-artist-light);
  border: 1px solid var(--color-artist-bdr);
  width: 100%;
}
.landing-search-artist::placeholder { color: color-mix(in srgb, var(--color-artist-light) 55%, transparent); }

.home-rand-row {
  display: flex;
  gap: 0.5em;
  margin-top: 0.25em;
}
.btn-rand-labeled {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  padding: 0.3em 0.7em;
  opacity: 0.75;
}
.btn-rand-labeled:hover { opacity: 1; }
.rand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rand-dot--style  { background: var(--color-style); }
.rand-dot--artist { background: var(--color-artist); }

@media (max-width: 500px) {
  #landing-nav {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Landing collection summary */
#landing-collection-summary:hover:not(:empty) {
  background: rgba(255,255,255,0.04);
}

/* Landing help & credits */
#landing-help,
#landing-credits {
  color: var(--color-text-dim, rgba(255,255,255,0.6));
  font-size: 0.9em;
  text-align: left;
  width: 100%;
  max-width: 640px;
  padding: 0.5rem 0;
}
#landing-help h2,
#landing-credits h2 {
  text-align: center;
  font-size: 1.15em;
  color: var(--color-text-main);
  margin: 1.5rem 0 0.8rem;
  letter-spacing: 0.03em;
}
#landing-credits h3 {
  font-size: 0.95em;
  color: var(--color-text-main);
  margin: 1.2rem 0 0.4rem;
}
#landing-help dl {
  margin: 0;
}
#landing-help dt {
  font-weight: 700;
  font-size: 1.05em;
  color: var(--color-text-main);
  margin-top: 1.1rem;
}
#landing-help dd {
  margin: 0.3rem 0 0 0;
  line-height: 1.55;
}
#landing-credits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#landing-credits li {
  margin: 0.4rem 0;
  line-height: 1.5;
}
#landing-credits a {
  color: rgba(255,255,255,0.5);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.2);
}
#landing-credits a:hover {
  color: var(--color-text-main);
}
#landing-credits p {
  line-height: 1.5;
}
.landing-content-warning {
  background: rgba(255,160,60,0.12);
  border: 1px solid rgba(255,160,60,0.25);
  border-radius: var(--radius-main);
  padding: 0.6rem 0.9rem;
  color: rgba(255,200,120,0.85);
  font-size: 0.95em;
  line-height: 1.5;
  margin: 0.5rem 0;
}

/* ===== Home Screen ===== */

/* Entry animation */
@keyframes landingFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero section — art left (45%), content right (55%) */
/* ═══════════════════════════════════════════════
   Landing page
   ═══════════════════════════════════════════════ */

.hero {
  display: grid;
  grid-template-columns: 45fr 55fr;
  align-items: start;
  gap: 0;
}

.hero-art {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.landing-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.landing-art--mobile  { display: none; }
.landing-art--desktop { display: block; }

.landing-content {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
}

.content-inner {
  max-width: 500px;
  margin: 0 auto;
  padding: 3.13rem 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.88rem;
}

.landing-identity {
  flex-shrink: 0;
}

.logomark {
  width: clamp(160px, 55%, 340px);
  height: auto;
  display: block;
  margin-bottom: 1.18rem;
  animation: landingFadeUp 0.65s ease-out 0.05s both;
}

.hero-eyebrow {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: hsl(36, 60%, 68%);
  margin: 0 0 0.63rem;
  animation: landingFadeUp 0.65s ease-out 0.2s both;
}

.hero-subhead {
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: hsl(40, 70%, 72%);
  margin: 0 0 0.39rem;
  animation: landingFadeUp 0.65s ease-out 0.35s both;
}

.hero-tagline {
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.88rem;
  color: hsl(40, 65%, 70%);
  margin: 0 0 0.31rem;
  animation: landingFadeUp 0.65s ease-out 0.5s both;
}

.hero-descriptor {
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.72rem;
  color: hsl(36, 55%, 66%);
  margin: 0;
  animation: landingFadeUp 0.65s ease-out 0.6s both;
}

/* Enter the Maze */
.enter-maze {
  flex-shrink: 0;
  animation: landingFadeUp 0.65s ease-out 0.7s both;
  /* The fadeUp animation uses transform; with `both` fill mode the final
     translateY(0) sticks and creates a permanent stacking context — which
     would trap the .search-results dropdown inside .enter-maze and let
     later siblings (.home-relics, .about-footer-row) paint over it. Lift
     the whole block above those siblings. */
  position: relative;
  z-index: 10;
}

.maze-col-label {
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 0.25rem;
  color: hsl(44, 68%, 72%);
  text-align: center;
}

/* SEARCH heading is left-aligned and indented to match the search input's
   internal text padding (0.7rem) — so "SEARCH" reads as continuation of
   the placeholder typing line. ENTER stays centered (the tile is
   symmetric — no "start edge" — so a centered eyebrow is the right fit). */
.search-col .maze-col-label {
  text-align: left;
  padding-left: 0.7rem;
}

/* Stretch matches both columns to the tile column's height; the search
   bar then vertically centers within its column. Form language (3-stop
   gradient + inset shadow) is borrowed from room headers / exit pills
   so the controls feel made-of-the-same-stuff as rooms — but in the
   neutral header palette since the landing must stay color-agnostic. */
.enter-search-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.maze-col   { flex: 0 0 auto; display: flex; flex-direction: column; }
.search-col { flex: 0 0 auto; display: flex; flex-direction: column; }

/* "or" connector between the two control columns. Padding-top equals the
   heading row's height, then justify-content centers the text in the
   remaining widget-area space — visual center matches the tile button
   and the auto-margin-centered search bar. */
.or-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0.55rem 0;
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: hsl(40, 65%, 70%);
  opacity: 0.55;
}
.or-text { text-align: center; line-height: 1; }

.maze-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: linear-gradient(180deg,
    var(--color-header-light),
    var(--color-header) 45%,
    var(--color-header-bdr) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18) inset;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.maze-btn:hover { filter: brightness(1.18); }

.maze-tile {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.35);
}

.search-unified-wrap {
  position: relative;
  /* auto top+bottom margins center the input in the column space below
     the heading; keeps the wrap sized to the input so the absolutely-
     positioned .search-results dropdown still anchors right under it. */
  margin-top: auto;
  margin-bottom: auto;
  /* No z-index needed here. The dropdown beats sibling .home-relics /
     .about-footer-row because the enclosing .enter-maze is lifted with
     z-index:10 — see the long comment there. */
}

.search-unified {
  width: 26ch;
  background: linear-gradient(180deg,
    var(--color-header-light),
    var(--color-header) 45%,
    var(--color-header-bdr) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18) inset;
  color: hsl(40, 65%, 75%);
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.82rem;
  padding: 0.63rem 0.7rem;
  outline: none;
  box-sizing: border-box;
}
.search-unified::placeholder { color: hsl(36, 35%, 46%); }
.search-unified:focus { border-color: rgba(255,255,255,0.22); }

/* Search result rows — styled like exit buttons */
.search-results .result-item--style {
  background: linear-gradient(180deg, var(--color-style-light), var(--color-style) 45%, var(--color-style-bdr) 100%);
  color: #07120a;
  border-left: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}
.search-results .result-item--artist {
  background: linear-gradient(180deg, var(--color-artist), var(--color-artist-bdr));
  color: #111;
  border-left: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.search-results .result-item--style:hover,
.search-results .result-item--artist:hover { filter: brightness(0.95); }

/* Relics (compact) */
.home-relics {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 0.79rem;
}
/* Inner wrapper: fixed width matching the relics-body box (9 thumbs).
   Negative margin-left extends the wrapper past the column's left edge,
   filling some of the gap between the content column and the hero art.
   Visual effect: relics section is its own distinct block, wider and
   leftward of the title/footer content, with its center pulled toward
   the visual center of the title text above. The shift is purely a
   margin offset (no column-level changes), so it stays robust across
   viewport widths — the auto-margin around .content-inner absorbs
   different viewport widths, and this negative margin reaches into
   that auto-space rather than fighting it. */
.home-relics-inner {
  width: calc(9 * 2.8rem + 8 * 0.3rem + 2 * 0.35rem + 2px);
  margin-left: var(--relics-shift, -5.5rem);
}
.home-relics--clickable { cursor: pointer; }

.relics-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.55rem;
}

.home-section-heading {
  font-family: var(--font-display), Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  font-weight: 700;
  color: hsl(44, 68%, 72%);
  margin: 0;
}

.relics-all-link {
  background: none;
  border: none;
  color: hsl(36, 55%, 60%);
  font-family: var(--font-display), Georgia, serif;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.relics-all-link:hover { opacity: 1; }

/* Relics leaf icon — left of "Relics"; mirrored variant on the right. */
.relics-icon {
  height: 1em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.4em;
  opacity: 1;
  filter: brightness(1.3);
}
.relics-icon--mirror {
  margin-right: 0;
  margin-left: 0.4em;
  transform: scaleX(-1);
}

/* Bottom ornament: two sets of three single-sprig laurel images flanking
   a centered rosette. border_laurel.png is a single 64×16 sprig — three
   instances per side gives the user's "set of three". Right side is
   X-flipped so sprigs lean inward toward the rosette. Heights match the
   heading leaves (1em ≈ 14px) per the spec — laurels and rosette small
   and restrained, reading as a heraldic device rather than a banner. */
.relics-bottom-ornament {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.relics-laurel-set {
  display: inline-flex;
  gap: 2px;
}
.relics-laurel-set img {
  height: 14px;
  width: auto;
  display: block;
  filter: brightness(1.3);
}
.relics-laurel-set--right img {
  transform: scaleX(-1);
}
.relics-rosette {
  height: 18px;
  width: auto;
  flex: 0 0 auto;
  filter: brightness(1.35);
}

/* Footer about link row */
.about-footer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.56rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.about-link {
  background: none;
  border: none;
  /* Match the about-pane trial register so the footer labels share the
     same voice as the panel they open. */
  font-family: 'Karla', 'Source Sans 3', system-ui, sans-serif;
  color: #e8e0cd;
  font-size: 0.8rem;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
}
.about-link:hover { opacity: 1; }

.about-sep {
  font-family: 'Karla', 'Source Sans 3', system-ui, sans-serif;
  color: #e8e0cd;
  opacity: 0.4;
  font-size: 0.8rem;
}

/* Slide-in about pane — right-edge viewport */
.about-pane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(540px, 100vw);
  background: #1a1a1a;
  padding: 3rem 2.25rem 2rem;
  overflow-y: auto;
  box-sizing: border-box;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 200;
  line-height: 1.55;
  /* Trial: pair Karla with Baskerville for body copy — humanist sans
     with more character than the prior Source Sans, easier on the eye
     than Baskerville for paragraph-length reading. A warm off-white
     replaces flat white so the copy carries a hint of the page's gold
     register without becoming tinted. Headings below already declare
     Baskerville explicitly and keep their gold color. */
  font-family: 'Karla', 'Source Sans 3', system-ui, sans-serif;
  color: #e8e0cd;
}
.about-pane.open { transform: translateX(0); }

.about-pane h3 {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.65rem;
  margin: 0 0 1.25rem;
  color: var(--color-artist-light, #f5d97a);
}
.about-pane h4 {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
}
.about-pane h5 {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  margin: 1.1rem 0 0.4rem;
  opacity: 0.85;
}
.about-pane p { margin: 0 0 0.9rem; }
.about-pane ul { margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
.about-pane li { margin-bottom: 0.35rem; }
.about-pane a { color: var(--color-artist-light, #f5d97a); }

.about-howto-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0.85rem 0;
}
.about-howto-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 0.1rem;
  filter: brightness(1.1);
}
.about-howto-text { flex: 1; }

/* Sample exit-button pills — match real room exit buttons exactly */
.about-example-pill {
  display: inline-block;
  padding: 0.1em 0.35em;
  margin: 0 0.1em;
  border-radius: 6px;
  font-size: 0.95em;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: 1px;
}
.about-example-pill--style {
  background: linear-gradient(180deg, var(--color-style-light), var(--color-style) 45%, var(--color-style-bdr) 100%);
  color: #07120a;
  border: 1px solid rgba(6, 48, 24, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) inset;
}
.about-example-pill--artist {
  background: linear-gradient(180deg, var(--color-artist), var(--color-artist-bdr));
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.about-pane-close {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.about-pane-close:hover { opacity: 1; }

.about-section { display: none; }
.about-section.active { display: block; }

.about-overlay {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.about-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile-only Relics button + name chip (see refactor notes near
   #artist-name-chip in index.html). Default hidden on desktop. */
.btn-mobile-relics { display: none; }
.meta-name-chip { display: none; }

/* Mobile header cleanup — at 375px the room title gets ellipsis-truncated
   ("Craig ...") and the random button icon overflows its container. The
   summary heading right below the header shows the full title, so the
   header h1 is redundant on mobile. Suppressing it frees horizontal space
   for the search input + buttons to breathe. */
@media (max-width: 768px) {
  #artist-room-header h1,
  #style-room-header h1 {
    display: none;
  }
  /* Show the Relics button next to the home button — direct nav to
     the user's saved collection without going through landing. */
  .btn-mobile-relics { display: inline-flex; }
  /* Flatten the header-left/center/right wrappers so all five header
     children (save, relics, home, search, random) participate as direct
     flex items in .room-header with one consistent gap, reorderable via
     `order`. Desired sequence: [save] [relics] [home] [search] [random]. */
  .room-header {
    gap: 0.5rem;
    padding: 0 0.5rem;
  }
  .room-header .header-left,
  .room-header .header-center,
  .room-header .header-right {
    display: contents;
  }
  .room-header .btn-save        { order: 1; }
  .room-header .btn-mobile-relics { order: 2; }
  .room-header .btn-home:not(.btn-mobile-relics) { order: 3; }
  .room-header .search          { order: 4; flex: 1 1 0; min-width: 0; }
  .room-header #btn-rand-style,
  .room-header #btn-rand-artist,
  .room-header #btn-rand-relics { order: 5; }
  /* The relics-page h1 ("Relics") and home button were defaulting to
     order:0 mixed with the random button (also default), so the random
     button ended up between the title and the home button. Pin each so
     the row reads: [title] [home] [search] [random]. */
  #relics-page-header #relics-title { order: 0; }
  #relics-page-header .btn-home { order: 3; }
  /* Search input fills the flex parent — drops the desktop
     min(26ch, 50vw) cap so it expands to consume the gap between
     the home/relics cluster and the random button. Height is 70%
     of the surrounding 40px buttons; .search wrapper aligns it
     vertically within the row. */
  .room-header .search { display: flex; align-items: center; height: 40px; }
  .room-header .search-input { width: 100%; height: 28px; }
  /* Uniform tap target across all header buttons — same 40x40 / 28x28
     icon size whether you're in a style room, an artist room, or the
     Relics page. Consistency wins over the earlier "smaller register
     on relics" idea. */
  .room-header .btn-save,
  .room-header .btn-home,
  .room-header #btn-rand-style,
  .room-header #btn-rand-artist,
  .room-header #btn-rand-relics {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .room-header .btn-save .icon-btn,
  .room-header .btn-home .icon-btn,
  .room-header #btn-rand-style .icon-btn,
  .room-header #btn-rand-artist .icon-btn,
  .room-header #btn-rand-relics .icon-btn {
    width: 28px;
    height: 28px;
  }
  /* Name chip at the front of the meta row. Same gold/green gradient
     as the desktop h1 (mirror via MutationObserver in app.js). Sits as
     a full-width-flush row above the score/reach/views stat boxes. */
  .meta-name-chip {
    display: block;
    flex-basis: 100%;
    width: 100%;
    margin: 0 0 0.35rem;
  }
  .meta-name-chip-title {
    margin: 0;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.05;
    padding: 0 0.1rem 0.15em;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .meta-name-chip-title--style {
    color: var(--color-style);
    background: linear-gradient(180deg, var(--color-style-light) 10%, var(--color-style) 60%, var(--color-style-bdr) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .meta-name-chip-title--artist {
    color: var(--color-artist);
    background: linear-gradient(180deg, var(--color-artist) 10%, var(--color-artist-light) 60%, var(--color-artist-bdr) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Random button: normalize so the 34px icon fits in a tap-target-sized
     container (44×44 per WCAG). Without this, the icon overflows a
     19px button at narrow-viewport sizing. */
  #btn-rand-style, #btn-rand-artist {
    width: 40px;
    height: 40px;
  }
  /* Both header buttons get the same icon size for visual uniformity. */
  #btn-rand-style .icon-btn,
  #btn-rand-artist .icon-btn,
  #btn-save-style .icon-btn,
  #btn-save-artist .icon-btn {
    width: 28px;
    height: 28px;
  }
  /* More gap between the search input and the random button. */
  .header-right { gap: 0.7rem; padding-right: 0.25rem; }
}

/* Mobile column toggle — replaces side-by-side layout with a tab switcher.
   At 375–768px there isn't room for both columns; the toggle gives each
   panel full viewport width while preserving the desktop layout above. */
.mobile-col-toggle { display: none; }
@media (max-width: 768px) {
  /* Segmented control: one continuous bar with two equal segments
     sharing borders. Strong active/inactive contrast — active uses the
     room accent color (gold/coral) on dark page bg; inactive stays dark
     but legible. Reads as 'pick one of two states' instead of the prior
     italic-pill 'decorative label' register. */
  .mobile-col-toggle {
    display: flex;
    gap: 0;
    padding: 0.35rem 0.5rem;
    background: var(--color-page);
    border-bottom: 1px solid rgba(255, 210, 122, 0.18);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .mobile-col-toggle-btn {
    flex: 1 1 0;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 210, 122, 0.35);
    color: rgba(255, 240, 220, 0.85);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: normal;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  }
  .mobile-col-toggle-btn:first-child {
    border-radius: 6px 0 0 6px;
    border-right-width: 0;
  }
  .mobile-col-toggle-btn:last-child {
    border-radius: 0 6px 6px 0;
  }
  /* Meta-chips relocated into a column on mobile — match column padding so
     they don't bump the edge, and add a thin separator below to detach them
     visually from the album/text below. */
  .room-col .artist-meta-grid,
  .room-col .meta-chips-row {
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 210, 122, 0.12);
  }
  /* Hide the artist-type display chip when its only content is the bare
     word "Group" — no information beyond what the rest of the room
     already conveys. Other notes (e.g. real name) and richer types stay
     visible. JS stamps `data-value` with the lowercased text. */
  #artist-type-display[data-value="group"] {
    display: none !important;
  }
  /* Dissolve .meta-col grouping on mobile. The .meta-col wrappers exist
     for desktop visual pairs (When/Where, Born/Died, Occupations/Aliases)
     — at narrow widths they only cost rows: a meta-col with a hidden
     child (e.g. Died when not deceased) still claims a whole line for its
     single visible meta-row. display:contents makes the wrapper layout-
     invisible so the meta-rows become direct flex children of
     .artist-meta-grid and pack/wrap by their own widths. */
  .artist-meta-grid > .meta-col {
    display: contents;
  }
  /* Where / Born / Death chips can hold long location strings ("New York,
     New York, USA; Detroit, Michigan, USA; ..."). On mobile, let the row
     stay within the column and wrap content rather than overflow off the
     right edge. The chip is the inner element actually carrying the
     unbreakable text. */
  .meta-chips-row .meta-row,
  .artist-meta-grid .meta-row {
    max-width: 100%;
    min-width: 0;
  }
  .meta-row .meta-content {
    min-width: 0;
    flex-wrap: wrap;
  }
  .meta-row .meta-chip,
  .artist-meta-grid .meta-content > .meta-chip {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  /* Active segment: muted darker accent (--color-*-bdr, the same
     darker tonal sibling used for borders elsewhere) rather than the
     bright --color-* saturated fill. This keeps the toggle clearly
     selected without competing with the search bar's bright gold
     gradient above. Inset shadow adds tactile depth so the dimming
     reads as "weighty" rather than "washed out". */
  .mobile-col-toggle[data-room="artist"] .mobile-col-toggle-btn.is-active {
    background: var(--color-artist-bdr);
    border-color: var(--color-artist-bdr);
    color: #15110a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
  }
  .mobile-col-toggle[data-room="style"] .mobile-col-toggle-btn.is-active {
    background: var(--color-style-bdr);
    border-color: var(--color-style-bdr);
    color: #150a08;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 -1px 1px rgba(255, 255, 255, 0.08);
  }
  /* Move the warm room-color bg off .room-col--main onto the bio text
     card. The meta-chips relocate between the main and side columns on
     tab switch (see relocateMetaChips in app.js) — when the column
     itself carries the warm color, chips read as "on warm" in Overview
     vs "on dark" in Connections (because the side col fills with panels
     that have their own bgs, leaving little naked column visible).
     Putting the warm color on the bio container alone keeps the chips
     on a consistent page-black bg between tabs, and gives the bio its
     own "content card" identity. The override needs the same
     #*-room-container .room-col--main selector specificity (1,1,1) to
     beat the desktop rule. */
  .room-col {
    background: transparent;
    border: none;
  }
  #artist-room-container .room-col--main,
  #style-room-container .room-col--main {
    background: transparent;
  }
  #artist-room-container .room-col--main #artist-summary {
    background: var(--color-room-artist);
    border: 1.5px solid var(--color-border-main);
    border-radius: var(--radius-main);
    padding: 0.5rem;
  }
  #style-room-container .room-col--main #style-summary {
    background: var(--color-room-style);
    border: 1.5px solid var(--color-border-main);
    border-radius: var(--radius-main);
    padding: 0.5rem;
  }
  /* Hide the inactive column on mobile based on .show-main / .show-side */
  .room-grid.show-main .room-col--side { display: none; }
  .room-grid.show-main .border-strip--scroll { display: none; }
  .room-grid.show-side .room-col--main { display: none; }
  .room-grid.show-side .border-strip--scroll { display: none; }
  .room-grid .room-col { flex: 1 1 100% !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art {
    position: static;
    /* Cap height so the hero art doesn't eat the whole viewport — without
       this, the natural-aspect portrait image pushes the wordmark, tagline,
       and Enter button entirely below the fold on iPhone-class screens. */
    height: auto;
    max-height: 38vh;
    overflow: hidden;
  }
  .landing-art {
    height: auto;
    max-height: 38vh;
    object-fit: contain;
    object-position: center;
  }
  .landing-art--desktop { display: none; }
  .landing-art--mobile  { display: block; }
  .landing-content { padding: 1.5rem; }
  .content-inner { padding: 1rem 0; }
  .logomark { width: clamp(160px, 70%, 280px); }
  /* The relics block uses a desktop-only fixed width (calc'd to fit
     9 thumbs) and a -5.5rem negative margin-left to spill past the
     500px content column into the empty gap beside the hero art.
     On mobile there's no gap to spill into — collapse to the content
     column. Same goes for the search input's 26ch fixed width; let
     it fill the search column. */
  .home-relics-inner {
    width: 100%;
    margin-left: 0;
  }
  .search-col {
    flex: 1 1 0;
    min-width: 0;
  }
  .search-unified {
    width: 100%;
    box-sizing: border-box;
  }
}

.relics-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.3rem;
  background: var(--color-header);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 0.4rem 0.35rem;
  min-height: 3.8rem;
  /* Fills the .home-relics-inner wrapper (which sets the fixed width). */
  width: 100%;
  box-sizing: border-box;
  /* Cap at 3 thumb rows so the section doesn't push the footer accordion
     links offscreen on typical viewports. ~9.9rem covers 3 thumb rows
     + gaps + padding. Beyond 3 rows the section scrolls. */
  max-height: 9.9rem;
  overflow-y: auto;
  cursor: pointer;
}

.relics-body:empty {
  cursor: default;
}
.relics-body:empty::after {
  content: 'Nothing collected yet. Rooms you mark will appear here.';
  font-family: var(--font-sans), sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  font-style: italic;
  color: hsl(36, 38%, 50%);
  padding: 0 0.6rem;
}

.relic-thumb {
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 3px;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-header);
  position: relative;
  transition: transform 0.1s ease, filter 0.1s ease;
}
.relic-thumb:hover {
  transform: scale(1.06);
  filter: brightness(1.15);
  z-index: 1;
}
.relic-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.relic-thumb-img.hidden + .relic-thumb-placeholder,
.relic-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.relic-thumb-img:not(.hidden) + .relic-thumb-placeholder {
  display: none;
}
.relic-thumb--style .relic-thumb-placeholder {
  background: var(--color-style-chip);
  color: var(--color-style-light);
}
.relic-thumb--artist .relic-thumb-placeholder {
  background: var(--color-artist-chip);
  color: var(--color-artist-light);
}
/* At thumb scale (~45px), the recess + motif nesting needs less inset
   so the motif stays visible. Tighter recess + larger motif than the
   card-scale defaults. */
.relic-thumb-placeholder .placeholder-recess {
  width: 88%;
  height: 88%;
  border-radius: 2px;
}
.relic-thumb-placeholder .placeholder-motif {
  width: 72%;
  height: 72%;
}
.relic-thumb-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.relic-thumb-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Border strips */
.border-strip--scroll {
  width: 18px;
  flex-shrink: 0;
  align-self: stretch;
  background-image: url('assets/images/border_scroll.png');
  background-repeat: repeat-y;
  background-size: 70% auto;
  background-position: center top;
  opacity: 0.85;
}

.border-strip--laurel {
  height: 18px;
  width: 100%;
  flex-shrink: 0;
  background-image: url('assets/images/border_laurel.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  opacity: 0.85;
  margin: 0.25rem 0;
}

/* Heraldic divider for inter-section separators in room side panels.
   Same vocabulary as the Relics bottom-ornament on landing — laurel sprigs
   flanking a centered rosette — but lighter (2 sprigs/side instead of 3)
   to read as section punctuation rather than an end-of-section closer. */
.section-ornament {
  margin: 0.15rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.section-ornament-set {
  display: inline-flex;
  gap: 2px;
}
.section-ornament-set img {
  height: 12px;
  width: auto;
  display: block;
  filter: brightness(1.3);
}
.section-ornament-set--right img {
  transform: scaleX(-1);
}
.section-ornament-rosette {
  height: 16px;
  width: auto;
  flex: 0 0 auto;
  filter: brightness(1.35);
}

/* Discography cartouche — oval pill above album art */
.discography-cartouche-wrap {
  text-align: center;
  padding: 0.6rem 0 0.5rem;
}
.discography-cartouche {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 30%, transparent 100%);
  border-radius: 9999px;
  padding: 0.32rem 1.2rem;
}
.cartouche-laurel {
  height: 15px;
  width: auto;
  opacity: 0.85;
  flex-shrink: 0;
}
.cartouche-laurel--right { transform: scaleX(-1); }
.cartouche-title {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.78rem;
  color: var(--color-artist);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ===== Relics Page ===== */
#collection-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  overflow: hidden;
  transition: opacity 0.2s ease-in-out;
  /* Hidden by default until JS adds .full */
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}
#collection-container.full {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
#collection-container.hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
}

/* Page header — three-zone layout matching room headers, with the lyre
   home button centered + flanking laurels, gold-tinted title and gold
   '+ New thread' action. Visual unity with style/artist room headers. */
#relics-page-header {
  background: var(--color-page);
}
#relics-page-header h1 {
  color: var(--color-artist);
  background: linear-gradient(180deg, var(--color-artist) 10%, var(--color-artist-light) 60%, var(--color-artist-bdr) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.32), 0 6px 14px rgba(255,210,122,0.08);
}

#threads-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.2rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
}

/* ===== Thread strip ===== */
.thread-strip {
  padding: 0.35rem 0 0.3rem;
}
/* The Skein gets a slightly lighter, recessed background tint so it
   reads as the unsung default — distinct from named golden threads
   (which sit on the bare page) without being a loud separator. Subtle
   warm gold tint connects it to the page palette. */
.thread-strip--skein {
  background: rgba(255, 210, 122, 0.06);
  border: 1px solid rgba(255, 210, 122, 0.12);
  border-radius: var(--radius-main);
  padding: 0.5rem 0.7rem 0.6rem;
  margin-bottom: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Three-zone layout mirroring the page header: title zone (flex-1, left-
   aligned), ornament zone (fixed-width center), controls zone (flex-1,
   right-aligned). Equal flex on the outer zones means the ornament
   center always lands at page-center — under the lyre home button. */
.thread-strip-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.2rem 0.4rem;
}
.thread-strip-header--skein {
  /* Skein layout: three flex zones. Outer zones flex 1 1 0, equal width,
     containing the action buttons; title is flex 0 0 auto, centered
     between them so it lands at viewport-center under the lyre home
     button. No ornament — Skein is the unsung default. */
  gap: 0.6rem;
}
.thread-strip-header--skein .thread-strip-zone {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.thread-strip-header--skein .thread-strip-zone--left {
  justify-content: flex-start;
}
.thread-strip-header--skein .thread-strip-zone--right {
  justify-content: flex-end;
}
.thread-strip-header--skein .thread-strip-name {
  flex: 0 0 auto;
}
.btn-clear-skein {
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}
.thread-strip-header--named .thread-strip-name {
  flex: 1 1 0;
  text-align: left;
}
.thread-strip-header--named .thread-strip-actions {
  flex: 1 1 0;
  justify-content: flex-end;
}
.thread-strip-name {
  margin: 0;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-artist);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Named-thread titles host the inline rename lyre to the left of the
   text — switch to flex so the two align on the baseline-ish center. */
.thread-strip-name--with-rename {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.thread-strip--skein .thread-strip-name {
  /* The Skein reads as a slightly cooler / more reserved register —
     it's the unsung default, not a curated gold thread. */
  color: var(--color-artist-light);
  opacity: 0.85;
  font-weight: 500;
}
.thread-strip-actions {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
  align-items: center;
}

/* Heraldic ornament filling the middle of named-thread headers, between
   the title (left) and the controls (right). Pattern, L→R:
     ~~ * ~~ * ~~ * ~~
   = 4 laurel pairs alternating with 3 rosettes. Both left pairs lean
   rightward (natural asset orientation); both right pairs lean leftward
   (X-flipped). Symmetric across the center rosette.

   Ornament has flex 0 0 auto so it stays a fixed centered block; the
   left-aligned title and right-aligned controls flank it via flex-1
   zones. Ornament center thus aligns with page horizontal center. */
.thread-strip-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}

/* Per-thread color cycling: dusty green → red-gold → faded blue,
   repeating with thread creation order. Applies ONLY to the ornament
   in the strip header — action buttons (rename, delete, share) keep
   their own color register so they remain consistent across threads. */
.thread-strip-ornament img {
  /* Slight base opacity so all colors blend toward the bg, dampening
     the per-thread tint without losing the signal. */
  opacity: 0.85;
}
.thread-strip--color-1 .thread-strip-ornament img {
  /* dusty green */
  filter: hue-rotate(105deg) saturate(0.5) brightness(1.25);
}
.thread-strip--color-2 .thread-strip-ornament img {
  /* red-gold (asset's natural amber, slight lift) */
  filter: brightness(1.3);
}
.thread-strip--color-0 .thread-strip-ornament img {
  /* faded blue */
  filter: hue-rotate(205deg) saturate(0.45) brightness(1.1);
}
/* Color cycle starts at color-1 (green) for the first thread because
   the assignment uses (idx + 1) % 3, putting color-1 at idx 0,
   color-2 at idx 1, color-0 at idx 2, and so on. Why offset? Red-gold
   matches the surrounding palette and risks the first-and-most-prominent
   thread reading as undifferentiated; starting on green creates clearer
   contrast against the page header's gold. */
.thread-strip-ornament-laurels {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 1 auto;
  min-width: 0;
}
.thread-strip-ornament-laurels img {
  height: 12px;
  width: auto;
  display: block;
  filter: brightness(1.3);
}
/* The two laurel sets sandwich the center rosette: the LEFT set's laurels
   lean rightward toward center (which is the asset's natural orientation),
   the RIGHT set's laurels lean leftward toward center (X-flipped). */
.thread-strip-ornament-laurels--right img {
  transform: scaleX(-1);
}
.thread-strip-ornament-rosette {
  height: 16px;
  width: auto;
  flex: 0 0 auto;
  filter: brightness(1.35);
}

.btn-icon-only {
  padding: 0.2rem 0.45rem;
  font-size: 0.95rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-artist-light);
  opacity: 0.7;
  cursor: pointer;
  border-radius: 4px;
}
.btn-icon-only:hover {
  opacity: 1;
  background: rgba(255,210,122,0.08);
  border-color: rgba(255,210,122,0.25);
}

/* Stamp-icon buttons for thread header actions (delete, share). Rename
   is no longer in this group — it lives next to the thread name as an
   inline lyre stamp (see .btn-thread-rename below). */
.btn-stamp-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, filter 0.15s, transform 0.1s;
}
.btn-stamp-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: brightness(1.15);
}
.btn-stamp-icon-img--mirror { transform: scaleX(-1); }
/* Mini stamp variant — used by the per-list local-random buttons that sit
   inline with section headings. ~70% the size of the global random button
   to read as 'same vocabulary, narrower scope'. The reddish maze tile would
   wash out against the warm room backgrounds (style room dark-red; artist
   room warm gold) — so wrap it in a near-black cartouche with a thin gold
   edge to preserve contrast and echo the 'sealed stamp' visual idiom. */
.btn-stamp-icon--mini {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  /* Solid black + opacity:1 — both matter. The .btn-stamp-icon base
     class sets opacity:0.85 (and the wrapper used to override to 0.95
     here), and that wrapper-level transparency let the warm room bg
     bleed through everything. The :hover then promoted opacity to 1
     and the button snapped to black — producing a hover-only color
     shift the user can see across navigations (cursor stays on the
     button only when actively hovering). Keep opacity:1 in both
     states; rely on the gold border alpha for visual softness instead. */
  background-color: #000;
  border: 1px solid rgba(255, 210, 122, 0.32);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
  opacity: 1;
}
.btn-stamp-icon--mini .btn-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  filter: brightness(1.25);
}
/* High-specificity guard against the generic .btn-stamp-icon:hover rule
   (later in this file) which sets a warm-gold translucent bg — that
   rule wins over a same-specificity .btn-stamp-icon--mini:hover via
   source order, and the warm gold over warm room bg renders brown.
   Doubling the class gives (0,2,1) > (0,1,1). */
.btn-stamp-icon.btn-stamp-icon--mini:hover {
  background-color: #000;
  border-color: rgba(255, 210, 122, 0.6);
  opacity: 1;
}
.btn-stamp-icon--mini:hover .btn-icon {
  filter: brightness(1.6);
}
/* Ring stamp — bumped up 30% to visually match the maze tile (which
   appears larger when rotated 45° due to its diagonal bounding box).
   Slight 30° rotation gives it personality and breaks rank with a
   pure circle. */
.btn-stamp-icon-img--ring {
  width: 26px;
  height: 26px;
  transform: rotate(30deg);
}

.btn-stamp-icon:hover {
  opacity: 1;
  background-color: rgba(255, 210, 122, 0.08);
  border-color: rgba(255, 210, 122, 0.25);
  transform: scale(1.04);
}
.btn-stamp-icon:hover .btn-stamp-icon-img {
  filter: brightness(1.5);
}
.btn-stamp-icon--delete:hover {
  background-color: rgba(255, 80, 80, 0.1);
  border-color: rgba(255, 100, 100, 0.4);
}
.btn-stamp-icon--delete:hover .btn-stamp-icon-img {
  filter: brightness(1.5) hue-rotate(-15deg) saturate(1.5);
}

/* Always-red leaf — used by Clear the Skein (always destructive, no
   neutral state). Same red tone as the on-hover state of the thread
   delete button. */
.btn-stamp-icon-img--red {
  filter: hue-rotate(-15deg) saturate(1.5) brightness(1.2);
}

/* Share button — full horizontal meander at half size. Asset's native
   4:1 aspect ratio preserved so the whole pattern fits without crop. */
.btn-stamp-icon--share {
  width: 48px;
  height: 12px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.btn-stamp-icon-img--meander-h {
  position: absolute;
  /* Pre-rotation: 12 wide × 48 tall (1:4 aspect). After rotate(90deg):
     displays as 48 wide × 12 tall — fits the button, whole pattern
     visible. */
  width: 12px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  filter: brightness(1.2);
}
.btn-stamp-icon--share:hover .btn-stamp-icon-img--meander-h {
  filter: brightness(1.5);
}
.btn-stamp-icon--clear-skein:hover {
  background-color: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 100, 100, 0.45);
}
.btn-stamp-icon--clear-skein:hover .btn-stamp-icon-img--red {
  filter: hue-rotate(-15deg) saturate(1.7) brightness(1.4);
}
.btn-share {
  padding: 0.2rem 0.7rem;
  font-style: italic;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.85rem;
  color: var(--color-artist);
  background: rgba(255,210,122,0.08);
  border: 1px solid rgba(255,210,122,0.3);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.85;
}
.btn-share:hover {
  opacity: 1;
  background: rgba(255,210,122,0.15);
}

/* + New thread — themed stamp button using the lyre asset with a green
   filter to differentiate it from the home-button lyre. The "+" sits
   superscripted at the top-right of the lyre, like an annotation on a
   stamp. Hover lifts brightness; no boxy button chrome. */
.btn-stamp {
  position: relative;
  background: transparent;
  border: none;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: filter 0.15s, transform 0.1s;
}
.btn-stamp:hover { filter: brightness(1.15); transform: scale(1.04); }
.btn-stamp:active { transform: scale(0.96); }
.btn-stamp-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.btn-stamp-plus {
  position: absolute;
  top: -3px;
  right: -3px;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-artist-light);
  text-shadow: 0 0 4px rgba(0,0,0,0.9);
}
.btn-new-thread-img {
  /* Bright orange-yellow — a vivid signal stamp at the start of the
     header, distinct from the red-amber home-button lyre at center. */
  filter: hue-rotate(20deg) saturate(1.35) brightness(1.6);
}

/* Inline rename lyre — sits just left of a named-thread title. Same
   bright lyre stamp as the Skein's new-thread button, sans plus, 20%
   smaller (24px vs 30px) so it reads as a per-thread mark rather than
   a header-scale action. */
.btn-thread-rename {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  transition: filter 0.15s, transform 0.1s;
}
.btn-thread-rename:hover { transform: scale(1.06); }
.btn-thread-rename:active { transform: scale(0.96); }
.btn-thread-rename-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: hue-rotate(20deg) saturate(1.35) brightness(1.6);
}
.btn-thread-rename:hover .btn-thread-rename-img {
  filter: hue-rotate(20deg) saturate(1.35) brightness(1.85);
}

.thread-strip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  /* "Default 10 wide" via auto-fill min 120px → ≥10 cards on a typical
     viewport. Narrower viewports wrap fewer; wider viewports may show
     more. The grid wraps to additional rows naturally. */
  gap: 0.7rem;
  min-height: 0;
}
/* Skein-only override: cards center as a block rather than stretching
   to fill the row. The equal left/right breathing room reads at a
   glance as "this is the catalog, not a curated thread". Capping the
   track max (140px) prevents the 1fr stretch that would otherwise leave
   justify-content with no leftover space to center. */
.thread-strip--skein .thread-strip-cards {
  grid-template-columns: repeat(auto-fit, minmax(120px, 140px));
  justify-content: center;
}

.thread-strip-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8rem 0.4rem;
  font-style: italic;
  opacity: 0.55;
  font-size: 0.92rem;
}
/* In the Skein, the empty-state line sits under the centered title
   rather than hugging the left edge — matches the "this is the
   catalog, not a curated thread" register of the centered cards. */
.thread-strip--skein .thread-strip-empty {
  text-align: center;
}

/* (Between-strip dividers retired — the per-thread header ornament
   replaces them.) */

/* Drag-and-drop visual feedback */
.collection-card.dragging {
  opacity: 0.4;
}
.thread-strip.drop-target-active {
  background: rgba(255,210,122,0.06);
  border-radius: var(--radius-main);
  outline: 2px dashed rgba(255,210,122,0.4);
  outline-offset: 2px;
}
.collection-card.drop-before {
  box-shadow: -3px 0 0 0 var(--color-artist);
}
.collection-card.drop-after {
  box-shadow: 3px 0 0 0 var(--color-artist);
}

/* ===== Save Button ===== */
.btn-save {
  padding: 0 0.3em;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
  flex-shrink: 0;
  height: calc(var(--fs-h1) * 0.8);
  width: calc(var(--fs-h1) * 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-save:hover {
  background: transparent;
  border: none;
}

/* ===== Relic Cards ===== */
.collection-card {
  position: relative;
  border: 1.5px solid var(--color-border-main);
  border-radius: var(--radius-main);
  padding: 0.4rem;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, filter 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  outline: none;
}
.collection-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  filter: brightness(1.08);
}
.collection-card:focus-visible {
  border-color: var(--color-artist);
  box-shadow: 0 0 0 2px rgba(255,210,122,0.3);
}
/* Type-tinted borders give a subtle signal without needing per-type sections. */
.collection-card--style {
  border-color: color-mix(in srgb, var(--color-style-bdr) 50%, var(--color-border-main));
}
.collection-card--artist {
  border-color: color-mix(in srgb, var(--color-artist-bdr) 50%, var(--color-border-main));
}

.collection-card-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(0,0,0,0.4);
}
.collection-card-grid {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  border-radius: 4px;
  overflow: hidden;
}
.collection-card-grid-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(0,0,0,0.4);
}

/* Placeholder cards: deterministic motif + tone variants per QID.
   Inset recess gives the motif a darker background so it stands out from
   the card body, addressing the "lyre on identical brown" monoculture. */
.collection-card-cover-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
}
.placeholder-recess {
  width: 78%;
  height: 78%;
  border-radius: 4px;
  background: rgba(0,0,0,0.6);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.5),
              inset 0 -1px 0 rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-motif {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

/* Type-color tinting via filter — one base asset, hue-rotated per type +
   brightness-stepped per tone. The base asset is amber/red (the Hadean
   palette); we shift it to gold for artists or green for styles. */
.placeholder--style .placeholder-motif {
  filter: hue-rotate(120deg) saturate(0.85) brightness(1.4);
}
.placeholder--artist .placeholder-motif {
  filter: hue-rotate(35deg) saturate(0.95) brightness(1.45);
}
/* Tone variants — slight brightness/saturation shifts on top of the type filter. */
.placeholder--tone-t1 .placeholder-motif { filter: hue-rotate(120deg) saturate(0.7)  brightness(1.25); }
.placeholder--style.placeholder--tone-t2 .placeholder-motif { filter: hue-rotate(105deg) saturate(0.95) brightness(1.5); }
.placeholder--style.placeholder--tone-t3 .placeholder-motif { filter: hue-rotate(135deg) saturate(0.8)  brightness(1.35); }
.placeholder--artist.placeholder--tone-t1 .placeholder-motif { filter: hue-rotate(20deg)  saturate(0.85) brightness(1.35); }
.placeholder--artist.placeholder--tone-t2 .placeholder-motif { filter: hue-rotate(35deg)  saturate(1.0)  brightness(1.55); }
.placeholder--artist.placeholder--tone-t3 .placeholder-motif { filter: hue-rotate(50deg)  saturate(0.95) brightness(1.4);  }

.collection-card-title {
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 0.2em;
  line-height: 1.25;
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--color-artist);
}

.collection-card-remove,
.collection-card-menu {
  position: absolute;
  top: 3px;
  background: rgba(0,0,0,0.6);
  border: none;
  color: rgba(255,255,255,0.85);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition: opacity 0.15s, background 0.15s;
}
.collection-card-remove { right: 3px; }
/* The ⋯ menu is the keyboard / accessibility fallback — drag-and-drop is
   the visible mechanism. Hidden by default; revealed only on hover or
   keyboard focus so it doesn't add visual noise. The card-glyph wrapper
   styles the dots in Libre Baskerville italic so they read as
   typography-of-the-page rather than OS-default. */
.collection-card-menu { right: 27px; }
.card-glyph {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 0.95em;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--color-artist-light);
  display: block;
  /* Optical centering — middots sit lower in the glyph box than the
     button's geometric center, so nudge upward slightly. */
  transform: translateY(-1px);
}
/* Remove-button stamp. Skein cards use the rosette (mirrors the room
   save-toggle: a rosette you click to un-save); thread cards use the
   leaf tinted green (semi-constructive return to the Skein). */
.card-remove-stamp {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}
.card-remove-stamp--rosette {
  /* rosette is already a warm gold; no tint needed. */
}
.card-remove-stamp--green {
  filter: hue-rotate(115deg) saturate(0.95) brightness(1.4);
}
.collection-card:hover .collection-card-remove,
.collection-card:focus-visible .collection-card-remove,
.collection-card:hover .collection-card-menu,
.collection-card:focus-visible .collection-card-menu {
  opacity: 1;
}
.collection-card-remove:hover {
  background: rgba(0,0,0,0.8);
}
.collection-card-remove:hover .card-remove-stamp--rosette {
  filter: brightness(1.2);
}
.collection-card-remove:hover .card-remove-stamp--green {
  filter: hue-rotate(115deg) saturate(1.1) brightness(1.6);
}
.collection-card-menu:hover {
  background: rgba(255,210,122,0.4);
}
.collection-card-menu:hover .card-glyph {
  color: #fff;
}

/* Add-to-thread popover */
.add-to-thread-menu {
  position: absolute;
  z-index: 1000;
  min-width: 200px;
  max-width: 300px;
  background: var(--color-bg-col);
  border: 1px solid var(--color-border-main);
  border-radius: var(--radius-main);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  padding: 0.4rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.9rem;
}
.add-to-thread-menu-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  padding: 0.2rem 0.4rem 0.4rem;
  font-style: italic;
}
.add-to-thread-menu-empty {
  padding: 0.4rem;
  opacity: 0.6;
  font-style: italic;
}
.add-to-thread-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-to-thread-menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.add-to-thread-menu-item.is-member {
  opacity: 0.8;
}
.add-to-thread-menu-item .atm-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-to-thread-menu-item .atm-check {
  flex: 0 0 auto;
  opacity: 0.7;
  font-size: 0.85em;
}
.add-to-thread-menu-sep {
  border-top: 1px solid var(--color-border-toolbar);
  margin: 0.3rem 0;
}
.add-to-thread-menu-new {
  font-style: italic;
  opacity: 0.85;
}

/* Share popover */
.share-popover {
  position: absolute;
  z-index: 1000;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: var(--color-bg-col);
  border: 1px solid var(--color-border-main);
  border-radius: var(--radius-main);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  padding: 0.8rem;
  font-family: 'Libre Baskerville', Georgia, serif;
}
.share-popover-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  font-style: italic;
  margin-bottom: 0.5rem;
}
.share-popover-url {
  width: 100%;
  padding: 0.4rem 0.55rem;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--color-border-toolbar);
  border-radius: 4px;
  color: var(--color-text-main);
  box-sizing: border-box;
}
.share-popover-url:focus { outline: 2px solid var(--color-border-main); }
.share-popover-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.share-popover-copy,
.share-popover-open {
  flex: 0 0 auto;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
}
.share-popover-blurb {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  font-style: italic;
  opacity: 0.65;
  line-height: 1.4;
}

/* Loaded thread (view-only from URL) */
#loaded-thread-banner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  gap: 0.8rem;
  overflow-y: auto;
}
.loaded-thread-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-style: italic;
  opacity: 0.6;
}
.loaded-thread-name {
  margin: 0;
  font-size: 1.6rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--color-text-main);
}
.loaded-thread-actions {
  display: flex;
  gap: 0.5rem;
  margin: 0.3rem 0 1rem;
}
.loaded-thread-cards {
  /* Match .thread-strip-cards so shared-thread cards look identical to
     the receiving user's own Relics layout. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.7rem;
}
.collection-card--loaded {
  /* read-only — no menu/remove buttons */
  cursor: pointer;
}
.collection-card-title--unknown {
  font-style: italic;
  opacity: 0.65;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.8em;
}
.loaded-thread-empty {
  opacity: 0.65;
  text-align: center;
  padding: 2rem 0;
}
.btn-collection-clear {
  margin-left: auto;
  font-size: 0.85em;
  padding: 0.3em 0.8em;
  background: rgba(255,60,60,0.15);
  border-color: rgba(255,60,60,0.3);
  color: #ff9999;
}
.btn-collection-clear:hover {
  background: rgba(255,60,60,0.3);
  color: #fff;
}


#artist-sparkline,
#style-sparkline {
  display: block;
}

/* ===== Themed modal dialogs ===== */
/* Replaces native window.confirm/prompt/alert for the Relics page (and
   anywhere else they're used). Hadean palette, Baskerville italic, gold
   trim — sits in the same visual register as everything else. */

.themed-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Soft fade-in. */
  animation: themed-dialog-fade 0.14s ease-out;
}
.themed-dialog-overlay[hidden] {
  display: none !important;
}
@keyframes themed-dialog-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.themed-dialog {
  background: var(--color-page);
  border: 1.5px solid rgba(255, 210, 122, 0.45);
  border-radius: 6px;
  padding: 1.4rem 1.5rem 1.2rem;
  max-width: 460px;
  width: 100%;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  font-family: 'Libre Baskerville', Georgia, serif;
  color: rgba(255, 240, 220, 0.92);
}

.themed-dialog-message {
  margin: 0 0 1.1rem;
  font-size: 0.98rem;
  line-height: 1.55;
  font-style: italic;
  color: rgba(255, 240, 220, 0.92);
  white-space: pre-wrap;
}

.themed-dialog-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  margin-bottom: 1.2rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 0.95rem;
  background: rgba(255, 240, 220, 0.06);
  color: var(--color-artist);
  border: 1px solid rgba(255, 210, 122, 0.35);
  border-radius: 3px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.themed-dialog-input:focus {
  border-color: var(--color-artist);
  background: rgba(255, 240, 220, 0.10);
}

.themed-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.themed-dialog-btn {
  padding: 0.42rem 1.15rem;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  border-radius: 3px;
  cursor: pointer;
  background: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.themed-dialog-btn--cancel {
  border: 1px solid rgba(255, 240, 220, 0.22);
  color: rgba(255, 240, 220, 0.62);
}
.themed-dialog-btn--cancel:hover {
  border-color: rgba(255, 240, 220, 0.45);
  color: rgba(255, 240, 220, 0.9);
}
.themed-dialog-btn--ok {
  border: 1px solid rgba(255, 210, 122, 0.45);
  color: var(--color-artist);
  background: rgba(255, 210, 122, 0.08);
}
.themed-dialog-btn--ok:hover {
  background: rgba(255, 210, 122, 0.20);
  border-color: rgba(255, 210, 122, 0.7);
}
.themed-dialog-btn--destructive {
  border-color: rgba(220, 100, 80, 0.55);
  color: hsl(15, 75%, 70%);
  background: rgba(220, 100, 80, 0.10);
}
.themed-dialog-btn--destructive:hover {
  background: rgba(220, 100, 80, 0.22);
  border-color: rgba(220, 100, 80, 0.8);
  color: hsl(15, 80%, 80%);
}