/* Dark-only Homepage paper theme, from infra/modules/link/homepage-theme.css.
   Community accents are the blog's static/giallo-dark.css Gruvbox palette.
   Fonts are named rather than fetched, as on Homepage. Graph colors also read
   these properties: keep chrome, cover frames, dots and the legend in sync. */
:root {
  color-scheme: dark;
  --paper: #1c1915;
  --paper-shade: #242019;
  --ink: #e8e2d8;
  --muted: #9e9486;
  --accent: #ff9e42;
  --accent-hover: #ffb366;
  --selection-bg: #5a2e0f;
  --border: #3b342c;
  --shadow: rgba(0, 0, 0, 0.2);
  --glow: rgba(255, 255, 255, 0.04);
  --font-serif: "Sabon Next", Georgia, "Times New Roman", serif;
  --font-display: "Cooper Black", "Cooper", Georgia, serif;
  --font-mono: "PragmataPro Mono Liga", "PragmataPro Mono", ui-monospace,
    SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --community-orange: #fe8019;
  --community-blue: #83a598;
  --community-purple: #d3869b;
  --community-green: #b8bb26;
  --community-red: #fb4934;
  --community-aqua: #8ec07c;
  --community-yellow: #fabd2f;
  --panel: var(--paper-shade);
  --line: var(--border);
  --control-border: var(--muted);
  --error: var(--community-red);
  --point-default: var(--community-orange);
  --point-selected: var(--ink);
  --edge-base: var(--muted);
  --edge-bridge: var(--community-aqua);
  --edge-focus: var(--accent);
  --edge-secondary: var(--muted);
  --radius: 4px;
  --card-shadow: inset 0 0 0 1px var(--paper), 0 2px 6px var(--shadow);
  --hover-shadow: inset 0 0 0 1px var(--paper), 0 3px 10px var(--shadow);
  --backdrop: rgba(0, 0, 0, 0.5);
  font: 14px/1.5 var(--font-serif);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--glow), transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% 100%, var(--shadow), transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select, summary, input[type=range], input[type=checkbox] { cursor: pointer; }
