*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--mono: 'Space Mono', monospace;
--sans: 'Space Grotesk', sans-serif;
}
/* Design tokens (Stick redesign). --accent/--accent2/--navText/--bg/--header-bg are
resolved per user scheme choice by layout.js (applyScheme/applyBgTint, both from
theme.js) and set as inline styles on — the values below are the pre-JS/
no-JS fallback, always the free-tier default (violet). */
[data-theme="dark"] {
--bg: #131118;
--surface: #1e1b24;
--surface2: #1c1c21;
--head: #232029;
--chip: #252230;
--input: #17151d;
--border: #2c2833;
--hair: rgba(255,255,255,.055);
--text: #f2eef7;
--muted: #9a93a6;
--nav-muted: #a0a0b8;
--faint: #6c6577;
--tickOff: rgba(255,255,255,.10);
--gold: #d9a441;
--berry: #e0699a;
--danger: #e0655a;
--mutedBorder: rgba(242,238,247,.28);
--accent: #7c5cff;
--accent2: #b18cff;
--navText: #ffffff;
--header-bg: var(--surface2);
--header-border: #44444f;
--nav-bg-dark: #201452;
--nav-text-dark: #ffffff;
}
[data-theme="light"] {
--bg: #faf7f2;
--surface: #ffffff;
--surface2: #efefef;
--head: #f1ede5;
--chip: #f1ede5;
--input: #fbfaf7;
--border: #e6e1d8;
--hair: rgba(22,17,12,.08);
--text: #16110c;
--muted: #857e72;
--nav-muted: #4f4f78;
--faint: #b3aa98;
--tickOff: rgba(22,17,12,.10);
--gold: #a9781a;
--berry: #c0497a;
--danger: #d3453a;
--mutedBorder: rgba(22,17,12,.22);
--accent: #7c5cff;
--accent2: #9b7fff;
--navText: #ffffff;
--header-bg: var(--surface2);
--header-border: #c5c5d6;
}
/* ── Colour schemes ─────────────────────────────────────────────────────────
The 6 preset accents (+ custom) are applied by layout.js's applyScheme()
(theme.js), which sets --accent/--accent2/--navText as inline styles
on (same value in light + dark — the redesign uses one accent hex per
scheme regardless of theme) and derives --bg/--header-bg via applyBgTint(),
so no [data-scheme=…] CSS overrides are needed here. */
html { font-size: 16px; scrollbar-gutter: stable; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-weight: 400;
min-height: 100vh;
line-height: 1.5;
display: flex;
flex-direction: column;
}
/* Grain texture overlay */
.bg-grain {
position: fixed; inset: 0; pointer-events: none; z-index: 100;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
/* ── Header ─────────────────────────────────────────── */
header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 2rem;
height: 54px;
position: sticky; top: 0;
background: var(--accent);
color: var(--navText);
z-index: 50;
flex-shrink: 0;
}
/* In dark mode, a full-bleed accent-coloured bar reads too bright — locally
redefine --accent/--navText within the header (and the mobile search bar,
which shares its look but lives as a separate fixed element) so every
existing var(--accent)/var(--navText) consumer already inside them — nav
links, the Matches badge, the Pro pill, icon buttons, the search box —
darkens for free. Nothing outside these two elements is affected. */
[data-theme="dark"] header,
[data-theme="dark"] #mobile-search-bar {
--accent: var(--nav-bg-dark);
--navText: var(--nav-text-dark);
}
.logo {
font-family: var(--sans);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.05em;
color: var(--navText);
cursor: pointer;
user-select: none;
text-decoration: none;
justify-self: start;
display: flex;
align-items: center;
gap: 0.4rem;
}
.logo-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: url(/favicon.svg);
mask-image: url(/favicon.svg);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.header-right { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.nav-center {
display: flex;
align-items: center;
gap: 0.9rem;
position: relative;
align-self: stretch;
}
.search-icon-btn {
background: none;
border: 1.5px solid color-mix(in srgb, var(--navText) 40%, transparent);
cursor: pointer;
color: var(--navText);
padding: 0;
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
transition: background 0.15s;
z-index: 2;
}
.search-icon-btn:hover { background: color-mix(in srgb, var(--navText) 12%, transparent); }
.search-icon-btn .icon-search,
.search-icon-btn .icon-close {
position: absolute;
display: flex;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.search-icon-btn .icon-search {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.search-icon-btn .icon-close {
opacity: 0;
transform: scale(0.6) rotate(45deg);
pointer-events: none;
}
.search-icon-btn.open .icon-search {
opacity: 0;
transform: scale(0.6) rotate(-45deg);
}
.search-icon-btn.open .icon-close {
opacity: 1;
transform: scale(1) rotate(0deg);
pointer-events: auto;
}
nav { display: flex; align-items: center; gap: 1rem; }
.nav-search {
position: absolute;
left: 2.1rem;
right: 0; top: 0; bottom: 0;
display: flex; align-items: center; gap: 0.6rem;
background: var(--accent);
padding-right: 0.4rem;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.nav-search.open {
clip-path: inset(0 0% 0 0);
pointer-events: all;
}
.nav-search-input {
flex: 1; min-width: 0;
background: transparent; border: none;
border-bottom: 2px solid color-mix(in srgb, var(--navText) 70%, transparent);
outline: none; color: var(--navText);
font-family: var(--sans); font-weight: 600; font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.4rem 0.15rem;
}
.nav-search-input::placeholder { color: var(--navText); opacity: 0.92; text-transform: uppercase; }
.nav-search-btn {
background: none; border: none; cursor: pointer;
color: var(--navText); padding: 0.3rem; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: opacity 0.15s;
}
.nav-search-btn:hover { opacity: 0.8; }
.nav-btn {
background: none; border: none; cursor: pointer;
font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
color: var(--navText);
opacity: 0.92;
padding: 0;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: opacity 0.15s;
text-decoration: none;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
display: inline-flex;
align-items: center;
position: relative;
}
.nav-btn:hover { opacity: 1; }
.nav-btn.active { opacity: 1; text-decoration: underline; }
.nav-badge {
display: inline-block;
background: var(--navText);
color: var(--accent);
border-radius: 10px;
font-size: .6rem;
font-weight: 700;
padding: 0 .4rem;
margin-left: .35rem;
vertical-align: middle;
line-height: 1.6;
min-width: 1.2rem;
text-align: center;
}
.nav-badge.hidden { display: none; }
.user-menu { display: flex; align-items: center; gap: 0.4rem; }
.user-menu.hidden { display: none; }
.pro-nav-btn {
display: flex; align-items: center; gap: 0.3rem;
height: 26px;
padding: 0 0.65rem;
border-radius: 20px;
background: var(--navText);
color: var(--accent);
border: none;
font-family: var(--sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
transition: filter 0.15s;
}
.pro-nav-btn:hover { filter: brightness(0.95); }
.pro-nav-btn-text { line-height: 1; transform: translateY(1px); }
.pro-nav-btn-divider {
width: 1px; height: 18px;
background: color-mix(in srgb, var(--navText) 25%, transparent);
margin: 0 0.15rem;
}
.header-avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: color-mix(in srgb, var(--navText) 22%, transparent);
color: var(--navText);
display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 0.65rem; font-weight: 700;
cursor: pointer;
position: relative;
overflow: hidden;
flex-shrink: 0;
text-decoration: none;
}
.header-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.header-avatar-wrap { position: relative; }
.header-avatar-menu {
position: absolute;
top: 100%;
/* header has 2rem right padding, so the wrap's own right edge already
sits 2rem in from the page edge; pull the card back out by the same
amount minus the 8px gap we actually want, so its right edge lands 8px
from the page's right edge — matching the 8px gap below the header. */
right: calc(-2rem + 8px);
/* Invisible hover bridge, flush against the avatar so hover never drops
across the gap. 14px clears the header bar itself (the avatar sits
vertically centered in the 54px header, ~14px of header still remains
below it), plus an 8px visual gap before the menu card — matching the
8px gap kept on the right-hand side above. */
padding-top: calc(14px + 8px);
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.12s ease;
}
/* .open is toggled by JS (setupAvatarMenu in header.js) rather than a pure
CSS :hover rule — a CSS transition-delay-based "stay open" grace period
flips pointer-events to none the instant the mouse leaves (it can't be
part of the delayed transition), so re-entering the still-visible menu
during the grace window doesn't re-register hover and the menu can end up
visible but unclickable. A JS timer that's cleared on re-entry has no such
race. */
.header-avatar-menu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.header-avatar-menu-inner {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
overflow: hidden;
}
.header-avatar-menu-item {
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
min-width: 150px;
text-align: left;
background: none;
border: none;
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
padding: 0.55rem 0.9rem;
cursor: pointer;
text-decoration: none;
transition: background 0.1s, color 0.1s;
}
.header-avatar-menu-item svg { flex-shrink: 0; }
.header-avatar-menu-item:hover { background: var(--surface2); color: var(--text); }
/* ── Mobile header left/right groups ──────────────────*/
.mobile-header-left,
.mobile-header-right {
display: none;
align-items: center;
gap: 0.25rem;
}
.mobile-header-right { justify-content: flex-end; }
.hamburger-btn {
background: none; border: none; cursor: pointer;
color: var(--navText);
padding: 0; width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.15s;
}
.hamburger-btn:hover,
.hamburger-btn.open { background: color-mix(in srgb, var(--navText) 15%, transparent); }
/* ── Mobile menu drawer ────────────────────────────────
A left-edge slide-in panel (not a top dropdown): fixed full-height,
translateX off-screen when closed, backdrop fades independently. */
.mobile-menu {
display: none;
position: fixed;
top: 0; left: 0; bottom: 0;
width: 78%; max-width: 300px;
z-index: 60;
background: var(--bg);
color: var(--text);
border-right: 1px solid var(--border);
transform: translateX(-103%);
transition: transform 0.34s cubic-bezier(0.4, 0, 0.1, 1);
flex-direction: column;
padding-top: 6px;
overflow-y: auto;
}
.mobile-menu.open {
transform: translateX(0);
/* Only cast the shadow while open — while closed the drawer is translated
off-screen but a shadow on the base rule still bleeds onto the page
(a 44px blur reaches past the -103% translateX on narrow viewports). */
box-shadow: 14px 0 44px -14px rgba(0, 0, 0, 0.55);
}
.mobile-menu-head {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 22px 18px;
}
.mobile-menu-eyebrow {
font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.mobile-menu-close-btn {
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--border);
background: none;
color: var(--text);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.mobile-menu-nav {
display: flex; flex-direction: column;
padding: 4px 14px 0;
}
.mobile-menu-nav .nav-btn {
display: flex; align-items: center; justify-content: space-between;
width: 100%;
text-align: left;
padding: 14px 12px;
border-radius: 11px;
font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
letter-spacing: -0.02em; text-transform: none;
color: var(--text);
opacity: 1;
}
.mobile-menu-nav .nav-btn:hover,
.mobile-menu-nav .nav-btn.active { background: var(--chip); }
.mobile-menu-nav .nav-btn .nav-badge { background: var(--accentFill, var(--accent)); color: var(--accentFillText, var(--navText)); }
.mobile-menu-divider { margin: 14px 26px; height: 1px; background: var(--hair); }
.mobile-menu-secondary { display: flex; flex-direction: column; padding: 0 14px; }
.mobile-menu-secondary-link {
padding: 12px;
border-radius: 11px;
text-decoration: none;
color: var(--muted);
font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
}
.mobile-menu-secondary-link:hover { background: var(--chip); }
.mobile-menu-footer {
margin-top: auto;
padding: 16px 20px 22px;
display: flex; flex-direction: column; gap: 9px;
}
.mobile-menu-import-btn,
.mobile-menu-pro-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
height: 44px;
border-radius: 12px;
text-decoration: none;
font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
}
.mobile-menu-import-btn {
border: 1.5px solid var(--border);
color: var(--text);
}
.mobile-menu-pro-btn {
background: var(--accentFill, var(--accent));
color: var(--accentFillText, var(--navText));
}
.mobile-menu-pro-btn.hidden { display: none; }
/* ── Mobile backdrop ──────────────────────────────────*/
.mobile-backdrop {
display: none;
position: fixed; inset: 0;
z-index: 59;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile-backdrop.open { display: block; opacity: 1; pointer-events: auto; }
/* ── Mobile search bar ────────────────────────────────*/
.mobile-search-bar {
display: none;
position: fixed;
top: 54px; left: 0; right: 0; height: 48px;
z-index: 49;
background: var(--accent);
color: var(--navText);
align-items: center; gap: 0.6rem;
padding: 0 1rem;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.mobile-search-bar.open {
clip-path: inset(0 0 0% 0);
pointer-events: all;
}
.mobile-search-bar .nav-search-input {
font-size: 0.78rem;
}
body.mobile-menu-open { overflow: hidden; }
/* ── Main ───────────────────────────────────────────── */
main {
max-width: 1240px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
transition: max-width 0.35s ease;
position: relative;
flex: 1 0 auto;
width: 100%;
zoom: 1.08;
}
/* Ambient accent glow — follows the active colour scheme */
main::before {
content: '';
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80vw;
max-width: 900px;
height: 480px;
background: var(--accent);
opacity: 0.045;
filter: blur(90px);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
body[data-page="dev"] main {
max-width: min(1400px, 100%);
}
/* ── Settings page ────────────────────────────────────*/
.settings-page {
max-width: 540px;
margin: 0 auto;
}
.settings-section {
margin-bottom: 1.5rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.25rem 1.5rem;
}
.settings-section-title {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.65rem 0;
}
.settings-row + .settings-row {
border-top: 1px solid var(--border);
}
.settings-label {
font-size: 0.875rem;
color: var(--text);
}
.settings-connection-status {
font-family: var(--mono);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--accent);
background: var(--chip);
border-radius: 20px;
padding: 0.15rem 0.6rem;
align-self: flex-start;
}
.settings-theme-options {
display: flex;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.settings-theme-options.saving { opacity: 0.5; pointer-events: none; }
.settings-theme-btn {
background: none;
border: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.3rem 0.7rem;
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.settings-theme-btn:hover { color: var(--text); background: var(--surface2); }
.settings-theme-btn.active { color: var(--accentText, var(--accent)); background: var(--surface2); }
.btn {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.4rem 0.8rem;
border-radius: 20px;
cursor: pointer;
transition: border-color 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn:focus { outline: none; border-color: var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-secondary { /* muted variant — inherits .btn base */ }
.settings-select {
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.3rem 0.7rem;
border-radius: 6px;
cursor: pointer;
}
.settings-select:focus { outline: none; border-color: var(--accent); }
.settings-pro-badge {
display: inline-block;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 4px;
padding: 0.05rem 0.35rem;
margin-left: 0.4rem;
vertical-align: middle;
}
/* ── Pro pitch page (/pro) ────────────────────────────────────────────────── */
.pro-page { max-width: 720px; margin: 0 auto; }
.pro-badge-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent);
font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 0.45rem 0.85rem; border-radius: 20px; margin-bottom: 0.9rem;
}
.pro-pitch-title {
font-family: var(--sans); font-size: 2.1rem; font-weight: 700;
letter-spacing: -0.05em; max-width: 34ch; margin: 0 0 0.7rem;
}
.pro-pitch-sub {
font-size: 0.9rem; line-height: 1.65; color: var(--text); opacity: 0.82;
max-width: 42ch; margin: 0 0 1.8rem;
}
.pro-section-label {
font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
margin-bottom: 0.75rem;
}
.pro-feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.pro-more-to-come {
font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
text-align: center; margin: 0.9rem 0 1.9rem;
}
.pro-feature-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 1.25rem 1.35rem; display: flex; gap: 0.85rem; align-items: flex-start;
}
.pro-feature-card-icon {
width: 40px; height: 40px; flex: none; border-radius: 11px;
background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
display: flex; align-items: center; justify-content: center;
}
.pro-feature-card-title { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.pro-feature-card-body { font-family: var(--mono); font-size: 0.75rem; line-height: 1.55; color: var(--muted); margin-top: 0.3rem; }
.pro-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.pro-plan-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
padding: 1.35rem 1.5rem; position: relative;
}
.pro-plan-card--best { border-color: var(--accent); border-width: 2px; }
.pro-plan-card-ribbon {
position: absolute; top: -0.7rem; left: 1.5rem;
background: var(--accentFill, var(--accent)); color: var(--accentFillText, var(--navText));
font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 0.25rem 0.65rem; border-radius: 12px;
}
.pro-plan-card-label { font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pro-plan-card-price {
font-family: var(--sans); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.04em;
display: flex; align-items: baseline; gap: 0.35rem; margin: 0.6rem 0 0.2rem;
}
.pro-plan-card-price span { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--muted); }
.pro-plan-card-note { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-bottom: 1rem; }
.pro-plan-card-btn { width: 100%; }
.pro-error { font-size: 0.8rem; color: var(--danger); margin-top: 1rem; }
.pro-already-state { text-align: center; padding: 4rem 1rem; }
.pro-already-icon {
width: 64px; height: 64px; border-radius: 18px; background: var(--accentFill, var(--accent)); color: var(--accentFillText, var(--navText));
display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem;
}
.pro-already-title { font-family: var(--sans); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.05em; margin: 0 0 0.6rem; }
.pro-already-body { font-size: 0.88rem; line-height: 1.6; color: var(--text); opacity: 0.8; max-width: 400px; margin: 0 auto 1.3rem; }
@media (max-width: 600px) {
.pro-feature-cards, .pro-plan-cards { grid-template-columns: 1fr; }
}
.settings-tint-slider:disabled { opacity: 0.45; cursor: default; }
#custom-tint-row.locked { cursor: pointer; }
#custom-tint-row.locked .settings-tint-control { pointer-events: none; }
.settings-scheme-options {
display: flex;
gap: 0.5rem;
align-items: center;
}
.settings-scheme-options.saving { opacity: 0.5; pointer-events: none; }
.settings-scheme-swatch {
width: 24px; height: 24px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s;
flex-shrink: 0;
outline: none;
}
.settings-scheme-swatch:hover { transform: scale(1.15); }
.settings-scheme-swatch.active {
border-color: var(--text);
transform: scale(1.1);
}
.settings-scheme-swatch.locked { opacity: 0.45; }
.settings-scheme-swatch.locked:hover { opacity: 0.7; }
.settings-scheme-swatch.custom-swatch {
position: relative;
overflow: visible;
}
.settings-scheme-swatch.custom-swatch.no-color {
background: conic-gradient(
hsl(0,80%,60%), hsl(60,80%,60%), hsl(120,80%,60%),
hsl(180,80%,60%), hsl(240,80%,60%), hsl(300,80%,60%), hsl(360,80%,60%)
) !important;
}
/* Once a custom colour is picked, the custom swatch is otherwise just a plain
solid circle indistinguishable from any preset — this pencil badge stays on
it permanently (not just in the .no-color placeholder state above) so it
always reads as "pick your own colour", not "another preset". Neutral
surface/border tokens rather than the swatch's own fill, so it stays legible
against literally any custom colour, including near-white/near-black picks. */
.settings-scheme-swatch.custom-swatch::after {
content: "\270E";
position: absolute;
bottom: -3px;
right: -3px;
width: 13px;
height: 13px;
line-height: 13px;
text-align: center;
font-size: 8px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
color: var(--muted);
pointer-events: none;
}
/* In-app custom colour picker popover (issue #514) — replaces the OS's
native panel. position:fixed with coordinates set in
JS on open, same pattern as .na-menu. */
.color-picker-popover {
display: none;
position: fixed;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.75rem;
width: 230px;
z-index: 100;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.color-picker-popover.open { display: block; }
.color-picker-preview {
width: 100%;
height: 28px;
border-radius: 5px;
border: 1px solid var(--border);
margin-bottom: 0.6rem;
}
.color-picker-slider-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.color-picker-slider-label {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.04em;
color: var(--muted);
width: 0.9rem;
flex-shrink: 0;
}
.color-picker-slider {
flex: 1;
width: 100%;
accent-color: var(--accent);
cursor: pointer;
}
.color-picker-num {
width: 2.6rem;
flex-shrink: 0;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-family: var(--mono);
font-size: 0.7rem;
padding: 0.15rem 0.3rem;
box-sizing: border-box;
text-align: right;
/* Hide the native up/down spinner buttons — the slider is the primary
drag control, this box is for precise typed entry only. */
-moz-appearance: textfield;
}
.color-picker-num::-webkit-outer-spin-button,
.color-picker-num::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.color-picker-num:focus { outline: none; border-color: var(--accent); }
.color-picker-hex {
width: 100%;
margin-top: 0.4rem;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
font-family: var(--mono);
font-size: 0.75rem;
padding: 0.3rem 0.5rem;
box-sizing: border-box;
}
.color-picker-hex:focus { outline: none; border-color: var(--accent); }
.settings-restore-btn {
background: none;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.04em;
padding: 0.2rem 0.5rem;
border-radius: 14px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.settings-restore-btn:hover { color: var(--text); border-color: var(--muted); }
.settings-tint-control {
display: flex;
align-items: center;
gap: 0.75rem;
}
.settings-tint-slider {
width: 120px;
accent-color: var(--accent);
cursor: pointer;
}
.settings-tint-value {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--muted);
min-width: 1.5rem;
text-align: right;
}
.settings-row-block {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
}
.settings-plex-webhook {
display: flex;
gap: 0.5rem;
width: 100%;
align-items: center;
}
.settings-webhook-input {
flex: 1;
min-width: 0;
font-family: var(--mono);
font-size: 0.72rem;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--muted);
padding: 0.3rem 0.5rem;
border-radius: 4px;
outline: none;
}
.settings-action-btn {
background: none;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
padding: 0.3rem 0.65rem;
border-radius: 18px;
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.settings-action-btn:hover { color: var(--text); border-color: var(--muted); }
.settings-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-action-btn:disabled:hover { color: var(--muted); border-color: var(--border); }
.settings-action-btn-danger:hover { color: #cc2244; border-color: #cc2244; }
.settings-row-disabled .settings-label { opacity: 0.5; }
.settings-row-disabled .settings-sublabel a { color: var(--accent); }
.settings-row-disabled .settings-sublabel a:hover { text-decoration: underline; }
.settings-action-btn--primary {
background: var(--accentFill, var(--accent));
color: var(--accentFillText, var(--navText));
border-color: var(--accentFill, var(--accent));
}
.settings-action-btn--primary:hover { opacity: 0.85; }
.settings-sublabel-inline { font-size: 0.85em; opacity: 0.6; }
/* flex-wrap (not viewport-gated, unlike .settings-row's mobile breakpoint):
the settings card is a fixed ~492px content width regardless of window
size (.settings-page's 540px cap), so two full-width buttons here can
overflow the card on any viewport, not just narrow ones — they need to
wrap onto their own line rather than push past the card's right edge. */
.settings-btn-group { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
/* Import history (issue #167; moved onto its own card on the Import page in issue #523) */
.import-history-panel {
max-width: 680px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 1.25rem 1.4rem;
}
.import-history-list { display: flex; flex-direction: column; margin-bottom: 0.75rem; }
.import-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.65rem 0;
}
.import-row + .import-row { border-top: 1px solid var(--border); }
.import-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.import-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.import-name {
font-size: 0.875rem;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.import-source-pill {
font-family: var(--mono);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
}
.import-approx {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--muted);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0 4px;
flex-shrink: 0;
}
.import-meta { font-size: 0.78rem; color: var(--muted); }
.settings-sublabel {
font-size: 0.78rem;
color: var(--muted);
line-height: 1.4;
}
/* ── Tabs ─────────────────────────────────────────────*/
.tab { display: none; }
.tab.active { display: block; }
.library-view { display: none; }
.library-view.active { display: block; }
/* Pill-shaped filter tabs (design spec: "Pills / buttons: 20px" radius) —
overrides the shared .dupes-tabs/.dupes-tab underlined-tab-bar look for
each screen's own row of pill filters, per that screen's mockup spec.
Each block uses a selector specific enough to win regardless of the two
rule blocks' order in the file (container id/class + .dupes-tab). */
/* Library: RECENT / ARTISTS / ALBUMS / TRACKS — 20px radius, filled active. */
.dupes-tabs.library-tabs {
margin-bottom: 1.25rem;
gap: 0.5rem;
border-bottom: none;
}
.dupes-tab.library-tab {
border: 1px solid var(--border);
border-radius: 20px;
background: none;
padding: 0.4rem 1rem;
}
.dupes-tab.library-tab:hover { background: var(--surface2); border-color: var(--border); }
.dupes-tab.library-tab.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* Matches (/mbid): Unmatched / Paused / Archived — 20px radius, filled active.
(.na-tab-strip's own display/gap rule lives with the rest of the na-toolbar
layout further down — see .na-tab-strip { gap: 6px }.) */
.na-tab-strip .dupes-tab {
border: 1px solid var(--border);
border-radius: 20px;
background: none;
padding: 0.44rem 0.85rem;
font-size: 0.68rem;
letter-spacing: 0.05em;
}
.na-tab-strip .dupes-tab:hover { background: var(--surface2); border-color: var(--border); }
.na-tab-strip .dupes-tab.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
/* Import: "Review excluded listens" In library / In file / Deleted —
16px radius, accent-filled active (matches the mockup's use of --accent
here rather than the neutral --text fill used by Library/Matches/Settings). */
#dupes-tabs {
gap: 0.4rem;
border-bottom: none;
}
#dupes-tabs .dupes-tab {
border: 1px solid var(--border);
border-radius: 16px;
background: none;
padding: 0.44rem 0.7rem;
font-size: 0.66rem;
letter-spacing: 0.04em;
}
#dupes-tabs .dupes-tab:hover { background: var(--surface2); border-color: var(--border); }
#dupes-tabs .dupes-tab.active {
background: var(--accentFill, var(--accent));
color: var(--accentFillText, var(--navText));
border-color: var(--accentFill, var(--accent));
}
/* Settings: Appearance / Connections / Import History / … — 22px radius,
filled active, thicker 1.5px border on both states. */
.dupes-tabs.settings-tabs {
gap: 0.4rem;
border-bottom: none;
}
.dupes-tab.settings-tab {
border: 1.5px solid var(--mutedBorder);
border-radius: 22px;
background: none;
padding: 0.5rem 0.95rem;
font-size: 0.69rem;
letter-spacing: 0.02em;
}
.dupes-tab.settings-tab:hover { background: var(--surface2); }
.dupes-tab.settings-tab.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }
.settings-tabs { margin-bottom: 1.25rem; justify-content: center; }
/* Search: All / Artists / Albums / Tracks / People — 20px radius, filled active. */
.dupes-tabs.search-filter-tabs {
margin-bottom: 1.25rem;
gap: 0.4rem;
border-bottom: none;
}
.dupes-tab.search-filter-tab {
border: 1px solid var(--border);
border-radius: 20px;
background: none;
padding: 0.44rem 0.85rem;
font-size: 0.68rem;
}
.dupes-tab.search-filter-tab:hover { background: var(--surface2); border-color: var(--border); }
.dupes-tab.search-filter-tab.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.section-header {
margin-bottom: 1.25rem;
}
.section-header--eyebrow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.section-eyebrow {
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.recent-header,
.chart-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* ── Period control ─────────────────────────────────────*/
.chart-header-right {
display: flex;
align-items: center;
gap: 0.65rem;
}
.period-control { position: relative; }
.period-btn {
display: flex;
align-items: center;
gap: 0.35rem;
background: none;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.3rem 0.6rem;
border-radius: 4px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.period-btn:hover,
.period-btn[aria-expanded="true"] { color: var(--text); border-color: var(--muted); }
.period-arrow { font-size: 0.6rem; transition: transform 0.15s; }
.period-btn[aria-expanded="true"] .period-arrow { transform: rotate(180deg); }
.period-dropdown {
display: none;
position: absolute;
right: 0;
top: calc(100% + 4px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0;
margin: 0;
min-width: 220px;
z-index: 30;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
overflow: hidden;
}
.period-dropdown.open { display: block; }
.period-options { list-style: none; padding: 0; margin: 0; }
.period-option {
font-family: var(--mono);
font-size: 0.72rem;
color: var(--muted);
padding: 0.45rem 0.9rem;
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
.period-option:hover { background: var(--surface2); color: var(--text); }
.period-option.selected { color: var(--accent); }
.period-custom-range {
border-top: 1px solid var(--border);
padding: 0.6rem 0.9rem 0.5rem;
}
.period-custom-field { margin-bottom: 0.4rem; }
.period-custom-label {
display: block;
font-family: var(--mono);
font-size: 0.6rem;
color: var(--muted);
letter-spacing: 0.06em;
margin-bottom: 0.2rem;
}
.period-custom-input {
width: 100%;
box-sizing: border-box;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.3rem 0.5rem;
border-radius: 4px;
}
.period-custom-actions {
display: flex;
justify-content: flex-end;
gap: 0.4rem;
margin-top: 0.5rem;
}
.period-custom-cancel {
background: none;
border: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
cursor: pointer;
padding: 0.3rem 0.5rem;
}
.period-custom-apply {
background: var(--accentFill, var(--accent));
border: none;
color: var(--accentFillText, var(--navText));
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
padding: 0.3rem 0.7rem;
border-radius: 16px;
}
.date-jump-outer {
position: relative;
display: inline-flex;
}
.date-jump-wrap {
position: relative;
display: inline-flex;
align-items: center;
border: 1px solid var(--border);
border-radius: 4px;
padding: 0.15rem 0.25rem;
transition: border-color 0.15s;
}
.date-jump-wrap:hover { border-color: var(--muted); }
.date-jump-day-arrow {
background: none;
border: none;
color: var(--muted);
font-size: 0.8rem;
line-height: 1;
padding: 0.25rem 0.3rem;
border-radius: 4px;
cursor: pointer;
transition: color 0.15s;
}
.date-jump-day-arrow:hover { color: var(--text); }
.date-jump-day-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.date-jump-btn {
background: none;
border: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.3rem 0.4rem;
border-radius: 4px;
cursor: pointer;
transition: color 0.15s;
white-space: nowrap;
}
.date-jump-btn:hover { color: var(--text); }
.date-jump-btn:focus { outline: none; color: var(--text); }
.date-jump-today {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 0.15rem;
background: none;
border: none;
color: var(--muted);
font-family: var(--mono);
font-size: 0.65rem;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
}
.date-jump-today:hover:not(:disabled) { color: var(--text); background: var(--surface2); }
.date-jump-today:disabled { opacity: 0.35; cursor: default; }
.date-jump-picker {
position: absolute;
top: calc(100% + 6px);
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px;
z-index: 200;
width: 222px;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
transform-origin: top right;
}
.date-jump-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.date-jump-arrow {
background: none;
border: none;
color: var(--nav-muted);
cursor: pointer;
padding: 2px 8px;
font-size: 0.85rem;
line-height: 1;
border-radius: 3px;
transition: color 0.1s, background 0.1s;
}
.date-jump-arrow:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 60%, var(--border) 40%); }
.date-jump-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.date-jump-year-btn {
background: none;
border: none;
color: var(--text);
font-family: var(--mono);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
padding: 2px 6px;
border-radius: 3px;
letter-spacing: 0.02em;
transition: color 0.1s, background 0.1s;
}
.date-jump-year-btn:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.date-jump-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
will-change: opacity;
}
.date-jump-grid.day { grid-template-columns: repeat(7, 1fr); }
.date-jump-dow {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--nav-muted);
text-align: center;
padding: 0 0 3px;
}
.date-jump-cell {
background: none;
border: 1px solid transparent;
color: var(--nav-muted);
cursor: pointer;
padding: 5px 2px;
font-family: var(--mono);
font-size: 0.72rem;
border-radius: 3px;
text-align: center;
transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.date-jump-cell:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }
.date-jump-cell.today { color: var(--text); border-color: var(--nav-muted); }
.date-jump-cell.active { background: var(--accentFill, var(--accent)); color: var(--accentFillText, var(--navText)); border-color: var(--accentFill, var(--accent)); }
.date-jump-cell:disabled { opacity: 0.2; cursor: default; pointer-events: none; }
#search-results {
margin-top: 1.25rem;
}
.search-section-title {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin: 2.5rem 0 0.5rem;
}
#search-results > div:first-child .search-section-title { margin-top: 0; }
.search-see-more {
display: inline-block;
margin-top: 0.6rem;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--accent);
text-decoration: none;
}
.search-see-more:hover { text-decoration: underline; }
.search-echo {
font-size: 0.95rem;
color: var(--text);
margin-bottom: 1rem;
}
.search-echo-count {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--muted);
margin-left: 0.4rem;
}
.search-filter-tabs { margin-bottom: 1.25rem; }
.search-filter-section.hidden { display: none; }
.search-clear-btn {
font-family: var(--sans);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
background: var(--chip);
border: 1px solid var(--border);
border-radius: 20px;
padding: 0.4rem 0.9rem;
cursor: pointer;
}
.search-clear-btn:hover { border-color: var(--mutedBorder, var(--border)); }
.search-mb-link {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--accent);
text-decoration: none;
}
.search-mb-link:hover { text-decoration: underline; }
.section-header h2 {
font-family: var(--sans);
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.035em;
}
/* ── Track list ───────────────────────────────────────*/
.track-list {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.track-day-header {
padding: 1.1rem 1rem 0.55rem 0;
display: flex;
align-items: baseline;
gap: 0.65rem;
}
.track-day-name {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
}
.track-day-date {
font-family: var(--mono);
font-size: 0.68rem;
color: var(--muted);
}
.track-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border);
background: var(--surface);
transition: background 0.12s, box-shadow 0.12s;
position: relative;
}
#recent-list .track-row, #timeline .track-row { cursor: pointer; }
.track-row:last-child { border-bottom: none; }
.track-row:hover {
background: var(--surface2);
}
.track-info { min-width: 0; }
.track-name {
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.track-meta {
font-size: 0.78rem;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.track-date {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--muted);
white-space: nowrap;
text-align: right;
}
.date-short { display: none; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.empty-state {
padding: 3rem 1.5rem;
text-align: center;
color: var(--muted);
font-size: 0.875rem;
}
/* ── Shared icon+headline+body+CTA "nothing here" pattern (item 7) ────────
Opt-in richer structure inside the plain .empty-state above — built by
public/js/empty-state.js, used for no-results/no-matches/empty-library/
error/404 screens per the mockup's "Stick States" reference. */
.empty-state--rich {
display: flex;
flex-direction: column;
align-items: center;
padding: 3.1rem 1.5rem 3.4rem;
}
.empty-state-icon {
width: 64px; height: 64px; flex: none; border-radius: 17px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.1rem;
}
.empty-state-icon--neutral { background: var(--chip); color: var(--faint); }
.empty-state-icon--accent { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.empty-state-icon--danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.empty-state-title {
font-family: var(--sans); font-size: 1.35rem; font-weight: 700;
letter-spacing: -0.03em; color: var(--text); margin: 0 0 0.55rem;
}
.empty-state-body {
font-size: 0.8rem; line-height: 1.6; color: var(--muted);
max-width: 420px; margin: 0 auto 1.1rem;
}
.empty-state-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.empty-state-btn {
font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.68rem 1.1rem; border-radius: 22px;
cursor: pointer; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--text); border: 1px solid var(--border);
}
.empty-state-btn--primary { background: var(--accentFill, var(--accent)); color: var(--accentFillText, var(--navText)); border: none; }
/* ── Skeleton loading rows (item 7) — reuses the existing art-shimmer
gradient technique rather than introducing a second shimmer mechanism. */
.skeleton-row-list { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; padding: 0 1.1rem; }
.skeleton-row {
display: grid; grid-template-columns: 48px 1fr 60px; gap: 0.9rem;
align-items: center; padding: 0.75rem 0;
border-top: 1px solid var(--hair);
}
.skeleton-row:first-child { border-top: none; }
.skeleton-thumb, .skeleton-line {
background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
background-size: 200% 100%;
animation: art-shimmer 1.4s ease-in-out infinite;
border-radius: 6px;
}
.skeleton-thumb { width: 48px; height: 48px; border-radius: 8px; }
.skeleton-lines { display: flex; flex-direction: column; gap: 0.45rem; }
.skeleton-line--title { height: 12px; width: 52%; }
.skeleton-line--sub { height: 10px; width: 32%; }
.skeleton-line--trail { height: 12px; }
/* ── Pagination ───────────────────────────────────────*/
.pagination {
display: flex;
gap: 0.35rem;
margin-top: 1rem;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.page-btn {
background: var(--surface); border: 1px solid var(--border);
color: var(--muted); cursor: pointer;
font-family: var(--mono); font-size: 0.75rem;
padding: 0.4rem 0.7rem; border-radius: 8px;
transition: all 0.15s;
white-space: nowrap;
}
.page-btn:hover:not([disabled]) { color: var(--text); border-color: var(--muted); }
.page-btn.active { color: var(--text); border-color: var(--accent); }
.page-btn[disabled] { opacity: 0.3; cursor: default; }
.page-edge { font-size: 0.7rem; }
.page-ellipsis {
color: var(--muted);
font-family: var(--mono);
font-size: 0.75rem;
padding: 0 0.1rem;
user-select: none;
}
/* ── Chart list ───────────────────────────────────────*/
.chart-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.chart-row {
display: grid;
grid-template-columns: 2.5rem 52px 1fr 80px auto;
align-items: center;
gap: 0.9rem;
padding: 0.85rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
transition: border-color 0.15s, box-shadow 0.15s;
animation: fadeUp 0.3s ease both;
}
.chart-row:hover { border-color: var(--border); }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.chart-rank {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--muted);
text-align: right;
}
.chart-rank.top {
color: var(--accent);
font-size: 0.88rem;
font-weight: 500;
}
.chart-info { min-width: 0; }
.chart-name {
font-size: 0.96rem;
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chart-sub {
font-size: 0.75rem;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.chart-plays {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--muted);
white-space: nowrap;
background: var(--surface2);
border: 1px solid var(--border);
padding: 0.2rem 0.65rem;
border-radius: 20px;
}
.chart-bar {
height: 6px;
background: var(--tickOff, var(--surface2));
border-radius: 3px;
overflow: hidden;
}
.chart-bar-fill {
height: 100%;
/* --accentFill (theme.js) is --accent itself, unless the accent is too
close in tone to the track/page surfaces to read as a fill (e.g. white
in light mode, black in dark mode) — then it's the theme's own
high-contrast neutral instead, same swap computeNavText already does
for text-on-accent. */
background: var(--accentFill, var(--accent));
border-radius: 3px;
transition: width 0.4s ease;
}
@media (max-width: 540px) {
.chart-row .chart-bar { display: none; }
.chart-row { grid-template-columns: 2.5rem 52px 1fr auto; }
}
/* ── Insights bar rows (years / sources / genres) ──────*/
.insights-bar-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.insights-bar-row {
display: grid;
grid-template-columns: 4.5rem 1fr auto;
align-items: center;
gap: 0.75rem;
}
.insights-bar-label {
font-size: 0.8rem;
color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Auto-sizing variant: label column grows to fit its widest label,
capped so the bar/value columns never get crowded out. */
.insights-bar-grid {
display: grid;
grid-template-columns: minmax(4.5rem, max-content) 1fr auto;
align-items: center;
row-gap: 0.6rem;
column-gap: 0.75rem;
}
.insights-bar-grid .insights-bar-row {
display: contents;
}
.insights-bar-grid .insights-bar-label {
max-width: 9rem;
}
@media (max-width: 540px) {
.insights-bar-grid {
display: flex;
flex-direction: column;
align-items: stretch;
row-gap: 0.6rem;
}
.insights-bar-grid .insights-bar-row {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 0.75rem;
}
.insights-bar-grid .insights-bar-label {
max-width: none;
flex: 0 1 auto;
min-width: 0;
}
.insights-bar-grid .chart-bar {
flex: 1 1 auto;
}
.insights-bar-grid .insights-bar-value {
flex: 0 0 auto;
}
}
.insights-bar-value {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--muted);
white-space: nowrap;
}
/* ── Dev Metrics column charts ──────────────────────────────────────────── */
.dev-metrics-colchart {
position: relative; /* anchors Server Metrics' threshold/cursor/restart overlays (below) */
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
height: 140px;
}
.dev-metrics-colchart.dev-srv-spark { height: 40px; gap: 1px; }
.dev-metrics-col {
position: relative;
flex: 1 1 0;
max-width: 28px;
display: flex;
align-items: flex-end;
height: 100%;
min-width: 2px;
}
.dev-metrics-col-bar {
width: 100%;
min-height: 2px;
background: var(--accentFill, var(--accent));
border-radius: 2px 2px 0 0;
transition: height 0.3s ease;
}
/* Styled tooltip on hover, matching .insights-clock-cell's data-tooltip pattern. */
.dev-metrics-col::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 0.35rem 0.6rem;
font-size: 0.75rem;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease;
}
.dev-metrics-col:hover::after {
opacity: 1;
}
.dev-metrics-col-start::after {
left: 0;
transform: none;
}
.dev-metrics-col-end::after {
left: auto;
right: 0;
transform: none;
}
.dev-metrics-colchart-labels {
display: flex;
justify-content: center;
gap: 2px;
margin-top: 0.4rem;
}
.dev-metrics-col-label {
flex: 1 1 0;
max-width: 28px;
min-width: 2px;
font-family: var(--mono);
font-size: 0.65rem;
color: var(--muted);
white-space: nowrap;
overflow: visible;
text-align: center;
}
/* ── Server Metrics dashboard ──────────────────────────────────────────── */
.dev-srv-strip {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.dev-srv-card {
position: relative;
overflow: hidden; /* a mini spark chart with many points (24h = 288 cols at min-width 2px) needs more width than this card has — clip it here rather than let it bleed across the page */
flex: 1 1 200px;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.85rem 1rem;
cursor: pointer;
transition: border-color 0.15s ease;
}
.dev-srv-card:hover { border-color: var(--accent); }
.dev-srv-card--expanded { border-color: var(--accent); }
.dev-srv-card--warn { border-color: var(--warning, #d4a017); }
.dev-srv-card--alarm { border-color: var(--danger); }
.dev-srv-card--na { cursor: default; opacity: 0.6; }
.dev-srv-card--na:hover { border-color: var(--border); }
.dev-srv-card-title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dev-srv-card-chip {
font-family: var(--mono);
font-size: 0.62rem;
text-transform: uppercase;
padding: 0.1rem 0.4rem;
border-radius: 4px;
border: 1px solid var(--border);
color: var(--muted);
}
.dev-srv-card-chip--warn { border-color: var(--warning, #d4a017); color: var(--warning, #d4a017); }
.dev-srv-card-chip--alarm { border-color: var(--danger); color: var(--danger); }
.dev-srv-card-value {
font-family: var(--sans);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
margin: 0.15rem 0 0.5rem;
}
.dev-srv-card-spark { height: 40px; }
.dev-srv-card-status {
font-family: var(--mono);
font-size: 0.68rem;
color: var(--muted);
}
.dev-srv-detail-panel {
margin-top: 1rem;
padding: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
}
/* A non-mini column chart's columns refuse to shrink below their 2px
min-width (see .dev-metrics-col above) — with 288+ columns (e.g. the 24h
range), that floor adds up to more width than a phone viewport has, so
without a scroll container of its own the chart bled past the page edge
instead of clipping or scrolling. These ids wrap both the bar chart and
its label row (rendered as siblings by renderTimeChart), so they scroll
together as one unit rather than drifting out of alignment. */
#dev-srv-detail-chart, #dev-srv-phase-chart {
overflow-x: auto;
}
#dev-srv-phases {
overflow-x: auto;
}
.dev-srv-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.dev-srv-detail-stats {
display: flex;
gap: 0.9rem;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--muted);
}
.dev-srv-detail-fields {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.6rem;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--muted);
}
/* Dashed threshold line, matching whichever alarm threshold the card mirrors
(see thresholds in the GET /api/dev/server-metrics response). */
.dev-srv-threshold {
position: absolute;
left: 0;
right: 0;
border-top: 1px dashed var(--danger);
opacity: 0.6;
}
/* The shared hover cursor — a vertical guide drawn at the same fractional X
across every chart wrapper carrying [data-cursor-chart], so hovering any
one chart shows "this is the same moment" on all the others at once. */
.dev-srv-cursor {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--accent);
opacity: 0.5;
pointer-events: none;
}
.dev-srv-phase-row { cursor: pointer; }
.dev-srv-phase-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.dev-srv-phase-row.active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* A process-restart marker on a process-sourced chart (an uptime reset
detected inside the range) — without this, a real restart's memory drop
reads as an unexplained cliff rather than what it actually was. */
.dev-srv-restart {
position: absolute;
top: 0;
bottom: -0.4rem;
width: 2px;
background: var(--muted);
opacity: 0.5;
}
.insights-bar-row-clickable {
cursor: pointer;
border-radius: 6px;
margin: -0.2rem -0.4rem;
padding: 0.2rem 0.4rem;
transition: background 0.15s ease;
}
.insights-bar-row-clickable:hover,
.insights-bar-row-clickable:focus-visible {
background: var(--surface2);
outline: none;
}
.insights-bar-row-clickable .insights-bar-label {
color: var(--text);
font-weight: 500;
}
.insights-year-months {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 0 0 0 1rem;
margin-top: 0.45rem;
}
.insights-year-months:empty { display: none; }
/* Top Genres reuses this exact year→month drill-down structure (real per-row
grid boxes, no display:contents trick — that trick is what .insights-bar-grid
uses for Sources/the old flat Genres row, and fighting it to also support
clickable/nested rows caused both a lost hover highlight (contents rows have
no box to paint a background onto) and stray empty drill-down rows (a
display override with equal specificity to `:empty { display: none }` won
by source order). Reusing .insights-bar-list's real-box rows sidesteps both;
this just widens the shared label column so a genre/artist name isn't
truncated at the default 4.5rem sized for "Jan"/"31st". */
#tile-genres .insights-bar-row { grid-template-columns: 9rem 1fr auto; }
/* Artist rows (nested under a genre) share ONE label column across the whole
drill-down instead of each row sizing independently — otherwise a short
name like "SWMRS" leaves its own row way more bar-track width than a row
with a long name, so the grey tracks don't line up between rows. subgrid
is what makes that possible while keeping each row a real box (so hover/
padding still work, unlike the display:contents trick used elsewhere in
this file): the container defines the 3 shared tracks — a fit-content(40%)
label column sized to the WIDEST artist name present, capped at 40% — and
each row subgrids into them instead of computing its own. */
#tile-genres .insights-year-months {
display: grid;
grid-template-columns: fit-content(40%) 1fr auto;
row-gap: 0.45rem;
column-gap: 0.75rem;
}
#tile-genres .insights-year-months:empty { display: none; }
#tile-genres .insights-year-months .insights-bar-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
}
/* The "View all →" link at the foot of a genre's artist drill-down (reuses
.tile-view-all's link styling — see home.js's tile links). Spans all 3
subgrid columns like the rows above it, rather than being squeezed into
just the label column. */
.insights-genre-viewall-row {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
margin-top: 0.3rem;
}
.insights-bar-row-month .insights-bar-label { font-size: 0.75rem; }
.insights-bar-row-month .chart-bar-fill { opacity: 0.25; }
.insights-bar-row-day .insights-bar-label { font-size: 0.7rem; }
.insights-bar-row-day .chart-bar-fill { opacity: 0.18; }
.chart-loading-inline {
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem 0;
}
.chart-loading-inline .spinner { width: 18px; height: 18px; }
/* ── Art thumbnails ───────────────────────────────────*/
.art-thumb {
position: relative;
background: var(--surface2);
border-radius: 7px;
overflow: hidden;
flex-shrink: 0;
}
.track-row .art-thumb { width: 44px; height: 44px; }
.chart-row .art-thumb { width: 52px; height: 52px; }
.art-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 7px;
opacity: 0;
transition: opacity 0.2s ease;
}
.art-img.art-loaded { opacity: 1; }
@keyframes art-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.art-thumb.art-loading {
background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
background-size: 200% 100%;
animation: art-shimmer 1.4s ease-in-out infinite;
}
.art-thumb.art-no-art::after {
content: "?";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-family: var(--sans);
color: var(--muted);
pointer-events: none;
}
/* ── Upload ───────────────────────────────────────────*/
/* .upload-area is the shared box for every upload-flow panel (drop zone,
column-mapping preview, scan progress, confirm screen, …) — most of them
want the mockup's solid card border; only the empty drop zone itself
wants the dashed treatment, added via .upload-area--drop (toggled in
showOnly(), public/js/utils.js) so the other panels are unaffected. */
.upload-area {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
margin-bottom: 2rem;
}
.upload-area--drop {
border-style: dashed;
border-width: 1.5px;
}
.upload-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.4rem 2rem;
gap: 0.6rem;
text-align: center;
cursor: pointer;
transition: background 0.15s;
}
.upload-inner:hover, .upload-inner.drag-over {
background: var(--surface2);
}
.upload-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--chip);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.3rem;
}
.upload-title { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.upload-sub { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.upload-format {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
margin-top: 0.4rem;
}
.upload-format-chip {
font-family: var(--mono);
font-size: 0.62rem;
color: var(--muted);
background: var(--chip);
border: 1px solid var(--border);
border-radius: 7px;
padding: 0.3rem 0.55rem;
}
.upload-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 3rem;
color: var(--muted);
font-size: 0.875rem;
}
.spinner {
width: 28px; height: 28px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.chart-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 0;
}
.progress-bar-wrap {
width: 100%;
max-width: 320px;
height: 4px;
background: var(--surface2);
border-radius: 2px;
overflow: hidden;
}
.progress-bar {
height: 100%;
/* Same rationale as .chart-bar-fill — see --accentFill in theme.js. */
background: var(--accentFill, var(--accent, #e87d3e));
border-radius: 2px;
width: 0%;
transition: width 0.3s ease;
}
.upload-result {
padding: 1.5rem;
text-align: center;
font-family: var(--mono);
font-size: 0.85rem;
}
.upload-result.success { color: #4caf7d; }
.upload-result.error { color: var(--danger); }
.upload-result-note {
margin-top: 0.75rem;
color: var(--muted);
font-size: 0.78rem;
line-height: 1.5;
}
.hidden { display: none !important; }
.link-btn {
background: none; border: none; cursor: pointer;
color: var(--accent); font-family: inherit; font-size: inherit;
text-decoration: underline; text-underline-offset: 2px;
}
.export-guide-link-row {
text-align: center;
font-size: 0.82rem;
margin: 2rem 0;
}
/* ── Danger zone ──────────────────────────────────────*/
.btn-export {
background: none;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.75rem;
padding: 0.4rem 0.9rem;
border-radius: 18px;
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
}
.btn-export:hover { color: var(--text); border-color: var(--muted); }
/* ── Upload preview ───────────────────────────────────────*/
.upload-preview {
padding: 1.5rem;
}
.preview-header {
margin-bottom: 1rem;
}
.preview-title {
font-family: var(--mono);
font-size: 0.82rem;
color: var(--text);
margin-bottom: 0.25rem;
}
.preview-sub {
font-size: 0.77rem;
color: var(--muted);
}
.preview-scroll {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 0.75rem;
}
.auto-preview-scroll {
max-height: 200px;
overflow-y: auto;
}
.preview-table {
width: 100%;
border-collapse: collapse;
font-size: 0.77rem;
}
.preview-table thead th {
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--border);
background: var(--surface2);
white-space: nowrap;
}
.preview-table tbody td {
padding: 0.4rem 0.6rem;
border-bottom: 1px solid var(--border);
color: var(--muted);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.preview-table tbody tr:last-child td { border-bottom: none; }
.col-select {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--mono);
font-size: 0.7rem;
padding: 0.25rem 0.4rem;
border-radius: 4px;
cursor: pointer;
width: 100%;
min-width: 80px;
}
.col-select:focus { outline: none; border-color: var(--accent); }
.preview-error {
font-family: var(--mono);
font-size: 0.75rem;
color: var(--danger);
margin-bottom: 0.75rem;
min-height: 1rem;
}
.preview-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}
.btn-preview-cancel {
background: none;
border: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.77rem;
padding: 0.45rem 1rem;
border-radius: 20px;
cursor: pointer;
transition: all 0.15s;
}
.btn-preview-cancel:hover { color: var(--text); border-color: var(--muted); }
.btn-preview-import {
background: var(--accentFill, var(--accent));
border: 1px solid var(--accentFill, var(--accent));
color: var(--accentFillText, var(--navText));
font-family: var(--mono);
font-size: 0.77rem;
padding: 0.45rem 1.25rem;
border-radius: 22px;
cursor: pointer;
transition: opacity 0.15s;
}
.btn-preview-import:hover:not(:disabled) { opacity: 0.85; }
.btn-preview-import:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-preview-import--danger {
background: var(--danger);
border-color: var(--danger);
}
.btn-preview-import--danger:hover:not(:disabled) { opacity: 0.85; }
/* ── Format badge ─────────────────────────────────────*/
.format-badge {
font-family: var(--mono);
font-size: 0.7rem;
background: var(--surface2);
color: var(--accent2);
padding: 0.15rem 0.45rem;
border-radius: 3px;
white-space: nowrap;
}
/* ── Confirm stats (duplicate check result) ───────────*/
.confirm-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.6rem;
padding: 0.75rem 0 1rem;
}
@media (max-width: 700px) {
.confirm-stats { grid-template-columns: repeat(2, 1fr); }
}
.confirm-stat {
display: flex;
flex-direction: column;
gap: 0.2rem;
align-items: center;
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0.9rem 1rem;
}
/* Data, not chrome — Space Grotesk per docs/design-language.md, same fix as
.home-stat-n/.mbid-stat-n. Per-variant colors match the mockup exactly:
found/in-library/in-file stay neutral, new is accent, deleted is berry. */
.confirm-n {
font-family: var(--sans);
font-size: 1.4rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.confirm-l {
font-size: 0.72rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.confirm-stat-new .confirm-n { color: var(--accent); }
.confirm-stat-deleted .confirm-n { color: var(--berry); }
.confirm-enrich {
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 0.75rem;
}
.confirm-preview-scroll {
max-height: 200px;
overflow-y: auto;
margin-bottom: 0.75rem;
}
/* ── Duplicate review section ─────────────────────────*/
.dupes-details {
margin: 0.75rem 0;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.dupes-summary {
list-style: none;
cursor: pointer;
padding: 0.55rem 0.85rem;
font-family: var(--mono);
font-size: 0.75rem;
color: var(--muted);
background: var(--surface2);
user-select: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dupes-summary::-webkit-details-marker { display: none; }
.dupes-summary::before {
content: "▶";
font-size: 0.6rem;
transition: transform 0.15s;
}
.dupes-details[open] > .dupes-summary::before { transform: rotate(90deg); }
.dupes-summary:hover { color: var(--text); }
.dupes-count-badge {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.05rem 0.35rem;
font-size: 0.7rem;
}
.dupes-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
}
.dupes-tab {
background: none;
border: none;
border-right: 1px solid var(--border);
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
padding: 0.4rem 0.85rem;
cursor: pointer;
white-space: nowrap;
transition: color 0.12s, background 0.12s;
}
.dupes-tab:hover { color: var(--text); background: var(--surface2); }
.dupes-tab.active { color: var(--text); background: var(--surface); }
a.dupes-tab { text-decoration: none; }
.dupes-scroll {
max-height: 320px;
overflow-y: auto;
}
.dupes-scroll .track-list {
border-radius: 0;
border-left: none;
border-right: none;
border-top: none;
}
/* These track-rows have no art thumbnail, so override to 2-column layout */
.dupes-scroll .track-row,
.confirm-preview-scroll .track-row {
grid-template-columns: 1fr auto;
}
.dupes-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
table-layout: fixed;
}
.dupes-table th:nth-child(1) { width: 2rem; } /* checkbox */
.dupes-table th:nth-child(3) { width: 2rem; } /* ↔ sep */
.dupes-table thead th {
padding: 0.35rem 0.65rem;
border-bottom: 1px solid var(--border);
background: var(--surface2);
color: var(--muted);
font-family: var(--mono);
font-size: 0.68rem;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: left;
}
.dupes-table tbody td {
padding: 0.45rem 0.65rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.dupes-table tbody tr:last-child td { border-bottom: none; }
.dupes-table tbody tr:hover td { background: var(--surface2); }
.dupe-col-check { width: 1.75rem; text-align: center; }
.dupe-track-name {
display: block;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dupe-meta {
display: block;
color: var(--muted);
font-size: 0.72rem;
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dupe-sep {
width: 1.5rem;
text-align: center;
color: var(--muted);
font-size: 0.8rem;
vertical-align: middle;
}
.dupe-existing .dupe-track-name { color: var(--muted); }
.dupes-more {
text-align: center;
color: var(--muted);
font-size: 0.72rem;
font-family: var(--mono);
padding: 0.5rem;
}
.dupes-footer {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 0.75rem;
border-top: 1px solid var(--border);
background: var(--surface2);
font-size: 0.75rem;
}
.dupes-check-all-label {
display: flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
color: var(--muted);
font-family: var(--mono);
font-size: 0.72rem;
}
.dupes-check-all-label:hover { color: var(--text); }
.dupes-selected-count {
font-family: var(--mono);
font-size: 0.72rem;
color: #4caf7d;
}
/* ── Modal ─────────────────────────────────────────────*/
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 1100;
}
/* Confirm dialog uses a native