/* ═══════════════════════════════════════════════════════════════════
Fretly — Design System
Single CSS file for all pages. Light/dark via [data-theme].
═══════════════════════════════════════════════════════════════════
── Scales-page style contract (DO NOT BREAK) ──────────────────────
Every rule that styles the Scales page today is the canonical
"v1" layout. The `data-scales-style` attribute is owned at runtime
by /assets/js/scales-style.js — it sets it on pre-paint
(no FOUC) and mirrors onto `#route-scales` on DOMContentLoaded.
Current default is "v2" (Scale-Explorer-inspired redesign). The
user can flip to "v1" via the toolbar toggle or the URL param
?scalesStyle=v1 — either will restore this file's rules 1:1.
The v2 skin lives entirely in /assets/css/scales-v2.css under
selectors of the form
html[data-scales-style="v2"] #route-scales …
That file is additive: it only overrides v1 rules when the
attribute flips to "v2".
If you're tempted to edit a Scales-page rule here, ask first
whether the change should belong to v1 (affects both skins) or
v2 (add an override in scales-v2.css instead).
═══════════════════════════════════════════════════════════════════ */
/* ── Fonts ── */
/* Loaded via in app.php for non-blocking delivery */
/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
/* Spacing */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* Radius */
--r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
/* Typography */
--font: 'DM Sans', system-ui, sans-serif;
--font-mono: 'DM Mono', monospace;
/* Accent */
--accent: #e8874a;
/* RGB channels of --accent, for rgba(var(--accent-rgb), a) usage. Was
referenced but never defined — callers fell back to ad-hoc, mismatched
literals (52,152,219 / 255,140,0 / 46,91,138). Single source now. */
--accent-rgb: 232, 135, 74;
--accent-hover: #d4713a;
--accent-bg: rgba(232,135,74,.12);
--accent-bg-hover: rgba(232,135,74,.2);
/* Transitions */
--transition: 150ms ease;
/* Unified vertical gap between all panels — one variable to respace everything */
--panel-gap: var(--sp-4);
}
/* ── Light theme ────────────────────────────────────────────────────── */
[data-theme="light"], :root {
--bg: #f5f4f1;
--bg-2: #ffffff;
--bg-3: #f0eeeb;
--surface: #ffffff;
--surface-2: #f7f6f3;
--border: rgba(0,0,0,0.09);
--border-strong: rgba(0,0,0,0.18);
--text: #1a1a18;
--text-1: var(--text); /* alias: primary text (used app-wide) */
--text-2: #4a4a46;
--text-3: #8a8a84;
/* Muted family (draft pills, spinners) — alias to theme tokens so
they invert correctly per theme instead of falling back to fixed light greys. */
--muted: var(--border-strong);
--muted-soft: var(--surface-2);
--muted-strong: var(--text-2);
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
--shadow-lg: 0 2px 8px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.07);
--board-bg: #ffffff;
/* Primary panel/surface bg. Was referenced (admin panels, modals, headers)
but never defined → those backgrounds rendered transparent. Alias to
--surface so it inverts per theme. */
--bg-1: var(--surface);
}
/* ── Dark theme ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
--bg: #141412;
--bg-2: #1c1c1a;
--bg-3: #111110;
--surface: #1c1c1a;
--surface-2: #242422;
--border: rgba(255,255,255,0.08);
--border-strong: rgba(255,255,255,0.16);
--text: #e8e8e4;
--text-1: var(--text); /* alias: primary text (used app-wide) */
--text-2: #a8a8a2;
--text-3: #686864;
/* Muted family (draft pills, spinners) — alias to theme tokens so
they invert correctly per theme instead of falling back to fixed light greys. */
--muted: var(--border-strong);
--muted-soft: var(--surface-2);
--muted-strong: var(--text-2);
--shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 2px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.4);
--board-bg: #1c1c1a;
/* see light-theme note */
--bg-1: var(--surface);
}
/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scrollbar-gutter: stable;
/* Root font-size = admin-tunable base * user-controlled scale.
Two layers of override:
- `--base-font-px` is the admin's per-installation baseline
(set by fretly-ui-scale.js from server-rendered
FretlyDesignTokens, default 14 px). Persists site-wide.
- `--ui-scale` is the user's per-device multiplier (Account
> Display card or gear popover > Display tab).
Pixel-fixed sizes stay constant; they migrate to tokens
incrementally per CLAUDE.md design-tokens doctrine. */
font-size: calc(var(--base-font-px, 14px) * var(--ui-scale, 1));
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; /* prevent iOS font-size inflation */
touch-action: pan-x pan-y; /* allow scroll, block pinch-zoom */
}
/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
/* ══════════════════════════════════════════════════════════════════════
LAYOUT
══════════════════════════════════════════════════════════════════════ */
/* When window loses focus, disable pointer-events on the entire page.
This prevents macOS from re-evaluating :hover / showing "Open in new tab"
status-bar hints when modifier keys (Cmd/Alt) are pressed in other windows. */
html:not(.window-focused) .app-shell { pointer-events: none; }
.app-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* ── Navbar ─────────────────────────────────────────────────────────── */
/* Tokens applied per CLAUDE.md "TOP-PRIORITY DOCTRINE - Design
tokens + UI scale". Navbar is the highest-traffic chrome in the
app - every page visit shows it, so token-driven scaling here
propagates the user's Interface size choice immediately. */
.navbar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
min-height: 3.7143rem; /* 52 px @ 14px rem */
background: var(--surface);
border-bottom: var(--border-w) solid var(--border);
display: flex;
align-items: center;
flex-wrap: nowrap;
/* Zero vertical padding so nav-item s stretched via
align-self:stretch fill the entire visible navbar rectangle
(top-to-bottom). Horizontal padding stays for breathing room
on either edge. User 2026-05-18: "the whole rectangle"
should be clickable. */
padding: 0 var(--space-xl);
gap: var(--space-xs) var(--space-md);
box-shadow: var(--shadow);
}
.navbar-brand {
font-size: var(--font-xl);
font-weight: var(--weight-semibold);
color: var(--text);
text-decoration: none;
letter-spacing: -0.02em;
margin-right: var(--space-md);
flex-shrink: 0;
}
.navbar-brand span { color: var(--accent); }
.navbar-nav {
display: flex;
align-items: stretch; /* let nav items fill full navbar height */
align-self: stretch; /* fill the navbar's vertical slab itself */
gap: var(--space-2xs);
flex: 1;
list-style: none;
flex-wrap: nowrap;
overflow: visible;
min-width: 0;
/* Strip default spacing so the stretched - rows hit the
navbar edges cleanly (no padding-top stealing the click area). */
margin: 0;
padding: 0;
}
/* Each top-level nav
- stretches to fill the navbar's height so the
entire vertical slab is a hover/click target — not just the small
text strip. Fixes "only a thin strip on top of the words is
clickable" (user 2026-05-18). */
.navbar-nav > li {
display: flex;
align-items: stretch;
/* Fill the parent .navbar-nav's cross-axis explicitly. Belt-and-
braces alongside .navbar-nav's `align-items: stretch` — some
browsers don't propagate the stretch chain reliably when the
grandparent (.navbar) has align-items: center. */
align-self: stretch;
/* No internal padding — let the child own the hit area. */
padding: 0;
}
/* TOP-LEVEL nav anchors only — direct children of nav
- .
The dropdown item anchors (.nav-dropdown a) keep their own
compact styling further down. */
.navbar-nav > li > a {
display: flex;
align-items: center;
padding: 0 var(--space-md);
border-radius: 0; /* rectangular slab fills navbar */
font-size: var(--font-sm);
font-weight: var(--weight-medium);
color: var(--text-2);
text-decoration: none;
transition: color var(--t-fast), background var(--t-fast);
/* Three layers of "fill the navbar vertically" so every top-
level item — plain (Home/Theory) AND dropdown trigger
(.nav-has-dropdown) — has a click target stretching from
navbar top to navbar bottom. */
align-self: stretch;
min-height: 3.7143rem; /* matches .navbar min-height (52 px) */
width: 100%;
box-sizing: border-box;
}
/* Hover + active state — TOP-LEVEL anchors only. Highlight stays
lit while the cursor is anywhere inside the
- (the anchor,
the invisible bridge below it, or the open dropdown panel) so
the trigger doesn't visually "disappear" while hovering the
submenu. User 2026-05-18. */
.window-focused .navbar-nav > li > a:hover,
.window-focused .navbar-nav > li:hover > a,
.window-focused .navbar-nav > li:focus-within > a {
color: var(--text);
background: var(--bg-3);
}
.navbar-nav > li.active > a {
color: var(--accent);
background: var(--accent-bg);
}
/* ── Navbar dropdown (sub-menu under a nav item) ──────────────────────── */
.nav-has-dropdown {
position: relative;
/* No vertical "tail" — the
- already stretches the full navbar
height (see .navbar-nav > li above), so the hover trigger covers
the entire row. The 6 px bridge below is preserved as a hover-
extension only, not as a layout shim. */
}
.nav-has-dropdown::after {
/* Hover-bridge — REMOVED pointer-events (was capturing hover from
cursor movement toward content directly below the navbar, like
style pills, triggering the submenu accidentally even with the
300ms hover-intent delay). Per user 2026-06-01: "submenu still
opens when hovering below."
Submenu→panel hover continuity now relies SOLELY on the
`.nav-dropdown:hover` selector + the 150ms close-grace window
(transition delay) — cursor leaving the trigger and landing on
the panel within 150ms keeps the panel open. Click-proxy of
the gap to the trigger's href (a nice-to-have, not critical)
is also dropped — users who want to navigate to the trigger
page can click the navbar text directly. */
content: '';
position: absolute;
left: 0; right: 0;
top: 100%;
height: 8px;
pointer-events: none;
}
.nav-has-dropdown > a::after {
content: '';
display: inline-block;
width: 0; height: 0;
margin-left: 4px;
border-left: 3.5px solid transparent;
border-right: 3.5px solid transparent;
border-top: 4px solid currentColor;
opacity: 0.5;
vertical-align: middle;
}
.nav-dropdown {
/* Forgiving close, instant open. Open is zero-duration so the
submenu appears the frame the cursor lands on the trigger
(user feedback 2026-05-12 — "I want instantaneous response on
hovering on the navbar items"). Close keeps a 150 ms grace
window — tightened 2026-05-18 from 350 ms per user "make sure
the submenus open faster" + cursor can still travel from
trigger to panel through the hover-bridge below. */
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: visibility 0s 150ms, opacity 100ms 150ms;
position: absolute;
top: 100%;
left: 0;
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 12.1429rem; /* 170 px @ 14px rem */
z-index: var(--z-dropdown);
list-style: none;
padding: var(--space-xs) 0;
margin: 0;
}
/* Invisible bridge so the cursor can travel from nav item to dropdown */
/* Hover-bridge — invisible buffer that surrounds the dropdown so
the cursor can stray around its edges without breaking hover.
Top buffer covers the gap between trigger and panel; side and
bottom buffers add a generous "moat" around the panel itself. */
.nav-dropdown::before {
/* Visual moat only. pointer-events:none so clicks fall THROUGH
to the trigger beneath — this ::before overlapped the
bottom 22 px of the trigger row and was eating clicks there
(user 2026-05-18: "only works from the actual text and
upward"). Hover continuity is preserved by the .nav-has-
dropdown:hover rule on the parent LI, which catches hover
anywhere inside the LI + its ::after bridge. */
content: '';
position: absolute;
top: -22px;
left: -16px;
right: -16px;
bottom: -16px;
z-index: -1;
pointer-events: none;
}
.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown,
.nav-dropdown:hover {
visibility: visible;
opacity: 1;
pointer-events: auto;
/* Hover-intent delay on OPEN — 300ms is the industry-standard
hover-intent threshold (jQuery hoverIntent's default, used by
GitHub, Stripe, etc.). Cursor must DWELL on the trigger for
this duration before the submenu opens. Brief passes through
(cursor traveling toward style pills below the navbar, etc.)
don't trigger. Per user 2026-06-01: "submenu should open when
I actually hover the navbar, not below it." */
transition: visibility 0s 300ms, opacity 0s 300ms;
}
/* Keyboard focus opens instantly — focus-within is an explicit
navigation gesture, not an accidental brush. */
.nav-has-dropdown:focus-within > .nav-dropdown {
transition: visibility 0s, opacity 0s;
}
.nav-dropdown li { list-style: none; }
.nav-dropdown a {
display: block;
padding: var(--space-sm) var(--space-md);
font-size: var(--font-sm);
font-weight: var(--weight-medium);
color: var(--text-2);
text-decoration: none;
white-space: nowrap;
border-radius: 0;
}
.nav-dropdown a:hover {
color: var(--text);
background: var(--bg-3);
}
.nav-dropdown li.active a {
color: var(--accent);
background: var(--accent-bg);
}
.navbar-end {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-left: auto;
}
/* Theme toggle button */
.btn-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--bg-3); color: var(--text); }
.btn-icon.active { background: var(--accent-bg); color: var(--accent); }
.btn-icon.active:hover { background: var(--accent-bg); }
.btn-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Hide irrelevant theme icon */
[data-theme="light"] .icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
/* ── Page container ─────────────────────────────────────────────────── */
.page-wrap {
flex: 1;
padding: var(--sp-8) var(--sp-6) var(--sp-10);
max-width: 1600px;
width: 100%;
margin: 0 auto;
}
/* ── Route sections ─────────────────────────────────────────────────── */
.route-section {
display: none;
}
.route-section.active {
display: block;
}
/* ══════════════════════════════════════════════════════════════════════
HOME PAGE
══════════════════════════════════════════════════════════════════════ */
.home-hero {
padding: var(--sp-10) 0 var(--sp-6);
max-width: 560px;
}
/* ── Live hero (2026-07-02): text + clickable board ─────────────── */
.home-hero--live {
max-width: none;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: var(--sp-8);
align-items: center;
}
.home-hero__try {
margin-top: var(--sp-3);
font-size: 13px;
font-weight: 600;
color: var(--accent);
}
.home-hero__board {
padding: var(--sp-4);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.home-hero__svg { width: 100%; height: auto; display: block; }
.home-hero__svg .hh-dot {
cursor: pointer;
transform-box: fill-box;
transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
/* entrance: dots pop in sequence, then settle */
.home-hero__svg .hh-dot {
animation: hh-pop .45s cubic-bezier(.2, .9, .4, 1.4) backwards;
animation-delay: var(--hh-delay, 0ms);
}
@keyframes hh-pop {
from { opacity: 0; transform: scale(.3); }
to { opacity: 1; transform: scale(1); }
}
/* click feedback: quick ping (class re-added per click by home-hero.js) */
.home-hero__svg .hh-dot.is-played { animation: hh-ping .35s ease-out; }
@keyframes hh-ping {
30% { transform: scale(1.35); }
to { transform: scale(1); }
}
.home-hero__svg .hh-dot:hover { transform: scale(1.12); transition: transform .12s; }
}
@media (max-width: 860px) {
.home-hero--live { grid-template-columns: 1fr; gap: var(--sp-5); }
}
/* ── Founding-member band (navy, copy from the active tier plan) ── */
.home-band {
margin: var(--sp-6) 0;
padding: var(--sp-8) var(--sp-6);
background: var(--home-band-bg, #22304e);
border-radius: var(--r-lg);
}
.home-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
flex-wrap: wrap;
max-width: 820px;
margin: 0 auto;
}
.home-band__title {
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 var(--sp-2);
}
.home-band__price { color: var(--accent); margin-left: var(--sp-2); }
.home-band__tagline {
margin: 0;
font-size: 14px;
color: rgba(255, 255, 255, .75);
line-height: 1.5;
}
.home-band__cta {
flex: 0 0 auto;
padding: var(--sp-3) var(--sp-6);
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: 15px;
border-radius: var(--r-md);
text-decoration: none;
transition: background .15s;
}
.home-band__cta:hover { background: var(--accent-hover, #d4861e); }
/* ── Section rhythm: hover lift + scroll reveal (motion-gated) ──── */
@media (prefers-reduced-motion: no-preference) {
.home-preview {
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-preview:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
border-color: var(--accent);
}
.home-reveal { opacity: 0; transform: translateY(14px); }
.home-reveal.home-revealed {
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .5s ease;
}
}
.home-hero h1 {
font-size: clamp(28px, 5vw, 42px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: var(--sp-3);
}
.home-hero h1 em {
font-style: normal;
color: var(--accent);
}
.home-hero p {
font-size: 15px;
color: var(--text-2);
line-height: 1.6;
}
/* ── Home preview sections ─────────────────────────────────────── */
.home-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: center;
padding: var(--sp-8) var(--sp-6);
margin-bottom: var(--sp-4);
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-decoration: none;
color: var(--text);
transition: border-color var(--transition), box-shadow var(--transition);
cursor: pointer;
}
.window-focused .home-preview:hover {
border-color: var(--accent);
box-shadow: var(--shadow-lg);
color: var(--text);
text-decoration: none;
}
.home-preview--reverse {
direction: rtl;
}
.home-preview--reverse > * {
direction: ltr;
}
.home-preview__title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--sp-2);
color: var(--text);
}
.home-preview__desc {
font-size: 14px;
line-height: 1.65;
color: var(--text-2);
margin-bottom: var(--sp-3);
}
.home-preview__features {
display: block;
font-size: 12px;
color: var(--text-3);
margin-bottom: var(--sp-4);
line-height: 1.5;
}
.home-preview__cta {
display: inline-block;
font-size: 13px;
font-weight: 600;
color: var(--accent);
transition: color var(--transition);
}
.window-focused .home-preview:hover .home-preview__cta {
color: var(--accent-hover);
}
.home-preview__visual {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-5);
border-radius: var(--r-md);
background: var(--bg-2);
overflow: hidden;
}
.home-preview__svg {
width: 100%;
max-width: 400px;
height: auto;
}
/* Responsive: stack on smaller screens */
@media (max-width: 700px) {
.home-preview {
grid-template-columns: 1fr;
gap: var(--sp-4);
}
.home-preview--reverse {
direction: ltr;
}
.home-preview__visual {
order: -1;
}
}
/* ══════════════════════════════════════════════════════════════════════
SHARED: TOOLBAR (Scales + Chords share this structure)
══════════════════════════════════════════════════════════════════════ */
.toolbar {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--panel-gap);
box-shadow: var(--shadow);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-3) var(--sp-4);
}
@media (max-width: 640px) {
.toolbar { padding: var(--sp-3); gap: var(--sp-2) var(--sp-3); }
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1 1 120px;
min-width: 100px;
max-width: 200px;
}
.form-group label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-3);
}
.form-control {
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
font-family: var(--font);
font-size: var(--font-sm);
font-weight: var(--weight-medium);
color: var(--text);
background: var(--surface-2);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
background-size: 0.7857rem; /* 11 px @ 14px rem */
padding-right: var(--space-xl);
cursor: pointer;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 0.2143rem var(--accent-bg); /* 3 px @ 14px rem */
}
.form-control:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Ghost notes toggle button — looks like a select, toggles on click */
.ghost-toggle {
/* Override the dropdown arrow from .form-control */
background-image: none;
padding-right: 10px;
text-align: left;
width: 100%;
}
/* All toggle buttons use normal text color regardless of state */
/* Read-only span styled like a select */
.form-readonly {
height: 34px;
padding: 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text-2);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
display: flex;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Toolbar divider */
.toolbar-divider {
width: 1px;
height: 34px;
background: var(--border);
flex-shrink: 0;
align-self: flex-end;
}
/* ── Scale/Mode path visibility ─────────────────────────────────────── */
#scaleRow { display: flex; }
#parentRow { display: none; }
#modeRow { display: none; }
.toolbar[data-path="mode"] #scaleRow { display: none; }
.toolbar[data-path="mode"] #parentRow { display: flex; }
.toolbar[data-path="mode"] #modeRow { display: flex; }
/* ══════════════════════════════════════════════════════════════════════
BOARDS GRID
══════════════════════════════════════════════════════════════════════ */
.boards-area {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 0 20px;
box-shadow: var(--shadow);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: stretch;
position: relative; /* establishes containing block for the staging div */
}
.boards-grid {
display: grid;
gap: var(--sp-4);
}
/* When the container holds individual gallery-style cards, strip the outer box visuals.
No padding — gallery cards go full-width to match toolbar and info-panel. */
.boards-area--cards {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.boards-area--cards .boards-grid {
gap: var(--panel-gap);
}
/* Multi-column: strip outer boards-area card so each board-card is its own card */
.boards-area:has(.boards-grid--cols-2),
.boards-area:has(.boards-grid--cols-3) {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.boards-grid--cols-2,
.boards-grid--cols-3 {
gap: var(--panel-gap);
}
.boards-grid--cols-2 > .board-card,
.boards-grid--cols-3 > .board-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: 0 20px;
}
/* Single column by default; JS overrides grid-template-columns */
.board-card {
/* Transparent — the boards-area card is the visible container */
background: transparent;
border: none;
border-radius: 0;
overflow: hidden;
padding: 0;
min-width: 0; /* Allow grid columns to shrink below SVG intrinsic width */
}
.board-card-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) var(--sp-4);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.board-card-title a {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
color: var(--text-3);
text-decoration: none;
}
.board-card-title a:hover { color: var(--accent); }
.board-card {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center; /* centre iframe horizontally if narrower than card */
}
.board-card iframe {
width: 100%;
min-height: 160px;
border: 0;
display: block;
}
/* Inline SVG boards — exact pixel dimensions set by JS, no CSS scaling. */
.board-card svg {
display: block;
overflow: visible;
}
/* ── Fretboard Actions: copy button ─────────────────────────────────── */
.fba-copy-btn {
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;padding:0;border:none;border-radius:var(--r-sm);
background:transparent;color:var(--text-3);cursor:pointer;
flex-shrink:0;transition:color .15s,background .15s;
}
.fba-copy-btn svg { width:13px;height:13px; }
.fba-copy-btn:hover { color:var(--accent);background:var(--accent-bg); }
.fba-open-link {
font-size:12px;font-weight:500;color:var(--accent);text-decoration:none;
white-space:nowrap;flex-shrink:0;
}
.fba-open-link:hover { text-decoration:underline; }
/* ── Fretboard Actions: context menu ───────────────────────────────── */
.fba-ctx-menu {
position:fixed;z-index:20001;
min-width:180px;padding:4px 0;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.18);
font-size:13px;font-weight:500;color:var(--text);
animation:fba-fade-in .12s ease-out;
}
@keyframes fba-fade-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.fba-ctx-item {
display:flex;align-items:center;gap:8px;width:100%;
padding:7px 14px;border:none;background:none;
color:var(--text);font:inherit;cursor:pointer;text-align:left;
}
.fba-ctx-item:hover { background:var(--accent-bg);color:var(--accent); }
.fba-ctx-icon { display:inline-flex;width:16px;height:16px;flex-shrink:0; }
.fba-ctx-icon svg { width:16px;height:16px; }
.fba-ctx-sep { height:1px;margin:4px 10px;background:var(--border); }
.fba-ctx-chk { font-size:15px;line-height:1;flex-shrink:0;opacity:.7; }
.fba-ctx-item--active { color:var(--accent);font-weight:600; }
.fba-ctx-item--active .fba-ctx-chk { opacity:1; }
/* ── Fretboard Actions: toast ──────────────────────────────────────── */
.fba-toast {
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(12px);
z-index:10000;padding:8px 18px;
background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-md);box-shadow:0 4px 16px rgba(0,0,0,.14);
font-size:13px;font-weight:500;color:var(--text);
opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
}
.fba-toast--show { opacity:1;transform:translateX(-50%) translateY(0); }
/* Empty / loading state */
.boards-empty {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-10);
color: var(--text-3);
font-size: 13px;
}
/* ══════════════════════════════════════════════════════════════════════
INFO PANEL (shared Scales + Chords)
══════════════════════════════════════════════════════════════════════ */
.info-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-5);
margin-top: var(--panel-gap);
box-shadow: var(--shadow);
font-size: 13px;
}
.info-panel h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: var(--sp-4);
color: var(--text);
}
.info-grid {
column-count: var(--info-cols, 3);
column-gap: var(--sp-5);
column-fill: balance;
}
@media (max-width: 900px) { .info-grid { column-count: 2; } }
@media (max-width: 560px) { .info-grid { column-count: 1; } }
/* ── Info panel header (h4 + optional col-ctrl / gallery button) ──
Replaces the legacy inline flex style on .info-panel headers. */
.info-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-4);
gap: var(--sp-3);
}
.info-panel-header > h4 { margin: 0; }
.info-panel-header-right {
display: flex;
align-items: center;
gap: var(--sp-3);
}
/* Section header (h4 + col-ctrl) used inside subScalesPanel */
.info-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin: 0 0 var(--sp-4) 0;
}
.info-section-header > h4 { margin: 0; }
/* ── Column control (− [n] +) — mirrors Scale Explorer's rel-col-ctrl ── */
.info-col-ctrl {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--r-sm);
overflow: hidden;
flex-shrink: 0;
}
.info-col-minus,
.info-col-plus {
width: 24px; height: 22px;
border: none;
background: var(--surface);
color: var(--text-2);
font-size: 13px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .12s;
}
.info-col-minus:hover,
.info-col-plus:hover {
background: var(--surface-2);
color: var(--text);
}
.info-col-input {
width: 24px; height: 22px;
border: none;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
background: var(--surface-2);
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--text);
font-family: var(--font);
padding: 0;
}
/* Gallery shortcut button inside info-panel headers */
.info-panel-gallery-btn {
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
}
/* Variant: header with only a right-aligned control (no h4) */
.info-panel-header--right {
justify-content: flex-end;
}
/* Divider between stacked info-panel sections (e.g. subScalesPanel) */
.info-section-divider {
border-top: 1px solid var(--border);
margin: var(--sp-5) 0;
}
.info-col {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin-bottom: var(--sp-5);
display: inline-block;
width: 100%;
}
.info-section-head {
display: block;
padding: 5px var(--sp-3);
margin-bottom: var(--sp-2);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-2);
}
.info-line {
padding: 2px var(--sp-3);
line-height: 1.6;
color: var(--text-2);
}
.chord-type-label {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--text-3);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 1px 5px;
margin-right: var(--sp-2);
vertical-align: baseline;
}
.info-line a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color var(--transition), opacity var(--transition);
}
.info-line a:hover {
border-bottom-color: var(--accent);
opacity: 0.8;
}
.info-keysep {
position: relative;
border: 0;
border-top: 1px solid var(--border);
margin: var(--sp-4) var(--sp-3);
}
.info-keysep::before {
content: attr(data-key);
position: absolute;
top: -10px;
left: 0;
background: var(--surface);
padding: 0 6px;
font-size: 11px;
font-weight: 700;
color: var(--text-3);
font-family: var(--font-mono);
}
/* ══════════════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════════════ */
/* ── Mid-width (tablet / small laptop): clean two-row navbar ───────────
Row 1: brand + navbar-end (always right-aligned, never displaced)
Row 2: nav links — full width, wrapping allowed
Kicks in before the nav links would cause messy wrapping on desktop. */
/* Navbar stays on ONE row at every desktop-ish width. The
navbar-overflow.js module measures overflow and moves trailing
items into a "More ▾" dropdown; no flex-wrap here. Mobile
(≤700px) keeps its own scroll-row layout below. */
@media (max-width: 1100px) {
.navbar {
flex-wrap: nowrap;
/* Zero vertical padding so the navbar-nav items stretch to fill
the full visible rectangle (per the desktop rule above).
Horizontal stays --sp-4 for tablet edge spacing. */
padding: 0 var(--sp-4);
}
.navbar-brand { flex-shrink: 0; }
.navbar-end { flex-shrink: 0; }
.navbar-nav {
flex: 1 1 auto;
flex-wrap: nowrap;
min-width: 0;
overflow: visible; /* dropdowns must escape — hide via JS */
}
}
/* Overflow "More ▾" item — only visible when the JS module pushes
real links into it. Inherits the same hover/dropdown styling
that .nav-has-dropdown items get. */
.nav-overflow > a::after {
/* Reuse the chevron rendered for .nav-has-dropdown via existing
rules — no extra glyph needed here. */
}
.nav-overflow-dropdown {
/* Anchor right edge so the dropdown doesn't overflow the viewport
when the More item sits near the navbar's right. */
right: 0;
left: auto;
}
/* Submenus inside the More dropdown fly out to the RIGHT instead
of expanding inline (which would push siblings down and visually
merge the two menus into one). The More panel itself sits at
the right edge of the navbar; the submenu opens further right of
the panel for a clear visual hierarchy. */
.nav-overflow-dropdown .nav-has-dropdown {
position: relative;
}
.nav-overflow-dropdown .nav-has-dropdown > .nav-dropdown {
top: 0;
right: auto;
left: 100%;
margin-left: 4px;
}
/* Hover-bridge for sideways submenus — extends LEFT of the floating
submenu panel so the cursor can slide diagonally from the parent
row to the submenu interior without losing hover. Generously
sized for forgiving mouse-tracking (24px wide, full panel height
plus 16px above and below). */
.nav-overflow-dropdown .nav-has-dropdown > .nav-dropdown::before {
top: -16px;
left: -24px;
right: auto;
bottom: -16px;
width: 28px;
height: auto;
}
/* Submenu chevron points RIGHT to signal sideways open direction. */
.nav-overflow-dropdown .nav-has-dropdown > a::after {
border-left: 4px solid currentColor;
border-right: 0;
border-top: 3.5px solid transparent;
border-bottom: 3.5px solid transparent;
margin-left: 6px;
float: right;
margin-top: 6px;
}
@media (max-width: 700px) {
.page-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.toolbar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3); }
.form-group { flex: 1 1 100px; min-width: 90px; }
.boards-area { padding: var(--sp-3); }
.info-grid { column-count: 1; }
/* ── Navbar: two-row layout on portrait mobile ───────────────────────
Row 1: brand + navbar-end (controls)
Row 2: nav links — scrollable so nothing is ever clipped
Default: scrolls with page (non-sticky). Add [data-navbar-sticky-mobile]
on to keep it pinned. */
.navbar {
flex-wrap: wrap;
height: auto;
min-height: 52px;
padding: var(--sp-2) var(--sp-4);
row-gap: 0;
position: relative; /* scrolls away on mobile by default */
}
[data-navbar-sticky-mobile] .navbar {
position: sticky; /* opt-in: keep navbar pinned on mobile */
}
.navbar-brand { order: 1; }
.navbar-end { order: 2; margin-left: auto; }
.navbar-nav {
order: 3;
flex: 0 0 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
padding-bottom: var(--sp-1);
gap: 2px;
}
.navbar-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* ── Arpeggio card controls: compact single-row on mobile ────────── */
.arp-card {
padding: 0 var(--sp-3) !important;
}
.arp-controls {
gap: 6px !important;
padding: var(--sp-1) var(--sp-3) !important;
min-height: 34px !important;
}
.arp-sep { display: none !important; }
.arp-spacer { display: none !important; }
.arp-label { font-size: 12px !important; }
.arp-fret-wrap { gap: 3px !important; font-size: 11px !important; }
.arp-fret-txt { display: none; }
.arp-fret-wrap .form-control {
min-width: 44px !important;
font-size: 11px !important;
padding: 1px 3px !important;
}
.arp-hide-txt { display: none; }
.arp-hide-wrap { gap: 0 !important; }
.arp-remove-btn { font-size: 14px !important; padding: 2px 4px !important; }
.arp-drag-handle { width: 20px !important; height: 20px !important; }
.arp-system-pill { font-size: 9px !important; padding: 0 6px !important; }
}
@media (max-width: 420px) {
.form-group { flex: 1 1 calc(50% - 8px); max-width: none; }
}
/* (Reading-mode block removed 2026-05-12 — the navbar toggle, the
⌘⇧R hotkey, and every `[data-reading-mode]` selector are gone.
The chart-v2 editor's own Read/Edit toggle is a different feature
and stays.) */
/* ══════════════════════════════════════════════════════════════════════
PRINT — @media print gives a clean paper layout for ⌘P
══════════════════════════════════════════════════════════════════════ */
@media print {
/* Hide controls, not content */
.navbar, .toolbar, .toolbar-col-switcher, .toolbar-panel-icon,
.settings-panel, .ch-diagrams-header-controls,
.metro-nav-widget, #settings-toggle, #save-wrap,
.coll-header-btns, .coll-add-wrap, .coll-drag-handle,
.arp-drag-handle, .arp-pin-btn, .arp-undo-btn,
.coll-chart-header-controls, .gallery-jump-bar,
.gallery-section-jump { display: none !important; }
/* Content panels: force open */
.formula-panel, .info-panel { display: block !important; }
.ch-diagrams-body { display: block !important; }
body { background: #fff; color: #000; }
.page-wrap { padding: 12px; max-width: none; }
.boards-area { border: none; box-shadow: none; background: transparent; padding: 0; }
.board-card, .coll-item-card, .coll-chart-card { break-inside: avoid; }
.route-section { display: none !important; }
.route-section.active { display: block !important; }
}
/* ══════════════════════════════════════════════════════════════════════
ROUTING VISIBILITY
══════════════════════════════════════════════════════════════════════ */
.visually-hidden {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ══════════════════════════════════════════════════════════════════════
MISC UTILITIES
══════════════════════════════════════════════════════════════════════ */
.section-title {
font-size: 19px;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: var(--sp-4);
color: var(--text);
}
/* Prevent cursor confusion on fretboard SVG */
svg, svg *, .board-card iframe { cursor: default !important; }
/* ══════════════════════════════════════════════════════════════════════
FRETBOARD SETTINGS PANEL
══════════════════════════════════════════════════════════════════════ */
.settings-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-5) var(--sp-5);
margin-top: var(--sp-5);
box-shadow: var(--shadow);
margin-bottom: var(--sp-6);
}
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-4);
}
.settings-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.settings-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4) var(--sp-5);
align-items: flex-end;
margin-bottom: var(--sp-2);
}
.settings-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.settings-group label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.settings-control {
height: 40px;
font-size: 14px;
min-width: 160px;
}
/* Inside settings cards, let controls shrink to fit their column */
.stg-field .settings-control,
.stg-field-row .settings-control {
min-width: 0;
}
.stg-field .settings-number {
width: 100% !important;
}
input.settings-control {
padding: 0 10px;
font-family: var(--font);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
input.settings-control:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* ── Navbar icon dropdown (save image) ──────────────────────────────── */
.btn-icon-wrap {
position: relative;
}
.icon-dropdown {
position: absolute;
top: calc(100% + var(--space-xs));
right: 0;
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
min-width: 12.857rem; /* 180 px @ 14px rem */
z-index: var(--z-dropdown);
overflow: hidden;
}
.icon-dropdown-item {
display: block;
width: 100%;
padding: var(--space-sm) var(--space-md);
text-align: left;
font-size: var(--font-sm);
font-family: var(--font);
color: var(--text);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
}
.icon-dropdown-item:hover {
background: var(--bg-3);
}
.icon-dropdown-sep {
height: 1px;
background: var(--border);
margin: var(--space-xs) 0;
}
/* PDF export options checkboxes */
.pdf-options {
padding: 6px 14px 8px;
}
.pdf-opt {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-2);
cursor: pointer;
padding: 3px 0;
}
.pdf-opt input[type="checkbox"] {
accent-color: var(--accent);
margin: 0;
}
/* ── Tier simulation toggle (admin) ─────────────────── */
.tier-sim-btn.active {
color: #e74c3c;
animation: tier-sim-pulse 2s ease-in-out infinite;
}
@keyframes tier-sim-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .6; }
}
.tier-sim-icon-off,
.tier-sim-icon-on { transition: opacity .15s; }
.tier-sim-btn.active .tier-sim-icon-off { display: none !important; }
.tier-sim-btn.active .tier-sim-icon-on { display: block !important; color: #e74c3c; }
.tier-sim-badge {
position: absolute;
top: -4px; right: -8px;
font-size: 9px; font-weight: 700;
line-height: 1;
padding: 2px 5px;
border-radius: 6px;
background: #e74c3c;
color: #fff;
pointer-events: none;
white-space: nowrap;
box-shadow: 0 1px 4px rgba(231,76,60,.4);
}
.tier-sim-opt {
position: relative;
padding-left: 28px;
}
.tier-sim-opt::before {
content: '';
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
width: 12px; height: 12px;
border: 2px solid var(--border);
border-radius: 50%;
background: none;
transition: all .15s;
}
.tier-sim-opt.active::before {
border-color: #e74c3c;
background: #e74c3c;
box-shadow: inset 0 0 0 2px #fff;
}
.tier-sim-opt.active {
font-weight: 600;
color: #e74c3c;
}
/* ── Tier simulation DEV banner ─────────────────────────────────────────────
Shown at the top of every app.php page when a simulation is active.
All colour and layout lives here — zero inline styles in the PHP template.
──────────────────────────────────────────────────────────────────────────── */
.tier-sim-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9999;
background: #e65c00;
color: #fff;
font-size: 12px;
font-weight: 600;
padding: 6px 16px;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-ui, system-ui, sans-serif);
letter-spacing: .02em;
box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.tier-sim-banner-label { flex: 1; }
.tier-sim-banner-reset {
margin-left: auto;
background: rgba(255,255,255,.25);
border: 1px solid rgba(255,255,255,.5);
color: #fff;
padding: 2px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-family: inherit;
}
.tier-sim-banner-reset:hover {
background: rgba(255,255,255,.4);
}
/* Push app content down when sim banner is visible */
body.sim-active { padding-top: 32px; }
/* ── Payment warning banner ────────────────────────────────────────────────
Shown when subscription is past_due or unpaid. Amber/warning palette.
──────────────────────────────────────────────────────────────────────── */
.payment-warning-banner {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 9998;
background: #d97706;
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-ui, system-ui, sans-serif);
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.payment-warning-label { flex: 1; }
.payment-warning-action {
margin-left: auto;
background: rgba(255,255,255,.25);
border: 1px solid rgba(255,255,255,.5);
color: #fff;
padding: 4px 14px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-family: inherit;
text-decoration: none;
font-weight: 600;
}
.payment-warning-action:hover {
background: rgba(255,255,255,.4);
color: #fff;
text-decoration: none;
}
body.payment-past-due { padding-top: 38px; }
/* When both sim and payment banners are active, stack them */
body.sim-active.payment-past-due { padding-top: 70px; }
body.sim-active.payment-past-due .payment-warning-banner { top: 32px; }
/* PDF progress overlay */
.pdf-progress-overlay {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.35);
}
.pdf-progress-box {
background: var(--surface, #fff); border-radius: 10px;
padding: 28px 36px; min-width: 260px; text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.pdf-progress-title {
font-size: 15px; font-weight: 600; color: var(--text-1);
margin-bottom: 14px;
}
.pdf-progress-bar {
height: 6px; border-radius: 3px;
background: var(--border, #ddd); overflow: hidden;
}
.pdf-progress-fill {
height: 100%; width: 0; border-radius: 3px;
background: var(--accent); transition: width 0.15s ease;
}
.pdf-progress-text {
font-size: 12px; color: var(--text-3); margin-top: 10px;
}
/* Settings panel — sections and rich inputs */
.settings-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
margin: var(--sp-3) 0 var(--sp-2);
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.settings-section-label:first-of-type { margin-top: 0; }
.settings-color {
width: 44px;
height: 40px;
padding: 3px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
cursor: pointer;
vertical-align: middle;
}
.settings-color:hover { border-color: var(--accent); }
input.settings-number {
width: 110px !important;
text-align: left;
font-size: 14px !important;
font-variant-numeric: tabular-nums;
padding-left: 12px !important;
padding-right: 6px !important;
-moz-appearance: textfield;
position: relative;
}
/* Hide native spin buttons entirely — JS wrapper handles increment/decrement */
input.settings-number::-webkit-inner-spin-button,
input.settings-number::-webkit-outer-spin-button {
-webkit-appearance: none;
display: none;
margin: 0;
}
/* Flat spin button wrapper */
.stg-spin-wrap {
position: relative;
display: inline-flex;
align-items: stretch;
width: 100%;
}
.stg-spin-wrap > input {
flex: 1;
min-width: 0;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
}
.stg-spin-btns {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 28px;
border: 1px solid var(--border);
border-left: none;
border-radius: 0 var(--r-sm) var(--r-sm) 0;
background: var(--surface-2);
overflow: hidden;
}
.stg-spin-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
background: none;
padding: 0;
color: var(--text-3);
transition: background 0.1s, color 0.1s;
line-height: 1;
}
.stg-spin-btn:hover {
background: var(--surface-3, rgba(0,0,0,0.06));
color: var(--text);
}
.stg-spin-btn + .stg-spin-btn {
border-top: 1px solid var(--border);
}
.stg-spin-btn svg {
width: 10px;
height: 10px;
}
.settings-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-3);
}
.settings-header .settings-title { margin-bottom: 0; }
.btn-restore-defaults {
font-size: 12px;
font-family: var(--font);
color: var(--text-3);
background: none;
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 5px 12px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.btn-restore-defaults:hover {
color: var(--text);
border-color: var(--text-3);
}
/* ══════════════════════════════════════════════════════════════════════
FRETBOARD SETTINGS PAGE (dedicated route)
Split layout: controls on left, sticky preview fretboard on right.
══════════════════════════════════════════════════════════════════════ */
/* Remove page-wrap padding so settings page fills the viewport exactly */
.page-wrap:has(.stg-page) {
padding: 0 var(--sp-6);
}
.stg-page {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
padding: var(--sp-8) 0 0;
height: calc(100vh - 52px);
overflow: hidden;
}
/* Lock body scroll only when settings route is active */
html:has(#route-settings.active) body {
overflow: hidden;
}
/* Full-scroll mode: preview is large, let the whole page scroll naturally */
.stg-page.stg-page--fullscroll {
height: auto;
overflow: visible;
}
html:has(#route-settings.active .stg-page--fullscroll),
html:has(#route-settings.active .stg-page--fullscroll) body {
overflow: auto !important;
height: auto !important;
}
.stg-page--fullscroll .stg-controls {
overflow-y: visible;
}
.stg-page--fullscroll .stg-preview {
flex-shrink: 0;
}
.page-wrap:has(#route-settings.active .stg-page--fullscroll) {
height: auto !important;
overflow: auto !important;
}
/* Top bar: heading + tabs + restore — flex row */
.stg-topbar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 0 var(--sp-4) var(--sp-3);
flex-wrap: wrap;
}
.stg-topbar .stg-heading { margin: 0; white-space: nowrap; }
.stg-topbar .stg-tab-bar { flex: 1 1 auto; margin: 0; border: none; padding: 0; }
.stg-topbar .btn-restore-defaults { flex-shrink: 0; margin-left: auto; }
/* Controls: scrollable, full width, takes remaining space */
.stg-controls {
flex: 1 1 0;
min-height: 0;
min-width: 0;
overflow-y: auto;
padding: 0 var(--sp-4) var(--sp-6);
}
@media (max-width: 860px) {
html:has(#route-settings.active),
html:has(#route-settings.active) body {
overflow: hidden;
height: 100vh;
}
.page-wrap:has(#route-settings.active .stg-page) {
padding: 0;
height: calc(100vh - 56px);
overflow: hidden;
}
.stg-page {
padding: var(--sp-2) 0 0;
max-width: 100%;
}
.stg-topbar { padding: 0 var(--sp-3) var(--sp-2); }
.stg-controls { padding: 0 var(--sp-3) var(--sp-6); }
.stg-preview-board svg,
.stg-preview-piano svg {
max-height: 180px;
}
.stg-preview-circle svg {
max-height: 180px !important;
}
}
/* Tab bar */
.stg-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--border);
padding-bottom: var(--sp-3);
}
.stg-tab {
padding: 5px 13px;
min-width: 80px;
text-align: center;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.stg-tab:hover { background: var(--surface-2, rgba(0,0,0,.05)); color: var(--text); }
.stg-tab--active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Display tab — hide the preview pane (inline previews instead) */
.stg-page--display-tab .stg-preview { display: none !important; }
.stg-page--display-tab .stg-preview-controls-card { display: none; }
/* Circle & Diagram tabs: settings left, preview right */
@media (min-width: 860px) {
.stg-page--circle-tab,
.stg-page--diagrams-tab {
display: grid !important;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
}
.stg-page--circle-tab .stg-topbar,
.stg-page--diagrams-tab .stg-topbar { grid-column: 1 / -1; }
.stg-page--circle-tab .stg-controls,
.stg-page--diagrams-tab .stg-controls {
grid-column: 1; grid-row: 2;
grid-template-columns: 1fr;
}
.stg-page--circle-tab .stg-preview,
.stg-page--diagrams-tab .stg-preview {
grid-column: 2; grid-row: 2;
flex-basis: auto;
height: auto;
border-top: none;
border-left: 1px solid var(--border);
margin-bottom: 0;
align-self: stretch;
}
/* Hide drag handle on side-by-side layout tabs — resize is N/A */
.stg-page--circle-tab .stg-preview-resize-bar,
.stg-page--diagrams-tab .stg-preview-resize-bar {
display: none;
}
/* Align preview content to top, no full-height stretch */
.stg-page--circle-tab .stg-preview-section.stg-preview-section--active,
.stg-page--diagrams-tab .stg-preview-section.stg-preview-section--active {
justify-content: flex-start;
flex: 0 0 auto;
}
.stg-page--circle-tab .stg-preview-circle {
flex: 0 0 auto;
padding: var(--sp-4) 0;
}
.stg-page--diagrams-tab .stg-preview-diagram {
flex: 0 0 auto;
padding: var(--sp-4) 0;
}
.stg-page--diagrams-tab .stg-preview-diagram .ch-diag-svg {
flex: 0 0 auto;
width: 100% !important;
max-height: 420px;
}
}
/* Display panel: all cards / pairs span full width in parent grid */
#stgPanelDisplay > .stg-card,
#stgPanelDisplay > .stg-disp-pair { grid-column: 1 / -1; }
/* Display pair: controls card (2/3) + preview card (1/3) side by side */
.stg-disp-pair {
display: flex;
gap: var(--sp-4);
min-width: 0;
}
.stg-disp-pair__controls {
flex: 2 1 0;
min-width: 0;
}
.stg-disp-pair__previews {
flex: 1 1 0;
min-width: 0;
}
/* Stack on narrow viewports */
@media (max-width: 859px) {
.stg-disp-pair { flex-direction: column; }
}
/* Rows inside each half — match heights so controls align with their previews */
.stg-disp-ctrl-row { margin-bottom: var(--sp-3); }
.stg-disp-ctrl-row:last-child { margin-bottom: 0; }
.stg-disp-preview-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-3);
}
.stg-disp-preview-row:last-child { margin-bottom: 0; }
/* Let the preview thumbnails shrink gracefully in the narrower column */
.stg-disp-pair__previews .stg-disp-preview {
max-width: 100%;
}
/* Panels */
.stg-panel--hidden { display: none !important; }
/* Three-column card grid — .stg-controls is the grid; visible panels use display:contents */
@media (min-width: 1100px) {
.stg-controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4) var(--sp-5);
align-items: stretch;
align-content: start;
}
.stg-controls .stg-card { margin-bottom: 0; }
.stg-panel:not(.stg-panel--hidden) { display: contents; }
.stg-controls > .stg-card--wide,
.stg-panel > .stg-card--wide { grid-column: 1 / -1; }
}
/* Fallback: 2-column grid on medium screens */
@media (min-width: 860px) and (max-width: 1099px) {
.stg-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4) var(--sp-5);
align-items: stretch;
align-content: start;
}
.stg-controls .stg-card { margin-bottom: 0; }
.stg-panel:not(.stg-panel--hidden) { display: contents; }
.stg-controls > .stg-card--wide,
.stg-panel > .stg-card--wide { grid-column: 1 / -1; }
}
/* Export tab: force 2-column 50/50 layout */
@media (min-width: 860px) {
.stg-page--export-tab .stg-controls {
grid-template-columns: 1fr 1fr;
}
}
/* Hide all preview sections by default; JS activateTab adds .stg-preview-section--active */
.stg-preview-section { display: none !important; }
.stg-preview-section.stg-preview-section--active { display: flex !important; }
.stg-heading {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.stg-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-5);
margin-bottom: var(--sp-4);
min-width: 0;
}
.stg-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-4);
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
/* Superfriend read-only settings card */
.stg-card--readonly { opacity: 0.65; pointer-events: none; }
.stg-readonly-badge {
font-size: 9px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: var(--text-3);
background: var(--surface-2, rgba(128,128,128,.12));
border: 1px solid var(--border);
border-radius: 10px;
padding: 1px 7px;
margin-left: 6px;
vertical-align: middle;
}
/* Admin-only settings card */
.stg-card--admin { border-left: 3px solid var(--accent); }
.stg-admin-badge {
font-size: 9px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
color: #fff;
background: var(--accent);
border-radius: 10px;
padding: 1px 7px;
margin-left: 6px;
vertical-align: middle;
}
/* Vertical stacked fields (label above control) */
.stg-field {
margin-bottom: var(--sp-3);
min-width: 0;
}
.stg-field:last-child { margin-bottom: 0; }
.stg-field > label {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: 6px;
}
.stg-field > select,
.stg-field > input[type="text"],
.stg-field > input[type="number"] {
width: 100%;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
}
.stg-field > select {
text-overflow: ellipsis;
}
/* Let nested flex containers inside fields shrink properly */
.stg-field > div {
min-width: 0;
}
/* Horizontal row of fields (for grouped color pickers, etc.) */
.stg-field-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
margin-bottom: var(--sp-3);
}
.stg-field-row:last-child { margin-bottom: 0; }
.stg-field-row > .stg-field {
flex: 1 1 120px;
min-width: 0;
margin-bottom: 0;
}
/* Checkbox groups (publication bundle settings) */
.stg-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 4px;
}
.stg-checkbox {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--text-1);
cursor: pointer;
user-select: none;
}
.stg-checkbox input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
/* ── Per-style customization controls ─────────────────────── */
/* Color input – compact swatch */
.stg-color-input {
width: 42px;
height: 30px;
padding: 2px;
border: 1px solid var(--border);
border-radius: var(--r-sm, 4px);
cursor: pointer;
background: var(--surface);
}
.stg-color-input::-webkit-color-swatch-wrapper { padding: 1px; }
.stg-color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
/* Range slider */
.stg-field .form-range {
width: 100%;
accent-color: var(--accent, #f2a93b);
cursor: pointer;
}
/* Value readout next to range slider */
.stg-range-val {
display: inline-block;
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--text-3);
min-width: 28px;
text-align: right;
margin-left: 4px;
vertical-align: middle;
}
/* Inline button (e.g. "Reset to default") */
.stg-inline-btn {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
color: var(--text-3);
background: var(--surface-2, rgba(128,128,128,.08));
border: 1px solid var(--border);
border-radius: var(--r-sm, 4px);
padding: 3px 10px;
cursor: pointer;
transition: background .15s, color .15s;
}
.stg-inline-btn:hover {
background: var(--surface-3, rgba(128,128,128,.16));
color: var(--text-1);
}
/* Card title as flex row (for title + reset button side by side) */
#diagStyleCard .stg-card-title {
display: flex;
align-items: center;
}
/* Range field layout — label + range + value on one line */
.stg-field input[type="range"] {
flex: 1;
min-width: 0;
}
/* Style preset pill-bar */
.ds-style-bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.ds-style-pill { flex-shrink: 0; }
/* Compact 3–4 column rows inside diagrams panel */
#diagStyleCard .stg-field-row { gap: var(--sp-3); }
#diagStyleCard .stg-field-row > .stg-field { flex: 1 1 90px; }
/* Inline diagram preview inside style card (narrow viewports only) */
.ds-inline-preview {
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-3);
margin-bottom: var(--sp-3);
background: var(--surface-2, #f7f6f3);
border: 1.5px solid var(--border);
border-radius: var(--r-md, 8px);
min-height: 120px;
}
.ds-inline-preview:empty { display: none; }
.ds-inline-preview svg { display: block; max-width: 160px; height: auto; }
@media (min-width: 860px) {
.ds-inline-preview { display: none; }
}
/* Display-defaults preview thumbnails */
.stg-disp-preview {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 8px;
background: var(--surface-2, #f7f6f3);
border: 1.5px solid var(--border-strong);
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.stg-disp-preview svg { display: block; }
/* Fretboard thumbnails */
.stg-disp-preview[id^="dispPrev_scales"],
.stg-disp-preview[id^="dispPrev_chords"],
.stg-disp-preview[id^="dispPrev_collection"],
.stg-disp-preview[id^="dispPrev_interval"],
.stg-disp-preview[id^="dispPrev_gallery"] {
width: 160px; height: 64px; max-width: 100%;
}
/* Diagram thumbnails */
.stg-disp-preview[id^="dispPrev_chord"],
.stg-disp-preview[id^="dispPrev_custom"] {
width: 72px; height: 92px;
}
/* Global preview pair (fretboard + diagram side by side) */
.stg-disp-preview--global {
display: flex; gap: 8px; border: none; background: none; box-shadow: none;
}
.stg-disp-preview--global .stg-disp-preview { border: 1.5px solid var(--border-strong); }
#dispPrev_globalFb { width: 160px; height: 64px; max-width: 100%; }
#dispPrev_globalDg { width: 72px; height: 92px; }
/* Voicing color grid — 4 columns, each with fill + border stacked */
.stg-voice-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.stg-voice-col {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.stg-voice-label {
font-size: 11px;
font-weight: 700;
color: var(--text-3);
text-align: center;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.stg-voice-col .stg-field { margin-bottom: 0; }
.stg-voice-col .stg-field > label {
font-size: 10px;
text-align: center;
}
.stg-voice-col .settings-color {
width: 100%;
display: block;
}
/* Preview panel — full-width, between tabs and controls */
.stg-preview {
flex: 0 0 220px;
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: var(--sp-3) var(--sp-4);
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: var(--sp-3);
}
@media (max-height: 700px) {
.stg-preview { flex-basis: 160px; }
}
@media (min-height: 900px) {
.stg-preview { flex-basis: 280px; }
}
/* Preview resize bar (admin only) — drag handle + reset button at bottom of .stg-preview */
.stg-preview-resize-bar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding-top: 4px;
}
.stg-preview-resize {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
height: 12px;
cursor: ns-resize;
user-select: none;
-webkit-user-select: none;
}
.stg-preview-resize__grip {
display: block;
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--border-strong, #bbb);
opacity: 0.45;
transition: opacity 0.15s;
}
.stg-preview-resize:hover .stg-preview-resize__grip,
.stg-preview-resize:active .stg-preview-resize__grip { opacity: 1; }
.stg-preview-reset-btn {
flex: 0 0 auto;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
background: none;
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 8px;
cursor: pointer;
transition: color 0.12s, border-color 0.12s;
}
.stg-preview-reset-btn:hover { color: var(--accent); border-color: var(--accent); }
/* During drag, prevent selection and cursor flicker on the whole page */
html.stg-resizing, html.stg-resizing * { cursor: ns-resize !important; user-select: none !important; }
/* Circle & Diagram tabs: preview auto-sizes to content, no resize handle */
.stg-page--circle-tab .stg-preview,
.stg-page--diagrams-tab .stg-preview {
flex-basis: auto !important;
height: auto !important;
overflow: visible;
}
.stg-page--circle-tab .stg-preview-resize-bar,
.stg-page--diagrams-tab .stg-preview-resize-bar {
display: none;
}
/* Preview controls card — inherits .stg-card base, just tweak vertical padding */
.stg-preview-controls-card {
padding-top: var(--sp-4);
padding-bottom: var(--sp-4);
}
.stg-prev-sel {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.stg-prev-sel:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
@media (max-width: 860px) {
.stg-preview-controls-card {
margin-bottom: var(--sp-3);
}
}
.stg-preview-header {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-3);
flex: 0 0 auto;
}
/* Active preview section fills remaining card height, centers content */
.stg-preview-section.stg-preview-section--active {
flex: 1 1 0;
min-height: 0;
overflow: hidden;
display: flex !important;
flex-direction: column;
justify-content: center;
}
/* Preview board fills its section */
.stg-preview-board {
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.stg-preview-board svg {
display: block;
width: 100%;
height: auto !important;
max-height: 100%;
}
/* Apply-to-other-tab button (Copy colors → Chord / ← Copy colors → Scale) */
.btn-apply-both {
display: inline-block;
margin-top: var(--sp-3);
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg-2);
color: var(--text-2);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.btn-apply-both:hover {
background: var(--bg-3);
border-color: var(--accent);
color: var(--text-1);
}
.stg-preview-header--sub {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.stg-preview-piano {
flex: 1 1 0;
min-height: 0;
display: flex;
align-items: center;
}
.stg-preview-piano svg {
display: block;
width: 100%;
height: auto !important;
max-height: 100%;
}
.stg-preview-circle {
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 0;
min-height: 0;
}
.stg-preview-circle svg {
display: block;
max-width: 100%;
width: auto;
height: auto;
max-height: 100%;
}
.stg-preview-diagram {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
min-height: 0;
}
.stg-preview-diagram .ch-diag-svg {
width: auto !important;
max-width: 100%;
flex: 1 1 0;
min-height: 0;
height: auto !important;
object-fit: contain;
}
.stg-diag-chord-lbl {
font-size: clamp(18px, 3vh, 32px);
font-weight: 700;
color: var(--text);
text-align: center;
margin-bottom: 4px;
letter-spacing: -0.02em;
flex: 0 0 auto;
}
/* ══════════════════════════════════════════════════════════════════════
TOOLS PAGE
══════════════════════════════════════════════════════════════════════ */
.tools-page {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--panel-gap);
}
@media (max-width: 700px) {
.tools-page { grid-template-columns: 1fr; }
}
.tool-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.tool-title {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.tool-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-2);
}
.tool-hint {
font-size: 11px;
color: var(--text-3);
text-align: center;
}
/* ── Shared buttons ─────────────────────────────────────────────────── */
.tool-btn {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
color: var(--text);
font-size: 13px;
font-weight: 500;
padding: 8px 16px;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
white-space: nowrap;
user-select: none;
}
.tool-btn:hover { background: var(--border); }
.tool-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.tool-btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-size: 14px;
padding: 10px 28px;
}
.tool-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.tool-btn-primary.active { background: var(--text-2); border-color: var(--text-2); }
.tool-btn-icon {
width: 36px;
height: 36px;
padding: 0;
font-size: 18px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tool-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.tool-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.tool-input {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font-size: 13px;
padding: 7px 10px;
width: 90px;
text-align: center;
}
.tool-input-unit {
font-size: 12px;
color: var(--text-3);
}
/* ── Interval Stacker (dedicated page) ─────────────────────────────── */
/* Collection view */
.stacker-collection { margin-bottom: var(--sp-4); }
.stacker-add-btn {
display: block;
width: 100%;
padding: 12px 0;
border: 1.5px dashed var(--border);
border-radius: var(--r-lg);
background: transparent;
color: var(--text-2);
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-align: center;
transition: border-color .15s, color .15s;
margin-bottom: var(--sp-4);
}
.stacker-add-btn:hover {
border-color: var(--accent);
color: var(--text);
}
.stacker-empty {
font-size: 13px;
color: var(--text-3);
text-align: center;
padding: var(--sp-6) 0;
}
/* Collection card list */
.stacker-card-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.stacker-coll-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: border-color .15s, box-shadow .15s;
}
.stacker-coll-card:hover {
border-color: var(--accent);
}
.stacker-coll-card--active {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
/* Card bar: clean row with chevron + info + tiny fretboard */
.stacker-card-bar {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
}
/* Tiny inline fretboard thumbnail */
.stacker-card-thumb {
flex-shrink: 0;
width: 180px;
height: 32px;
margin-left: auto;
overflow: hidden;
opacity: 0.7;
transition: opacity .15s;
}
.stacker-coll-card:hover .stacker-card-thumb {
opacity: 1;
}
@media (max-width: 600px) {
.stacker-card-thumb { width: 120px; height: 24px; }
}
.stacker-coll-card-info {
display: flex;
align-items: center;
gap: var(--sp-4);
flex: 1;
min-width: 0;
}
.stacker-coll-card-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stacker-coll-card-formula {
font-size: 12px;
font-family: var(--font-mono);
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stacker-coll-card-meta {
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
margin-left: auto;
flex-shrink: 0;
}
.stacker-coll-card-del {
background: none;
border: none;
color: var(--text-3);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
flex-shrink: 0;
border-radius: 3px;
transition: color .15s, background .15s;
}
.stacker-coll-card-del:hover {
color: var(--text);
background: rgba(0,0,0,0.06);
}
[data-theme="dark"] .stacker-coll-card-del:hover {
background: rgba(255,255,255,0.08);
}
/* Builder panel (inline) */
.stacker-builder {
background: var(--surface);
border: 1px solid var(--accent);
border-radius: var(--r-lg);
padding: var(--sp-5);
margin-bottom: var(--sp-5);
user-select: none;
-webkit-user-select: none;
}
/* ── Custom-board editor: 3-panel layout ──────────────────── */
.cb-editor-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4);
margin-bottom: var(--sp-4);
}
.cb-editor-layout {
display: grid;
grid-template-columns: 96px 1fr 240px;
gap: var(--sp-4);
align-items: start;
}
.cb-editor-main {
min-width: 0; /* let grid column shrink */
}
/* ── Panels (left tools + right properties) ─────────── */
.cb-tools-panel,
.cb-props-panel {
display: flex;
flex-direction: column;
gap: 0;
position: sticky;
top: 80px;
}
/* ── Collapsible
sections ─────────── */
.cb-section {
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-2);
margin-bottom: 8px;
}
.cb-section > summary {
padding: 8px 12px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2);
cursor: pointer;
user-select: none;
list-style: none;
}
.cb-section > summary::-webkit-details-marker { display: none; }
.cb-section > summary::before {
content: '\25B8';
display: inline-block;
margin-right: 6px;
transition: transform 0.15s;
}
.cb-section[open] > summary::before { transform: rotate(90deg); }
.cb-section-body {
padding: 0 12px 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── Shared sidebar primitives (used in both panels) ── */
.cb-sidebar,
.cb-tools-panel,
.cb-props-panel {
font-size: 13px;
}
.cb-sidebar {
display: flex;
flex-direction: column;
gap: 10px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 14px;
position: sticky;
top: 80px;
}
.cb-sidebar-group {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0; /* prevent children from overflowing */
}
.cb-default-frets-label {
display: flex; align-items: center; gap: 5px; cursor: pointer;
font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-3); user-select: none;
}
.cb-default-frets-label input[type="checkbox"] { cursor: pointer; }
.cb-default-frets-label.is-locked { color: var(--accent); }
.cb-sidebar-group > label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
}
.cb-sidebar-group > select,
.cb-sidebar-group > button {
width: 100%;
}
.cb-sidebar-row {
display: flex;
gap: 6px;
align-items: center;
}
.cb-sidebar-divider {
border: none;
border-top: 1px solid var(--border);
margin: 2px 0;
}
/* Compact shape/color buttons in panels */
.cb-sidebar .stacker-iv-btn,
.cb-tools-panel .stacker-iv-btn,
.cb-props-panel .stacker-iv-btn {
min-width: 34px;
padding: 5px 8px;
font-size: 12px;
}
/* Shrink form-group overrides inside panels (no flex-grow) */
.cb-sidebar .form-group,
.cb-tools-panel .form-group,
.cb-props-panel .form-group {
flex: none;
min-width: 0;
max-width: none;
}
/* ── Finger buttons (left panel) ── */
.cb-finger-btns {
display: flex;
flex-direction: column;
gap: 4px;
}
.cb-finger-btn {
text-align: left;
padding: 5px 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-1);
color: var(--text-1);
}
.cb-finger-btn:hover { background: var(--bg-2); }
.cb-finger-btn.cb-finger-btn--active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ── Responsive: stack panels below on narrow screens ── */
@media (max-width: 900px) {
.cb-editor-layout {
grid-template-columns: 1fr;
}
.cb-tools-panel,
.cb-props-panel,
.cb-sidebar {
position: static;
}
}
/* ════════════════════════════════════════════════════════════════════
Diagram-Editor control restyle (2026-06-15) — flat Fretly-house
selects + inputs, comfortable spacing, calmer fields. Scoped to
.cb-editor-card so it lands in EVERY context the shared editor
renders (chord-diagram picker modal, standalone Custom Boards, Lab)
without leaking to other .form-select usages. All sizing via design
tokens so it tracks --ui-scale / --ui-density. Mirrors the canonical
.scp-kd-select flat-select idiom used across the music pages.
════════════════════════════════════════════════════════════════════ */
/* — Field group rhythm + quiet Title-case captions (no more ALL-CAPS,
which was the biggest "VB form" tell) — */
.cb-editor-card .cb-sidebar-group { gap: var(--space-2xs); }
.cb-editor-card .cb-sidebar-group > label,
.cb-editor-card .form-label {
font-size: var(--font-sm);
font-weight: var(--weight-medium);
letter-spacing: 0;
text-transform: none;
color: var(--text-2);
margin-bottom: var(--space-2xs);
}
/* — Flat selects: native OS chrome → appearance:none + custom chevron
+ accent focus ring. This is the "styled like elsewhere in Fretly"
dropdown look (matches .scp-kd-select). — */
.cb-editor-card select,
.cb-editor-card .fly-select-trigger {
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
height: var(--ctl-h-md);
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-medium);
line-height: 1.2;
color: var(--text);
padding: 0 calc(var(--space-md) + var(--space-sm)) 0 var(--space-sm);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
background-color: var(--surface);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8a84' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
background-size: 12px;
cursor: pointer;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Trigger button: left-aligned current value, truncates gracefully */
.cb-editor-card .fly-select-trigger {
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cb-editor-card select:hover,
.cb-editor-card .fly-select-trigger:hover { border-color: var(--text-3); }
.cb-editor-card select:focus,
.cb-editor-card .fly-select-trigger:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 2px rgba(232, 135, 74, 0.22);
}
/* — Text + number inputs share the chrome (no chevron) — */
.cb-editor-card input[type="text"],
.cb-editor-card input[type="number"] {
box-sizing: border-box;
height: var(--ctl-h-md);
font: inherit;
font-size: var(--font-sm);
color: var(--text);
padding: 0 var(--space-sm);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cb-editor-card input[type="text"]::placeholder { color: var(--text-3); }
.cb-editor-card input[type="text"]:focus,
.cb-editor-card input[type="number"]:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 2px rgba(232, 135, 74, 0.22);
}
/* — Inline buttons (Auto / B / I / eraser / clear / finger) share the
control radius; Auto matches the title-input height so the row
aligns cleanly. — */
.cb-editor-card .cb-finger-btn,
.cb-editor-card button.form-select {
border-radius: var(--radius-sm);
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cb-editor-card .cb-ed-auto-title {
box-sizing: border-box;
height: var(--ctl-h-md);
}
/* — Plain action buttons (Copy PNG / PNG / SVG / undo / redo / Eraser /
Clear) get a flat secondary-button look instead of native chrome.
Targeted by class so the shape/color/finger toggle buttons (which
carry their own active states) are untouched. — */
.cb-editor-card .cb-ed-export-row button,
.cb-editor-card .cb-ed-eraser,
.cb-editor-card .cb-ed-clear {
box-sizing: border-box;
height: var(--ctl-h-md);
padding: 0 var(--space-md);
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-medium);
color: var(--text-2);
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cb-editor-card .cb-ed-export-row button:hover,
.cb-editor-card .cb-ed-eraser:hover,
.cb-editor-card .cb-ed-clear:hover {
background: var(--surface-2);
border-color: var(--text-3);
color: var(--text);
}
.cb-editor-card .cb-ed-eraser.is-active,
.cb-editor-card .cb-ed-eraser[aria-pressed="true"] {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* — Flat tool/toggle buttons — kill the native UA button bevel that the
Shape / Color / Fingering buttons fall back to (.form-select and
.stacker-iv-btn define no surface of their own). Active states
(.cb-marker-btn--active / .cb-color-btn--active, accent outline) keep
working: they use !important + outline and don't set background. — */
.cb-editor-card button.form-select,
.cb-editor-card .stacker-iv-btn {
-webkit-appearance: none;
appearance: none;
background: var(--surface);
border: var(--border-w) solid var(--border);
box-shadow: none;
color: var(--text);
}
.cb-editor-card button.form-select:hover,
.cb-editor-card .stacker-iv-btn:hover {
background: var(--surface-2);
border-color: var(--accent);
}
/* — Checkboxes tint to the accent — */
.cb-editor-card input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
/* — Dark-mode chevron uses a lighter stroke — */
[data-theme="dark"] .cb-editor-card select,
[data-theme="dark"] .cb-editor-card .fly-select-trigger {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8a8a2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
}
/* ════════════════════════════════════════════════════════════════════
Diagram-Editor hybrid overhaul (2026-06-15) — "2028" visual language.
Kills the boxed-fieldset (Visual-Basic) look: sections lose their
borders and group by hairlines + whitespace; the fretboard becomes the
hero on a soft-shadowed card; the tool column reads as one elevated
rail; the inspector stays an open column. Pure CSS on the existing
DOM — no markup / functionality change. Lands in picker + standalone.
════════════════════════════════════════════════════════════════════ */
/* — De-box: sections are borderless, grouped by hairline + spacing — */
.cb-editor-card .cb-section {
border: none;
background: transparent;
border-radius: 0;
margin-bottom: 0;
}
.cb-editor-card .cb-tools-panel > .cb-section + .cb-section,
.cb-editor-card .cb-props-panel > .cb-section + .cb-section {
border-top: 1px solid var(--border);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
.cb-editor-card .cb-section-body { padding: 0 0 var(--space-2xs); }
/* — Section headers: quiet Title-case captions, not shouty caps — */
.cb-editor-card .cb-section > summary {
text-transform: none;
letter-spacing: 0;
font-size: var(--font-sm);
font-weight: var(--weight-semibold);
color: var(--text-2);
padding: var(--space-2xs) 0;
}
.cb-editor-card .cb-section > summary::before { color: var(--text-3); }
.cb-editor-card .cb-section .cb-section > summary {
font-weight: var(--weight-medium);
color: var(--text-3);
}
/* — Tool column → one elevated rail (Figma-style palette) — */
.cb-editor-card .cb-tools-panel {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: var(--shadow-md);
}
/* — Fretboard is the hero: ONE card that hugs the board (the svg-area
wrapper is demoted to a plain centering canvas so there's no
double-card). Matches the prototype's single floating board. — */
.cb-editor-card .cb-svg-area,
.cb-editor-card .boards-area {
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.cb-editor-card .board-card {
display: block;
width: min(360px, 100%);
margin-inline: auto;
background: var(--surface);
border: none;
border-radius: var(--radius-lg);
box-shadow: 0 0.43rem 1.7rem rgba(20, 16, 12, 0.10), 0 0.07rem 0.21rem rgba(20, 16, 12, 0.06);
padding: var(--space-lg);
}
.cb-editor-card .cb-svg { display: block; max-width: 100%; height: auto; }
/* — Depth reads via shadow in light; via a touch more surface/border
contrast in dark (the token shadows are near-invisible on black) — */
[data-theme="dark"] .cb-editor-card .board-card {
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .cb-editor-card .cb-tools-panel {
box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.38);
}
/* ── Prototype-match pass: icon-only tool rail + caret-less inspector ── */
/* Tool rail loses its Shape/Color/Fingering header labels → reads as
icon clusters separated by hairlines, like the prototype. */
.cb-editor-card .cb-tools-panel > .cb-section > summary { display: none; }
.cb-editor-card .cb-tools-panel > .cb-section { padding-top: 0; }
.cb-editor-card .cb-tools-panel > .cb-section + .cb-section {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
/* Colour swatches in a tidy 2-column grid (prototype). */
.cb-editor-card .cb-ed-color-btns {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xs);
}
/* Inspector: top-level group headers become plain labels (no caret);
nested "Style…" sub-sections keep their disclosure caret. */
.cb-editor-card .cb-props-panel > .cb-section > summary::before { display: none; }
.cb-editor-card .cb-props-panel > .cb-section > summary {
color: var(--text);
font-weight: var(--weight-semibold);
font-size: var(--font-base);
}
/* Frets: Total + Start sit side by side (prototype). */
.cb-editor-card .cb-props-panel > .cb-section:first-child > .cb-section-body {
flex-direction: row;
gap: var(--space-sm);
align-items: flex-start;
}
.cb-editor-card .cb-props-panel > .cb-section:first-child > .cb-section-body > .cb-sidebar-group {
flex: 1;
min-width: 0;
}
/* ── Tool rail = narrow elevated white pill with vertical icon tiles
(ports the prototype's rail exactly; functionality unchanged) ── */
.cb-editor-card .cb-tools-panel {
background: var(--surface);
border-radius: var(--radius-xl);
padding: var(--space-md);
align-items: center;
gap: var(--space-sm);
}
/* Shapes: vertical column of square icon tiles */
.cb-editor-card .cb-ed-marker-btns {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-sm);
}
.cb-editor-card .cb-ed-marker-btns .stacker-iv-btn {
width: 38px;
min-width: 0;
height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Colours: centered 2-col swatch grid, square tiles */
.cb-editor-card .cb-ed-color-btns { justify-items: center; }
.cb-editor-card .cb-ed-color-btns .cb-color-btn {
width: 38px;
min-width: 0 !important;
height: 38px;
padding: 0 !important;
}
.cb-editor-card .cb-color-swatch { width: 20px; height: 20px; }
/* Fingering: compact number/icon tiles (full labels live in tooltips) */
.cb-editor-card .cb-finger-btns {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs);
}
.cb-editor-card .cb-finger-btn {
width: 38px;
min-width: 0;
height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: var(--weight-semibold);
}
/* Eraser / Clear = borderless icon tiles in a centered row (prototype) */
.cb-editor-card .cb-tools-panel > .cb-sidebar-row {
flex-direction: row;
justify-content: center;
width: 100%;
gap: var(--space-sm);
}
.cb-editor-card .cb-tools-panel .cb-ed-eraser,
.cb-editor-card .cb-tools-panel .cb-ed-clear {
flex: 0 0 auto;
width: 38px;
min-width: 0;
height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-color: transparent;
color: var(--text-2);
}
.cb-editor-card .cb-tools-panel .cb-ed-eraser:hover,
.cb-editor-card .cb-tools-panel .cb-ed-clear:hover {
background: var(--surface-2);
border-color: transparent;
color: var(--text);
}
/* Active tool = soft-filled accent chip, not a hard ring (prototype) */
.cb-editor-card .cb-ed-marker-btns .cb-marker-btn--active,
.cb-editor-card .cb-ed-color-btns .cb-color-btn--active {
background: rgba(232, 135, 74, 0.13);
border: 1px solid var(--accent);
border-radius: var(--radius-md);
outline: none;
}
/* Finer shape glyphs (unicode ■/◆ render heavy at 1.35em) */
.cb-editor-card .cb-marker-btn { font-size: 1.05em; }
/* Export strip sits centered UNDER the board card, not full-width
(prototype): undo/redo left, exports pushed right within the row. */
.cb-editor-card .cb-ed-export-row {
width: min(420px, 100%);
margin-inline: auto;
justify-content: flex-start;
}
/* ── Inspector sized to the prototype: roomier, rounder controls,
larger group headers, more air, no "Frets" label ── */
.cb-editor-card select,
.cb-editor-card .fly-select-trigger,
.cb-editor-card input[type="text"],
.cb-editor-card input[type="number"] {
height: var(--ctl-h-lg);
font-size: var(--font-base);
border-radius: var(--radius-md);
}
.cb-editor-card .cb-props-panel > .cb-section > summary {
font-size: var(--font-md);
}
.cb-editor-card .cb-props-panel > .cb-section + .cb-section {
margin-top: var(--space-md);
padding-top: var(--space-md);
}
.cb-editor-card .cb-props-panel > .cb-section:first-child > summary { display: none; }
/* Key & labels: Key + Labels side by side, Spelling full-width (prototype) */
.cb-editor-card .cb-props-panel > .cb-section:nth-child(4) > .cb-section-body {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-sm);
}
.cb-editor-card .cb-props-panel > .cb-section:nth-child(4) > .cb-section-body > .cb-sidebar-group {
flex: 1 1 40%;
min-width: 0;
}
.cb-editor-card .cb-props-panel > .cb-section:nth-child(4) > .cb-section-body > .cb-sidebar-group:last-child {
flex-basis: 100%;
}
/* ════════════════════════════════════════════════════════════════════
Rebuilt editor groups (2026-06-15) — clean labeled groups replace the
legacy sections. Tool-rail clusters are label-less; the
inspector groups carry quiet headers; only "Style…" panels collapse.
════════════════════════════════════════════════════════════════════ */
.cb-editor-card .cb-grp { display: flex; flex-direction: column; gap: var(--space-xs); }
.cb-editor-card .cb-grp-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.cb-editor-card .cb-grp-label {
font-size: var(--font-md);
font-weight: var(--weight-semibold);
color: var(--text);
}
/* Inspector groups: hairline + air between them */
.cb-editor-card .cb-props-panel > .cb-grp + .cb-grp {
border-top: 1px solid var(--border);
margin-top: var(--space-md);
padding-top: var(--space-md);
}
/* Tool-rail clusters: short hairline between them, divider before eraser */
.cb-editor-card .cb-tools-panel > .cb-grp + .cb-grp,
.cb-editor-card .cb-tools-panel > .cb-grp + .cb-sidebar-row {
border-top: 1px solid var(--border);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
/* Frets (first, label-less): Total + Start side by side */
.cb-editor-card .cb-props-panel > .cb-grp:first-child > .cb-grp-body {
flex-direction: row;
gap: var(--space-sm);
align-items: flex-start;
}
.cb-editor-card .cb-props-panel > .cb-grp:first-child > .cb-grp-body > .cb-sidebar-group {
flex: 1;
min-width: 0;
}
/* Key & labels (4th group): Key + Labels side by side, Spelling full width */
.cb-editor-card .cb-props-panel > .cb-grp:nth-child(4) > .cb-grp-body {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-sm);
}
.cb-editor-card .cb-props-panel > .cb-grp:nth-child(4) > .cb-grp-body > .cb-sidebar-group {
flex: 1 1 40%;
min-width: 0;
}
.cb-editor-card .cb-props-panel > .cb-grp:nth-child(4) > .cb-grp-body > .cb-sidebar-group:last-child {
flex-basis: 100%;
}
/* Collapsible "Style…" sub-sections — quiet chevron, no native marker */
.cb-editor-card .cb-collapse { margin-top: var(--space-2xs); }
.cb-editor-card .cb-collapse > summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-sm);
color: var(--text-3);
padding: var(--space-2xs) 0;
}
.cb-editor-card .cb-collapse > summary::-webkit-details-marker { display: none; }
.cb-editor-card .cb-collapse > summary::before {
content: '\203A';
font-size: 1.15em;
line-height: 1;
color: var(--text-3);
transition: transform var(--t-fast);
}
.cb-editor-card .cb-collapse[open] > summary::before { transform: rotate(90deg); }
.cb-editor-card .cb-collapse > .cb-grp-body { padding-top: var(--space-sm); gap: var(--space-sm); }
/* Style… panel internals: tidy rows + square B/I toggles that match the
control height (overrides the old inline widths). */
.cb-editor-card .cb-collapse .cb-sidebar-row { gap: var(--space-xs); align-items: center; }
.cb-editor-card .cb-ed-title-bold,
.cb-editor-card .cb-ed-title-italic,
.cb-editor-card .cb-ed-fingering-bold {
width: var(--ctl-h-lg) !important;
height: var(--ctl-h-lg);
min-width: 0;
padding: 0 !important;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cb-editor-card .cb-ed-restore-defaults { align-self: flex-start; height: auto; }
/* Field captions a touch larger to match the prototype */
.cb-editor-card .form-label,
.cb-editor-card .cb-sidebar-group > label { font-size: var(--font-sm); color: var(--text-2); }
/* Rail tiles read as clean icons — no resting border/fill; the active
tool shows the accent ring, hover gives a soft wash (prototype). */
.cb-editor-card .cb-ed-marker-btns .stacker-iv-btn,
.cb-editor-card .cb-ed-color-btns .cb-color-btn,
.cb-editor-card .cb-finger-btns .cb-finger-btn {
background: transparent;
border-color: transparent;
}
.cb-editor-card .cb-ed-marker-btns .stacker-iv-btn:hover,
.cb-editor-card .cb-ed-color-btns .cb-color-btn:hover,
.cb-editor-card .cb-finger-btns .cb-finger-btn:hover {
background: var(--surface-2);
border-color: transparent;
}
/* ══════════════════════════════════════════════════════════════════════
DIAGRAM EDITOR v2 (redesigned — prototype-matched, 2026-06-15)
Scope: .cb-editor-card.cbv2 (v1 rules above stay for ?editorv1=1).
Layout: floating tool rail │ canvas (hero board) │ inspector.
Theming via Fretly tokens; container-queries keep it from overflowing
in the narrow picker / chart side-panel contexts.
══════════════════════════════════════════════════════════════════════ */
.cb-editor-card.cbv2 {
container-type: inline-size;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
color: var(--text);
font-size: var(--font-base);
}
.cb-editor-card.cbv2 .cbv2-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(0, 15.5rem);
gap: var(--space-xl);
align-items: start;
}
/* ── floating tool rail ─────────────────────────────────────────────── */
.cb-editor-card.cbv2 .cbv2-rail {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
align-self: start;
padding: var(--space-md) var(--space-sm);
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.cb-editor-card.cbv2 .cbv2-tools { display: grid; grid-template-columns: repeat(2, 2.4rem); gap: var(--space-xs); }
.cb-editor-card.cbv2 .cbv2-swatches { display: grid; grid-template-columns: repeat(2, 2.4rem); gap: var(--space-xs); justify-items: center; }
.cb-editor-card.cbv2 .cbv2-fingers { display: grid; grid-template-columns: repeat(3, 1.55rem); gap: var(--space-xs); }
.cb-editor-card.cbv2 .cbv2-rail-row { display: flex; gap: var(--space-xs); }
.cb-editor-card.cbv2 .cbv2-rail-div { width: 1.4rem; height: var(--border-w); background: var(--border); margin: var(--space-2xs) 0; }
/* Rail tiles — borderless icons; soft wash on hover; accent chip when armed */
.cb-editor-card.cbv2 .cbv2-tool {
width: 2.4rem;
height: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: var(--border-w) solid transparent;
border-radius: var(--radius-md);
color: var(--text-2);
font-family: inherit;
font-size: var(--font-md);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.cb-editor-card.cbv2 .cbv2-fingers .cbv2-tool { width: 100%; height: 1.9rem; font-size: var(--font-sm); }
.cb-editor-card.cbv2 .cbv2-tool svg { width: 1.25rem; height: 1.25rem; display: block; }
.cb-editor-card.cbv2 .cbv2-tool:hover { background: var(--surface-2); color: var(--text); }
.cb-editor-card.cbv2 .cbv2-tool .cbv2-dot { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: currentColor; }
.cb-editor-card.cbv2 .cbv2-tool.cb-marker-btn--active,
.cb-editor-card.cbv2 .cbv2-tool.cb-finger-btn--active {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 1px 4px var(--accent-bg-hover);
}
/* Colour swatches */
.cb-editor-card.cbv2 .cbv2-sw {
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
border-radius: var(--radius-sm);
}
.cb-editor-card.cbv2 .cbv2-sw .cb-color-swatch {
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-sm);
border: var(--border-w) solid rgba(0,0,0,.14);
transition: transform var(--t-fast);
}
.cb-editor-card.cbv2 .cbv2-sw:hover .cb-color-swatch { transform: scale(1.1); }
.cb-editor-card.cbv2 .cbv2-sw.cb-color-btn--active .cb-color-swatch {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
.cb-editor-card.cbv2 .cb-color-swatch--ghost { background: #e0ddd8; }
.cb-editor-card.cbv2 .cb-color-swatch--white { background: #fff; }
.cb-editor-card.cbv2 .cb-color-swatch--none {
background:
linear-gradient(45deg, transparent 45%, #d9534f 45%, #d9534f 55%, transparent 55%),
var(--surface);
}
/* ── canvas (hero board) ────────────────────────────────────────────── */
.cb-editor-card.cbv2 .cbv2-canvas {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
min-width: 0;
}
.cb-editor-card.cbv2 .cbv2-info {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
width: 100%;
font-size: var(--font-xs);
color: var(--text-3);
text-align: center;
}
.cb-editor-card.cbv2 .cbv2-info .stacker-start-info { line-height: var(--leading-snug); }
.cb-editor-card.cbv2 .cbv2-info .cb-marker-count { white-space: nowrap; }
.cb-editor-card.cbv2 .cbv2-svg-area {
display: flex;
justify-content: center;
width: 100%;
min-width: 0;
}
.cb-editor-card.cbv2 .cbv2-svg-area .cb-align-wrap { display: flex; width: 100%; justify-content: center; }
.cb-editor-card.cbv2 .board-card {
position: relative;
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-md) var(--space-lg);
max-width: 100%;
}
.cb-editor-card.cbv2 .cb-svg { display: block; max-width: 100%; height: auto; }
/* Export / undo strip beneath the board */
.cb-editor-card.cbv2 .cbv2-export {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
max-width: 30rem;
flex-wrap: wrap;
}
.cb-editor-card.cbv2 .cbv2-export button {
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
color: var(--text-2);
font-family: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-medium);
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cb-editor-card.cbv2 .cbv2-export button:hover { border-color: var(--accent); background: var(--surface-2); color: var(--text); }
.cb-editor-card.cbv2 .cbv2-export button svg { width: 1rem; height: 1rem; }
/* push exports right after the undo/redo cluster (first two buttons) */
.cb-editor-card.cbv2 .cbv2-export > button:nth-child(3) { margin-left: auto; }
/* Save row (collection page) */
.cb-editor-card.cbv2 .stacker-builder-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
width: 100%;
max-width: 30rem;
}
.cb-editor-card.cbv2 .stacker-builder-actions .cbv2-spacer { flex: 1; }
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-name {
flex: 1;
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
font: inherit;
font-size: var(--font-sm);
color: var(--text);
}
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-pdf,
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-save {
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
border-radius: var(--radius-md);
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-pdf {
background: var(--surface);
border: var(--border-w) solid var(--border);
color: var(--text-2);
}
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-save {
background: var(--accent);
border: none;
color: #fff;
}
.cb-editor-card.cbv2 .stacker-builder-actions .cb-ed-save:hover { background: var(--accent-hover); }
/* ── inspector ──────────────────────────────────────────────────────── */
.cb-editor-card.cbv2 .cbv2-insp { display: flex; flex-direction: column; min-width: 0; }
.cb-editor-card.cbv2 .cbv2-grp { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm) 0; }
.cb-editor-card.cbv2 .cbv2-grp + .cbv2-grp { border-top: var(--border-w) solid var(--border); }
.cb-editor-card.cbv2 .cbv2-grp:first-child { padding-top: var(--space-2xs); }
.cb-editor-card.cbv2 .cbv2-grp-head { font-size: var(--font-md); font-weight: var(--weight-semibold); color: var(--text-1); letter-spacing: -0.01em; margin-bottom: var(--space-2xs); }
.cb-editor-card.cbv2 .cbv2-lbl { font-size: var(--font-sm); font-weight: var(--weight-medium); color: var(--text-2); }
.cb-editor-card.cbv2 .cbv2-lbl--sub { font-size: var(--font-xs); font-weight: var(--weight-normal); color: var(--text-3); }
.cb-editor-card.cbv2 .cbv2-row { display: flex; flex-direction: column; gap: var(--space-2xs); }
.cb-editor-card.cbv2 .cbv2-row2 { display: flex; gap: var(--space-sm); }
.cb-editor-card.cbv2 .cbv2-row2 > .cbv2-col { flex: 1; min-width: 0; }
.cb-editor-card.cbv2 .cbv2-row3 { display: flex; gap: var(--space-xs); align-items: center; }
.cb-editor-card.cbv2 .cbv2-col { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
/* Fields: native selects, popover triggers, and inputs all read alike */
.cb-editor-card.cbv2 select,
.cb-editor-card.cbv2 .fly-select-trigger,
.cb-editor-card.cbv2 input[type="text"],
.cb-editor-card.cbv2 input[type="number"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
display: flex;
align-items: center;
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
font: inherit;
font-size: var(--font-sm);
color: var(--text);
cursor: pointer;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cb-editor-card.cbv2 input[type="text"],
.cb-editor-card.cbv2 input[type="number"] { cursor: text; }
.cb-editor-card.cbv2 select:hover,
.cb-editor-card.cbv2 .fly-select-trigger:hover,
.cb-editor-card.cbv2 input[type="text"]:hover,
.cb-editor-card.cbv2 input[type="number"]:hover { border-color: var(--border-strong); }
.cb-editor-card.cbv2 select:focus,
.cb-editor-card.cbv2 .fly-select-trigger:focus,
.cb-editor-card.cbv2 input[type="text"]:focus,
.cb-editor-card.cbv2 input[type="number"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.cb-editor-card.cbv2 input::placeholder { color: var(--text-3); }
/* Chevron affordance */
.cb-editor-card.cbv2 select {
padding-right: var(--space-xl);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-sm) center;
}
.cb-editor-card.cbv2 .fly-select-trigger { justify-content: space-between; text-align: left; }
.cb-editor-card.cbv2 .fly-select-trigger::after {
content: '';
width: 0.75rem;
height: 0.75rem;
margin-left: var(--space-sm);
flex-shrink: 0;
background: currentColor;
opacity: .5;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Title row: text field + Auto chip */
.cb-editor-card.cbv2 .cbv2-titlerow { display: flex; gap: var(--space-xs); }
.cb-editor-card.cbv2 .cbv2-titlerow .cb-ed-title { flex: 1; }
.cb-editor-card.cbv2 .cbv2-autochip {
height: var(--ctl-h-lg);
padding: 0 var(--space-md);
border: none;
border-radius: var(--radius-md);
background: var(--accent);
color: #fff;
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
flex-shrink: 0;
}
.cb-editor-card.cbv2 .cbv2-autochip:hover { background: var(--accent-hover); }
/* Bold / italic / align toggle squares */
.cb-editor-card.cbv2 .cbv2-tgl {
height: var(--ctl-h-lg);
min-width: var(--ctl-h-lg);
padding: 0 var(--space-sm);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
color: var(--text-2);
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-bold);
cursor: pointer;
transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cb-editor-card.cbv2 .cbv2-tgl--italic { font-style: italic; }
.cb-editor-card.cbv2 .cbv2-tgl:hover { border-color: var(--accent); color: var(--text); }
.cb-editor-card.cbv2 .cbv2-tgl.is-active,
.cb-editor-card.cbv2 .cb-ed-align-btn--active {
background: var(--accent-bg);
border-color: var(--accent);
color: var(--accent);
}
.cb-editor-card.cbv2 .cbv2-row3 .cb-ed-fingering-size,
.cb-editor-card.cbv2 .cbv2-row3 .cb-ed-title-size { width: 4.5rem; flex: 0 0 auto; }
.cb-editor-card.cbv2 .cbv2-row3 .cb-ed-fingering-color { flex: 1; }
.cb-editor-card.cbv2 .cbv2-align-row { display: flex; gap: var(--space-xs); }
.cb-editor-card.cbv2 .cbv2-align-row .cbv2-tgl { flex: 1; }
/* Checkboxes */
.cb-editor-card.cbv2 .cbv2-check {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-sm);
color: var(--text-2);
cursor: pointer;
}
.cb-editor-card.cbv2 .cbv2-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
/* Disclosure ("Style…") rows */
.cb-editor-card.cbv2 .cbv2-collapse { border-top: var(--border-w) dashed var(--border); padding-top: var(--space-sm); margin-top: var(--space-2xs); }
.cb-editor-card.cbv2 .cbv2-more {
list-style: none;
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--font-sm);
color: var(--text-3);
cursor: pointer;
user-select: none;
}
.cb-editor-card.cbv2 .cbv2-more::-webkit-details-marker { display: none; }
.cb-editor-card.cbv2 .cbv2-more::before {
content: '\203A';
font-size: 1.2em;
line-height: 1;
transition: transform var(--t-fast);
}
.cb-editor-card.cbv2 .cbv2-collapse[open] > .cbv2-more::before { transform: rotate(90deg); }
.cb-editor-card.cbv2 .cbv2-collapse[open] > .cbv2-more { color: var(--text-2); margin-bottom: var(--space-sm); }
.cb-editor-card.cbv2 .cbv2-collapse-body { display: flex; flex-direction: column; gap: var(--space-sm); }
.cb-editor-card.cbv2 .cbv2-hint { font-size: var(--font-xs); color: var(--text-3); line-height: var(--leading-snug); }
.cb-editor-card.cbv2 .cbv2-ghost-btn {
align-self: flex-start;
height: var(--ctl-h-md);
padding: 0 var(--space-md);
background: transparent;
border: var(--border-w) solid var(--border);
border-radius: var(--radius-md);
color: var(--text-2);
font: inherit;
font-size: var(--font-xs);
cursor: pointer;
}
.cb-editor-card.cbv2 .cbv2-ghost-btn:hover { border-color: var(--accent); color: var(--text); }
/* Dark-mode: swatch borders need a lighter edge */
[data-theme="dark"] .cb-editor-card.cbv2 .cbv2-sw .cb-color-swatch { border-color: rgba(255,255,255,.16); }
[data-theme="dark"] .cb-editor-card.cbv2 .cb-color-swatch--ghost { background: #4a4843; }
/* ── responsive: stack when the editor itself is narrow (picker / chart
side-panel). Container-query → context-independent, fixes overflow. ── */
@container (max-width: 34rem) {
.cb-editor-card.cbv2 .cbv2-body { grid-template-columns: 1fr; gap: var(--space-lg); }
.cb-editor-card.cbv2 .cbv2-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: stretch; }
.cb-editor-card.cbv2 .cbv2-rail-div { width: var(--border-w); height: 1.4rem; margin: 0 var(--space-2xs); }
.cb-editor-card.cbv2 .cbv2-insp { max-width: none; }
}
/* Interval buttons in toolbar */
.stacker-iv-btns {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.stacker-iv-btn {
min-width: 44px;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
padding: 7px 12px;
}
/* Chips bar below toolbar */
.stacker-chips-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-height: 38px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 6px 10px;
margin-bottom: var(--sp-3);
}
.stacker-chips-placeholder {
font-size: 13px;
color: var(--text-3);
font-style: italic;
}
.stacker-chip {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--accent-bg);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
padding: 3px 6px 3px 10px;
font-size: 13px;
font-family: var(--font-mono);
font-weight: 500;
color: var(--text);
}
.stacker-chip-label { pointer-events: none; }
.stacker-chip-x {
background: none;
border: none;
color: var(--text-3);
font-size: 15px;
line-height: 1;
padding: 0 2px;
cursor: pointer;
border-radius: 3px;
transition: color var(--transition), background var(--transition);
}
.stacker-chip-x:hover {
color: var(--text);
background: rgba(0,0,0,0.08);
}
[data-theme="dark"] .stacker-chip-x:hover {
background: rgba(255,255,255,0.1);
}
.stacker-chip-plus {
font-size: 13px;
color: var(--text-3);
font-weight: 500;
user-select: none;
}
/* Info row: start info + pitch-class count */
.stacker-info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-4);
margin-bottom: var(--sp-2);
}
.stacker-start-info {
font-size: 12px;
color: var(--text-3);
min-height: 16px;
}
.stacker-pc-count {
font-size: 12px;
font-weight: 600;
color: var(--accent);
min-height: 18px;
}
/* Note sequence text */
.stacker-sequence {
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-2);
line-height: 1.7;
word-break: break-word;
min-height: 20px;
margin-bottom: var(--sp-4);
}
.stacker-sequence:empty { margin-bottom: 0; }
/* Builder action bar (name + save + cancel, right-aligned) */
.stacker-builder-actions {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.stacker-save-btn {
cursor: pointer;
white-space: nowrap;
font-weight: 600 !important;
color: var(--accent) !important;
padding-left: var(--sp-4) !important;
padding-right: var(--sp-4) !important;
}
.stacker-save-btn--dirty {
background: var(--accent) !important;
color: var(--bg) !important;
}
/* ── Custom Boards ─────────────────────────────────────────────────── */
/* Export row (Copy + Add) — sits between board card and save bar */
.cb-ed-export-row {
display: flex;
align-items: center;
gap: var(--sp-3);
justify-content: flex-end;
margin-top: var(--sp-4);
flex-wrap: wrap;
}
.cb-ed-export-row:empty { display: none; }
/* Dedicated row for the "Name this diagram…" input above the unified action strip */
.cb-ed-name-row {
display: flex;
justify-content: flex-end;
margin-top: var(--sp-3);
}
.cb-ed-name-row .cb-ed-name {
width: 260px;
}
/* Tabbed sidebar */
.cb-sidebar-tabs { display: flex; flex-direction: column; gap: 8px; }
.cb-sidebar-tab-nav {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border, #ddd);
margin-bottom: 4px;
}
.cb-sidebar-tab-btn {
flex: 1;
padding: 6px 8px;
font-size: 12px;
font-weight: 500;
background: transparent;
color: var(--text-2, #666);
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
font-family: inherit;
transition: color .15s, border-color .15s;
}
.cb-sidebar-tab-btn:hover { color: var(--text, #222); }
.cb-sidebar-tab-btn--active {
color: var(--accent, #f2a93b);
border-bottom-color: var(--accent, #f2a93b);
font-weight: 600;
}
.cb-sidebar-tab-panel { display: none; flex-direction: column; gap: var(--sp-3, 10px); }
.cb-sidebar-tab-panel--active { display: flex; }
/* Remove top-margin from first element inside each tab panel */
.cb-sidebar-tab-panel > .cb-sidebar-group:first-child { margin-top: 0; }
/* Uniform button sizing for export + save rows */
.cb-ed-export-row button,
.stacker-builder-actions .cb-ed-pdf,
.stacker-builder-actions .cb-ed-save {
height: 34px;
padding: 0 12px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
/* ── Stacker fret-range diagram cards (collection expanded view) ─────── */
.stk-fng-diagrams { margin-top: var(--sp-3); }
.stk-fng-diagram-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.stk-fng-diagram-card {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
flex: 0 0 auto;
}
.stk-fng-diagram-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 4px 8px;
border-bottom: 1px solid var(--border);
min-height: 28px;
}
.stk-fng-diagram-label {
font-size: 11px;
font-weight: 600;
color: var(--text-2);
white-space: nowrap;
}
.stk-fng-diagram-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
padding: 0;
border: 1px solid var(--border);
border-radius: 4px;
background: transparent;
color: var(--text-3);
cursor: pointer;
flex-shrink: 0;
transition: border-color .15s, color .15s;
}
.stk-fng-diagram-toggle svg { width: 14px; height: 14px; }
.stk-fng-diagram-toggle:hover { border-color: var(--accent); color: var(--text); }
.stk-fng-diagram-toggle--active {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-bg, rgba(242,169,59,0.12));
}
.stk-fng-diagram-body {
display: flex;
justify-content: center;
padding: 4px;
}
.stk-fng-diagram-body:empty { display: none; }
.stk-fng-diagram-body svg { display: block; }
[data-theme="dark"] .stk-fng-diagram-card { background: var(--bg-2); }
#cb-collection { padding-top: var(--sp-4); }
/* Marker shape buttons — larger glyphs, no transition flicker */
.cb-marker-btn {
font-size: 1.35em;
line-height: 1;
transition: none !important;
}
/* Marker shape button active state */
.cb-marker-btn--active {
border-color: var(--accent) !important;
outline: 2px solid var(--accent);
outline-offset: -2px;
color: var(--accent) !important;
}
/* Color button swatches */
.cb-color-swatch {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.15);
vertical-align: middle;
}
.cb-color-swatch--none {
background: linear-gradient(
to top right,
transparent calc(50% - 1px),
#d44 calc(50% - 1px),
#d44 calc(50% + 1px),
transparent calc(50% + 1px)
);
background-color: #fff;
}
.cb-color-btn {
padding: 5px 8px !important;
min-width: 34px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: none !important;
}
.cb-color-btn--active {
border-color: var(--accent) !important;
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Group container */
.cb-group {
margin-bottom: var(--sp-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-4);
}
.cb-group-header {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.cb-group-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cb-group-count {
font-size: 11px;
color: var(--text-3);
flex-shrink: 0;
}
.cb-add-board-btn {
display: block;
width: 100%;
padding: 8px 0;
margin-top: var(--sp-3);
border: 1.5px dashed var(--border);
border-radius: var(--r-md);
background: transparent;
color: var(--text-3);
font-size: 12px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-align: center;
transition: border-color .15s, color .15s;
}
.cb-add-board-btn:hover {
border-color: var(--accent);
color: var(--text);
}
/* ── Metronome ──────────────────────────────────────────────────────── */
.metro-bpm-row {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.metro-bpm-display {
display: flex;
flex-direction: column;
align-items: center;
}
.metro-bpm-edit {
background: transparent;
border: none;
font-size: 52px;
font-weight: 600;
letter-spacing: -0.03em;
color: var(--text);
width: 120px;
text-align: center;
line-height: 1;
padding: 0;
-moz-appearance: textfield;
}
.metro-bpm-edit::-webkit-inner-spin-button,
.metro-bpm-edit::-webkit-outer-spin-button { -webkit-appearance: none; }
.metro-bpm-edit:focus { outline: none; color: var(--accent); }
.metro-bpm-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
margin-top: -4px;
}
.metro-slider-row {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.metro-slider {
flex: 1;
accent-color: var(--accent);
cursor: pointer;
}
.metro-tempo-label {
font-size: 10px;
color: var(--text-3);
white-space: nowrap;
min-width: 36px;
}
.metro-tempo-label:last-child { text-align: right; }
.metro-beats-wrap {
display: flex;
justify-content: center;
gap: 14px;
min-height: 44px;
align-items: center;
flex-wrap: wrap;
}
.metro-beat-dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg);
border: 2px solid var(--border);
transition: background 0.05s, border-color 0.05s, transform 0.05s;
}
.metro-beat-dot.beat-one { border-color: var(--accent); }
.metro-beat-dot.flash-accent {
background: var(--accent);
border-color: var(--accent);
transform: scale(1.25);
}
.metro-beat-dot.flash-beat {
background: var(--text);
border-color: var(--text);
transform: scale(1.1);
}
.metro-beat-dot.flash-sub {
background: var(--text-3);
border-color: var(--text-3);
transform: scale(1.05);
}
.metro-controls-row {
display: flex;
gap: var(--sp-5);
flex-wrap: wrap;
}
.metro-control-group {
display: flex;
flex-direction: column;
gap: var(--sp-1);
flex: 1;
min-width: 120px;
}
.metro-stepper {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.metro-stepper-val {
font-size: 20px;
font-weight: 600;
min-width: 32px;
text-align: center;
color: var(--text);
}
.metro-action-row {
display: flex;
gap: var(--sp-3);
justify-content: center;
align-items: center;
}
/* ── Tuner ──────────────────────────────────────────────────────────── */
.tuner-dial-wrap {
display: flex;
justify-content: center;
}
.tuner-dial {
position: relative;
width: 260px;
height: 130px;
border-radius: 130px 130px 0 0;
background: var(--bg);
border: 1px solid var(--border);
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: var(--sp-3);
}
.tuner-scale {
position: absolute;
top: var(--sp-2);
left: 0; right: 0;
display: flex;
justify-content: space-between;
padding: 0 var(--sp-3);
}
.tuner-mark {
font-size: 10px;
color: var(--text-3);
font-weight: 500;
}
.tuner-mark-c { font-weight: 700; color: var(--text-2); }
.tuner-needle-wrap {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 110px;
transform-origin: bottom center;
display: flex;
justify-content: center;
}
#tuner-needle {
width: 3px;
height: 110px;
background: linear-gradient(to top, var(--accent), transparent);
border-radius: 2px;
transform-origin: bottom center;
transition: transform 0.1s ease;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -1.5px;
}
/* Green zone indicator */
.tuner-dial::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 110px;
background: rgba(72, 199, 116, 0.12);
border-radius: 2px;
}
.tuner-note-name {
font-size: 28px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.tuner-info-row {
display: flex;
justify-content: center;
gap: var(--sp-5);
font-size: 13px;
}
.tuner-freq { color: var(--text-3); }
.tuner-cents { font-weight: 600; color: var(--text); }
.tuner-status {
text-align: center;
font-size: 13px;
font-weight: 500;
color: var(--text-2);
min-height: 20px;
}
.tuner-action-row {
display: flex;
justify-content: center;
}
.tuner-section {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.tuner-strings-wrap {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.tuner-string-btn {
min-width: 52px;
font-size: 13px;
font-weight: 600;
}
.tuner-custom-row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
@media (max-width: 600px) {
.metro-bpm-edit { font-size: 40px; width: 90px; }
.tuner-dial { width: 220px; height: 110px; }
}
/* Accent toggle — off state */
#metro-accent-btn:not(.active) {
color: var(--text-3);
}
/* ── Tempo markings strip ──────────────────────────────────────────── */
.metro-tempo-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
padding: var(--sp-2) 0;
}
.metro-tempo-chip {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: 20px;
color: var(--text-2);
font-size: 11px;
font-weight: 500;
padding: 3px 10px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
white-space: nowrap;
line-height: 1.6;
}
.metro-tempo-chip:hover {
background: var(--bg-3, var(--bg-2));
color: var(--text);
border-color: var(--accent);
}
.metro-tempo-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
font-weight: 700;
transform: scale(1.07);
}
/* ── Volume / pitch rows ───────────────────────────────────────────── */
.metro-volume-row {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.metro-vol-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--text-3);
display: flex;
align-items: center;
}
.metro-vol-icon svg {
width: 20px;
height: 20px;
}
.metro-vol-slider {
flex: 1;
}
.metro-vol-val {
font-size: 11px;
color: var(--text-3);
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ── Metronome navbar widget ─────────────────────────────────────────── */
.metro-nav-widget {
display: flex;
align-items: center;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
margin-right: 2px;
background: var(--bg-2);
height: 32px;
flex-shrink: 0;
}
/* Icon button — navigates to tools page */
.metro-nav-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
color: var(--text-3);
border-right: 1px solid var(--border);
transition: background var(--transition), color var(--transition);
}
.metro-nav-icon-btn:hover { background: var(--border); color: var(--text); }
/* When metronome is running, icon turns accent */
.metro-nav-widget.running .metro-nav-icon-btn { color: var(--accent); }
.metro-nav-svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
/* Pendulum animation — speed set by --metro-swing-dur */
@keyframes metro-swing {
0% { transform-origin: 12px 21px; transform: rotate(-18deg); }
50% { transform-origin: 12px 21px; transform: rotate(18deg); }
100% { transform-origin: 12px 21px; transform: rotate(-18deg); }
}
.metro-nav-widget.running .metro-nav-arm,
.metro-nav-widget.running .metro-nav-dot {
animation: metro-swing var(--metro-swing-dur, 0.5s) ease-in-out infinite;
}
/* BPM button — toggles metronome on/off */
.metro-nav-bpm-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 32px;
padding: 0 8px;
background: transparent;
border: none;
cursor: pointer;
font-size: 12px;
font-weight: 700;
font-family: 'DM Mono', monospace;
letter-spacing: 0.04em;
color: var(--text-3);
transition: background var(--transition), color var(--transition);
}
.metro-nav-bpm-btn:hover { background: var(--border); }
/* Active (running) state: BPM in accent color */
.metro-nav-widget.running .metro-nav-bpm-btn { color: var(--accent); }
/* ── Chord Diagrams Panel ───────────────────────────────────────────── */
.ch-diagrams-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
margin-bottom: var(--panel-gap);
overflow: hidden;
}
.ch-diagrams-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: var(--sp-3) var(--sp-5);
cursor: pointer;
user-select: none;
background: var(--bg-2);
border-bottom: 1px solid transparent;
transition: background 0.12s;
gap: var(--sp-2) var(--sp-4);
min-height: 44px;
}
.ch-diagrams-header:hover { background: var(--bg-3, var(--border)); }
.ch-diagrams-header[aria-expanded="true"] {
border-bottom-color: var(--border);
background: var(--bg-2);
}
.ch-diagrams-header-left {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: 1;
min-width: 0;
}
.ch-diagrams-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ch-diagrams-header-controls {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
}
.ch-diag-ctrl-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.ch-diag-ctrl-sep { margin-left: var(--sp-2); }
.ch-diag-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.ch-diag-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.ch-diag-checkbox {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: var(--accent);
}
.ch-diagrams-chevron {
font-size: 13px;
color: var(--accent);
transition: transform 0.18s;
display: inline-block;
width: 16px;
text-align: center;
flex-shrink: 0;
font-weight: 700;
}
.ch-diagrams-header[aria-expanded="true"] .ch-diagrams-chevron {
transform: rotate(90deg);
}
.ch-diagrams-body {
padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.ch-diagrams-body[hidden] { display: none; }
/* Position group heading */
.ch-diagrams-group-heading {
width: 100%;
flex-basis: 100%;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: var(--sp-3) 0 var(--sp-2);
border-bottom: 1px solid var(--border);
}
.ch-diagrams-group-heading:first-child { padding-top: 0; }
/* Grid — flex-wrap but headings span full width */
.ch-diagrams-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-start;
justify-content: center;
}
/* Individual chord diagram card */
.ch-diag-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 8px 10px 6px;
flex: 0 0 auto;
min-width: 80px;
transition: border-color 0.12s, box-shadow 0.12s;
}
.ch-diag-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ch-diag-card-name {
font-size: 10px;
color: var(--text-3);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 168px;
}
.ch-diag-svg { display: block; overflow: visible; }
.ch-diagrams-empty {
padding: var(--sp-5);
text-align: center;
color: var(--text-3);
font-size: 13px;
}
/* ── Diagram pagination (lives in the header bar) ───────────────────── */
.ch-diag-pager-slot {
display: inline-flex;
align-items: center;
margin-left: 12px;
}
.ch-diag-pagination {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ch-diag-page-btn {
height: 34px;
padding: 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.ch-diag-page-btn:hover:not(:disabled) {
background: var(--bg-2);
border-color: var(--border-strong);
}
.ch-diag-page-btn:disabled {
opacity: .35;
cursor: not-allowed;
}
.ch-diag-page-info {
font-size: 12px;
color: var(--text-3);
line-height: normal;
}
.ch-diag-page-go {
display: inline-flex;
align-items: center;
gap: 2px;
}
.ch-diag-page-input {
width: 34px;
padding: 2px 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
font-size: 12px;
line-height: normal;
text-align: center;
-moz-appearance: textfield;
}
.ch-diag-page-input::-webkit-inner-spin-button,
.ch-diag-page-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ── Formula panel (scale/chord intervals + notes) ──────────────────── */
.formula-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
padding: var(--sp-3) var(--sp-5);
margin-top: var(--panel-gap);
margin-bottom: var(--panel-gap);
display: flex;
align-items: center;
gap: var(--sp-5);
flex-wrap: nowrap;
min-height: 0;
overflow: visible;
}
.formula-panel-title-wrap {
display: flex;
flex-direction: column;
gap: 2px;
flex-shrink: 0;
min-width: 110px;
}
.formula-panel-title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
white-space: nowrap;
}
.formula-panel-parent {
font-size: 11px;
color: var(--text-3);
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Table layout — columns align intervals over notes.
flex: 0 auto so it takes only as much width as its content (left-aligned). */
.formula-table {
border-collapse: collapse;
border-spacing: 0;
flex: 0 0 auto;
}
.formula-table-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-3);
padding-right: var(--sp-3);
white-space: nowrap;
vertical-align: middle;
}
.formula-table-cell {
font-size: 13px;
font-weight: 600;
color: var(--accent);
text-align: center;
padding: 2px 4px;
white-space: nowrap;
vertical-align: middle;
min-width: 24px;
}
.formula-table-sep {
font-size: 11px;
color: var(--border);
text-align: center;
padding: 0 1px;
vertical-align: middle;
user-select: none;
}
.formula-panel-meta {
margin-left: auto;
padding-left: var(--sp-3);
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: flex-start;
min-width: 0;
max-width: 420px;
}
.formula-panel-usage {
font-size: 12.5px;
color: var(--text-2);
font-style: italic;
letter-spacing: 0.01em;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3px;
text-align: center;
min-width: 120px;
flex: 1 1 0;
}
.formula-panel-usage > span:not(.formula-panel-usage-head) {
width: 100%;
}
.formula-panel-aka-item {
white-space: nowrap;
}
.formula-panel-usage-head {
font-size: 9px;
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-3);
background: color-mix(in srgb, var(--text-3) 8%, transparent);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 1px 7px;
line-height: 1.6;
white-space: nowrap;
}
.formula-panel-xref {
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed var(--border);
}
/* ── Toolbar panel toggle icons ─────────────────────────────────────── */
.toolbar-panel-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-md);
cursor: pointer;
color: var(--text-3);
flex-shrink: 0;
margin-left: auto; /* push to right end */
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.toolbar-panel-icon + .toolbar-panel-icon {
margin-left: 3px; /* tight gap matching column switcher */
}
.toolbar-panel-icon svg {
width: 15px;
height: 15px;
}
.toolbar-panel-icon:hover {
background: var(--bg-2);
color: var(--text);
border-color: var(--border);
}
.toolbar-panel-icon--active {
color: var(--accent);
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.toolbar-panel-icon--active:hover {
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Formula panel: no margin-top when directly below toolbar */
.formula-panel:empty { display: none !important; }
/* ══════════════════════════════════════════════════════════════════════
COLLECTIONS PAGE
══════════════════════════════════════════════════════════════════════ */
.coll-page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
margin-bottom: var(--panel-gap);
}
.coll-page-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--text);
margin: 0;
}
/* Buttons */
.coll-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 34px;
padding: 0 14px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.coll-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.coll-btn-primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.coll-btn-primary:hover { color: var(--accent); }
.coll-btn-add {
border-style: dashed;
color: var(--text-3);
width: 100%;
justify-content: center;
padding: 10px;
}
.coll-btn-add:hover { color: var(--text); border-color: var(--accent); }
.coll-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-3);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s ease;
flex-shrink: 0;
}
.coll-btn-icon svg { width: 14px; height: 14px; pointer-events: none; }
.coll-btn-icon:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-strong); }
.coll-btn-icon:active { transform: scale(0.82); }
.coll-btn-icon--active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.coll-btn-danger:hover { color: #e53e3e; border-color: #e53e3e; background: #fff0f0; }
.coll-btn-icon--success { color: #38a169 !important; border-color: #38a169 !important; }
/* Chart image capture (off-screen render target) */
/* Toast notification */
.coll-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(12px);
background: #1a1a1a;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.coll-toast--visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Custom context menu for chart copy */
.coll-chart-ctx-menu {
position: absolute;
z-index: 9999;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: 0 4px 16px rgba(0,0,0,.18);
padding: 4px 0;
min-width: 180px;
}
.coll-chart-ctx-item {
padding: 8px 14px;
font-size: 13px;
cursor: pointer;
color: var(--text);
}
.coll-chart-ctx-item:hover {
background: var(--bg-2);
}
/* Chart image capture (off-screen render target) */
.coll-chart-capture-title {
font-size: 22px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 6px;
}
.coll-chart-capture-meta {
font-size: 14px;
color: #555;
margin-bottom: 12px;
}
/* Collection block */
.coll-list { display: flex; flex-direction: column; gap: var(--panel-gap); }
.coll-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.coll-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
background: var(--bg-2);
}
.coll-block-header-left { display: flex; align-items: center; gap: var(--sp-3); }
.coll-block-header-right { display: flex; align-items: center; gap: var(--sp-2); }
.coll-block-name {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.coll-block-name[style*="cursor: pointer"]:hover {
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 2px;
}
/* Items list */
.coll-items { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.coll-empty { color: var(--text-3); font-size: 13px; padding: var(--sp-3) 0; }
.coll-intro { color: var(--text-3); font-size: 14px; line-height: 1.6; }
.coll-intro p { margin: 0 0 var(--sp-2); }
/* Item card */
.coll-item-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
/* Fretboard image is clickable (opens Scales page) — pointer + subtle hover feedback */
.coll-board-wrap {
cursor: pointer;
transition: opacity 0.15s;
}
.coll-board-wrap:hover { opacity: 0.82; }
.coll-item-header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-2);
border-bottom: 1px solid var(--border);
}
.coll-item-label-wrap { flex: 1; min-width: 0; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; }
.coll-item-card:has(.coll-lab-title) .coll-item-label-wrap { flex-direction: column; gap: 2px; }
.coll-item-label { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.coll-item-subtitle { font-size: 13px; color: var(--text-3); }
.coll-item-parent { font-size: 13px; color: var(--accent); font-style: italic; }
.coll-item-sep { font-size: 13px; color: var(--text-3); margin: 0 7px; user-select: none; opacity: 0.5; }
/* Editable title field for fretboard-lab collection items */
.coll-lab-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
outline: none;
border-bottom: 1px dashed transparent;
min-height: 1.2em;
cursor: text;
}
.coll-lab-title:hover { border-bottom-color: var(--border); }
.coll-lab-title:focus { border-bottom-color: var(--accent); }
.coll-lab-title:empty::before {
content: attr(data-placeholder);
color: var(--text-3);
font-weight: 400;
font-style: italic;
}
/* Notes field placeholder */
.coll-item-notes:empty::before {
content: attr(data-placeholder);
color: var(--text-3);
font-style: italic;
}
/* Edit form */
.coll-edit-form {
padding: var(--sp-4);
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.coll-edit-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
margin-bottom: var(--sp-3);
}
.coll-edit-row:last-child { margin-bottom: 0; }
.coll-edit-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
flex-shrink: 0;
}
.coll-edit-btns { justify-content: flex-end; }
.coll-label-input {
flex: 1;
min-width: 160px;
padding: 6px 10px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
}
.coll-label-input:focus { outline: none; border-color: var(--accent); }
.coll-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.coll-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* Board */
.coll-board-wrap { padding: 0 20px; }
/* Add form */
.coll-add-wrap { margin-top: var(--sp-2); }
.coll-add-form { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); background: var(--bg-2); }
/* ── Collections: column switcher ─────────────────────────────────── */
.coll-col-switcher {
display: flex;
gap: 3px;
align-items: center;
}
.coll-col-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
padding: 0;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-3);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.coll-col-btn svg { width: 15px; height: 15px; display: block; }
.coll-col-btn:hover { background: var(--bg-2); color: var(--text); border-color: var(--border-strong); }
.coll-col-btn--active {
background: color-mix(in srgb, var(--accent) 10%, transparent);
border-color: var(--accent);
color: var(--accent);
}
/* ── Collections: multi-column grids ──────────────────────────────── */
.coll-items--cols-1 { grid-template-columns: 1fr; }
.coll-items--cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.coll-items--cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
/* In 2-3 col mode the add-row and arp/scales subgroups span full width */
.coll-items--cols-2 .coll-add-wrap,
.coll-items--cols-3 .coll-add-wrap,
.coll-items--cols-2 > .coll-subgroup,
.coll-items--cols-3 > .coll-subgroup {
grid-column: 1 / -1;
}
/* Inside each subgroup, the body itself becomes a matching inner grid so cards
within arpeggios (and within scales) are columnised independently */
.coll-items--cols-2 > .coll-subgroup .coll-subgroup-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-3);
}
/* Cards in a grid are self-contained — restore borders stripped for list mode */
.coll-items--cols-2 > .coll-subgroup .coll-subgroup-body > .coll-item-card,
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body > .coll-item-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
/* Non-card rows (empty msg, add form) span all inner columns */
.coll-items--cols-2 > .coll-subgroup .coll-subgroup-body > :not(.coll-item-card),
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body > :not(.coll-item-card) {
grid-column: 1 / -1;
}
@media (max-width: 900px) {
.coll-items--cols-2,
.coll-items--cols-3 { grid-template-columns: 1fr; }
/* Drop inner grids to single column at mobile */
.coll-items--cols-2 > .coll-subgroup .coll-subgroup-body,
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body {
display: block;
}
.coll-items--cols-2 > .coll-subgroup .coll-subgroup-body > .coll-item-card,
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body > .coll-item-card {
border-left: none; border-right: none;
border-radius: 0;
}
}
@media (min-width: 901px) and (max-width: 1300px) {
.coll-items--cols-3 { grid-template-columns: 1fr 1fr; }
.coll-items--cols-3 > .coll-subgroup .coll-subgroup-body {
grid-template-columns: 1fr 1fr;
}
}
/* ── Collections: fret range input ────────────────────────────────── */
.coll-fret-input {
width: 52px;
padding: 5px 8px;
font-size: 13px;
text-align: center;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
}
.coll-fret-input:focus { outline: none; border-color: var(--accent); }
.coll-fret-sep {
font-size: 13px;
color: var(--text-3);
padding: 0 2px;
}
/* ── Collections: Scale / Chord type toggle ────────────────────────── */
.coll-type-row { gap: var(--sp-2); }
.coll-type-btn {
height: 34px;
padding: 0 12px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text-2);
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.coll-type-btn:hover { background: var(--bg-3); border-color: var(--border-strong); }
.coll-type-btn--active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.coll-type-btn--active:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ── Collections: PDF export button ───────────────────────────────── */
.coll-btn-export-pdf {
display: inline-flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 12px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text-3);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
white-space: nowrap;
}
.coll-btn-export-pdf svg { width: 13px; height: 13px; }
.coll-btn-export-pdf:hover {
background: var(--bg-2);
color: var(--accent);
border-color: var(--accent);
}
/* ── Toolbar right-side group (columns + panel toggles, tight) ─────── */
.toolbar-right-group {
display: flex;
align-items: center;
gap: 3px;
margin-left: auto;
flex-shrink: 0;
}
/* ── Toolbar column switcher (scales & chords pages) ───────────────── */
.toolbar-col-switcher {
display: flex;
gap: 3px;
align-items: center;
flex-shrink: 0;
margin-left: auto; /* push to right like toolbar-panel-icon */
}
.toolbar-col-switcher + .toolbar-panel-icon,
.toolbar-col-switcher + button {
margin-left: 3px;
}
/* Inside the right-group wrapper, gap handles all spacing */
.toolbar-right-group .toolbar-col-switcher { margin-left: 0; margin-right: 6px; }
.toolbar-right-group .toolbar-panel-icon { margin-left: 0 !important; }
/* Gallery toolbar: single right-side group so all controls share one margin-left:auto
and are evenly gapped, with no competing individual auto margins. */
.gallery-toolbar-right {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-left: auto;
flex-shrink: 0;
}
/* Neutralise the self-applied auto margins on children inside this group */
.gallery-toolbar-right .toolbar-col-switcher { margin-left: 0; }
.gallery-toolbar-right .toolbar-panel-icon { margin-left: 0; }
/* boards-grid column templates — set by JS */
.boards-grid--cols-1 { grid-template-columns: 1fr; }
.boards-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.boards-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* ── Arpeggios: controls bar + fret/sort controls ────────────────── */
/* Base styles for the per-board controls bar (.arp-controls is set as
className in chords.js; responsive overrides live in the ≤640px block). */
.arp-controls {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-5);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
min-height: 40px;
}
/* Fret-range wrapper (label element — "First:" / "Last:").
Responsive overrides ↓ in the ≤640px block. */
.arp-fret-wrap {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-2);
white-space: nowrap;
flex-shrink: 0;
}
/* Compact select inside a fret-range wrapper. */
.arp-fret-wrap .form-control {
font-size: 12px;
height: auto;
padding: 2px 4px;
width: auto;
min-width: 56px;
}
/* Sort-order wrapper (label element — "Order:") + its select. */
.arp-sort-wrap {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-2);
white-space: nowrap;
flex-shrink: 0;
}
.arp-sort-wrap .form-control {
font-size: 12px;
height: auto;
padding: 3px 6px;
width: auto;
min-width: 80px;
}
/* ── Arpeggios: drag to reorder ───────────────────────────────────── */
.arp-drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--text-3);
cursor: grab;
flex-shrink: 0;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.arp-drag-handle:hover { color: var(--text-2); }
.arp-drag-handle:active { cursor: grabbing; color: var(--text); }
.arp-drag-handle svg { width: 14px; height: 14px; pointer-events: none; }
.arp-card-dragging {
opacity: 0.4;
cursor: grabbing;
}
.arp-card-drag-over {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* ── Arpeggios: system (owner) board pill ─────────────────────────── */
.arp-system-pill {
font-size: 10px;
font-weight: 600;
color: var(--text-2);
background: var(--surface-2, rgba(128,128,128,.1));
border: 1px solid var(--border);
border-radius: 20px;
padding: 1px 8px;
white-space: nowrap;
flex-shrink: 0;
user-select: none;
letter-spacing: 0.02em;
}
/* Admin: make pill a clickable button */
button.arp-system-pill {
cursor: pointer;
transition: background .15s, border-color .15s;
}
button.arp-system-pill:hover {
background: var(--surface-3, rgba(128,128,128,.2));
border-color: var(--text-3);
}
button.arp-system-pill:active {
background: var(--surface-4, rgba(128,128,128,.28));
}
/* Popover menu for the Default pill */
.arp-pill-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: var(--surface, #fff);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
z-index: 100;
min-width: 160px;
padding: 4px 0;
font-size: 12px;
}
.arp-pill-menu button {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 6px 14px;
font-size: 12px;
color: var(--text);
cursor: pointer;
white-space: nowrap;
}
.arp-pill-menu button:hover {
background: var(--surface-2, rgba(128,128,128,.1));
}
/* ── Arpeggios: Pin to defaults button (admin) ────────────────────── */
.arp-pin-btn {
background: none;
border: 1px solid var(--border);
border-radius: var(--r-sm, 4px);
font-size: 12px;
color: var(--text-2);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
padding: 5px 12px;
font-family: inherit;
transition: border-color .15s, color .15s;
}
.arp-pin-btn:hover {
border-color: var(--accent, #f2a93b);
color: var(--text);
}
/* ── Arpeggios: undo button ───────────────────────────────────────── */
.arp-undo-btn {
background: none;
border: 1px solid var(--border);
border-radius: var(--r-sm, 4px);
font-size: 12px;
color: var(--text-2);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
padding: 5px 10px;
font-family: inherit;
transition: border-color .15s, color .15s;
}
.arp-undo-btn:hover {
border-color: var(--accent, #f2a93b);
color: var(--text);
}
/* ── Collections: drag to reorder ─────────────────────────────────── */
.coll-drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--text-3);
cursor: grab;
flex-shrink: 0;
}
.coll-drag-handle:active { cursor: grabbing; }
.coll-drag-handle svg { width: 14px; height: 14px; pointer-events: none; }
.coll-item-dragging {
opacity: 0.4;
}
.coll-item-drag-over {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* ── Section headers (Arpeggios / Scales) inside collection grid ────── */
/* Always span the full grid width */
.coll-section-header {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: var(--sp-3) 0 var(--sp-1);
}
.coll-section-header::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Collapsible section headers */
.coll-section-header--toggle { cursor:pointer; user-select:none; }
.coll-section-header--toggle:hover { color:var(--text-2); }
.coll-section-chevron {
display:inline-flex; align-items:center;
transition:transform 0.2s ease;
}
.coll-section-chevron svg { width:14px; height:14px; }
.coll-section-header--collapsed .coll-section-chevron { transform:rotate(-90deg); }
/* Section body spans full width of parent grid and stacks its item cards with breathing room */
.coll-section-body {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--sp-5);
padding-top: var(--sp-3);
}
/* ── Chord Chart Card ───────────────────────────────────────────────── */
/* Chart cards always span full width in multi-column grids */
.coll-items--cols-2 .coll-chart-card,
.coll-items--cols-3 .coll-chart-card { grid-column: 1 / -1; }
.coll-chart-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
overflow: hidden;
}
/* V2-linked chart cards in Collections: strip the inner card chrome.
The chart already sits inside the Collection's section, which has
its own border + heading — a second border around the chart is
visual redundancy. Mirrors the same treatment used for the chart
inside `.suite-suite-panel--collection`. Non-v2 (legacy diagram-
chart) cards keep their card chrome intact.
Three layers of chrome to strip:
1. The .coll-chart-card itself (outer card border).
2. Its .coll-chart-header (the title bar background/border).
3. The nested .coll-subgroup wrapper that holds the per-section
filter rows + chart display — this is the SECOND visual box
the user reported. Its header (chart title with chevron) is
kept as a flat row so the collapse affordance stays.
*/
.coll-dchart-card--v2 {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.coll-dchart-card--v2 .coll-chart-header {
background: transparent;
border-bottom: none;
padding-left: 0;
padding-right: 0;
}
.coll-dchart-card--v2 .coll-chart-body {
padding: 0;
}
.coll-dchart-card--v2 .coll-subgroup {
border: none;
border-radius: 0;
margin-top: 0;
background: transparent;
}
.coll-dchart-card--v2 .coll-subgroup-header {
background: transparent;
border-bottom: none;
padding-left: 0;
padding-right: 0;
}
.coll-dchart-card--v2 .coll-subgroup-body {
padding: 0;
background: transparent;
}
/* ── Inside the suite Collection tab: strip the card chrome, render title flat ── */
.suite-suite-panel--collection .coll-chart-card {
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.suite-suite-panel--collection .coll-chart-header {
background: transparent;
border-bottom: none;
padding: 0 0 var(--sp-2) 0;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.suite-suite-panel--collection .coll-chart-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.suite-suite-panel--collection .coll-chart-display {
padding: 0;
}
/* ── Chart card — per-section visibility control rows ───────────────── */
.coll-chart-sec-ctrls {
border-bottom: 1px solid var(--border);
padding: var(--sp-2) var(--sp-4);
display: flex;
flex-direction: column;
gap: 2px;
background: var(--bg-2);
}
.coll-chart-sec-ctrl-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-3);
min-height: 28px;
}
.coll-chart-sec-name {
font-size: 12px;
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 80px;
flex-shrink: 0;
}
/* ── Embedded collection — notes card (flat layout) ─────────────────── */
.coll-embed-notes-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
}
.coll-embed-desc {
width: 100%;
min-height: 36px;
resize: none;
overflow: hidden;
border: none;
background: transparent;
color: var(--text);
font-size: 14px;
line-height: 1.5;
outline: none;
padding: 0;
font-family: inherit;
}
.coll-chart-header {
display: flex;
flex-direction: column-reverse; /* controls on top, title below */
padding: var(--sp-3) var(--sp-4);
background: var(--bg-2);
border-bottom: 1px solid var(--border);
gap: var(--sp-2);
}
.coll-chart-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.coll-chart-header-controls {
display: flex;
align-items: center;
gap: var(--sp-1);
justify-content: flex-end;
flex-wrap: wrap;
}
/* Backing track play button — compact, accent-tinted */
.coll-chart-play-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
padding: 2px 8px;
border-radius: var(--radius, 4px);
background: var(--accent, #4a7cff);
color: #fff;
border: none;
cursor: pointer;
white-space: nowrap;
}
.coll-chart-play-btn svg { width: 10px; height: 10px; }
.coll-chart-play-btn:hover { opacity: 0.85; }
/* Chart body: section rows */
.coll-chart-body { padding: var(--sp-4) var(--sp-5); }
.coll-chart-section {
display: grid;
grid-template-columns: 56px 1fr;
align-items: start;
margin-bottom: var(--sp-3);
}
.coll-chart-section:last-child { margin-bottom: 0; }
.coll-chart-section-label {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding-top: 8px;
}
.coll-chart-section-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
border-radius: 3px;
padding: 2px 7px;
letter-spacing: 0.04em;
min-width: 22px;
}
.coll-chart-section-repeat {
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
}
.coll-chart-section-ts {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-2);
color: var(--text-2);
font-size: 11px;
font-weight: 600;
border-radius: 3px;
padding: 1px 5px;
white-space: nowrap;
border: 1px solid var(--border);
}
/* Chart-level time signature banner (shown when all sections share the same non-4/4 meter) */
.coll-chart-timesig-banner {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px 2px;
}
.coll-chart-timesig-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
font-size: 13px;
font-weight: 700;
border-radius: 4px;
padding: 2px 8px;
letter-spacing: 0.5px;
}
/* Bars row: opening double bar on left, closing bar after each bar */
.coll-chart-bars {
display: flex;
flex-wrap: wrap;
align-items: stretch;
border-left: 3px solid var(--text);
}
/* When the first bar is a repeat-start, hide the thick opening barline —
the repeat sign's own double-barline replaces it. */
.coll-chart-bars:has(> .coll-chart-bar--rep-start:first-child) {
border-left-color: transparent;
}
/* Grid mode: exactly N bars per row, cells scale to fill available width */
.coll-chart-bars--grid {
display: grid; /* grid-template-columns set inline by JS: repeat(N, 1fr) */
flex-wrap: unset; /* not applicable in grid, but belt-and-suspenders */
row-gap: 2px;
}
.coll-chart-bars--grid .coll-chart-bar {
min-width: 0; /* let grid item shrink below content size */
}
.coll-chart-bars--grid .coll-chart-cell {
flex: 1 1 0; /* cells share the bar width equally instead of fixed px */
width: auto;
min-width: 0;
overflow: visible; /* chord names wider than cell spill — never clipped in grid mode */
padding: 2px 8px; /* symmetric padding so chord text has breathing room from both barlines */
}
.coll-chart-bars--grid .coll-chart-chord {
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: nowrap;
}
.coll-chart-bar {
display: flex;
align-items: stretch;
border-right: 2px solid var(--text-3);
position: relative;
}
/* Repeat signs — overlay so bar grid stays aligned.
Compact: 3px double barline + bullet dots via text. */
.coll-chart-bar--rep-start::before,
.coll-chart-bar--rep-end::after {
content: '\2022\a\2022';
white-space: pre;
position: absolute;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 5.5px;
line-height: 8px;
color: var(--text);
z-index: 2;
pointer-events: none;
}
.coll-chart-bar--rep-start::before {
left: -1px;
border-left: 3px double var(--text);
padding-left: 1px;
}
.coll-chart-bar--rep-end::after {
right: -1px;
border-right: 3px double var(--text);
padding-right: 1px;
}
.coll-chart-cell {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 0 0 var(--ccs-w, 84px);
width: var(--ccs-w, 84px);
height: var(--ccs-h, 42px);
padding: 2px 4px 2px 8px;
overflow: hidden;
}
.coll-chart-chord {
font-size: var(--ccs-f, 15px);
font-weight: 600;
color: var(--text);
letter-spacing: -0.02em;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: var(--ccs-mw, 78px);
}
.coll-chart-chord--repeat { color: var(--text-3); font-size: calc(var(--ccs-f, 15px) + 2px); }
.coll-chart-chord--empty { color: var(--border); font-size: var(--ccs-f, 15px); }
/* Superscript for numeral chord extensions (e.g. 6⁷ instead of 67) */
.coll-chart-chord-ext {
font-size: 0.65em;
vertical-align: super;
line-height: 1;
font-weight: 500;
}
/* Size-step buttons in chart header */
.coll-chart-size-btns {
display: flex;
align-items: center;
gap: 2px;
margin-right: var(--sp-1);
border-right: 1px solid var(--border);
padding-right: var(--sp-2);
}
/* Chord form gallery below the chart */
.coll-chart-gallery {
border-top: 1px solid var(--border);
padding: var(--sp-3) var(--sp-5) var(--sp-4);
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: flex-end;
}
.coll-chart-gallery-label {
width: 100%;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-3);
}
.coll-chart-board-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.coll-chart-board-label {
font-size: 11px;
font-weight: 600;
color: var(--text-2, var(--text));
text-align: center;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coll-chart-board-wrap { cursor: default; }
/* ── Chord Chart Editor ────────────────────────────────────────────── */
.coll-chart-editor {
border-top: 1px solid var(--border);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-4);
background: var(--surface);
}
.coll-chart-editor-title-row {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.coll-chart-editor-title-input {
flex: 1;
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
}
.coll-chart-editor-title-input:focus { outline: none; border-color: var(--accent); }
.coll-chart-editor-sections { display: flex; flex-direction: column; gap: var(--sp-3); }
.coll-chart-editor-section {
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.coll-chart-editor-section-header {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
background: var(--bg-2);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.coll-chart-ed-sec-name {
width: 52px;
font-size: 13px;
font-weight: 700;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
text-align: center;
}
.coll-chart-ed-sec-repeat {
width: 46px;
font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
text-align: center;
}
.coll-chart-ed-sec-name:focus,
.coll-chart-ed-sec-repeat:focus { outline: none; border-color: var(--accent); }
.coll-chart-editor-bars {
padding: var(--sp-3) var(--sp-3) var(--sp-2);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.coll-chart-editor-bar-row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* Repeat sign toggle buttons in editor */
.coll-btn-rep {
background: none;
border: 1px solid var(--border);
border-radius: 3px;
cursor: pointer;
font-size: 12px;
padding: 1px 4px;
line-height: 1;
color: var(--text-3);
min-width: 22px;
text-align: center;
}
.coll-btn-rep:hover { border-color: var(--text-2); color: var(--text-2); }
.coll-btn-rep--on {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.coll-btn-rep--on:hover { opacity: 0.85; }
.coll-chart-bar-num {
min-width: 20px;
text-align: right;
color: var(--text-3);
}
.coll-chart-ed-chord {
width: 62px;
font-size: 12px;
padding: 4px 6px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
text-align: center;
}
.coll-chart-ed-chord:focus { outline: none; border-color: var(--accent); }
.coll-chart-editor-btns {
display: flex;
gap: var(--sp-2);
justify-content: flex-end;
}
/* Add buttons row (fretboard + chord chart) */
.coll-add-btns { display: flex; gap: var(--sp-2); }
/* Beats/time-sig select in section header */
.coll-chart-ed-sec-beats {
width: 58px;
font-size: 12px;
padding: 3px 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
}
.coll-chart-ed-sec-beats:focus { outline: none; border-color: var(--accent); }
/* Per-bar time-sig selector in editor */
.coll-chart-ed-bar-beats {
width: 52px;
font-size: 11px;
padding: 2px 3px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text-muted);
margin-right: 4px;
flex-shrink: 0;
}
.coll-chart-ed-bar-beats:focus { outline: none; border-color: var(--accent); }
/* Per-bar time-sig badge in display mode */
.coll-chart-bar-ts-badge {
position: absolute;
top: -1px;
left: 2px;
font-size: 9px;
font-weight: 600;
color: var(--accent);
line-height: 1;
pointer-events: none;
z-index: 1;
}
/* Unrecognised chord section in gallery */
.coll-chart-unrecognised {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-top: var(--sp-1);
}
.coll-chart-unrecognised-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: #e07b3a;
}
.coll-chart-unrecognised-item {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.coll-chart-unrecognised-sym {
font-size: 13px;
font-weight: 600;
color: var(--text);
min-width: 60px;
}
/* Alias definition inline form */
.coll-chart-alias-form {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
padding: var(--sp-2) var(--sp-3);
background: var(--bg-2);
border: 1px solid var(--accent);
border-radius: var(--r-sm);
margin-top: var(--sp-1);
}
.coll-chart-alias-label {
font-size: 12px;
color: var(--text-3);
}
.coll-chart-alias-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
max-width: 180px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.coll-chart-alias-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* ── Chord picker in editor (key select + type select per beat) ───── */
.coll-chart-chord-picker {
display: flex;
align-items: center;
gap: 2px;
}
.coll-chart-chord-key-sel {
width: 50px;
font-size: 11px;
padding: 3px 2px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
}
.coll-chart-chord-type-sel {
font-size: 11px;
padding: 3px 2px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
max-width: 96px;
}
.coll-chart-chord-key-sel:focus,
.coll-chart-chord-type-sel:focus { outline: none; border-color: var(--accent); }
/* ── Arpeggios toggle checkbox in card header ─────────────────────── */
.coll-chart-arp-toggle {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
margin-right: var(--sp-1);
}
.coll-chart-arp-check { cursor: pointer; }
.coll-chart-arp-label {
font-size: 10px;
font-weight: 700;
color: var(--text-2);
cursor: pointer;
user-select: none;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* ── Subsections within the chart card (Arpeggios, Scales) ───────── */
.coll-chart-subsection {
border-top: 1px solid var(--border);
padding: var(--sp-3) var(--sp-5) var(--sp-4);
}
.coll-chart-subsection-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-3);
}
/* Arpeggios grid: stacks item cards */
.coll-chart-arpeggios-grid {
display: flex;
flex-direction: column;
gap: var(--sp-5);
}
.coll-chart-arpeggios-grid .coll-item-card { border-radius: var(--r-md); }
/* Scales subsection: reuses standard item cards */
.coll-chart-scales-section .coll-add-wrap {
margin-top: var(--sp-2);
}
/* ═══════════════════════════════════════════════════════════════════════
BACKING-TRACK DOCK — fixed bottom panel, outside all chart card DOM
═══════════════════════════════════════════════════════════════════════ */
/* Only show the dock on the collections page (CSS fallback — JS router also sets this) */
#chart-player-dock { display: none; }
body:has(#route-collections.active) #chart-player-dock { display: block; }
#chart-player-dock {
position: fixed;
bottom: 0;
right: 0;
left: auto; /* shrink-wrap to content, not full-width */
width: max-content;
max-width: 92vw; /* safety cap so it never runs off screen */
z-index: 900;
background: var(--surface);
border-top: 2px solid var(--border);
border-left: 2px solid var(--border);
border-radius: var(--r-md) 0 0 0;
box-shadow: -4px -4px 24px rgba(0,0,0,0.12);
}
/* Title bar */
.chart-player-dock-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 16px;
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none; /* prevent text highlight on double-click */
}
.chart-player-dock-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
user-select: none;
}
.chart-player-dock-toggle {
display: flex;
align-items: center;
border: none;
background: transparent;
color: var(--text-3);
cursor: pointer;
padding: 2px 4px;
border-radius: var(--r-sm);
transition: color var(--transition);
}
.chart-player-dock-toggle:hover { color: var(--text-2); }
.dock-chevron {
width: 10px; height: 6px;
transition: transform 0.2s ease;
}
.chart-player-dock-toggle--closed .dock-chevron { transform: rotate(-90deg); }
/* Scrollable player strip */
.chart-player-dock-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: visible;
gap: 0;
/* height is driven by content — no max-height clipping */
transition: opacity 0.2s ease;
opacity: 1;
}
.chart-player-dock-body--closed {
display: none;
opacity: 0;
pointer-events: none;
}
/* No full-width dock anymore — just a small bottom margin for comfort */
body { padding-bottom: 24px; }
/* ═══════════════════════════════════════════════════════════════════════
CHART PLAYER — iReal-style backing-track player
═══════════════════════════════════════════════════════════════════════ */
.chart-player {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
background: var(--surface);
border-right: 1px solid var(--border);
min-width: 260px;
flex-shrink: 0;
}
/* Chart title at top of each player panel */
.chart-player-title {
font-size: 12px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
/* Transport: Play / Stop / Loop */
.chart-player-transport {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.chart-player-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-2);
cursor: pointer;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chart-player-btn svg { width: 13px; height: 13px; pointer-events: none; }
.chart-player-btn:hover { background: var(--bg-3); color: var(--text); }
.chart-player-btn--active {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-bg);
}
.chart-player-btn--active:hover { background: var(--accent-bg-hover); }
.chart-player-btn--play { width: 34px; height: 34px; }
.chart-player-btn--play svg { width: 15px; height: 15px; }
/* Settings row */
.chart-player-settings {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.chart-player-ts-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 4px;
padding: 2px 7px;
letter-spacing: 0.5px;
margin-right: 4px;
white-space: nowrap;
}
.chart-player-label {
font-size: 11px;
font-weight: 600;
color: var(--text-3);
letter-spacing: 0.04em;
text-transform: uppercase;
user-select: none;
}
.chart-player-bpm {
width: 52px;
padding: 4px 6px;
font-size: 13px;
font-family: var(--font-mono);
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
-moz-appearance: textfield;
}
.chart-player-bpm::-webkit-inner-spin-button,
.chart-player-bpm::-webkit-outer-spin-button { -webkit-appearance: none; }
.chart-player-bpm:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.chart-player-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.chart-player-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* Info / position */
.chart-player-info { display: flex; align-items: center; }
.chart-player-pos {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-3);
min-width: 80px;
}
/* Active bar highlight during playback */
.coll-chart-bar.chart-player-active-bar {
background: var(--accent-bg);
border-radius: var(--r-sm);
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Mixer ─────────────────────────────────────────────────────────── */
.chart-player-mixer {
display: flex;
flex-direction: column;
gap: 0;
padding: 2px 0;
touch-action: none; /* prevent any ancestor scroll/drag from claiming touch events */
}
/* Channel strip container — always visible, no collapse */
.chart-player-mixer-body {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 2px;
padding: 8px 0 4px;
touch-action: none; /* own all touch gestures — prevent parent scroll/drag */
}
/* Individual channel strip — vertical */
.chart-player-channel {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
width: 54px;
padding: 8px 6px 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: opacity var(--transition);
touch-action: none;
}
.chart-player-channel--muted {
opacity: 0.45;
}
/* Master channel: separated from the band channels with a small gap */
.chart-player-channel--master {
margin-left: 8px;
border-color: var(--accent);
}
/* Channel label */
.chart-player-ch-label {
font-size: 10px;
font-weight: 700;
color: var(--text-3);
letter-spacing: 0.06em;
text-transform: uppercase;
user-select: none;
text-align: center;
}
/* Value readout */
.chart-player-ch-val {
font-size: 10px;
font-family: var(--font-mono);
color: var(--text-3);
min-width: 24px;
text-align: center;
user-select: none;
}
/* Custom vertical fader (replaces native range input) */
.chart-player-fader-wrap {
width: 22px;
height: 80px;
display: flex;
justify-content: center;
align-items: stretch;
flex-shrink: 0;
cursor: ns-resize;
}
.chart-player-fader-track {
position: relative;
width: 4px;
height: 80px;
background: var(--border);
border-radius: 2px;
flex-shrink: 0;
}
.chart-player-fader-fill {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--accent);
border-radius: 2px;
pointer-events: none;
opacity: 0.45;
}
.chart-player-fader-thumb {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 12px;
background: var(--accent);
border-radius: 3px;
border: 2px solid var(--surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.15);
cursor: ns-resize;
touch-action: none;
/* centre line to look like a real fader cap */
background-image: linear-gradient(
to bottom,
transparent 40%, rgba(0,0,0,0.25) 40%,
rgba(0,0,0,0.25) 60%, transparent 60%
);
}
.chart-player-fader-thumb:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
filter: brightness(1.1);
}
/* Mute button */
.chart-player-mute {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 22px;
padding: 0;
border: 1px solid var(--accent);
border-radius: var(--r-sm);
background: var(--accent-bg);
color: var(--accent);
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition), color var(--transition),
border-color var(--transition), opacity var(--transition);
}
.chart-player-mute svg { width: 13px; height: 13px; pointer-events: none; }
.chart-player-mute:hover { background: var(--accent-bg-hover); }
.chart-player-mute--off {
border-color: var(--border);
background: var(--surface);
color: var(--text-3);
}
.chart-player-mute--off:hover { color: var(--text-2); }
/* Advanced MIDI import row (hidden by default, shown via ChartPlayer.setAdvanced(true)) */
.chart-player-advanced {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
width: 100%;
padding-top: 6px;
border-top: 1px dashed var(--border);
margin-top: 2px;
}
.chart-player-btn--midi {
width: 28px; height: 28px;
padding: 4px;
color: var(--accent);
border: 1px solid var(--accent);
background: var(--accent-bg);
border-radius: var(--r-sm);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--transition);
}
.chart-player-btn--midi:hover { background: var(--accent-bg-hover); }
.chart-player-btn--midi-clear {
width: 22px; height: 22px; padding: 2px;
font-size: 11px; line-height: 1;
color: var(--text-3); border: 1px solid var(--border);
background: var(--surface); border-radius: var(--r-sm); cursor: pointer;
}
.chart-player-btn--midi-clear:hover { color: var(--text-1); }
.chart-player-midi-status {
font-size: 11px;
color: var(--text-3);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════════════
COLLECTIONS — Export / Import / Category / Key-Transposition additions
══════════════════════════════════════════════════════════════════════ */
/* Header button group (Export, Import, + New) */
.coll-header-btns {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
}
.coll-header-btns .coll-btn svg {
width: 13px; height: 13px;
vertical-align: -1px;
margin-right: 4px;
}
/* New-collection inline form */
.coll-new-form-wrap {
margin-bottom: var(--panel-gap);
}
.coll-new-coll-form {
border: 1px solid var(--accent);
border-radius: var(--r-lg);
padding: var(--sp-4);
background: var(--bg-2);
}
/* ── Category sections ───────────────────────────────────────────────── */
/* ── Width-constrained layout for collections ───────────────────────── */
/* In expanded view, stack collections in a 2-col grid on wide screens */
.coll-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--panel-gap);
}
/* Column count is controlled by JS via inline style; these are responsive fallbacks */
.coll-list--grid.coll-grid--2 { grid-template-columns: 1fr 1fr; }
.coll-list--grid.coll-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) {
.coll-list--grid.coll-grid--2,
.coll-list--grid.coll-grid--3 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1400px) {
.coll-list--grid.coll-grid--3 { grid-template-columns: 1fr 1fr; }
}
/* List-view: categories in 2-column grid on wide screens */
.coll-list-grid-wrap {
display: grid;
grid-template-columns: 1fr;
gap: var(--panel-gap);
}
@media (min-width: 1100px) {
.coll-list-grid-wrap {
grid-template-columns: 1fr 1fr;
}
}
.coll-category-section {
margin-bottom: var(--panel-gap);
}
.coll-category-header {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-md);
cursor: pointer;
user-select: none;
transition: background var(--transition);
}
.coll-category-header:hover { background: var(--bg-2); }
.coll-cat-chevron { display: flex; align-items: center; }
.coll-cat-chevron svg {
width: 16px; height: 16px;
transition: transform 0.2s ease;
}
.coll-category-collapsed .coll-cat-chevron svg { transform: rotate(-90deg); }
.coll-cat-title {
font-size: 17px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.coll-cat-count {
font-size: 12px;
color: var(--text-3);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1px 7px;
line-height: 1.6;
}
.coll-category-body {
padding-left: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--panel-gap);
margin-top: var(--sp-3);
}
.coll-cat-hidden { display: none !important; }
/* ── Subcategory heading ─────────────────────────────────────────────── */
.coll-subcat-header {
padding: var(--sp-1) 0 var(--sp-1);
border-bottom: 1px solid var(--border);
margin-bottom: calc(var(--sp-2) * -1);
}
.coll-subcat-title {
font-size: 13px;
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ── Key selector row (in-all-keys / transposition) ─────────────────── */
.coll-key-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-5);
background: color-mix(in srgb, var(--accent) 5%, var(--bg-2));
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.coll-key-row-label {
font-size: 13px;
font-weight: 700;
color: var(--text-2);
}
.coll-key-transposer {
min-width: 80px;
font-weight: 600;
color: var(--accent);
border-color: var(--accent);
}
.coll-key-tpl-badge {
font-size: 11px;
color: var(--text-3);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 1px 6px;
cursor: default;
}
.coll-key-row-sep {
width: 1px;
height: 18px;
background: var(--border);
margin: 0 4px;
flex-shrink: 0;
}
.coll-key-row-bpm-input {
width: 68px;
padding: 2px 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
font-size: 13px;
font-weight: 600;
text-align: center;
-moz-appearance: textfield;
}
.coll-key-row-bpm-input::-webkit-inner-spin-button,
.coll-key-row-bpm-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.coll-key-row-bpm-input:focus {
outline: none;
border-color: var(--accent);
}
/* ── View toggle (list / expanded) ─────────────────────────────────── */
.coll-view-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
}
.coll-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: none;
background: var(--surface-2);
color: var(--text-3);
cursor: pointer;
transition: background var(--transition), color var(--transition);
padding: 0;
}
.coll-view-btn + .coll-view-btn { border-left: 1px solid var(--border); }
.coll-view-btn svg { width: 16px; height: 16px; }
.coll-view-btn:hover { background: var(--bg-2); color: var(--text-2); }
.coll-view-btn--active {
background: var(--accent) !important;
color: #fff !important;
}
.coll-toolbar-right {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
/* ── Page-level toolbar (search + view toggle) ───────────────────── */
.coll-page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-2);
}
.coll-page-hint {
font-size: 13px;
color: var(--text-3);
font-style: italic;
margin-bottom: var(--sp-3);
}
.coll-section-divider {
display: flex;
align-items: center;
gap: var(--sp-3);
margin: var(--sp-4) 0 var(--sp-2);
}
.coll-section-divider:first-child { margin-top: 0; }
.coll-section-divider-text {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
white-space: nowrap;
}
.coll-section-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.coll-search-wrap {
position: relative;
flex: 1;
max-width: 280px;
}
.coll-search-icon {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
color: var(--text-3);
display: flex;
pointer-events: none;
}
.coll-search-icon svg { width: 15px; height: 15px; }
.coll-search-input {
width: 100%;
padding: 6px 10px 6px 28px;
border: 1px solid var(--border);
border-radius: var(--r-md);
font-size: 13px;
background: var(--surface);
color: var(--text);
outline: none;
box-sizing: border-box;
transition: border-color 0.15s;
}
.coll-search-input:focus { border-color: var(--accent); }
.coll-search-input::placeholder { color: var(--text-3); }
/* ══ CardManager — shared folder + card-grid layout ══════════════ */
.cm-header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.cm-title { font-size: 22px; font-weight: 700; margin: 0; }
.cm-header-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cm-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.cm-search-wrap { position: relative; flex: 1; max-width: 280px; }
.cm-search-icon {
position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
color: var(--text-3); display: flex; pointer-events: none;
}
.cm-search-icon svg { width: 15px; height: 15px; }
.cm-search-input {
width: 100%; padding: 6px 10px 6px 28px; border: 1px solid var(--border);
border-radius: var(--r-md, 6px); font-size: 13px; background: var(--surface);
color: var(--text); outline: none; box-sizing: border-box; transition: border-color .15s;
}
.cm-search-input:focus { border-color: var(--accent); }
.cm-search-input::placeholder { color: var(--text-3); }
.cm-sort-toggle {
display: flex; border: 1px solid var(--border); border-radius: var(--r-md, 6px);
overflow: hidden; flex-shrink: 0;
}
.cm-sort-btn {
background: var(--surface); border: none; padding: 4px 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--text-3); transition: background .12s, color .12s;
}
.cm-sort-btn + .cm-sort-btn { border-left: 1px solid var(--border); }
.cm-sort-btn svg { width: 16px; height: 16px; }
.cm-sort-btn:hover { background: var(--bg-2); color: var(--text-2); }
.cm-sort-btn--active { background: var(--accent); color: #fff; }
.cm-sort-btn--active:hover { background: var(--accent); color: #fff; }
.cm-layout {
display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start;
}
@media (max-width: 700px) { .cm-layout { grid-template-columns: 1fr; } }
.cm-sidebar {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
padding: 8px 0; max-height: calc(100vh - 180px); overflow-y: auto; scrollbar-width: thin;
position: sticky; top: 20px;
}
.cm-sidebar-divider {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-3); padding: 8px 12px 4px; user-select: none;
}
.cm-sidebar-item {
display: flex; align-items: center; gap: 4px; padding: 5px 10px;
font-size: 12px; color: var(--text); cursor: pointer; transition: background .1s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.cm-sidebar-item:hover { background: var(--bg-3); }
.cm-sidebar-item--active { background: rgba(232,133,74,.1); color: var(--accent); font-weight: 600; }
.cm-sidebar-icon { font-size: 13px; flex-shrink: 0; }
.cm-sidebar-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cm-sidebar-count {
font-size: 10px; color: var(--text-2); background: var(--bg-2); border-radius: 8px;
padding: 1px 5px; margin-left: auto; flex-shrink: 0;
}
.cm-main { min-width: 0; }
.cm-empty { color: var(--text-2); font-size: 14px; padding: 40px 0; text-align: center; }
.cm-subgroup-jump {
display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px;
margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.cm-subgroup-chip {
display: inline-block; padding: 4px 12px; border-radius: 14px;
background: var(--surface); border: 1px solid var(--border);
font-size: 12px; font-weight: 600; color: var(--text);
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: border-color .15s, background .15s;
}
.cm-subgroup-chip:hover { border-color: var(--accent); background: rgba(232,133,74,.06); color: var(--accent); }
.cm-subgroup-header {
font-size: 13px; font-weight: 700; color: var(--text-2); text-transform: uppercase;
letter-spacing: .3px; padding: 12px 0 6px; margin-top: 4px;
border-bottom: 1px solid var(--border); scroll-margin-top: 20px;
}
.cm-subgroup-header:first-child { margin-top: 0; }
.cm-card-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
margin-bottom: 8px;
}
.cm-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
padding: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.cm-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cm-card-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; color: var(--text); }
.cm-card-meta { font-size: 11px; color: var(--text-2); margin-bottom: 10px; }
.cm-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
/* ── Folder layout (Sheets-style two-panel) ──────────────────────── */
.coll-folder-layout {
display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start;
}
@media (max-width: 700px) { .coll-folder-layout { grid-template-columns: 1fr; } }
.coll-folder-sidebar {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
padding: 8px 0; max-height: calc(100vh - 180px); overflow-y: auto; scrollbar-width: thin;
position: sticky; top: 20px;
}
.coll-sidebar-divider {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-3); padding: 8px 12px 4px; user-select: none;
}
.coll-folder-item {
display: flex; align-items: center; gap: 4px; padding: 5px 10px;
font-size: 12px; color: var(--text); cursor: pointer; transition: background .1s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;
}
.coll-folder-item:hover { background: var(--bg-3); }
.coll-folder-item--active { background: rgba(232,133,74,.1); color: var(--accent); font-weight: 600; }
.coll-folder-icon { font-size: 13px; flex-shrink: 0; }
.coll-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.coll-folder-count {
font-size: 10px; color: var(--text-2); background: var(--bg-2); border-radius: 8px;
padding: 1px 5px; margin-left: auto; flex-shrink: 0;
}
.coll-folder-main { min-width: 0; }
.coll-empty { color: var(--text-2); font-size: 14px; padding: 40px 0; text-align: center; }
/* ── Collection card grid ────────────────────────────────────────── */
.coll-card-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.coll-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
padding: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.coll-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.coll-card-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; color: var(--text); }
.coll-card-meta { font-size: 11px; color: var(--text-2); margin-bottom: 10px; }
.coll-card-actions { display: flex; gap: 5px; flex-wrap: wrap; }
/* ── List view (legacy — kept for compatibility) ─────────────────── */
.coll-list-container {
/* no padding — rows are flush */
}
.coll-list-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 10px var(--sp-5);
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background 0.12s;
}
.coll-list-row:last-child { border-bottom: none; }
.coll-list-row:hover { background: var(--bg-2); }
.coll-list-row-icon {
flex-shrink: 0;
display: flex;
color: var(--text-3);
}
.coll-list-row-icon svg { width: 18px; height: 18px; }
.coll-list-row-name {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.coll-list-row-badge {
font-size: 11px;
color: var(--text-3);
background: var(--bg-3);
border: 1px solid var(--border);
border-radius: 10px;
padding: 1px 7px;
text-transform: uppercase;
letter-spacing: 0.03em;
flex-shrink: 0;
}
.coll-list-row-meta {
font-size: 12px;
color: var(--text-3);
white-space: nowrap;
min-width: 60px;
text-align: right;
}
.coll-list-row-chevron {
flex-shrink: 0;
display: flex;
color: var(--text-3);
}
.coll-list-row-chevron svg { width: 16px; height: 16px; }
/* ── Detail view (drill-in from list) ─────────────────────────────── */
.coll-detail-view {
padding: var(--sp-4) var(--sp-5);
}
.coll-detail-back {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
color: var(--accent);
cursor: pointer;
font-size: 14px;
font-weight: 500;
padding: 0 0 var(--sp-3);
margin-left: -2px;
}
.coll-detail-back svg { width: 18px; height: 18px; }
.coll-detail-back:hover { text-decoration: underline; }
/* ── Suite-aware Collection header (locked architecture 2026-06-02)
Renders on Collections owned by a Suite (collection.suiteId set).
Three blocks stacked: breadcrumb / nav pills / diagram palette.
See collections.js _buildSuiteSlotHeader. */
.coll-suite-header {
margin-bottom: var(--space-md, 14px);
padding: var(--space-md, 14px);
background: var(--surface, #fff);
border: 1px solid var(--border, #e1ddd2);
border-radius: var(--radius-md, 10px);
display: flex;
flex-direction: column;
gap: var(--space-sm, 10px);
}
.coll-suite-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-xs, 6px);
font-size: var(--font-sm, 13px);
color: var(--text-2, #777);
}
.coll-suite-crumb {
text-decoration: none;
color: var(--text-2, #777);
}
a.coll-suite-crumb:hover { color: var(--accent, #c85a1a); text-decoration: underline; }
.coll-suite-crumb--song {
font-weight: var(--weight-bold, 600);
color: var(--text, #2a2a2a);
}
.coll-suite-crumb--current {
font-weight: var(--weight-bold, 600);
color: var(--accent, #c85a1a);
}
.coll-suite-crumb-sep {
color: var(--text-3, #b8b3a3);
user-select: none;
}
.coll-suite-pills {
display: inline-flex;
border: 1px solid var(--border, #e1ddd2);
border-radius: var(--radius-md, 8px);
overflow: hidden;
align-self: flex-start;
}
.coll-suite-pill {
background: transparent;
border: 0;
padding: 6px 16px;
font-size: var(--font-sm, 13px);
font-weight: var(--weight-medium, 500);
color: var(--text-2, #777);
cursor: pointer;
transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.coll-suite-pill + .coll-suite-pill { border-left: 1px solid var(--border, #e1ddd2); }
.coll-suite-pill:hover:not(:disabled) {
background: var(--surface-2, #f8f5ef);
color: var(--text, #2a2a2a);
}
.coll-suite-pill--current,
.coll-suite-pill:disabled {
background: var(--accent, #c85a1a);
color: #fff;
cursor: default;
}
.coll-suite-palette {
margin-top: var(--space-xs, 6px);
padding-top: var(--space-sm, 10px);
border-top: 1px solid var(--border, #e1ddd2);
}
.coll-suite-palette-title {
font-size: var(--font-xs, 12px);
font-weight: var(--weight-bold, 600);
color: var(--text-2, #777);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-xs, 6px);
}
.coll-suite-palette-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs, 6px);
}
.coll-suite-palette-tile {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: var(--font-sm, 13px);
font-weight: var(--weight-medium, 500);
background: var(--accent-bg, rgba(232,135,74,.08));
border: 1px solid var(--accent-border, rgba(232,135,74,.25));
border-radius: 999px;
color: var(--accent-strong, #c85a1a);
cursor: pointer;
transition: background var(--t-fast, .12s), color var(--t-fast, .12s);
}
.coll-suite-palette-tile:hover {
background: var(--accent, #c85a1a);
color: #fff;
}
/* ── Collection-level collapse toggle ─────────────────────────────── */
.coll-collapse-toggle {
flex-shrink: 0;
}
.coll-collapse-toggle svg {
transition: transform 0.2s ease;
}
.coll-collapse-toggle--collapsed svg {
transform: rotate(-90deg);
}
/* Bars-per-line selector in chord chart header */
.coll-chart-bpl-sel {
height: 34px;
padding: 0 26px 0 10px;
min-width: 64px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.coll-chart-bpl-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* Numeral-mode selector in chord chart header */
.coll-chart-numeral-sel {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.coll-chart-numeral-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* ── Article cards ──────────────────────────────────────────────────── */
.coll-article-card { }
.coll-article-header { }
.coll-article-icon { display:flex; align-items:center; color:var(--accent); flex-shrink:0; }
.coll-article-icon svg { width:18px; height:18px; }
.coll-article-body { padding:var(--sp-3) var(--sp-4); }
.coll-article-link-row { display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2); }
.coll-article-link-icon { display:flex; align-items:center; color:var(--text-3); flex-shrink:0; }
.coll-article-link-icon svg { width:14px; height:14px; }
.coll-article-link {
font-size:13px; color:var(--accent); text-decoration:none;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.coll-article-link:hover { text-decoration:underline; }
.coll-article-tags { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-bottom:var(--sp-2); }
.coll-article-tag {
font-size:11px; font-weight:500; color:var(--accent);
background:color-mix(in srgb, var(--accent) 10%, transparent);
border-radius:var(--r-sm); padding:2px 8px;
}
/* ── Personal notes (all item types) ───────────────────────────────── */
.coll-item-notes-wrap {
padding:var(--sp-2) var(--sp-4) var(--sp-3);
border-top:1px solid var(--border);
}
.coll-item-notes-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:var(--sp-1);
}
.coll-item-notes-label {
font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:0.06em;
color:var(--text-3);
}
.coll-notes-edit-btn {
background:none; border:none; cursor:pointer; padding:2px;
color:var(--text-3); opacity:0.5; transition:opacity 0.15s;
display:flex; align-items:center;
}
.coll-notes-edit-btn svg { width:13px; height:13px; }
.coll-notes-edit-btn:hover { opacity:1; color:var(--accent); }
/* Read mode: integrated text display */
.coll-item-notes-read {
font-size:13px; line-height:1.55; color:var(--text);
white-space:pre-wrap; word-break:break-word;
}
.coll-item-notes-read--empty { display:none; }
/* Links inside notes */
.coll-notes-link {
color:var(--accent); text-decoration:none;
border-bottom:1px dotted color-mix(in srgb, var(--accent) 40%, transparent);
transition:border-color 0.15s, color 0.15s;
}
.coll-notes-link:hover {
border-bottom-style:solid;
border-bottom-color:var(--accent);
}
/* Edit mode: textarea */
.coll-item-notes-edit {
width:100%; box-sizing:border-box;
border:1px solid var(--accent); border-radius:var(--r-md);
padding:var(--sp-2) var(--sp-3);
font-size:13px; font-family:inherit; color:var(--text);
background:var(--bg); resize:none; min-height:60px;
outline:none; overflow:hidden;
}
.coll-item-notes-edit::placeholder { color:var(--text-3); opacity:0.6; }
/* ── Collection description ────────────────────────────────────────── */
.coll-description-wrap {
padding:0 var(--sp-4) var(--sp-3);
}
.coll-description {
width:100%; box-sizing:border-box;
border:1px dashed var(--border); border-radius:var(--r-md);
padding:var(--sp-2) var(--sp-3);
font-size:13px; font-family:inherit; color:var(--text);
background:transparent; resize:none; min-height:32px;
overflow:hidden;
transition:border-color 0.15s, background 0.15s;
}
.coll-description:focus { border-color:var(--accent); background:var(--bg); outline:none; }
.coll-description::placeholder { color:var(--text-3); opacity:0.5; }
/* ═══════════════════════════════════════════════════════════════════════
Add-to-Collection: button, picker dropdown, toast
═══════════════════════════════════════════════════════════════════════ */
/* ── Trigger button ───────────────────────────────────────────────────── */
.atc-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
height: 26px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-2);
transition: border-color 0.12s, color 0.12s, background 0.12s;
flex-shrink: 0;
}
.atc-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
opacity: 0.75;
}
.atc-btn:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-bg);
}
.atc-btn:hover svg { opacity: 1; }
/* ── Picker dropdown ──────────────────────────────────────────────────── */
.atc-picker {
position: absolute;
z-index: 9000;
width: 300px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
box-shadow: 0 4px 20px rgba(0,0,0,0.14);
overflow: hidden;
font-size: 13px;
}
.atc-picker-header {
padding: 9px 12px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-3);
border-bottom: 1px solid var(--border);
}
.atc-picker-title-row {
padding: 8px 12px 4px;
}
.atc-picker-title-input {
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
outline: none;
}
.atc-picker-title-input:focus { border-color: var(--accent); }
.atc-picker-list {
max-height: 340px;
overflow-y: auto;
}
.atc-picker-empty {
padding: 10px 12px;
font-size: 12px;
color: var(--text-3);
font-style: italic;
}
.atc-picker-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: none;
border: none;
cursor: pointer;
text-align: left;
color: var(--text);
transition: background 0.1s;
}
.atc-picker-row:hover {
background: var(--bg-2);
}
.atc-picker-row-icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--text-3);
}
.atc-picker-row-icon svg {
width: 14px;
height: 14px;
}
.atc-picker-row-name {
flex: 1;
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.atc-picker-row-count {
font-size: 11px;
color: var(--text-3);
flex-shrink: 0;
}
/* Hierarchical chevron + sub-items */
.atc-picker-chevron {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--text-3);
transition: transform 0.15s ease;
cursor: pointer;
}
.atc-picker-chevron svg { width: 10px; height: 10px; }
.atc-picker-chevron--open { transform: rotate(90deg); }
/* Category level (top) */
.atc-picker-cat-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
font-size: 13px;
font-weight: 700;
color: var(--text);
}
.atc-picker-cat-row:hover { background: var(--bg-2); }
.atc-picker-cat-name { flex: 1; }
.atc-picker-cat-body {
padding-left: 12px;
}
.atc-picker-cat-body .atc-picker-row {
padding-left: 8px;
}
.atc-picker-sublist {
padding-left: 36px;
}
.atc-picker-subrow {
padding: 3px 8px;
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.atc-picker-add-btn {
display: block;
width: calc(100% - 4px);
padding: 5px 8px;
margin: 4px 2px 2px;
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: none;
border: 1px dashed var(--accent);
border-radius: var(--r-sm);
cursor: pointer;
text-align: left;
}
.atc-picker-add-btn:hover { background: var(--accent-bg); }
.atc-picker-group + .atc-picker-group { border-top: 1px solid var(--border); }
.atc-picker-divider {
height: 1px;
background: var(--border);
margin: 0;
}
.atc-picker-new {
padding: 6px 8px;
}
.atc-picker-new-btn {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 6px;
background: none;
border: none;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--accent);
border-radius: var(--r-sm);
transition: background 0.1s;
}
.atc-picker-new-btn svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.atc-picker-new-btn:hover { background: var(--accent-bg); }
.atc-picker-new-form {
display: flex;
gap: 6px;
align-items: center;
margin-top: 2px;
}
.atc-picker-new-input {
flex: 1;
min-width: 0;
padding: 5px 8px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
outline: none;
}
.atc-picker-new-input:focus { border-color: var(--accent); }
.atc-picker-new-confirm {
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
border-radius: var(--r-sm);
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
cursor: pointer;
white-space: nowrap;
transition: background 0.1s;
}
.atc-picker-new-confirm:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* ── Toast ────────────────────────────────────────────────────────────── */
.atc-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(12px);
background: var(--text);
color: var(--surface);
font-size: 13px;
font-weight: 500;
padding: 8px 18px;
border-radius: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,0.22);
pointer-events: none;
opacity: 0;
transition: opacity 0.18s, transform 0.18s;
white-space: nowrap;
z-index: 9999;
}
.atc-toast--in {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.atc-toast--out {
opacity: 0;
transform: translateX(-50%) translateY(6px);
}
/* reading-mode: hide add buttons */
[data-reading-mode] .atc-btn { display: none !important; }
/* ── Send to Lab button (matches atc-btn style) ──────────────────────── */
.send-to-lab-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
height: 26px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-2);
transition: border-color .15s, color .15s, background .15s;
}
.send-to-lab-btn svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.75; }
.send-to-lab-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.send-to-lab-btn:hover svg { opacity: 1; }
[data-reading-mode] .send-to-lab-btn { display: none !important; }
/* ══════════════════════════════════════════════════════════════════════
USER DROPDOWN (navbar)
══════════════════════════════════════════════════════════════════════ */
.icon-dropdown-header {
padding: 8px 14px 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
border-bottom: 1px solid var(--border);
pointer-events: none;
}
a.icon-dropdown-item {
text-decoration: none;
color: var(--text);
}
.icon-dropdown-divider {
height: 1px; background: var(--border); margin: 4px 0;
}
.icon-dropdown-item--danger {
color: #c0392b !important;
}
[data-theme="dark"] .icon-dropdown-item--danger {
color: #e57373 !important;
}
/* ══════════════════════════════════════════════════════════════════════
ACCOUNT PAGE
══════════════════════════════════════════════════════════════════════ */
.account-page {
max-width: 560px;
margin: 0 auto;
padding-top: var(--sp-4);
}
/* Tokens applied per CLAUDE.md "TOP-PRIORITY DOCTRINE - Design
tokens + UI scale". Every font-size / padding / margin / radius
here references a `var(--*)` token so the user's Interface size +
Density preferences propagate. */
.account-heading {
font-size: var(--font-xl);
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: var(--space-xl);
}
/* ── Card ── */
.account-card {
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-lg);
}
.account-card-title {
font-size: var(--font-md);
font-weight: var(--weight-semibold);
color: var(--text);
margin-bottom: var(--space-lg);
letter-spacing: -0.01em;
}
/* ── Profile fields ── */
.account-field {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) 0;
}
.account-field + .account-field {
border-top: var(--border-w) solid var(--border);
}
.account-label {
font-size: var(--font-sm);
font-weight: var(--weight-medium);
color: var(--text-3);
}
.account-value {
font-size: var(--font-sm);
color: var(--text);
font-weight: var(--weight-medium);
}
.account-role-badge {
display: inline-block;
background: var(--accent-bg);
color: var(--accent);
font-size: var(--font-xs);
font-weight: var(--weight-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
padding: var(--space-2xs) var(--space-md);
border-radius: var(--radius-full);
}
/* ── Form groups ── */
.account-form-group {
margin-bottom: var(--space-md);
}
.account-form-group label {
display: block;
font-size: var(--font-xs);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--space-xs);
}
.account-form-group input[type="password"],
.account-form-group input[type="text"] {
width: 100%;
padding: var(--space-sm) var(--space-md);
background: var(--bg-3);
border: var(--border-w) solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--text);
font: inherit;
font-size: var(--font-base);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
}
.account-form-group input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 0.2143rem var(--accent-bg); /* 3 px @ 14px rem */
}
.account-form-group select {
width: 100%;
}
/* ── Submit button ── */
.account-btn {
display: inline-block;
padding: var(--space-sm) var(--space-xl);
background: var(--accent);
color: #fff;
font: inherit;
font-size: var(--font-sm);
font-weight: var(--weight-semibold);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition), opacity var(--transition);
margin-top: var(--space-xs);
}
.account-btn:hover:not(:disabled) {
background: var(--accent-hover);
}
.account-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Subscription management actions ── */
.acct-sub-alert {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 10px 14px;
border-radius: var(--r-md);
margin: 10px 0;
font-size: 13px;
line-height: 1.4;
}
.acct-sub-alert p { margin: 2px 0 0; }
.acct-sub-alert strong { display: block; }
.acct-sub-alert svg { flex-shrink: 0; margin-top: 1px; }
.acct-sub-alert-warning {
background: rgba(217, 119, 6, 0.1);
border: 1px solid rgba(217, 119, 6, 0.25);
color: #92400e;
}
.acct-sub-alert-info {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.2);
color: #1e40af;
}
.acct-sub-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 16px;
}
@media (max-width: 480px) {
.acct-sub-actions { grid-template-columns: 1fr; }
}
.acct-sub-action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg);
color: var(--text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
text-decoration: none;
line-height: 1.3;
}
.acct-sub-action-btn:hover {
border-color: var(--accent);
background: rgba(var(--accent-rgb, 46, 91, 138), 0.04);
}
.acct-sub-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.acct-sub-action-btn svg {
flex-shrink: 0;
color: var(--text-3);
}
.acct-sub-action-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.acct-sub-action-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.acct-sub-action-primary svg { color: #fff; }
.acct-sub-action-danger {
color: #c0392b;
border-color: rgba(192, 57, 43, 0.25);
}
.acct-sub-action-danger:hover {
background: rgba(192, 57, 43, 0.06);
border-color: rgba(192, 57, 43, 0.4);
}
.acct-sub-action-danger svg { color: #c0392b; }
/* ── Messages ── */
.account-msg {
font-size: 13px;
padding: var(--sp-3);
border-radius: var(--r-md);
margin-bottom: var(--sp-3);
line-height: 1.4;
}
.account-msg--error {
background: rgba(220, 50, 50, 0.10);
border: 1px solid rgba(220, 50, 50, 0.22);
color: #c0392b;
}
[data-theme="dark"] .account-msg--error {
color: #e57373;
background: rgba(220, 50, 50, 0.15);
}
.account-msg--success {
background: rgba(40, 167, 69, 0.10);
border: 1px solid rgba(40, 167, 69, 0.22);
color: #218838;
}
[data-theme="dark"] .account-msg--success {
color: #81c784;
background: rgba(40, 167, 69, 0.15);
}
/* ── Scale circle panels ───────────────────────────────────────────── */
.scale-circle-panel {
display:flex; justify-content:center; padding:var(--sp-4) var(--sp-6);
position:relative;
}
.scale-circle-svg {
width:240px; height:240px; max-width:100%;
}
/* ── Circle card (inside boards-grid, beside first fretboard) ─────── */
.circle-card {
width:220px;
display:flex; align-items:center; justify-content:center;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
padding:var(--sp-3);
position:relative;
}
.circle-card .scale-circle-svg {
width:100%; max-width:200px; height:auto;
}
/* Copy button on circle panels */
.circle-copy-btn {
position:absolute; top:var(--sp-1); right:var(--sp-1);
opacity:0; transition:opacity 0.15s ease;
}
.circle-card:hover .circle-copy-btn,
.scale-circle-panel:hover .circle-copy-btn,
.coll-notes-circle-circle:hover .circle-copy-btn { opacity:1; }
/* ── Grid layout when circle is visible ──────────────────────────── */
/* Strip the outer boards-area card so each board + circle is its own card */
.boards-area:has(.boards-grid--circle) {
background:transparent; border:none; border-radius:0;
box-shadow:none; padding:0;
}
/* Base: just increase gap to panel-gap */
.boards-grid--circle {
gap:var(--panel-gap) !important;
}
/* Full-fretboard board-cards get their own card appearance + padding.
Gallery cards already carry inline card styles from makeGalleryCard(). */
.boards-grid--circle > .board-card {
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
padding:0 20px;
}
/* ── 1-column + circle: circle beside first board ──────────────── */
.boards-grid--circle.boards-grid--cols-1 {
grid-template-columns:1fr auto !important;
}
.boards-grid--circle.boards-grid--cols-1 > .circle-card {
grid-column:2; grid-row:1;
align-self:stretch;
}
.boards-grid--circle.boards-grid--cols-1 > .circle-card + * {
grid-column:1; grid-row:1;
min-width:0; overflow:hidden;
}
.boards-grid--circle.boards-grid--cols-1 > :not(.circle-card):not(:nth-child(2)) {
grid-column:1 / -1;
}
/* ── Multi-column + circle: circle centered in own row above boards ─ */
.boards-grid--circle.boards-grid--cols-2,
.boards-grid--circle.boards-grid--cols-3 {
/* Keep the normal column template from cols-2/cols-3 */
}
.boards-grid--circle.boards-grid--cols-2 > .circle-card,
.boards-grid--circle.boards-grid--cols-3 > .circle-card {
grid-column:1 / -1;
justify-self:center;
}
/* Gallery cards flow normally in multi-column */
.boards-grid--circle.boards-grid--cols-2 > :not(.circle-card),
.boards-grid--circle.boards-grid--cols-3 > :not(.circle-card) {
grid-column:auto;
}
/* ── Mobile / narrow: circle centered above, single column ──────── */
@media (max-width: 700px) {
.boards-grid--circle.boards-grid--cols-1 {
grid-template-columns:1fr !important;
}
.boards-grid--circle > .circle-card {
grid-column:1; grid-row:auto;
justify-self:center; max-width:220px;
}
.boards-grid--circle > :not(.circle-card) {
grid-column:1 !important;
}
}
/* ── Piano keyboard card — mirrors .boards-area / .board-card ──────────
overflow:visible so the piano SVG's right-edge stroke isn't clipped
at the card's content-box edge; the SVG is centered at 66.67% width
so it never reaches the rounded corners anyway. */
.piano-card {
width:100%;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r-lg);
padding:0 20px; /* match .boards-area exactly */
position:relative;
overflow:visible;
margin-top:var(--panel-gap);
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
align-items:stretch;
}
.piano-card-title {
display:flex;
align-items:center;
justify-content:flex-end;
padding:var(--sp-2) var(--sp-4);
font-size:11px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--text-3);
border-bottom:1px solid var(--border);
}
.piano-card-title a {
font-size:11px; font-weight:500; letter-spacing:0.02em;
text-transform:none; color:var(--text-3); text-decoration:none;
}
.piano-card-title a:hover { color:var(--accent); }
.piano-keyboard-svg {
width:100%; max-width:900px; height:auto; display:block;
margin:0 auto; /* centre within the card */
padding-bottom: var(--sp-4); /* prevent clipping by parent overflow:hidden */
}
/* ── Piano + Circle row ─────────────────────────────────────────────────
Wraps #scalePianoPanel / #chordPianoPanel (flex:1) next to
#scaleCirclePanel / #chordCirclePanel (fixed 220px). Each child keeps
its own display:none toggle independently — the row adapts. Spacing
comes from the children (margin-top) so an empty row reserves nothing.
align-items:stretch makes both cards the same height. */
.piano-circle-row {
display:flex;
gap:var(--panel-gap);
align-items:stretch;
}
.piano-circle-row > .piano-card {
flex:1;
min-width:0;
/* inherits margin-top:var(--panel-gap) from .piano-card */
}
.piano-circle-row > .circle-card {
flex-shrink:0;
align-self:stretch;
margin-top:var(--panel-gap);
/* When the piano card is hidden (style="display:none"), it's removed
from flex layout, which would leave the circle docked to the LEFT
of the row. `margin-left: auto` absorbs the free space so the
circle stays pinned to the RIGHT regardless of piano visibility.
When the piano IS visible it has `flex:1` and absorbs all free
space itself, so this auto-margin resolves to 0 and doesn't affect
the normal side-by-side layout. */
margin-left:auto;
}
@media (max-width: 960px) {
.piano-circle-row {
flex-direction:column;
align-items:stretch;
}
.piano-circle-row > .circle-card {
align-self:center;
width:220px;
}
}
/* Collection item circles */
.coll-circle-wrap {
display:flex; justify-content:center; padding:var(--sp-3) var(--sp-4);
border-top:1px solid var(--border);
}
.coll-circle-svg {
width:200px; height:200px;
}
.coll-circle-toggle--active { color:var(--accent); }
/* Notes + circle inline row */
.coll-notes-circle-row {
display:flex; gap:var(--sp-3); padding:0 var(--sp-4);
}
.coll-notes-circle-notes {
flex:2; min-width:0;
}
.coll-notes-circle-circle {
flex:1; display:flex; align-items:flex-start; justify-content:center;
padding-top:var(--sp-3);
position:relative;
}
.coll-notes-circle-circle svg {
width:100%; max-width:200px; height:auto;
}
@media (max-width:600px) {
.coll-notes-circle-row { flex-direction:column; }
}
/* Collection item display toggle */
.coll-display-toggle {
width:auto; min-width:84px;
height:34px; padding:0 12px;
font-family:var(--font); font-size:13px; font-weight:500;
margin:0 4px;
cursor:pointer; white-space:nowrap;
border:1px solid var(--border); border-radius:var(--r-sm);
background:var(--surface-2); color:var(--text-2);
flex-shrink:0;
transition:border-color var(--transition), background var(--transition);
}
.coll-display-toggle:hover { background:var(--bg-2); border-color:var(--border-strong); }
/* Item-level collapse toggle */
.coll-item-collapse-toggle {
border:none; background:none; padding:0; width:20px; height:20px;
transition:transform 0.2s ease;
}
.coll-item-collapse-toggle svg { width:14px; height:14px; }
.coll-item-collapse-toggle--collapsed { transform:rotate(-90deg); }
.coll-item-body { cursor: pointer; }
/* Custom Boards expanded grid — equal card heights */
.cb-expanded-grid { grid-auto-rows: 1fr; }
.cb-expanded-grid .coll-item-card {
display: flex;
flex-direction: column;
}
.cb-expanded-grid .cb-card-preview {
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sp-2) var(--sp-3);
overflow: hidden;
}
.cb-expanded-grid .cb-card-preview svg {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
/* Sub-group wrapper for scale/chord items */
.coll-subgroup {
margin-top:var(--sp-3);
border:1px solid var(--border);
border-radius:var(--r-md);
overflow:hidden;
}
.coll-subgroup-header {
display:flex; align-items:center; gap:var(--sp-2);
padding:var(--sp-2) var(--sp-4);
background:var(--bg-2);
border-bottom:1px solid var(--border);
cursor:pointer; user-select:none;
}
.coll-subgroup-header .coll-section-chevron { flex-shrink:0; }
.coll-subgroup-title {
font-size:14px; font-weight:600; color:var(--text-1);
flex:1; min-width:0;
}
.coll-subgroup-body {
padding:var(--sp-3);
background: var(--surface, #fff);
}
/* Remove item card outer borders inside the sub-group since the wrapper provides the frame */
.coll-subgroup-body > .coll-item-card {
border-left:none; border-right:none;
border-radius:0;
}
.coll-subgroup-body > .coll-item-card:last-child { border-bottom:none; }
.coll-subgroup-body > .coll-item-card:first-child { border-top:none; }
/* Collapse-all / expand-all button */
.coll-collapse-all-btn {
font-size:11px; padding:3px 10px; margin:0 4px;
cursor:pointer; white-space:nowrap;
border:1px solid var(--border); border-radius:var(--r-md);
background:var(--bg-2); color:var(--text-2);
line-height:1.4; flex-shrink:0;
}
.coll-collapse-all-btn:hover { color:var(--accent); border-color:var(--accent); }
/* ══════════════════════════════════════════════════════════════════════
DIAGRAM CHORD SHEET & CHORD DIAGRAM PICKER
══════════════════════════════════════════════════════════════════════ */
/* ── Diagram chart card ────────────────────────────────────────────── */
.coll-dchart-card .coll-chart-body { padding-top: var(--sp-5, 20px); /* ensure diagram tops aren't clipped by card border-radius */ }
/* ── chart-v2 embedded read-only view inside a Collection card ────── */
/* The suite-root renders a chartbar (nav/picker) + read toolbar; suppress those
so the Collection card shows only the paper (sections + bars). */
.coll-dchart-v2-display .suite-chartbar,
.coll-dchart-v2-display .suite-toolbar-wrap,
.coll-dchart-v2-display .suite-hint {
display: none !important;
}
/* Remove root padding/background so it blends with the card */
.coll-dchart-v2-display .suite-root {
background: transparent;
padding: 0;
min-height: 0;
}
.coll-dchart-v2-display .suite-paper {
padding: var(--sp-3) var(--sp-4);
}
/* Ensure the barline SVG overlay stays within the card */
.coll-dchart-v2-display .suite-barline-overlay {
pointer-events: none;
}
/* Barlines in dchart: only beside chord text, not stretching up to diagrams.
Hide all full-height borders and redraw them at chord-text height only. */
/* Hide the full-height opening barline on the bars container */
.coll-dchart-body .coll-chart-bars {
border-left-color: transparent;
position: relative;
row-gap: var(--dchart-row-gap, 6px);
}
/* Redraw opening barline at chord-text height on the first bar of EACH grid row.
Extends upward into the row-gap so barlines visually touch between lines. */
.coll-dchart-body .coll-chart-bar--row-start {
position: relative;
}
.coll-dchart-body .coll-chart-bar--row-start::before {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 0;
height: calc(var(--ccs-h, 42px) + var(--dchart-row-gap, 6px));
border-left: 3px solid var(--text);
z-index: 2;
}
/* First row: no gap above, so barline should not extend upward */
.coll-dchart-body .coll-chart-bars > .coll-chart-bar--row-start:first-child::before {
height: var(--ccs-h, 42px);
}
/* Hide the opening barline when this row-start bar is a repeat-start (repeat sign replaces it) */
.coll-dchart-body .coll-chart-bar--row-start.coll-chart-bar--rep-start::before {
display: none;
}
/* Hide all closing barlines on bars */
.coll-dchart-body .coll-chart-bar {
border-right-color: transparent;
}
/* Redraw closing barline at chord-text height via the last chord element */
.coll-dchart-body .coll-chart-bar .coll-dchart-cell:last-child .coll-chart-chord {
box-shadow: 2px 0 0 0 var(--text-3);
}
/* Repeat signs: position at chord-text height, extend into row-gap so they touch between lines */
.coll-dchart-body .coll-chart-bar--rep-start::before {
top: auto; bottom: 0;
height: calc(var(--ccs-h, 42px) + var(--dchart-row-gap, 6px));
}
.coll-dchart-body .coll-chart-bar--rep-end::after {
top: auto; bottom: 0;
height: calc(var(--ccs-h, 42px) + var(--dchart-row-gap, 6px));
}
/* First row: no gap above */
.coll-dchart-body .coll-chart-bars > :first-child.coll-chart-bar--rep-start::before {
height: var(--ccs-h, 42px);
}
/* Rep-end closing barline is handled by the ::after, so hide the box-shadow duplicate */
.coll-dchart-body .coll-chart-bar--rep-end .coll-dchart-cell:last-child .coll-chart-chord {
box-shadow: none;
}
/* Diagram cell: vertical stack — diagram on top, chord text on bottom, inside the bar */
.coll-dchart-body .coll-chart-cell.coll-dchart-cell {
flex-direction: column;
align-items: center; /* center diagram + text horizontally */
justify-content: flex-end; /* push content to bottom so text aligns with barlines */
height: auto; /* allow cell to grow for diagram */
overflow: visible; /* don't clip diagram SVG */
padding: 0;
}
/* Chord text row inside dchart cell — restore normal chord styling */
.coll-dchart-body .coll-dchart-cell .coll-chart-chord {
display: flex;
align-items: center;
justify-content: center; /* center chord text under diagram */
width: 100%;
height: var(--ccs-h, 42px);
padding: 2px 4px;
box-sizing: border-box;
}
/* Mini diagram wrapper: centered above chord text */
.coll-dchart-mini-wrap {
display: flex;
justify-content: center;
align-items: flex-end;
width: 100%;
padding: 4px 2px 2px;
box-sizing: border-box;
overflow: visible;
}
/* Responsive SVG: scales to fit cell width via viewBox */
.coll-dchart-mini-wrap .cdp-mini-svg {
display: block;
width: 100%;
max-width: 66px;
height: auto;
overflow: visible;
}
/* ── Chart Diagrams section — diagram sheet row ────────────────────── */
/* Legacy flat-wrap classes (kept for PATH B legacy chart items) */
.coll-dgm-sheet-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
}
.coll-dgm-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-1);
min-width: 80px;
}
.coll-dgm-cell-name {
font-size: 13px;
font-weight: 600;
color: var(--text-1);
text-align: center;
}
.coll-dgm-cell-empty {
color: var(--text-3);
font-size: 12px;
}
.coll-dgm-cell svg {
display: block;
width: 80px;
height: 90px;
}
/* ── Chart Scales grid (collection) ────────────────────────────────── */
/* Default = 1 column (full width); col switcher sets grid-template-columns inline */
.coll-scales-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-2);
}
/* In multi-column mode, scale fretboards shrink to fit — they're responsive SVGs */
.coll-scales-grid .coll-board-wrap svg { width: 100%; height: auto; }
/* ── Chart Diagrams grid (collection) — uses shared .dg-grid/.dg-card ── */
/* Fixed columns driven by col-spinner; --cdg-cols set inline by JS */
.coll-dgm-grid {
grid-template-columns: repeat(var(--cdg-cols, 10), 1fr);
}
/* SVG inside collection diagram cards fills the card width */
.coll-dgm-grid .dg-card svg { max-width: none; }
/* ── Toolbar (mirrors diagram-sheets Style / Cols / Labels rows) ── */
.coll-dgm-toolbar {
display: flex; flex-direction: column; gap: 6px;
padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.coll-dgm-toolbar-row {
display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: hidden;
}
.coll-dgm-tlabel {
font-size: 12px; color: var(--text-2); white-space: nowrap; font-weight: 500; flex-shrink: 0;
min-width: 46px; text-align: right;
}
.coll-dgm-preset-scroll {
overflow-x: auto; display: flex; gap: 4px; flex: 1; scrollbar-width: none;
}
.coll-dgm-preset-scroll::-webkit-scrollbar { display: none; }
.coll-dgm-col-wrap {
display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0;
}
.coll-dgm-col-display {
min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text);
}
.coll-dgm-label-btns { display: flex; gap: 4px; }
/* Legacy controls (PATH B fallback) */
.coll-dgm-ctrl-label {
font-size: 11px;
color: var(--text-3);
white-space: nowrap;
margin-left: var(--sp-3);
}
.coll-dgm-ctrl-sel {
font-size: 12px;
padding: 2px 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.coll-dgm-ctrl-range {
width: 72px;
accent-color: var(--accent);
cursor: pointer;
}
/* ── Editor: diagram beat cells ────────────────────────────────────── */
.coll-dchart-beat-cell {
display: flex;
flex-direction: column;
gap: 2px;
}
.coll-dchart-diag-row {
display: flex;
align-items: center;
gap: 3px;
height: 28px; /* constrain height so diagrams don't push layout */
}
.coll-dchart-diag-btn {
width: 22px; height: 22px;
padding: 2px;
border: 1px solid var(--border);
border-radius: var(--r-sm, 3px);
background: var(--bg-2, #f5f5f5);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.coll-dchart-diag-btn svg {
width: 14px; height: 14px;
stroke: var(--text-3, #888);
}
.coll-dchart-diag-btn:hover {
border-color: var(--accent, #f2a93b);
background: var(--bg-3, #eee);
}
.coll-dchart-diag-btn--has {
border-color: var(--accent, #f2a93b);
background: rgba(242, 169, 59, 0.12);
}
.coll-dchart-diag-btn--has svg { stroke: var(--accent, #f2a93b); }
.coll-dchart-diag-preview {
width: 34px;
height: 34px;
overflow: visible;
display: flex;
align-items: center;
}
.coll-dchart-diag-preview .cdp-mini-svg {
display: block;
width: 34px;
height: auto;
overflow: visible;
}
/* ── Quick-add used chords strip ───────────────────────────────────── */
.coll-dchart-used-strip-wrap { min-height: 0; }
.coll-dchart-used-chords {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
margin: 4px 0 2px;
background: var(--bg-2, #f8f7f4);
border: 1px solid var(--border-light, #e5e3de);
border-radius: var(--r-md, 6px);
overflow-x: auto;
}
.coll-dchart-used-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted, #888);
white-space: nowrap;
flex-shrink: 0;
}
.coll-dchart-used-list {
display: flex;
gap: 6px;
flex-wrap: nowrap;
}
.coll-dchart-used-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 4px 6px;
border: 1px solid var(--border-light, #e5e3de);
border-radius: var(--r-sm, 4px);
background: var(--bg, #fff);
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
flex-shrink: 0;
min-width: 48px;
}
.coll-dchart-used-chip:hover {
border-color: var(--accent, #f2a93b);
box-shadow: 0 0 0 2px rgba(242, 169, 59, 0.15);
background: var(--bg-selected, rgba(242, 169, 59, 0.04));
}
.coll-dchart-used-chip .cdp-mini-svg {
display: block;
width: 40px;
height: auto;
overflow: visible;
}
.coll-dchart-used-sym {
font-size: 10px;
font-weight: 600;
color: var(--text, #1a1a18);
white-space: nowrap;
line-height: 1.2;
}
/* Selected beat cell highlight for quick-add target */
.coll-dchart-beat-cell--selected {
outline: 2px solid var(--accent, #f2a93b);
outline-offset: -1px;
border-radius: var(--r-sm, 4px);
background: var(--bg-selected, rgba(242, 169, 59, 0.06));
}
/* ══════════════════════════════════════════════════════════════════════
CHORD ADMIN PAGE
══════════════════════════════════════════════════════════════════════ */
/* Lock viewport scroll when chord-admin is visible — the voicing panel
scrolls internally so the outer page should never move. */
html:has(#route-chord-admin.active),
/* ═══════════════════════════════════════════════════════════════════
Fretboard Lab (admin test environment)
═══════════════════════════════════════════════════════════════════ */
/* ── Lab tab bar ──────────────────────────────────────────────────────── */
.flab-tab-bar {
display: flex;
align-items: flex-end;
gap: 0;
padding: var(--sp-3) var(--sp-5) 0;
max-width: 1400px;
margin: 0 auto;
}
/* "Lab" word, top-right corner on the same baseline as the tabs. */
.flab-tab-bar-title {
margin-left: auto;
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
padding: var(--sp-2) 0;
position: relative;
top: 1px;
user-select: none;
}
.flab-tab {
padding: var(--sp-2) var(--sp-5);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid var(--border);
border-bottom: none;
border-radius: var(--r-md) var(--r-md) 0 0;
background: var(--surface-2);
color: var(--text-3);
cursor: pointer;
transition: background .15s, color .15s;
position: relative;
top: 1px;
}
.flab-tab:hover { background: var(--surface); color: var(--text); }
.flab-tab--active {
background: var(--surface);
color: var(--text);
border-bottom: 1px solid var(--surface);
z-index: 1;
}
.flab-container, .dlab-container { padding: var(--sp-4) var(--sp-5) var(--sp-8); max-width: 1400px; margin: 0 auto; }
.flab-toolbar {
display: flex; flex-direction: column; gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.flab-row {
display: flex; align-items: center; gap: var(--sp-2);
flex-wrap: wrap;
}
.flab-label {
font-size: 12px; font-weight: 600; color: var(--text-2);
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.flab-select {
height: 32px; padding: 0 24px 0 8px;
font-family: var(--font); font-size: 13px; font-weight: 500;
color: var(--text); background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--r-sm);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
cursor: pointer; min-width: 70px;
}
.flab-num {
height: 32px; width: 56px; padding: 0 4px 0 8px;
font-family: var(--font-mono); font-size: 13px;
color: var(--text); background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--r-sm);
text-align: center;
}
.flab-sep { color: var(--text-3); font-size: 13px; padding: 0 2px; }
.flab-btn {
height: 32px; padding: 0 12px;
font-family: var(--font); font-size: 12px; font-weight: 600;
color: var(--text); background: var(--surface-2);
border: 1px solid var(--border); border-radius: var(--r-sm);
cursor: pointer; white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.flab-btn:hover { background: var(--bg-3); border-color: var(--border-strong); }
.flab-btn--sm { padding: 0 10px; font-size: 11px; height: 26px; }
.flab-btn--diatonic { background: rgba(78,200,209,0.12); border-color: rgba(78,200,209,0.3); }
.flab-btn--diatonic:hover { background: rgba(78,200,209,0.22); }
.flab-btn--l3 { background: rgba(78,200,209,0.12); border-color: rgba(78,200,209,0.3); }
.flab-btn--l3:hover { background: rgba(78,200,209,0.22); }
.flab-btn--clear { color: var(--accent); border-color: rgba(232,135,74,0.3); background: rgba(232,135,74,0.08); }
.flab-btn--clear:hover { background: rgba(232,135,74,0.16); }
.flab-btn--save { background: var(--accent); color: #fff; border-color: var(--accent); }
.flab-btn--save:hover { background: var(--accent-hover); }
.flab-btn--load { }
.flab-btn--danger {
width: 28px; height: 28px; padding: 0; line-height: 28px; text-align: center;
color: #d44; border-color: rgba(221,68,68,0.3); background: rgba(221,68,68,0.06);
font-size: 16px; font-weight: 700;
}
.flab-btn--danger:hover { background: rgba(221,68,68,0.14); }
.flab-spacer { flex: 0 0 16px; }
.flab-nav-label { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.flab-shape-label {
font-family: var(--font-mono); font-size: 13px; font-weight: 500;
color: var(--text); min-width: 90px; text-align: center;
}
/* Navigation bar — position/degree shift/selection/presets */
.flab-nav {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-3) var(--sp-5);
margin-bottom: var(--panel-gap);
box-shadow: var(--shadow);
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--sp-3) var(--sp-4);
}
/* Zone grouping — separates overlay / selection / presets */
.flab-nav-zone {
display: flex;
align-items: center;
gap: var(--sp-2) var(--sp-4);
flex-wrap: wrap;
}
.flab-nav-zone + .flab-nav-zone {
margin-left: var(--sp-3);
}
@media (max-width: 640px) {
.flab-container { padding: var(--sp-3) var(--sp-3) var(--sp-6); }
.flab-nav { padding: var(--sp-3); }
.flab-nav-zone + .flab-nav-zone {
margin-left: 0;
margin-top: var(--sp-2);
width: 100%;
}
.flab-nav-zone--l2,
.flab-nav-zone--l3 { padding: var(--sp-2); }
}
/* Dimmed state for Selection zone when no custom dots */
.flab-nav-zone--dim {
opacity: 0.35;
pointer-events: none;
transition: opacity 0.2s ease;
}
.flab-nav-zone--selection {
transition: opacity 0.2s ease;
}
/* Layer color coding — background tints on zones */
.flab-nav-zone--l2 {
background: rgba(242,169,59,0.08);
border-radius: var(--r-md);
padding: var(--sp-2) var(--sp-3);
flex-wrap: nowrap;
min-height: 46px;
}
.flab-nav-zone--l3 {
background: rgba(78,200,209,0.08);
border-radius: var(--r-md);
padding: var(--sp-2) var(--sp-3);
}
[data-theme="dark"] .flab-nav-zone--l2 { background: rgba(242,169,59,0.10); }
[data-theme="dark"] .flab-nav-zone--l3 { background: rgba(78,200,209,0.10); }
/* ── Layer 3 colour picker ── */
.flab-color-picker {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-2);
flex-wrap: wrap;
}
.flab-color-picker-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary, #888);
white-space: nowrap;
}
.flab-color-btns {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.flab-color-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: 2px solid transparent;
border-radius: 5px;
background: none;
cursor: pointer;
transition: border-color 0.15s ease, transform 0.1s ease;
}
.flab-color-btn:hover {
transform: scale(1.15);
}
.flab-color-btn--active {
border-color: var(--text, #333);
box-shadow: 0 0 0 1px var(--text, #333);
}
[data-theme="dark"] .flab-color-btn--active {
border-color: #fff;
box-shadow: 0 0 0 1px #fff;
}
.flab-color-swatch {
display: block;
width: 16px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.12);
}
[data-theme="dark"] .flab-color-swatch {
border-color: rgba(255,255,255,0.15);
}
.flab-color-btn--add {
font-size: 15px;
font-weight: 600;
color: var(--text-secondary, #888);
border: 2px dashed var(--border, #ccc);
border-radius: 5px;
}
.flab-color-btn--add:hover {
color: var(--text, #333);
border-color: var(--text-secondary, #888);
}
[data-theme="dark"] .flab-color-btn--add:hover {
color: #ddd;
border-color: #888;
}
.flab-nav-block {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: nowrap;
transition: opacity 0.2s ease;
}
.flab-nav-block--dim {
opacity: 0.35;
pointer-events: none;
}
.flab-nav-heading {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
margin-right: 2px;
}
/* Sub-label for grouped controls (e.g. "Strings" above ↑↓) */
.flab-nav-string-group {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: var(--sp-2);
flex-wrap: wrap;
}
.flab-nav-sub-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-3);
margin-right: 2px;
}
.flab-nav-btn {
height: 30px;
width: 30px;
padding: 0;
font-family: var(--font);
font-size: 15px;
font-weight: 600;
color: var(--text-2);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.flab-nav-btn:hover {
background: var(--bg-3);
border-color: var(--border-strong);
color: var(--text);
}
.flab-nav-value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 500;
color: var(--text);
min-width: 60px;
text-align: center;
display: inline-block;
white-space: nowrap;
}
.flab-nav-action {
height: 30px;
padding: 0 12px;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
color: var(--text-2);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.flab-nav-action:hover {
background: var(--bg-3);
border-color: var(--border-strong);
}
.flab-nav-action--clear {
color: var(--accent);
border-color: rgba(232,135,74,0.3);
background: rgba(232,135,74,0.08);
}
.flab-nav-action--clear:hover {
background: rgba(232,135,74,0.16);
}
.flab-nav-action--save {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.flab-nav-action--save:hover {
background: var(--accent-hover);
}
.flab-nav-action--active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.flab-nav-action--active:hover {
background: var(--accent-hover);
}
.flab-nav-action--inactive {
color: var(--text-3);
background: var(--surface-2);
border-color: var(--border);
}
.flab-nav-action--inactive:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
.flab-nav-symmetry-group {
display: inline-flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
/* Symmetry background settings panel */
.flab-nav-action--gear {
font-size: 15px;
line-height: 1;
padding: 0 8px;
}
.flab-sym-settings {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 10px 14px 8px;
margin-top: 6px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 16px;
}
.flab-sym-setting-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-2);
}
.flab-sym-setting-label {
min-width: 85px;
white-space: nowrap;
font-weight: 500;
}
.flab-sym-setting-label--check {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.flab-sym-setting-slider {
flex: 1;
min-width: 60px;
max-width: 120px;
accent-color: var(--accent);
}
.flab-sym-setting-value {
min-width: 36px;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text-3);
font-size: 11px;
}
.flab-sym-setting-row--wide {
grid-column: 1 / -1;
}
.flab-sym-setting-select {
flex: 1;
min-width: 100px;
font-family: var(--font);
font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-1);
color: var(--text-1);
cursor: pointer;
}
/* ── Symmetry groups (found combinations) ─────────────────────── */
.flab-sym-groups {
margin-top: 10px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-1);
max-height: 260px;
overflow-y: auto;
max-width: 280px;
}
.flab-sg-header {
padding: 8px 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
border-bottom: 1px solid var(--border);
background: var(--surface-2);
position: sticky;
top: 0;
z-index: 1;
}
.flab-sg-list {
padding: 6px 10px;
}
.flab-sg-row {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 4px;
cursor: pointer;
border-radius: 3px;
font-size: 13px;
transition: background 0.1s;
}
.flab-sg-row:hover {
background: var(--surface-2);
}
.flab-sg-row input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
}
.flab-sg-swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.15);
}
.flab-sg-notes {
font-weight: 500;
color: var(--text-1);
white-space: nowrap;
}
.flab-sg-count {
font-size: 11px;
color: var(--text-3);
margin-left: auto;
}
.flab-sg-orig {
font-size: 11px;
color: var(--accent);
font-style: italic;
}
/* ── Scale/Chord query results ─────────────────────────────────── */
.flab-query-results {
margin-top: 12px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-1);
max-height: 400px;
overflow-y: auto;
}
.flab-qr-header {
padding: 10px 14px;
font-size: 13px;
color: var(--text-1);
border-bottom: 1px solid var(--border);
background: var(--surface-2);
position: sticky;
top: 0;
z-index: 1;
}
.flab-qr-count {
color: var(--text-3);
}
.flab-qr-hint {
font-size: 0.8em;
color: var(--text-3);
font-style: italic;
}
.flab-qr-body {
padding: 8px 14px 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.flab-qr-section {
margin-bottom: 12px;
}
.flab-qr-section:last-child {
margin-bottom: 0;
}
/* If only one section, span full width */
.flab-qr-section:only-child {
grid-column: 1 / -1;
}
.flab-qr-section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-3);
margin: 0 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
}
.flab-qr-row {
display: flex;
align-items: baseline;
gap: 10px;
padding: 3px 0;
}
.flab-qr-label {
min-width: 160px;
font-size: 13px;
font-weight: 500;
color: var(--text-1);
white-space: nowrap;
}
.flab-qr-keys {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.flab-qr-key {
font-family: var(--font);
font-size: 11px;
font-weight: 500;
padding: 2px 7px;
border: 1px solid var(--border);
border-radius: 3px;
background: var(--bg-1);
color: var(--text-2);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.flab-qr-key:hover {
background: var(--bg-3);
border-color: var(--border-strong);
color: var(--text-1);
}
.flab-qr-key--current {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.flab-qr-key--current:hover {
background: var(--accent-hover);
}
.flab-qr-empty {
padding: 16px 0;
text-align: center;
color: var(--text-3);
font-size: 13px;
}
/* Connections show/hide toggle */
.flab-conn-toggle {
height: 34px;
padding: 0 14px;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
color: var(--text-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.flab-conn-toggle:hover { background: var(--bg-3); border-color: var(--border-strong); }
.flab-conn-toggle.active {
color: var(--text);
background: rgba(242,169,59,0.10);
border-color: rgba(242,169,59,0.35);
}
/* String set form group — select + sort toggle side by side */
#flab-chord-strings ~ .flab-set-sort-btn,
#flab-chord-strings + .flab-set-sort-btn {
/* handled by the row wrapper below */
}
.flab-set-sort-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.flab-set-sort-row select { flex: 1 1 auto; min-width: 0; }
/* String set sort toggle — small icon button next to the Set dropdown */
.flab-set-sort-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 34px;
margin-left: 4px;
padding: 0;
font-size: 16px;
line-height: 1;
color: var(--text-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.flab-set-sort-btn:hover { background: var(--bg-3); border-color: var(--border-strong); color: var(--text); }
/* Save Connections button — right-aligned, unique accent look */
.flab-conn-save-wrap {
margin-left: auto;
display: flex;
align-items: flex-end;
}
.flab-conn-save {
height: 36px;
padding: 0 16px;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
color: var(--accent);
background: rgba(242,169,59,0.08);
border: 1.5px dashed rgba(242,169,59,0.45);
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.flab-conn-save svg { flex-shrink: 0; }
.flab-conn-save:hover {
background: rgba(242,169,59,0.16);
border-color: var(--accent);
color: var(--accent-hover);
}
/* Fretboard Lab action bar (copy + add to collection) */
.flab-action-bar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-2);
padding: var(--sp-2) 0;
}
/* Chord bar extra toolbar */
.flab-chord-bar {
margin-top: calc(-1 * var(--panel-gap) + var(--sp-2));
}
/* Fret range inline inputs */
.flab-fret-range {
display: flex;
align-items: center;
gap: 4px;
}
.flab-fret-range .form-control {
width: 56px;
padding: 0 4px;
font-family: var(--font-mono);
text-align: center;
background-image: none;
padding-right: 4px;
}
.flab-fret-range .flab-sep {
color: var(--text-3);
font-size: 13px;
}
.flab-info {
display: flex; align-items: center; flex-wrap: nowrap; gap: 0 8px;
font-size: 13px; color: var(--text-2); padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3);
height: 2em; overflow: hidden;
}
.flab-info-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flab-info b { color: var(--text); font-weight: 600; }
/* Header row — now holds just the layer toggles (the "Lab" word moved
into the tab-bar; see .flab-tab-bar-title). Toggles stay right-aligned. */
.flab-header {
display: flex; align-items: center; justify-content: flex-end;
margin-bottom: var(--sp-3);
}
.flab-layer-toggles {
display: flex; align-items: center; gap: 6px;
}
.flab-layer-toggles-label {
font-size: 11px; font-weight: 600; color: var(--text-3);
text-transform: uppercase; letter-spacing: 0.04em;
margin-right: 2px;
}
.flab-layer-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 24px; padding: 0 10px;
font-family: var(--font); font-size: 11px; font-weight: 600;
border: 1.5px solid var(--border); border-radius: var(--r-sm);
background: var(--surface-2); color: var(--text-3);
cursor: pointer; transition: all var(--transition);
user-select: none; white-space: nowrap; letter-spacing: 0.01em;
}
.flab-layer-btn:hover { border-color: var(--border-strong); color: var(--text-2); }
.flab-layer-btn.active { color: #fff; }
.flab-layer-btn--l1.active { background: #9a9a94; border-color: #9a9a94; }
.flab-layer-btn--l1.active:hover { background: #8a8a84; border-color: #8a8a84; }
.flab-layer-btn--l2.active { background: var(--accent); border-color: var(--accent); }
.flab-layer-btn--l2.active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.flab-layer-btn--l3.active { background: #4ec8d1; border-color: #4ec8d1; }
.flab-layer-btn--l3.active:hover { background: #3cb8c1; border-color: #3cb8c1; }
.flab-layer-btn--conn { color: var(--text-2); border-color: var(--border); }
.flab-layer-btn--conn:hover { color: var(--text); }
.flab-layer-btn--conn.active { background: #8a8a94; border-color: #8a8a94; }
.flab-layer-btn--conn.active:hover { background: #7a7a84; border-color: #7a7a84; }
/* ── Diagram Lab ─────────────────────────────────────────────────────── */
.flab-layer-wrap {
display: flex; gap: 4px; align-items: center;
flex-shrink: 0;
}
.flab-layer-wrap .flab-layer-btn {
flex-shrink: 0; overflow: visible;
}
.dlab-editor-card {
margin-top: var(--sp-3);
}
.dlab-editor-card .cb-editor-layout {
min-height: 300px;
}
/* Legacy styles (no longer used, kept for compat) */
.dlab-board-area {
display: flex; justify-content: center; align-items: flex-start;
min-height: 200px; margin-top: var(--sp-3);
}
.dlab-color-wrap {
display: flex; gap: 4px; align-items: center;
}
.dlab-color-swatch {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid transparent; cursor: pointer;
transition: border-color var(--transition), transform var(--transition);
padding: 0;
}
.dlab-color-swatch:hover { transform: scale(1.15); }
.dlab-color-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.dlab-info-row {
font-size: 12px; color: var(--text-3); text-align: center;
margin-top: var(--sp-3);
}
/* Legacy .dg-card-* toolbar — new code uses .diagram-card-* classes
via DiagramCardToolbar (see further down in file). These selectors
remain for any un-migrated dg-card fallbacks; they inherit the same
look as the canonical toolbar and do NOT shrink children. */
.dg-card-actions {
position: absolute;
left: 50%; top: 0;
transform: translate(-50%, -100%);
pointer-events: none;
opacity: 0; transition: opacity .18s ease;
padding-bottom: 4px;
z-index: 4;
}
.dg-card:hover .dg-card-actions { opacity: 1; }
.dg-card-toolbar {
pointer-events: auto;
display: flex; gap: 2px; align-items: stretch;
background: rgba(255,255,255,0.82);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
padding: 3px 4px;
transform: translateY(4px);
transition: transform .18s ease, opacity .18s ease;
opacity: 0;
white-space: nowrap;
}
.dg-card:hover .dg-card-toolbar { transform: translateY(0); opacity: 1; }
[data-theme="dark"] .dg-card-toolbar {
background: rgba(40,40,40,0.85);
}
/* Chord identification row — always reserves space to prevent layout jumps */
.flab-chord-row {
min-height: 1.5em;
margin-bottom: var(--sp-2);
display: flex; align-items: center;
}
.flab-chord-id {
font-size: 13px; font-weight: 600; color: #4ec8d1;
white-space: nowrap; visibility: hidden;
}
.flab-chord-id:not(:empty) { visibility: visible; }
.flab-boards.boards-area { margin-top: 0; }
.flab-svg { display: block; }
/* Preset modal */
.flab-modal {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
}
.flab-modal-inner {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.18);
padding: var(--sp-5); min-width: 360px; max-width: 540px; width: 90%;
}
.flab-modal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-4);
}
.flab-modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.flab-modal-close {
background: none; border: none; font-size: 22px; color: var(--text-3);
cursor: pointer; line-height: 1; padding: 0 4px;
}
.flab-modal-body { max-height: 340px; overflow-y: auto; }
.flab-preset-row {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border);
}
.flab-preset-name { flex: 1; font-size: 13px; color: var(--text); }
/* ── Fretboard Lab Collections panel ────────────────────────────── */
.flab-coll-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
}
.flab-coll-crumbs {
display: flex; align-items: center; gap: 2px;
margin-bottom: var(--sp-3);
flex-wrap: wrap;
}
.flab-coll-crumb {
background: none; border: none; cursor: pointer;
font-size: 12px; color: var(--text-3); padding: 2px 4px; border-radius: 4px;
}
.flab-coll-crumb:hover { background: var(--accent-bg); color: var(--accent); }
.flab-coll-crumb--active { color: var(--text); font-weight: 600; }
.flab-coll-crumb-sep { font-size: 12px; color: var(--text-3); }
.flab-coll-actions {
display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.flab-coll-section-head {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text-3); margin: var(--sp-2) 0 var(--sp-1);
}
.flab-coll-row {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-2);
border-bottom: 1px solid var(--border);
font-size: 13px; color: var(--text);
}
.flab-coll-row:last-child { border-bottom: none; }
.flab-coll-row--folder { cursor: pointer; }
.flab-coll-row--folder:hover { background: var(--accent-bg); border-radius: var(--r-md); }
.flab-coll-icon { font-size: 15px; flex-shrink: 0; }
.flab-coll-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 1px 4px; border-radius: 3px; outline: none;
}
.flab-coll-name:focus {
background: var(--bg); box-shadow: 0 0 0 1px var(--accent);
}
.flab-coll-count { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.flab-coll-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.flab-coll-drill {
font-size: 16px; line-height: 1; padding: 0 4px;
}
.flab-coll-empty {
text-align: center; padding: var(--sp-4);
font-size: 13px; color: var(--text-3);
}
html:has(#route-chord-admin.active) body { overflow: hidden; }
.page-wrap:has(#route-chord-admin.active) { padding-bottom: 0; }
.cadm-container { padding: var(--sp-4) var(--sp-5) 0; }
.cadm-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: var(--sp-4);
flex-wrap: wrap;
}
.cadm-label { font-weight: 600; color: var(--text); }
.cadm-key-sel {
width: 80px;
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.cadm-key-sel:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
.cadm-stats { color: var(--text-3); font-size: 0.85em; margin-left: auto; }
.cadm-layout {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--sp-4);
align-items: start;
/* Fill remaining viewport height so both columns scroll internally */
max-height: calc(100vh - 140px);
}
@media (max-width: 700px) {
.cadm-layout { grid-template-columns: 1fr; }
}
/* ── Type list (left column) ─────────────────────────────────────── */
.cadm-type-list {
display: flex; flex-direction: column; gap: 2px;
max-height: 80vh; overflow-y: auto;
border: 1px solid var(--border); border-radius: var(--r-lg);
background: var(--surface); padding: 4px;
}
.cadm-type-group {
font-size: 0.7em; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-3);
padding: 10px 10px 3px; margin-top: 2px;
}
.cadm-type-group:first-child { margin-top: 0; padding-top: 6px; }
.cadm-type-btn {
display: flex; flex-direction: column; gap: 1px;
width: 100%; text-align: left;
padding: 6px 10px 6px 16px; border: none; border-radius: var(--r-sm);
background: transparent; cursor: pointer;
transition: background 0.12s;
}
.cadm-type-btn:hover { background: var(--bg-2); }
.cadm-type-btn--active { background: var(--accent-bg, rgba(242,169,59,0.15)); }
.cadm-type-name { font-weight: 600; font-size: 0.92em; color: var(--text); }
.cadm-type-count { font-size: 0.78em; color: var(--text-3); }
/* ── Voicing panel (right column) ────────────────────────────────── */
.cadm-voicing-panel {
border: 1px solid var(--border); border-radius: var(--r-lg);
background: var(--surface);
min-height: 300px;
max-height: calc(100vh - 140px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.cadm-panel-title { font-weight: 700; font-size: 1.1em; margin-bottom: var(--sp-3); }
/* Non-scrolling header — sits above the scroll body so diagram SVGs
can never bleed through it. */
.cadm-voicing-panel > .dg-header {
flex: 0 0 auto;
z-index: 10;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-lg) var(--r-lg) 0 0;
background: var(--surface);
}
[data-theme="dark"] .cadm-voicing-panel > .dg-header { background: var(--bg-1); }
/* Scrollable body below the fixed header */
.cadm-scroll-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 0 var(--sp-4) var(--sp-4);
scrollbar-width: none;
-ms-overflow-style: none;
}
.cadm-scroll-body::-webkit-scrollbar { display: none; }
.cadm-loading { color: var(--text-3); padding: 20px; text-align: center; }
.cadm-filter-row {
display: flex; gap: 6px; margin-bottom: var(--sp-3);
}
.cadm-filter-btn {
height: 34px;
padding: 0 12px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.cadm-filter-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.cadm-filter-btn--active {
background: var(--accent-bg, rgba(242,169,59,0.15));
border-color: var(--accent);
font-weight: 600;
}
.cadm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
padding-top: 6px;
padding-bottom: var(--sp-5);
}
.cadm-card {
display: flex; flex-direction: column; align-items: center;
padding: 10px 8px 8px; gap: 4px;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--bg-1);
transition: border-color 0.15s, box-shadow 0.15s;
overflow: visible;
}
.cadm-card:hover { border-color: var(--accent); }
.cadm-card--graded {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: rgba(242, 169, 59, 0.06);
}
.cadm-card svg.cdp-mini-svg {
max-width: 90px; width: 100%; height: auto;
overflow: visible; display: block;
}
.cadm-card-pos { font-size: 0.82em; font-weight: 600; color: var(--text); }
.cadm-card-strings { font-size: 0.72em; color: var(--text-3); }
.cadm-grade-row {
display: flex; align-items: center; gap: 4px;
margin-top: 4px; width: 100%;
flex-wrap: wrap; justify-content: center;
}
.cadm-grade-label { font-size: 0.72em; color: var(--text-3); white-space: nowrap; }
.cadm-grade-sel {
font-size: 0.78em; padding: 2px 4px; width: 48px; min-width: 0;
background: var(--bg-2); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-sm);
cursor: pointer;
}
.cadm-pool-wrap {
position: relative; flex: 0 0 auto;
}
.cadm-pool-btn {
font-size: 0.7em; padding: 2px 6px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: transparent; color: var(--text-3); cursor: pointer;
white-space: nowrap;
}
.cadm-pool-btn:hover { border-color: var(--accent); color: var(--accent); }
.cadm-pool-btn--active {
border-color: var(--accent); color: var(--accent); background: rgba(242,169,59,0.08);
}
.cadm-pool-backdrop {
position: fixed; inset: 0; z-index: 19999;
background: rgba(0,0,0,0.12);
}
.cadm-pool-menu {
position: fixed; z-index: 20000;
background: #ffffff; border: 1px solid var(--border);
border-radius: var(--r-md, 8px);
box-shadow: 0 6px 24px rgba(0,0,0,0.2); min-width: 150px;
padding: 4px 0; display: flex; flex-direction: column;
}
[data-theme="dark"] .cadm-pool-menu { background: #1e1e1e; }
.cadm-pool-menu-item {
display: block; width: 100%; text-align: left;
padding: 6px 12px; font-size: 0.78em;
background: none; border: none; color: var(--text); cursor: pointer;
white-space: nowrap;
}
.cadm-pool-menu-item:hover { background: #f0f0f0; }
.cadm-pool-menu-item--danger { color: var(--error, #e74c3c); }
.cadm-pool-menu-item--danger:hover { background: #fdecea; }
[data-theme="dark"] .cadm-pool-menu-item:hover { background: #2a2a2a; }
[data-theme="dark"] .cadm-pool-menu-item--danger:hover { background: #3a1c1c; }
.cadm-pool-menu-item:disabled { opacity: 0.5; cursor: default; }
/* ── Pool key picker (custom key selection) ─────────────────────── */
.cadm-pool-menu-header {
padding: 6px 12px; font-size: 0.75em; font-weight: 600;
color: var(--text-3); border-bottom: 1px solid var(--border);
}
.cadm-pool-key-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 2px; padding: 6px 8px;
}
.cadm-pool-key-label {
display: flex; align-items: center; gap: 4px;
font-size: 0.78em; padding: 3px 4px; border-radius: var(--r-sm);
cursor: pointer; white-space: nowrap;
}
.cadm-pool-key-label:hover { background: #f0f0f0; }
[data-theme="dark"] .cadm-pool-key-label:hover { background: #2a2a2a; }
.cadm-pool-key-label input[type="checkbox"] {
margin: 0; accent-color: var(--accent);
}
.cadm-pool-toggle-row {
display: flex; gap: 4px; padding: 2px 8px 4px;
border-top: 1px solid var(--border);
}
.cadm-pool-toggle-btn {
font-size: 0.7em; padding: 2px 8px; border: 1px solid var(--border);
border-radius: var(--r-sm); background: transparent;
color: var(--text-3); cursor: pointer;
}
.cadm-pool-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.cadm-pool-menu-apply {
display: block; width: calc(100% - 16px); margin: 4px 8px 6px;
padding: 5px 0; font-size: 0.78em; font-weight: 600;
border: none; border-radius: var(--r-sm); cursor: pointer;
background: var(--accent); color: #fff; text-align: center;
}
.cadm-pool-menu-apply:hover { opacity: 0.9; }
.cadm-pool-menu-apply--danger { background: var(--error, #e74c3c); }
.cadm-pool-menu-apply:disabled { opacity: 0.5; cursor: default; }
/* ── Scope badge on graded cards ────────────────────────────────── */
.cadm-card-scope {
font-size: 0.68em; color: var(--text-3); font-weight: 600;
padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-pill, 100px);
white-space: nowrap; margin-top: 2px;
}
.cadm-card-scope--perkey {
color: var(--accent); border-color: var(--accent);
}
.cadm-lab-btn.send-to-lab-btn {
margin-top: 4px; font-size: 11px; padding: 2px 8px;
opacity: 0.5; transition: opacity 0.15s;
}
.dg-card:hover .cadm-lab-btn.send-to-lab-btn { opacity: 1; }
/* ── Shared dialog / modal overlay ─────────────────────────────── */
.cadm-dialog-overlay {
position: fixed; inset: 0; z-index: 20000;
background: rgba(0,0,0,0.45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.cadm-dialog-modal,
.cadm-conflict-modal,
.cadm-perkey-modal {
background: var(--surface, #fff); border-radius: var(--r-lg);
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
padding: 24px 28px; max-width: 480px; width: 100%;
max-height: 80vh; overflow-y: auto;
}
.cadm-dialog-title {
margin: 0 0 8px; font-size: 1.1em; font-weight: 700; color: var(--text);
}
.cadm-dialog-desc {
margin: 0 0 18px; font-size: 0.88em; color: var(--text-3); line-height: 1.45;
}
.cadm-dialog-actions {
display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.cadm-dialog-btn {
height: 34px;
padding: 0 14px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.cadm-dialog-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
.cadm-dialog-btn--primary {
background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.cadm-dialog-btn--primary:hover { filter: brightness(1.1); border-color: var(--accent); }
.cadm-dialog-btn--secondary {
border-color: var(--accent); color: var(--accent); font-weight: 600;
}
.cadm-dialog-btn--cancel {
background: transparent; color: var(--text-3); border-color: var(--border);
}
/* ── Per-key editor modal ──────────────────────────────────────── */
.cadm-perkey-modal { max-width: 360px; }
.cadm-perkey-diagram { text-align: center; margin-bottom: 12px; }
.cadm-perkey-diagram svg { display: inline-block; width: 62px; height: auto; overflow: visible; }
.cadm-perkey-list {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px 16px; margin-bottom: 18px;
}
.cadm-perkey-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 6px; border-radius: var(--r-sm);
}
.cadm-perkey-row--current { background: var(--accent-bg, rgba(242,169,59,0.12)); }
.cadm-perkey-key {
font-weight: 600; font-size: 0.88em; width: 28px; color: var(--text);
}
.cadm-perkey-sel {
font-size: 0.82em; padding: 2px 4px; width: 52px; min-width: 0;
background: var(--bg-2); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-sm);
cursor: pointer;
}
/* ── Conflict resolution (migration) ──────────────────────────── */
.cadm-conflict-modal { max-width: 560px; }
.cadm-conflict-list {
display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}
.cadm-conflict-item {
display: flex; gap: 14px; align-items: center;
padding: 10px 12px;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--bg-1);
}
.cadm-conflict-diagram { flex: 0 0 auto; width: 62px; }
.cadm-conflict-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.cadm-conflict-info { flex: 1 1 auto; }
.cadm-conflict-type { font-weight: 600; font-size: 0.92em; margin-bottom: 6px; color: var(--text); }
.cadm-conflict-options { display: flex; flex-direction: column; gap: 4px; }
.cadm-conflict-option {
display: flex; align-items: center; gap: 6px;
font-size: 0.85em; color: var(--text); cursor: pointer;
}
.cadm-conflict-option input[type="radio"] { accent-color: var(--accent); }
/* ── Custom diagram creator in picker ────────────────────────────── */
.cdp-create-section {
border-top: 1px solid var(--border);
padding-top: 10px;
margin-top: 8px;
}
.cdp-create-btn {
width: 100%; padding: 8px;
border: 1px dashed var(--border); border-radius: var(--r-md);
background: transparent; cursor: pointer; color: var(--text-3);
font-size: 0.85em;
transition: border-color 0.15s, color 0.15s;
}
.cdp-create-btn:hover { border-color: var(--accent); color: var(--accent); }
.cdp-creator-wrap {
padding: 8px;
border-top: 1px solid var(--border);
margin-top: 8px;
}
.cdp-creator-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--border);
margin-bottom: 8px;
cursor: crosshair;
}
.cdp-creator-cell {
background: var(--bg-1);
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
position: relative;
transition: background 0.1s;
}
.cdp-creator-cell:hover { background: var(--bg-2); }
.cdp-creator-cell--dot {
background: var(--accent-bg, rgba(242,169,59,0.2));
}
.cdp-creator-cell--dot::after {
content: '';
width: 60%; height: 60%; border-radius: 50%;
background: var(--accent, #f2a93b);
}
.cdp-creator-cell--muted {
background: rgba(200,200,200,0.15);
}
.cdp-creator-cell--muted::after {
content: '\00d7'; font-size: 1.1em; color: var(--text-3);
}
.cdp-creator-controls {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.cdp-creator-controls label { font-size: 0.78em; color: var(--text-3); }
.cdp-creator-controls select { font-size: 0.78em; padding: 2px 4px; }
.cdp-creator-controls button {
padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--accent); color: #fff; cursor: pointer; font-size: 0.82em; font-weight: 600;
}
.cdp-creator-controls button:hover { opacity: 0.9; }
.cdp-creator-controls .cdp-creator-clear {
background: transparent; color: var(--text-3); border-color: var(--border);
}
/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] .cadm-type-list { background: var(--bg-1); }
[data-theme="dark"] .cadm-voicing-panel { background: var(--bg-1); }
[data-theme="dark"] .cadm-card { background: var(--bg-2); }
[data-theme="dark"] .cadm-dialog-modal,
[data-theme="dark"] .cadm-conflict-modal,
[data-theme="dark"] .cadm-perkey-modal { background: var(--bg-1); }
[data-theme="dark"] .cadm-conflict-item { background: var(--bg-2); }
[data-theme="dark"] .cadm-perkey-row--current { background: rgba(242,169,59,0.15); }
/* ══════════════════════════════════════════════════════════════════════
UNIFIED DIAGRAM GRID STANDARD
Shared grid layout, card style, and pagination for ALL diagram lists.
Used by: Chords page panel, Collections picker, Chord Admin.
══════════════════════════════════════════════════════════════════════ */
/* Grid container — CSS Grid, responsive auto-fill */
.dg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
padding-bottom: var(--sp-5);
}
/* Individual card */
.dg-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 8px 8px;
gap: 4px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--bg-1);
transition: border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
overflow: visible;
user-select: none;
-webkit-user-select: none;
}
.dg-card:hover {
border-color: var(--accent);
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dg-card--selected {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: rgba(242, 169, 59, 0.06);
}
.dg-card--graded {
border-color: var(--accent);
box-shadow: inset 0 0 0 1px var(--accent);
background: rgba(242, 169, 59, 0.06);
}
/* SVG inside card */
.dg-card svg { max-width: 100px; width: 100%; height: auto; display: block; overflow: visible; }
/* Card labels */
.dg-card-label {
font-size: 11px;
font-weight: 600;
color: var(--text);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* .dg-card-play removed — Play action now lives in the DiagramCardToolbar. */
.dg-card-sublabel {
font-size: 10px;
color: var(--text-3);
text-align: center;
white-space: nowrap;
}
/* Group heading (full-width row) */
.dg-grid .dg-group-heading {
grid-column: 1 / -1;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: var(--sp-3) 0 var(--sp-2);
border-bottom: 1px solid var(--border);
}
.dg-grid .dg-group-heading:first-child { padding-top: 0; }
/* Accent variants for row-mode headings */
.dg-grid .dg-group-heading--underline {
border-bottom: 2px solid var(--accent);
}
.dg-grid .dg-group-heading--left-border {
border-bottom: 1px solid var(--border);
border-left: 3px solid var(--accent);
padding-left: var(--sp-3);
}
.dg-grid .dg-group-heading--none {
border-bottom: none;
}
/* ── String-set flow layout ─────────────────────────────────────────
Inline blocks per string set that wrap onto the same row when they fit.
Used when sort mode is "By string set". */
.dg-strset-flow {
display: flex;
flex-wrap: wrap;
gap: 0;
grid-column: 1 / -1; /* span full width when inside a dg-grid */
}
/* Individual string-set block: title + cards */
.dg-strset-block {
flex: 0 1 auto;
padding: 0 var(--sp-5) var(--sp-4) 0;
margin-right: var(--sp-5);
margin-bottom: var(--sp-2);
}
.dg-strset-block:last-child {
margin-right: 0;
padding-right: 0;
}
.dg-strset-block-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
margin-bottom: var(--sp-3);
}
/* Accent: underline (default) */
.dg-strset-block-title--underline {
display: inline-block;
padding: 0 0 3px;
border-bottom: 2px solid var(--accent);
}
/* Accent: left border */
.dg-strset-block-title--left-border {
padding-left: var(--sp-3);
border-left: 3px solid var(--accent);
}
/* Accent: none — no extra styling */
.dg-strset-block-cards {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ── Standard pagination ─────────────────────────────────────────── */
.dg-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--sp-4) 0;
}
/* When inside a grid, span full width */
.dg-grid .dg-pager { grid-column: 1 / -1; }
.dg-page-btn {
height: 34px;
padding: 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
min-width: 34px;
text-align: center;
}
.dg-page-btn:hover:not(:disabled) {
background: var(--bg-2);
border-color: var(--border-strong);
}
.dg-page-btn:disabled {
opacity: 0.35;
cursor: default;
}
.dg-page-go {
display: inline-flex;
align-items: center;
gap: 2px;
}
.dg-page-input {
width: 34px;
padding: 2px 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
font-size: 12px;
line-height: normal;
text-align: center;
-moz-appearance: textfield;
}
.dg-page-input::-webkit-inner-spin-button,
.dg-page-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.dg-page-info {
font-size: 12px;
color: var(--text-3);
line-height: normal;
}
/* ── Export button in diagram header ──────────────────────────────── */
.dg-export-btn {
display: inline-flex;
align-items: center;
gap: 4px;
height: 28px;
padding: 0 8px;
font-family: var(--font);
font-size: 11px;
font-weight: 600;
color: var(--text-2);
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.dg-export-btn:hover {
background: var(--accent-bg);
color: var(--accent);
border-color: var(--accent);
}
.dg-export-btn svg { flex-shrink: 0; }
/* ── Standard header bar ──────────────────────────────────────────── */
.dg-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-5);
background: var(--bg-2);
border-bottom: 1px solid var(--border);
gap: var(--sp-4);
min-height: 44px;
flex-wrap: wrap;
}
.dg-header-left {
display: flex;
align-items: center;
gap: var(--sp-3);
flex: 1;
min-width: 0;
}
.dg-header-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dg-header-controls {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 1;
flex-wrap: wrap;
min-width: 0;
}
.dg-ctrl-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-3);
white-space: nowrap;
}
.dg-ctrl-sep { margin-left: var(--sp-2); }
.dg-select {
height: 34px;
padding: 0 26px 0 10px;
font-family: var(--font);
font-size: 13px;
font-weight: 500;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 11px;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.dg-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* ── Lightbox overlay (click-to-enlarge) ─────────────────────────── */
.dg-lightbox {
position: fixed;
inset: 0;
z-index: 20000;
background: rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
user-select: none;
-webkit-user-select: none;
}
.dg-lightbox-inner {
background: #fff;
border-radius: var(--r-lg);
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
padding: 36px 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
max-width: 90vw;
max-height: 90vh;
cursor: default;
}
.dg-lightbox-title {
font-size: clamp(18px, 3vh, 32px);
font-weight: 700;
color: var(--text);
text-align: center;
margin-bottom: 4px;
}
.dg-lightbox-inner svg {
display: block;
overflow: visible;
/* Chord thumbnails render at ~100px; preview should feel clearly
bigger. Scales with viewport but caps out on large screens so
diagrams don't get comically oversized on 4K monitors. */
width: clamp(360px, 46vmin, 560px);
height: auto;
max-width: 82vw;
}
.dg-lightbox-label {
font-size: 13px;
font-weight: 500;
color: var(--text-2);
text-align: center;
}
.dg-lightbox-hint {
font-size: 11px;
color: var(--text-3);
text-align: center;
margin-top: 4px;
}
/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"] .dg-card { background: var(--bg-2); }
[data-theme="dark"] .dg-card:hover { background: var(--bg-3); }
[data-theme="dark"] .dg-card--selected { background: rgba(242,169,59,0.12); }
[data-theme="dark"] .dg-card--graded { background: rgba(242,169,59,0.12); }
[data-theme="dark"] .dg-lightbox-inner { background: var(--bg-2); }
/* ═══════════════════════════════════════════════════════════════════
Scale Reference (admin) — accordion list
═══════════════════════════════════════════════════════════════════ */
/* Toolbar */
.sref-toolbar {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
padding: var(--sp-4) var(--sp-5) var(--sp-3);
border-bottom: 1px solid var(--border); position: sticky; top: 0;
background: var(--surface); z-index: 10;
}
.sref-key-wrap { display: flex; align-items: center; gap: 5px; }
.sref-key-label { font-size: 0.78em; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.sref-select {
font-family: inherit; font-size: 0.88em; font-weight: 600;
padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--text); cursor: pointer;
}
.sref-select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.sref-filter-wrap { flex: 1; min-width: 140px; }
.sref-filter {
width: 100%; font-family: inherit; font-size: 0.88em;
padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--text);
}
.sref-filter:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.sref-filter::placeholder { color: var(--text-3); }
.sref-stats { font-size: 0.78em; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.sref-btn {
font-family: inherit; font-size: 0.76em; font-weight: 600;
padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface-2); color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.sref-focused .sref-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
/* List */
.sref-list { padding: 0 var(--sp-5) var(--sp-5); }
/* Group dividers */
.sref-group-divider {
font-size: 0.82em; font-weight: 700; color: var(--accent);
padding: var(--sp-4) 0 var(--sp-1); margin-top: var(--sp-2);
border-bottom: 1px solid var(--border); letter-spacing: .02em;
}
.sref-group-divider:first-child { margin-top: 0; padding-top: var(--sp-3); }
/* Accordion row */
.sref-row {
border-bottom: 1px solid var(--border);
}
.sref-row-header {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 4px; cursor: pointer; user-select: none;
transition: background .12s;
}
.sref-focused .sref-row-header:hover { background: var(--accent-bg); border-radius: var(--r-sm); }
/* Arrow */
.sref-arrow {
font-size: 0.6em; color: var(--text-3); transition: transform .15s;
flex-shrink: 0; width: 12px; text-align: center;
}
.sref-open > .sref-row-header > .sref-arrow { transform: rotate(90deg); }
/* Scale name in header */
.sref-name {
font-weight: 700; color: var(--text); font-size: 1.05em;
}
.sref-focused .sref-name:hover { color: var(--accent); }
/* Badges */
.sref-badge {
font-size: 0.7em; font-weight: 600; padding: 1px 6px;
border-radius: 9px; white-space: nowrap; line-height: 1.5;
}
.sref-badge-notes { background: var(--accent-bg); color: var(--accent); }
.sref-badge-chords { background: rgba(100,149,237,.12); color: #4a7ec5; }
.sref-badge-modes { background: rgba(144,100,237,.12); color: #7c5abf; }
.sref-badge-subs { background: rgba(60,170,130,.12); color: #2e8a6a; }
[data-theme="dark"] .sref-badge-chords { background: rgba(100,149,237,.15); color: #7aa8e8; }
[data-theme="dark"] .sref-badge-modes { background: rgba(144,100,237,.15); color: #a88ae8; }
[data-theme="dark"] .sref-badge-subs { background: rgba(60,170,130,.15); color: #5cc0a0; }
/* AKA inline in header */
.sref-aka-inline {
font-size: 0.82em; font-weight: 400; color: var(--text-3); font-style: italic;
white-space: nowrap;
}
/* Note-count segment badge in divider */
.sref-note-count-badge { font-weight: 400; font-size: 0.9em; color: var(--text-3); }
.sref-note-count-divider { font-size: 0.92em; text-transform: uppercase; letter-spacing: .06em; }
/* Header inline info */
.sref-header-notes { font-size: 0.82em; font-weight: 600; color: var(--text-2); letter-spacing: .02em; margin-left: auto; }
.sref-header-steps { font-family: var(--font-mono, 'DM Mono', monospace); font-size: 0.78em; color: var(--text-3); }
/* Body (expanded content) */
.sref-row-body {
display: none; padding: 2px 4px 10px 24px;
font-size: 0.84em; line-height: 1.55; color: var(--text-2);
}
.sref-open > .sref-row-body { display: block; }
/* Info block (mood + AKA) at top of body */
.sref-info-block {
margin-bottom: 8px; padding: 6px 10px;
background: color-mix(in srgb, var(--text-3) 5%, transparent);
border-radius: var(--r-sm); border: 1px solid var(--border);
}
.sref-mood { margin-bottom: 3px; }
.sref-mood em { color: var(--text-2); }
.sref-aka-detail { color: var(--text-2); }
/* Mode AKA brackets */
.sref-mode-aka { font-size: 0.88em; color: var(--text-3); font-style: italic; }
/* Sections inside body */
.sref-section { margin-bottom: 4px; }
.sref-lbl { font-weight: 600; font-size: 0.9em; color: var(--text-3); margin-right: 4px; }
.sref-scale-group { margin: 2px 0 2px 12px; }
.sref-scale-group-lbl { font-weight: 600; font-size: 0.85em; color: var(--text-3); margin-right: 4px; font-style: italic; }
/* Chord Reference — scales-by-note-count responsive grid */
.sref-scales-section { margin-top: 6px; }
.sref-scales-section > .sref-lbl { display: block; margin-bottom: 4px; }
.sref-scales-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
width: 100%;
font-size: 0.88em;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.sref-scales-col {
display: flex;
flex-direction: column;
min-width: 0;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: transparent;
}
.sref-scales-col-hdr {
background: var(--surface-2);
color: var(--text-3);
font-weight: 600;
font-size: 0.82em;
letter-spacing: 0.02em;
text-transform: uppercase;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
}
.sref-scales-col-body {
padding: 6px 8px;
min-width: 0;
}
.sref-scale-cell-item {
padding: 1px 0;
line-height: 1.35;
min-width: 0;
word-break: break-word;
overflow-wrap: anywhere;
}
.sref-scale-cell-item .sref-link { white-space: normal; }
.sref-chord-row { margin-bottom: 3px; }
.sref-sub-row { margin-bottom: 2px; }
.sref-deg { font-size: 0.85em; color: var(--text-3); }
/* Clickable chips (chords) */
.sref-chip {
display: inline-block; background: var(--surface); border: 1px solid var(--border);
border-radius: 4px; padding: 0 5px; margin: 1px 2px; font-size: 0.92em;
font-weight: 500; color: var(--text); cursor: pointer; transition: all .1s;
}
.sref-focused .sref-chip:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
/* Clickable text links (modes, subscales, scale names) */
.sref-link { cursor: pointer; }
.sref-mode-link, .sref-sub-link { color: var(--accent); }
.sref-focused .sref-mode-link:hover, .sref-focused .sref-sub-link:hover { text-decoration: underline; }
.sref-gallery-btn {
font-size: 12px;
color: var(--accent);
cursor: pointer;
white-space: nowrap;
padding: 2px 8px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: background var(--transition);
}
.sref-focused .sref-gallery-btn:hover { background: var(--accent-bg); }
/* Fingering chips */
.sref-fng-chip {
font-family: var(--font-mono, 'DM Mono', monospace);
font-size: 0.82em;
letter-spacing: .02em;
}
/* Chord chip inside chord row */
.sref-chord-chip { margin-right: 2px; position: relative; }
/* Tiny dot inside chord chip — signals voicings/arps exist (detail on hover tooltip) */
.sref-chord-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: .55;
margin-left: 3px;
vertical-align: super;
}
/* Preset tags (admin / user) */
.sref-preset-tag {
display: inline-block;
font-size: 0.72em;
font-weight: 600;
padding: 1px 6px;
border-radius: 8px;
vertical-align: middle;
margin-right: 4px;
letter-spacing: .02em;
}
.sref-preset-admin {
background: rgba(220,110,60,.10);
color: #c06030;
}
.sref-preset-user {
background: rgba(80,170,100,.10);
color: #3a9a50;
}
[data-theme="dark"] .sref-preset-admin { background: rgba(220,130,70,.15); color: #e0944a; }
[data-theme="dark"] .sref-preset-user { background: rgba(80,180,110,.15); color: #6ac07a; }
/* Flash animation when scrolling to a scale */
@keyframes sref-flash-anim {
0%,100% { background: transparent; }
30% { background: var(--accent-bg); }
}
.sref-flash { animation: sref-flash-anim .9s ease; }
/* Responsive */
@media (max-width: 600px) {
.sref-toolbar { padding: var(--sp-3); gap: 6px; }
.sref-list { padding: 0 var(--sp-3) var(--sp-3); }
.sref-row-body { padding-left: 16px; }
.sref-header-notes, .sref-header-steps { display: none; }
.sref-badge { font-size: 0.65em; }
}
/* ═════════════════════════════════════════════════════════════════════════
Scale/Chord Priority Admin (.scadm-*)
═════════════════════════════════════════════════════════════════════════ */
.scadm-container { max-width: 1400px; margin: 0 auto; padding: var(--sp-4); }
.scadm-header { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.scadm-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; }
.scadm-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--sp-4); }
/* Tabs */
.scadm-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.scadm-tab {
padding: 8px 18px; border: 1px solid var(--border); border-radius: var(--radius, 6px);
background: var(--bg-card, var(--bg)); color: var(--text-muted); cursor: pointer;
font-size: 0.85rem; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.scadm-tab:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }
.scadm-tab--active { background: var(--accent, #f2a93b); color: #111; border-color: var(--accent, #f2a93b); }
/* Save button — hidden when nothing to save, prominent when dirty */
.scadm-save-btn {
padding: 8px 20px; border: none; border-radius: var(--radius, 6px);
background: transparent; color: var(--text-3); font-size: 0.85rem;
font-weight: 600; cursor: default; visibility: hidden;
}
.scadm-save-btn--dirty {
background: var(--accent, #f2a93b); color: #111; cursor: pointer;
visibility: visible;
}
.scadm-save-btn--dirty:hover { filter: brightness(1.1); }
/* Two-panel layout */
.scadm-panels { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: var(--sp-4); min-height: 500px; }
.scadm-panel {
border: 1px solid var(--border); border-radius: var(--radius, 6px);
background: #fff; overflow: hidden; display: flex; flex-direction: column;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* Right panel: slightly more open feel */
.scadm-panel--right { background: #fff; }
.scadm-panel-title-row {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px;
padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.scadm-panel-title {
font-size: 0.9rem; font-weight: 700; color: var(--text); padding: 0;
margin: 0;
}
/* Inline expand/collapse controls in panel title */
.scadm-ec-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scadm-ec-group { display: flex; align-items: center; gap: 3px; }
.scadm-ec-label {
font-size: 0.67rem; font-weight: 700; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* Sort toggle button */
.scadm-sort-toggle {
padding: 2px 9px; font-size: 0.71rem; border: 1px solid var(--border);
border-radius: 4px; background: var(--bg); color: var(--text-muted); cursor: pointer;
font-family: var(--font);
}
.scadm-sort-toggle:hover { border-color: var(--accent); color: var(--accent); }
.scadm-sort-toggle--active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
/* Filter input */
.scadm-filter {
margin: 0 var(--sp-3) var(--sp-2); padding: 6px 10px; border: 1px solid var(--border);
border-radius: 4px; background: var(--bg); color: var(--text); font-size: 0.8rem;
}
.scadm-filter:focus { outline: none; border-color: var(--accent, #f2a93b); }
/* Scrollable list */
.scadm-list { overflow-y: auto; flex: 1; padding: 0 var(--sp-2) var(--sp-2); }
.scadm-list--right { padding: 0 var(--sp-3) var(--sp-3); }
/* Group headers */
.scadm-group-header {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text-muted); padding: var(--sp-2) var(--sp-2) 4px; font-weight: 600;
}
.scadm-group-header--prio { color: var(--accent, #f2a93b); }
/* ── Option B: Bordered card sections ──────────────────────────────── */
.scadm-cat-section {
border: 1px solid var(--border); border-radius: var(--r-md);
margin-bottom: var(--sp-2); overflow: hidden;
}
.scadm-cat-header {
display: flex; align-items: center; gap: var(--sp-2);
padding: 10px 14px;
background: var(--bg-2, #f5f5f5);
cursor: pointer; user-select: none;
transition: background var(--transition);
border-bottom: 1px solid var(--border);
}
.scadm-cat-header:hover { background: var(--bg-3); }
/* Per-group expand/collapse controls (pushed to right edge) */
.scadm-cat-ec { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.scadm-cat-chevron { display: flex; align-items: center; }
.scadm-cat-chevron svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.scadm-cat-collapsed .scadm-cat-chevron svg { transform: rotate(-90deg); }
.scadm-cat-collapsed { border-bottom-color: transparent; }
.scadm-cat-title { font-size: 13px; font-weight: 700; color: var(--text); }
.scadm-cat-count {
font-size: 11px; color: var(--text-3);
background: #fff; border: 1px solid var(--border);
border-radius: 10px; padding: 1px 7px; line-height: 1.6;
}
.scadm-cat-body { padding: var(--sp-1) var(--sp-2); background: #fff; }
.scadm-cat-hidden { display: none !important; }
/* ── Scale row (parent scale — selectable + mode toggle) ───────────── */
.scadm-scale-row {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text);
transition: background 0.12s; border-left: 3px solid transparent;
}
.scadm-scale-row:hover { background: var(--bg-2); }
.scadm-scale-chevron { display: flex; align-items: center; flex-shrink: 0; }
.scadm-scale-chevron svg { width: 12px; height: 12px; transition: transform 0.2s ease; }
.scadm-scale-chevron--collapsed svg { transform: rotate(-90deg); }
.scadm-mode-badge {
font-size: 11px; font-weight: 500; color: var(--text-3);
margin-left: auto; padding-left: 4px; white-space: nowrap; flex-shrink: 0;
}
.scadm-mode-body {
padding-left: 20px; border-left: 2px solid var(--border); margin-left: 14px;
}
/* ── Mode row (indented under parent scale) ────────────────────────── */
.scadm-mode-row {
display: flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: var(--r-sm); cursor: pointer;
font-size: 12px; color: var(--text-2);
transition: background 0.12s; border-left: 3px solid transparent;
}
.scadm-mode-row:hover { background: var(--bg-2); }
/* ── Left list items (generic — chord-to-scale tab) ────────────────── */
.scadm-list-item {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px;
color: var(--text); transition: background 0.12s; border-left: 3px solid transparent;
}
.scadm-list-item:hover { background: var(--bg-2); }
/* ── Selected state — shared across all row types ──────────────────── */
.scadm-list-item--selected {
background: var(--accent-bg); border-left-color: var(--accent);
}
.scadm-list-item--selected:hover { background: var(--accent-bg); }
.scadm-scale-row.scadm-list-item--selected {
background: var(--accent-bg); border-left-color: var(--accent);
}
.scadm-scale-row.scadm-list-item--selected:hover { background: var(--accent-bg); }
.scadm-mode-row.scadm-list-item--selected {
background: var(--accent-bg); border-left-color: var(--accent);
}
.scadm-mode-row.scadm-list-item--selected:hover { background: var(--accent-bg); }
.scadm-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scadm-item-count {
min-width: 20px; text-align: center; font-size: 0.7rem; font-weight: 700;
background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 6px;
flex-shrink: 0;
}
/* ── Priority button row (replaces