button { border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--panel); color: var(--ink); padding: 10px 14px; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; }
button:hover { background: var(--selection-bg); border-color: var(--accent); color: var(--accent-hover); box-shadow: var(--hover-shadow); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.topbar { position: absolute; top: 20px; left: 316px; right: 24px; display: flex; align-items: center; gap: 10px; z-index: 5; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.search-wrap { position: relative; width: min(380px, 100%); }
.search-label { position: absolute; left: 14px; top: 12px; color: var(--muted); line-height: 0; }
input[type=search] { width: 100%; height: 44px; padding: 10px 14px 10px 44px; border: 1px solid var(--control-border); background: var(--panel); border-radius: var(--radius); color: var(--ink); font-size: 13px; }
input::placeholder { color: var(--muted); }
#settings-toggle { display: none; align-items: center; gap: 7px; }
.workspace { display: flex; flex: 1; min-height: 0; position: relative; }
aside { width: 292px; flex-shrink: 0; padding: 30px 24px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--panel); border-right: 1px solid var(--line); z-index: 3; }
h1 { font-family: var(--font-display); font-size: 21px; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 7px; font-weight: 600; }
.sidebar-intro > p { color: var(--muted); font-size: 11px; margin: 0 0 20px; }
.primary { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: var(--accent); color: var(--paper); border-color: var(--accent); font-size: 12px; padding: 12px; }
.primary:hover { color: var(--paper); background: var(--accent-hover); border-color: var(--accent-hover); }
.primary { margin-bottom: 17px; }
.control-section { border-bottom: 1px solid var(--line); }
summary { font-size: 12px; font-weight: 600; list-style: none; padding: 15px 0; position: relative; }
summary::-webkit-details-marker { display: none; } summary::after { content: '+'; position: absolute; right: 2px; color: var(--muted); font-size: 17px; font-weight: 400; top: 11px; }
details[open] > summary::after { content: '−'; }
.section-content { padding-bottom: 14px; }
label { display: block; margin: 0 0 15px; font-size: 11px; color: var(--muted); }
label:last-child { margin-bottom: 0; }
select { display: block; width: 100%; padding: 9px 10px; margin-top: 7px; border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--panel); color: var(--ink); font-size: 12px; }
input[type=range] { display: block; width: 100%; height: 20px; margin: 8px 0 0; accent-color: var(--accent); }
output { float: right; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 10px; }
.check { display: flex; align-items: center; gap: 7px; }.check input { accent-color: var(--accent); margin: 0; width: 15px; height: 15px; }
.muted { color: var(--muted); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; margin: 0 0 12px; }
.file { border: 1px dashed var(--control-border); border-radius: var(--radius); padding: 12px; color: var(--ink); }.file input { display: block; width: 100%; font-size: 10px; margin-top: 10px; }
.count { font-weight: 400; color: var(--muted); padding-left: 5px; }
#legend { max-height: 195px; overflow-y: auto; padding-bottom: 12px; font-size: 11px; }
.legend-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }.legend-row .legend-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.swatch { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sidebar-footer { color: var(--muted); font-size: 10px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 5px 7px; align-items: center; }
.sidebar-footer a { color: var(--muted); font-size: 10px; text-decoration: none; }.sidebar-footer a:hover { text-decoration: underline; }
main { flex: 1; min-width: 0; position: relative; overflow: hidden; }
#graph { width: 100%; height: 100%; touch-action: none; }
@media (min-width: 761px) { .has-selection #graph { width: calc(100% - 296px); } }
.map-footer { background: var(--paper); padding: 5px 8px; border-radius: var(--radius); position: absolute; left: 30px; bottom: 22px; pointer-events: none; font-size: 10px; color: var(--muted); }#status { margin: 0 0 4px; font-size: 11px; }#status.error { color: var(--error); max-width: 340px; }.map-hint { margin: 0; color: var(--muted); font-size: 10px; }.map-hint span { margin: 0 5px; }
.map-toolbar { display: flex; align-items: center; position: absolute; bottom: 23px; right: 28px; padding: 5px; gap: 2px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: var(--card-shadow); }
.map-toolbar button { display: flex; align-items: center; gap: 6px; height: 36px; padding: 6px 10px; border: 0; background: transparent; font-size: 11px; white-space: nowrap; }.map-toolbar button:hover { background: var(--selection-bg); }.map-toolbar button:first-child, .map-toolbar button:nth-child(2) { width: 34px; justify-content: center; padding: 0; font-size: 21px; }.toolbar-divider { height: 17px; width: 1px; background: var(--line); margin: 0 2px; }
#empty { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; color: var(--muted); padding: 24px; }#empty h2 { font: 24px var(--font-serif); color: var(--ink); margin: 12px 0; }#empty p { font-size: 13px; }#empty button { margin-top: 12px; }
#details { position: absolute; top: 24px; right: 24px; padding: 16px; width: 272px; max-height: calc(100% - 108px); overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--card-shadow); z-index: 2; }
#clear { position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; padding: 0; font-size: 22px; background: var(--panel); z-index: 1; }
.detail-cover { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--paper); margin-bottom: 15px; }.cover-fallback { display: grid; place-items: center; color: var(--muted); font: 80px var(--font-display); }
.detail-eyebrow { color: var(--accent); font-size: 8px; letter-spacing: 1.6px; margin: 0 0 5px; font-weight: 650; }#details h2 { margin: 0 0 4px; font: 24px/1.1 var(--font-serif); letter-spacing: -.6px; }.album-artist { font-size: 13px; color: var(--muted); margin: 7px 0; }.album-meta { font-size: 10px; color: var(--muted); margin: 7px 0; }.related-heading { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 15px; font-size: 9px; font-weight: 650; letter-spacing: 1.3px; }
.album-result { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 7px 4px; border: 0; border-radius: var(--radius); background: transparent; }.album-result img, .result-cover { width: 36px; height: 36px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius); background: var(--paper); }.result-cover { display: grid; place-items: center; color: var(--muted); }.album-result > span:not(.result-cover) { min-width: 0; }.album-result strong { display: block; font-weight: 500; font-size: 11px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }.album-result small { display: block; font-size: 10px; color: var(--muted); }.album-result .result-arrow { margin-left: auto; color: var(--muted); }
#search-results { position: absolute; top: 51px; left: 0; width: 100%; max-height: min(480px, 65dvh); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--card-shadow); }#matches { margin: 0 4px 7px; color: var(--muted); font-size: 10px; }#search-results .album-result { padding: 8px; }#search-results .album-result strong { font-size: 12px; }
#tooltip { position: fixed; pointer-events: none; max-width: 280px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 14px; z-index: 6; font-size: 11px; box-shadow: var(--card-shadow); color: var(--ink); }
@media (max-width: 1100px) { .topbar { left: 290px; right: 20px; }aside { width: 270px; padding: 26px 22px 18px; }#details { top: 80px; max-height: calc(100% - 190px); }.map-toolbar { bottom: 52px; right: 20px; }.map-footer { bottom: 17px; left: 24px; }.map-hint { display: none; } }
@media (max-width: 760px) {
  .topbar { position: relative; top: auto; left: auto; right: auto; height: 72px; flex-shrink: 0; padding: 14px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
  #settings-toggle { display: flex; font-size: 0; padding: 11px; border-radius: var(--radius); height: 42px; }#settings-toggle svg { width: 18px; height: 18px; }
  .search-wrap { flex: 1; min-width: 0; }input[type=search] { height: 42px; font-size: 16px; padding-top: 8px; padding-bottom: 8px; }.search-label { top: 11px; }#search-results { top: 48px; width: calc(100vw - 24px); }
  aside { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88%); border: 0; border-left: 1px solid var(--line); padding: 24px; box-shadow: var(--card-shadow); }
  body.settings-open aside { display: block; }#settings-backdrop { position: absolute; inset: 0; background: var(--backdrop); border: 0; border-radius: 0; z-index: 3; padding: 0; }aside { z-index: 4; }
  .map-toolbar { bottom: 49px; right: 50%; transform: translateX(50%); padding: 5px; width: max-content; }.map-toolbar button { height: 38px; padding: 6px 12px; }.map-toolbar button:first-child, .map-toolbar button:nth-child(2) { width: 38px; }
  .map-footer { left: 10px; right: 10px; bottom: max(15px, env(safe-area-inset-bottom)); text-align: center; }#status { font-size: 9px; }.map-hint { display: none; }
  #details { top: auto; bottom: 107px; left: 12px; right: 12px; width: auto; max-height: min(55%, 365px); padding: 16px; }#info { display: flow-root; }.detail-cover { width: 90px; height: 90px; margin: 0 14px 12px 0; float: left; }#details h2 { font-size: 22px; padding-right: 15px; }.detail-eyebrow { padding-right: 20px; }.album-artist { font-size: 12px; margin: 5px 0; }.related-heading { clear: both; margin-top: 12px; padding-top: 10px; }.album-result { min-height: 47px; }
  #tooltip { display: none; }
  .has-selection #graph { height: calc(100% - min(55%, 365px) - 107px); min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.card-cover { display: block; object-fit: contain; max-width: 100%; margin-bottom: 10px; border-radius: var(--radius); }
#tooltip { max-height: 65dvh; overflow: hidden; white-space: normal !important; }
#tooltip h3, #info h3 { margin: 12px 0 4px; font-size: 13px; color: var(--ink); }
.score-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 4px 0; font-size: 12px; }
.score-row progress { grid-column: 1 / -1; width: 100%; height: 4px; accent-color: var(--community-aqua); }
#map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map-label { position: absolute; left: 0; top: 0; padding: 2px 3px; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 550; letter-spacing: .02em; width: max-content; max-width: min(300px, calc(100% - 12px)); white-space: normal; overflow-wrap: anywhere; text-shadow: 0 1px 3px var(--paper), 0 0 5px var(--paper), 0 0 9px var(--paper); pointer-events: auto; transition: none; }
.map-label-primary, .map-label-qualifier { display: block; }
.map-label-qualifier { font-size: 10px; line-height: 14px; font-weight: 400; }
.legend-row > span:not(.swatch):not(.legend-count) { min-width: 0; overflow-wrap: anywhere; }
.map-label:hover, .map-label:focus-visible { color: var(--ink); background: var(--paper); }
.section-content input[type=search] { margin-top: 7px; padding-left: 10px; }
#phrase-results { padding: 0; margin: 0; list-style: none; }
#phrase-results .album-result { min-height: 56px; gap: 7px; padding: 6px 0; }
#phrase-results .album-result > span:not(.result-cover) { flex: 1; }
#phrase-results .album-result .vibe-rank { flex: 0 0 15px; font-size: 11px; color: var(--muted); }
#phrase-results .album-result .vibe-score { flex: 0 0 auto; font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
#phrase-results .album-result[aria-pressed=true] { background: var(--selection-bg); }
#clear-phrase { min-height: 44px; margin-bottom: 10px; }
.phrase-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.phrase-actions button { min-height: 44px; margin: 0; padding: 8px 10px; font-size: 12px; }
#gather-map { position: absolute; right: 24px; top: 20px; min-height: 44px; z-index: 2; }
@media (min-width: 761px) { .has-selection #gather-map { right: 320px; } }
@media (max-width: 760px) { #gather-map { top: 12px; right: 12px; } }
#sound-controls { margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
#sound-controls legend { display: none; }

/* Data stays monospaced; prose and controls inherit Homepage’s serif. */
output, .legend-count, .count, .album-meta, .vibe-rank, .vibe-score, #library-count, #status { font-family: var(--font-mono); }
::selection { background: var(--selection-bg); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--muted) var(--panel); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--panel); border-radius: var(--radius); }
button[aria-pressed=true] { background: var(--selection-bg); border-color: var(--accent); }
/* Muted text needs ink's contrast on the warmer pressed/hover surface. */
.album-result:hover small, .album-result[aria-pressed=true] small,
#phrase-results .album-result:hover .vibe-rank,
#phrase-results .album-result[aria-pressed=true] .vibe-rank { color: var(--ink); }
summary:hover, a { color: var(--accent); }
a:hover, .sidebar-footer a:hover { color: var(--accent-hover); }

/* Touch screens have no scroll wheel or hover; swap the hint for honest
   gestures. Narrow layouts already hide hints entirely, so only wide
   coarse-pointer screens (touchscreen laptops, large tablets) see this. */
.map-hint-touch { display: none; }
@media (min-width: 1101px) and (pointer: coarse) {
  .map-hint { display: none; }
  .map-hint.map-hint-touch { display: block; }
}