/* Erasmus — "Playful" look: lavender page, white rounded cards with a hard lilac shadow, coral and violet accents, Nunito. */
:root {
    --bg: #f6f1ff;
    --panel: #ffffff;
    --tint: #efe8ff;
    --ink: #2b2150;
    --muted: #5a5285;
    --line: #e4dbff;
    --shadow: #e4dbff;
    --accent: #4b3bb0;        /* violet: links, selected things, dark buttons */
    --accent-soft: #efe8ff;
    --coral: #ff7a59;         /* primary buttons */
    --coral-deep: #f26a47;
    --mint: #9be7c4;
    --mint-ink: #14382b;
    --amber: #ffb86b;
    --amber-soft: #ffe9a8;
    --amber-ink: #4a2a05;
    --good: #2f9e5b;
    --bad: #c8403a;
    --root: #ff7a59;
    --note: #4b3bb0;
    --radius: 28px;
    --radius-sm: 16px;
    font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font-weight: 500; line-height: 1.45; }
a { color: var(--accent); font-weight: 700; }
a:hover { color: var(--ink); }
h1 { font-weight: 900; font-size: 2.2rem; line-height: 1.1; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
h2 { font-weight: 900; font-size: 1.35rem; margin: 0 0 0.5rem; }
h3 { font-weight: 900; font-size: 1.1rem; margin: 0 0 0.3rem; }
code { font-family: Consolas, "Cascadia Mono", monospace; background: var(--tint); padding: 0.1em 0.35em; border-radius: 6px; }
.lead { font-size: 1.15rem; max-width: 60ch; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--bad); }

/* Layout: a top bar, the page, a footer */
.shell { display: flex; flex-direction: column; min-height: 100vh; }
.topbar { background: var(--bg); }
/* One row: the brand, then the menus right after it (the bar may run wider than the page so they fit on a line). */
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 0.5rem 2rem 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; justify-content: center; }
.brand { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-size: 1.5rem; font-weight: 900; margin-right: 0.3rem; }
.brand svg { display: block; }
.topnav { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; }
.nav-link, .menu-btn { display: inline-block; color: var(--ink); text-decoration: none; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--panel); border: 0; font: inherit; font-weight: 700; cursor: pointer; line-height: 1.2; }
.nav-link:hover, .menu-btn:hover { background: var(--tint); color: var(--ink); }
.nav-link.active { background: var(--accent); color: #fff; }
.nav-link.join-link { background: var(--coral); color: var(--ink); }
.nav-link.login-link { background: var(--accent); color: #fff; }
.menu { position: relative; }
.menu-btn::after { content: " ▾"; font-size: 0.75em; color: var(--muted); }
.menu-icon { width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.3rem; color: var(--accent); }
.lab-icon { width: 1.4rem; height: 1.4rem; color: var(--accent); flex: none; }
.lab-icon.big { width: 2.6rem; height: 2.6rem; }
.lab-title { display: flex; align-items: center; gap: 0.6rem; }
.lab-pointer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; text-decoration: none; color: var(--ink); }
.lab-pointer:hover { background: var(--tint); }
.lab-pointer > span:first-of-type { flex: 1 1 260px; color: var(--muted); }
.lab-pointer b { color: var(--ink); }
.lab-pointer .lab-go { font-weight: 800; color: var(--accent); }
.menu-list { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 14rem; background: var(--panel); border-radius: 20px; box-shadow: 0 8px 0 var(--shadow), 0 12px 30px rgba(43, 33, 80, 0.12); padding: 0.5rem; z-index: 40; }
.menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }   /* bridges the gap so the mouse can cross it */
.menu.right .menu-list { left: auto; right: 0; }
.menu:hover .menu-list, .menu.open .menu-list { display: block; }
.menu.hush:not(.open) .menu-list { display: none; }   /* just chose an item: stay shut until the mouse leaves */
.menu.open .menu-btn { background: var(--tint); }
.menu-list .nav-link { display: block; border-radius: 12px; padding: 0.45rem 0.8rem; background: transparent; }
.menu-list .nav-link:hover { background: var(--tint); }
.menu-list .nav-link.active { background: var(--accent); color: #fff; }
.nav-section { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.8rem 0.2rem; }
.account-box { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.5rem; }
.account-name { font-weight: 900; padding: 0.3rem 0.4rem; }
.link-button { font: inherit; font-weight: 700; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0.3rem 0.5rem; }
.link-button:hover { text-decoration: underline; }
.content { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.2rem 2rem 3rem; }
.site-footer { max-width: 1180px; margin: 0 auto; width: 100%; padding: 1rem 2rem 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--muted); font-size: 0.9rem; }
.site-footer b { color: var(--ink); font-weight: 900; }
.site-footer .footer-brand { text-decoration: none; }
.site-footer .footer-brand:hover b { text-decoration: underline; }
@media (max-width: 700px) {
    .topbar-inner, .content, .site-footer { padding-left: 1rem; padding-right: 1rem; }
    .topbar-inner { padding-top: 0.6rem; padding-bottom: 0.6rem; justify-content: space-between; }   /* the brand left, the menu button right */
    /* One button opens the whole navigation as a list; the menus inside it open inline. */
    .nav-toggle { display: inline-flex; }
    .topnav { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 0.2rem; padding-top: 0.4rem; border-top: 1px solid var(--line); }
    .topnav.open { display: flex; }
    .topnav .menu-btn, .topnav > .nav-link { width: 100%; text-align: left; padding: 0.6rem 0.8rem; }
    .menu-list { position: static; box-shadow: none; padding: 0.2rem 0 0.4rem 1.2rem; background: transparent; margin: 0; min-width: 0; }
    .menu-list::before { display: none; }
    .menu:hover .menu-list { display: none; }
    .menu.open .menu-list { display: block; }
    .account-box { margin: 0.4rem 0 0; flex-wrap: wrap; gap: 0.5rem; }
    /* Tools: one panel under another, nothing wider than the screen. */
    .metro-main, .metro-practice, .metro-presets, .tuner-side, .tuner-face, .simon-setup, .simon-board { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; max-width: none !important; }
    .panel-close { right: 0.4rem; top: 0.5rem; }
    .metro-tempo .button.small { padding: 0.55rem 0.8rem; font-size: 1rem; }
    .metro-bpm .input { font-size: 2.2rem; width: 7rem; }
    .practice-table thead { display: none; }
    .practice-table tr { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.3rem; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
    .practice-table td { display: block; padding: 0; border: 0; }
    .practice-table td:first-child { grid-column: 1 / -1; }
    .simon-board { padding: 0.6rem 0; }
    .mode-chart { overflow-x: auto; }
    .modes-table { display: block; overflow-x: auto; }
    /* Seven-note scales: each row becomes a small card instead of a sideways-scrolling table. */
    .scale-filters label { flex: 1 1 45%; min-width: 0; }
    .scale-filters label.check { flex-basis: 100%; }
    .scale-table { display: block; overflow: visible; }
    .scale-table thead { display: none; }
    .scale-table tbody { display: block; }
    .scale-table tbody tr { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; align-items: center; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--line); }
    .scale-table tbody tr.modes-row { display: block; padding: 0.4rem 0.2rem; }
    .scale-table tbody td { display: block; padding: 0; border: 0; min-width: 0; }
    .scale-table tbody td:nth-child(n+3) { grid-column: 2; }
    .scale-table tbody tr.modes-row td { display: block; }
    .scale-table .degrees, .scale-table .degree-steps { grid-template-columns: repeat(7, 1.75rem); }
    .scale-table .degrees { font-size: 0.95rem; }
    .scale-table td .row { gap: 0.4rem; margin-top: 0.3rem; }
    .view-toggle { flex-wrap: wrap; }
    .view-toggle .muted { flex-basis: 100%; }
    .wheel-modes { width: 100%; }
    .stats { grid-template-columns: 1fr 1fr; }
    .home-hero .lead { font-size: 1.05rem; }
    /* Nothing wider than the phone: panels and tables scroll inside themselves, pictures shrink, controls fill the row. */
    .content { padding-left: 0.75rem; padding-right: 0.75rem; overflow-x: hidden; }
    .panel { padding: 0.9rem 0.8rem; min-width: 0; }
    .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .toolbar, .form-row { gap: 0.5rem; }
    .toolbar label, .form-row label { flex: 1 1 45%; min-width: 0; }
    .toolbar .select, .toolbar .input, .form-row .select, .form-row .input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .toolbar label { flex-basis: 100%; }
    .toolbar label:has(.input.narrow) { flex-basis: 45%; }
    .content svg[viewBox]:not(.scale-wheel) { max-width: 100%; height: auto; }
    .tuner-face { padding: 0.4rem 0; }
    .tuner-note { font-size: 4rem; }
    .simon-title { font-size: 1.3rem; }
    .degrees, .degree-steps { grid-template-columns: repeat(7, 1.9rem); }
    .degrees.octave, .degree-steps.octave { grid-template-columns: repeat(8, 1.9rem); }
    .mode-pick .degrees { grid-template-columns: repeat(7, 1.6rem); font-size: 0.85rem; }
    .mode-pick .degrees.octave { grid-template-columns: repeat(8, 1.6rem); }
    .wheel-view .scale-wheel { flex: 1 1 100%; width: 100%; max-width: 100%; height: auto; }
    .scale-wheel { max-width: 100%; height: auto; }
}
.nav-toggle { display: none; background: var(--panel); border: 0; border-radius: 999px; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.card { background: var(--panel); border: 0; border-radius: var(--radius); padding: 1.3rem 1.4rem; text-decoration: none; color: var(--ink); box-shadow: 0 8px 0 var(--shadow); font-weight: 500; transition: transform 0.12s; }
a.card:hover { transform: translateY(-2px); color: var(--ink); }
.card h2 { font-size: 1.25rem; }
.card p { color: var(--muted); margin: 0; }

/* Panels and tables */
.panel { background: var(--panel); border: 0; border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-top: 1rem; box-shadow: 0 8px 0 var(--shadow); }
.table { border-collapse: collapse; width: 100%; }
.table th, .table td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.table tr.selected td { background: var(--accent-soft); }
.note { font-weight: 900; color: var(--note); }
.roman { font-weight: 900; letter-spacing: 0.02em; }

/* Controls */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-top: 0.8rem; }
.toolbar label:where(:not(.snd-panel *, .fxb *)), .form-row label:where(:not(.snd-panel *, .fxb *)) { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.toolbar label.check:where(:not(.snd-panel *, .fxb *)) { flex-direction: row; align-items: center; gap: 0.4rem; padding-bottom: 0; min-height: 2.5rem; align-self: flex-end; }   /* level with the boxes beside it (their middle), not their labels */
.select, .input { font: inherit; font-weight: 600; color: var(--ink); padding: 0.5rem 0.8rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; min-width: 10rem; }
.select:focus, .input:focus { outline: none; border-color: var(--accent); }
.input.narrow { min-width: 4.5rem; width: 4.5rem; }
.input.wide { min-width: 18rem; }
.button { font: inherit; font-weight: 900; background: var(--coral); color: var(--ink); border: 0; border-radius: 999px; padding: 0.6rem 1.2rem; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.2; }
.button:hover { background: var(--coral-deep); color: var(--ink); }
.button.small { padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.button.big { padding: 0.9rem 1.8rem; font-size: 1.1rem; }
.button.secondary { background: var(--panel); color: var(--ink); border: 2px solid var(--line); }
.button.secondary:hover { border-color: var(--accent); background: var(--panel); }
.button.dark { background: var(--accent); color: #fff; }
.button.dark:hover { background: #3a2c92; color: #fff; }
.button.danger { background: var(--bad); color: #fff; }
.button.active { background: var(--accent); color: #fff; border: 0; }
.button:disabled { opacity: 0.55; cursor: default; }
.form-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; }
.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.row.right { justify-content: flex-end; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* Badges, tags, notices */
.badge { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--tint); color: var(--ink); }
.badge.ok { background: var(--mint); color: var(--mint-ink); }
.badge.new { background: var(--coral); color: var(--ink); }
.tag { display: inline-block; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--tint); color: var(--accent); text-decoration: none; }
.tag.more { background: var(--line); color: var(--muted); }
a.tag:hover { background: var(--line); }
.notice { background: var(--amber-soft); border: 0; border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin: 0 0 1rem; color: var(--amber-ink); }
.notice a { color: var(--amber-ink); }
code.invite { margin-left: 0.5rem; font-size: 1rem; letter-spacing: 0.08em; background: var(--amber-soft); padding: 0.1rem 0.4rem; border-radius: 6px; }
.ok { color: #1d6b3d; }
.validation-message { color: var(--bad); font-size: 0.85rem; }

/* Section headings on public pages */
.section-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.section-head h2 { font-size: 1.9rem; }
.section-head h3 { font-size: 1.25rem; margin-top: 1.2rem; }
section + section { margin-top: 2.2rem; }

/* Home page */
.home-hero { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; padding: 0.6rem 0 2.5rem; }
.home-hero .copy { flex: 1 1 400px; }
.home-hero .eyebrow { display: inline-block; background: var(--panel); border-radius: 999px; padding: 0.35rem 1rem; font-weight: 700; font-size: 0.85rem; color: var(--accent); margin-bottom: 1rem; }
.home-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.02; margin: 0 0 1rem; }
.home-hero .lead { font-size: 1.2rem; margin: 0 0 1.6rem; }
.home-hero .photo-card { flex: 1 1 380px; max-width: 520px; background: var(--panel); border-radius: 36px; padding: 0.9rem 0.9rem 0.7rem; box-shadow: 0 10px 0 var(--shadow); }
.home-hero .photo-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; }
.home-hero .photo-caption { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0 0.4rem; font-size: 0.85rem; color: var(--muted); }
.band { background: var(--panel); margin: 0 calc(50% - 50vw); padding: 2.6rem calc(50vw - 50%); }
.band + section { margin-top: 2.6rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.tool-card { display: block; text-decoration: none; color: var(--ink); border-radius: var(--radius); padding: 1.4rem; font-weight: 500; transition: transform 0.12s; }
.tool-card:hover { transform: translateY(-3px); color: var(--ink); }
.tool-card svg { display: block; }
.tool-card .tool-name { font-weight: 900; font-size: 1.3rem; margin-top: 0.8rem; }
.tool-card p { margin: 0.2rem 0 0; font-size: 0.92rem; line-height: 1.4; }
.tool-card.mint { background: var(--mint); color: #1f4d3c; }
.tool-card.amber { background: #ffd29b; color: #6b3f08; }
.tool-card.lilac { background: #cfc7ff; color: #3a2f8a; }
.tool-card.coral { background: #ffc2b3; color: #7a2a1a; }
.tool-card.mint .tool-name { color: var(--mint-ink); }
.tool-card.amber .tool-name { color: var(--amber-ink); }
.tool-card.lilac .tool-name { color: #271f66; }
.tool-card.coral .tool-name { color: #521a0f; }
.tool-group-section { margin-top: 1.6rem; }
.tool-group-section h2 { font-size: 1.5rem; }
.tool-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; align-items: center; }
.tool-links .tag { font-size: 0.9rem; padding: 0.4rem 0.9rem; background: var(--bg); }
.job-card { display: flex; flex-direction: column; gap: 0.3rem; }
.job-card .kind { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.05em; color: var(--accent); }
.job-card .title { font-weight: 900; font-size: 1.2rem; }
.job-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
.job-card .pay { font-weight: 900; font-size: 1.4rem; }
.spotlight { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding: 1rem 1.6rem 1rem 1rem; }
.spotlight .spot-photo { flex: none; width: 170px; height: 150px; object-fit: cover; border-radius: 22px; background: var(--tint); }
.spotlight .spot-body { flex: 1 1 320px; }
.spotlight .spot-body h2, .spotlight .spot-body h3 { font-size: 1.6rem; margin: 0.6rem 0 0.2rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.product-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem; }
.product-card img { width: 100%; aspect-ratio: 34 / 30; object-fit: cover; border-radius: 22px; background: var(--tint); }
.product-card h2 { font-size: 1.25rem; margin: 0.6rem 0 0; }
.product-card p { margin: 0.2rem 0; }
.product-card .foot { margin-top: auto; padding-top: 0.6rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.product-card .spot-price { font-weight: 900; font-size: 1.4rem; }
.spotlight .spot-body p { margin: 0.2rem 0; }
.spotlight .spot-buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.spotlight .spot-price { font-weight: 900; font-size: 1.8rem; }
.badge.sponsored { background: var(--amber-soft); color: var(--amber-ink); letter-spacing: 0.06em; font-size: 0.72rem; text-transform: uppercase; }
.hero { background: var(--panel); border: 0; border-radius: var(--radius); padding: 2rem 2rem 2.2rem; margin-bottom: 1.6rem; box-shadow: 0 8px 0 var(--shadow); }
.hero h1 { font-size: 2.2rem; margin: 0 0 0.5rem; }
.hero .lead { max-width: 40rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.step { background: var(--panel); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: 0 8px 0 var(--shadow); }
.step h3 { margin: 0.5rem 0 0.2rem; }
.step p { margin: 0; color: var(--muted); }
.step-no { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%; background: var(--coral); color: var(--ink); align-items: center; justify-content: center; font-weight: 900; }
.two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.2rem; }

/* Teacher directory and profiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.4rem; }
/* Home-page carousels: on wider screens a row of cards that the ‹ › buttons slide through; on phones a plain stack. */
.carousel-wrap { position: relative; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 0.2rem; box-shadow: 0 4px 0 var(--shadow), 0 6px 18px rgba(43, 33, 80, 0.12); }
.carousel-btn.left { left: -1.5rem; }
.carousel-btn.right { right: -1.5rem; }
@media (min-width: 1300px) { .carousel-btn.left { left: -3.2rem; } .carousel-btn.right { right: -3.2rem; } }   /* room in the margin: clear of the cards */
.carousel-btn:hover { background: var(--tint); border-color: var(--accent); }
@media (min-width: 701px) {
    .carousel { margin: -0.6rem -0.6rem 0; }   /* room for the cards' shadow and hover lift inside the scroll box */
    .carousel .carousel-track { display: grid; grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.6rem; scroll-padding: 0.6rem; }
    .carousel-track::-webkit-scrollbar { display: none; }
    .carousel-track > * { scroll-snap-align: start; }
    .carousel .carousel-track.per-3 { gap: 1.4rem; grid-auto-columns: calc((100% - 2 * 1.4rem) / 3); }
    .carousel .carousel-track.per-4 { gap: 1.2rem; grid-auto-columns: calc((100% - 3 * 1.2rem) / 4); }
}
@media (min-width: 701px) and (max-width: 1000px) {
    .carousel .carousel-track.per-3 { grid-auto-columns: calc((100% - 1.4rem) / 2); }
    .carousel .carousel-track.per-4 { grid-auto-columns: calc((100% - 2 * 1.2rem) / 3); }
}
@media (max-width: 700px) {
    .carousel-btn { display: none; }
    .carousel .carousel-track.per-3 > :nth-child(n+4), .carousel .carousel-track.per-4 > :nth-child(n+5) { display: none; }   /* phones keep the old short list */
}
.tile { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 8px 0 var(--shadow); transition: transform 0.12s; font-weight: 500; }
.tile:hover { transform: translateY(-3px); color: inherit; }
.tile-photo { height: 11rem; background: var(--tint); display: flex; }
.tile-photo .photo { width: 100%; height: 100%; object-fit: cover; }
.photo.initials { display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; color: var(--accent); background: var(--tint); }
.tile-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.tile-body h3 { margin: 0; font-size: 1.25rem; }
.tile-headline { margin: 0; color: var(--muted); font-size: 0.92rem; }
.tile-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tile-foot { margin: 0.3rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tile-rate { margin-left: auto; font-weight: 900; font-size: 0.9rem; }
.finder { display: grid; grid-template-columns: 16rem 1fr; gap: 1.4rem; align-items: start; }
@media (max-width: 800px) { .finder { grid-template-columns: 1fr; } }
.filters { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0; }
.filters fieldset, .tag-fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.filters legend, .tag-fieldset legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 900; padding-right: 0.4rem; }
.filters label.check, .tag-fieldset label.check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.tag-fieldset { flex-direction: row; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-bottom: 0.6rem; }
.tag-fieldset legend { width: 100%; }
.filter-search { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 700; }
.filter-search .input { min-width: 0; width: 100%; }
.profile-head { display: flex; gap: 1.6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.profile-photo { width: 11rem; height: 11rem; border-radius: 50%; overflow: hidden; background: var(--tint); flex: 0 0 auto; display: flex; box-shadow: 0 8px 0 var(--shadow); }
.profile-photo.small { width: 7rem; height: 7rem; margin-bottom: 0.5rem; }
.profile-photo .photo { width: 100%; height: 100%; object-fit: cover; }
.profile-photo .photo.initials { font-size: 3rem; }
.profile-photo.small .photo.initials { font-size: 2rem; }
.intro-video { width: 100%; max-width: 40rem; border-radius: 22px; background: #000; }
.intro-video.small { max-width: 20rem; }
.bio { white-space: pre-line; margin: 0; }
.tag-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0; }
.tag-group-name { min-width: 8rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 900; }
.media-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; }
.file-button { cursor: pointer; display: inline-block; }
.request-head { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: baseline; margin-bottom: 0.4rem; }
.stars { color: var(--amber); letter-spacing: 0.05em; }
.stars .muted { color: var(--line); }

/* Accounts */
.auth-card { max-width: 26rem; margin: 2rem auto; background: var(--panel); border-radius: var(--radius); padding: 1.6rem 1.8rem; box-shadow: 0 8px 0 var(--shadow); }
.auth-card h1 { margin-top: 0; }
.auth-card.wide { max-width: 60rem; padding: 2rem 2.4rem; }
.join-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; align-items: start; }
.join-columns > .form-stack { min-width: 0; }
.auth-card.wide .tag-fieldset { gap: 0.4rem 1rem; }
.auth-card.wide .button[type="submit"] { align-self: flex-start; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .join-columns { grid-template-columns: 1fr; } .auth-card.wide { padding: 1.6rem 1.4rem; } }
.form-stack { display: flex; flex-direction: column; gap: 0.8rem; }
.form-stack label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 700; }
.form-stack label.check { flex-direction: row; align-items: flex-start; gap: 0.5rem; }
/* A password box with an eye at its end that shows the password while pressed. */
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { width: 100%; box-sizing: border-box; padding-right: 2.6rem; }
.pw-eye { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pw-eye:hover { color: var(--ink); background: var(--tint); }
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye .eye-slash { display: none; }
.pw-eye.on .eye-slash { display: block; }
.form-stack .input { min-width: 0; width: 100%; }
.role-choice { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.role-choice legend { font-size: 0.85rem; color: var(--muted); font-weight: 700; padding: 0 0.3rem; }
.demo-hint { border-top: 1px dashed var(--line); padding-top: 0.6rem; }
ul.materials { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.material-link { display: inline-block; margin-right: 0.6rem; }
.welcome { border-left: 6px solid var(--coral); }
.diagram-readonly { overflow: auto; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.diagram-readonly * { cursor: default !important; }
.page-tabs { margin: 0.6rem 0; }

/* Stats (dashboards, earnings) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.earn .stats { margin-bottom: 1rem; }
.stat { background: var(--panel); border-radius: var(--radius-sm); padding: 0.9rem 1.2rem; display: flex; flex-direction: column; box-shadow: 0 6px 0 var(--shadow); border-left: 6px solid var(--line); }
.stat.earned { border-left-color: var(--good); }
.stat.upcoming { border-left-color: #9db8d3; }
.stat.total { border-left-color: var(--coral); }
.stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 900; }
.stat-value { font-size: 1.9rem; font-weight: 900; line-height: 1.2; }
.stat-note { font-size: 0.85rem; color: var(--muted); }
.earn .notice { margin: 0 0 1rem; }
.earn .ok { margin: 0.5rem 0 0; }
.earn .panel { margin-bottom: 1rem; }
.earn-columns { display: grid; grid-template-columns: 3fr 2fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .earn-columns { grid-template-columns: 1fr; } }
.bars { display: flex; align-items: flex-end; gap: 0.4rem; height: 210px; padding-top: 0.5rem; }
.bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-value { font-size: 0.7rem; color: var(--muted); height: 1.1rem; white-space: nowrap; }
.bar-track { flex: 1; width: 100%; max-width: 3.2rem; display: flex; flex-direction: column-reverse; background: var(--tint); border-radius: 8px 8px 0 0; overflow: hidden; }
.bar-earned { background: var(--good); }
.bar-pending { background: #9db8d3; }
.bar-label { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; white-space: nowrap; }
.legend-line { font-size: 0.8rem; color: var(--muted); margin: 0.6rem 0 0; }
.swatch { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin: 0 0.25rem 0 0.8rem; vertical-align: -1px; }
.swatch.earned { background: var(--good); margin-left: 0; }
.swatch.upcoming { background: #9db8d3; }

/* Fretboard SVG */
.fretboard { width: 100%; max-width: 1100px; height: auto; display: block; }
.fretboard .string { stroke: #8a80b3; }
.fretboard .fret { stroke: #c9bff0; stroke-width: 2; }
.fretboard .nut { stroke: var(--ink); stroke-width: 6; }
.fretboard .marker { fill: var(--tint); }
.fretboard .fret-number { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.fretboard .string-label { font-size: 11px; fill: var(--muted); text-anchor: end; }
.fretboard .note circle { fill: var(--note); stroke: #fff; stroke-width: 1.5; }
.fretboard .note.root circle { fill: var(--root); }
.fretboard .note text { font-size: 10px; fill: #fff; text-anchor: middle; font-weight: 700; }
.fretboard .note.root text { fill: var(--ink); }
.fretboard .note.now circle { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.fretboard .note.now text { fill: var(--ink); }

/* Chord diagrams */
.diagrams { display: flex; flex-wrap: wrap; gap: 1rem; }
.diagram-card { width: 210px; text-align: center; }
@media (max-width: 700px) { .diagrams { justify-content: center; } }   /* on a phone the chord boxes sit in the middle, not hugging the left */
.diagram-title { display: flex; justify-content: center; gap: 0.5rem; align-items: baseline; margin-bottom: 0.2rem; }
.chord-diagram { width: 190px; height: auto; display: block; margin: 0 auto; }
.chord-diagram .title { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.chord-diagram .grid { stroke: #8a80b3; stroke-width: 1; }
.chord-diagram .nut { fill: var(--ink); }
.chord-diagram .fret-label { font-size: 10px; fill: var(--muted); text-anchor: end; }
.chord-diagram .marker-x { font-size: 10px; fill: var(--muted); text-anchor: middle; }
.chord-diagram .marker-o { fill: none; stroke: var(--note); stroke-width: 1.5; }
.chord-diagram .dot circle { fill: var(--note); }
.chord-diagram .dot.root circle { fill: var(--root); }
.chord-diagram .dot text { font-size: 8.5px; fill: #fff; text-anchor: middle; font-weight: 700; }
.chord-diagram .dot.root text { fill: var(--ink); }
.tab { display: inline-block; margin-top: 0.3rem; font-size: 0.8rem; }

/* Blazor error bar */
#blazor-error-ui { display: none; background: var(--amber-soft); color: var(--amber-ink); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---- Diagram editor ---- */
.content:has(.editor) { max-width: none; padding: 0; }
.editor { display: flex; flex-direction: column; height: calc(100vh - 4.5rem); }
.editor-toolbar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.editor-toolbar .doc-title { min-width: 16rem; font-weight: 900; }
.editor-toolbar .sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 0.3rem; }
.editor-toolbar .zoom { min-width: 3.2rem; text-align: center; font-size: 0.85rem; color: var(--muted); }
.editor-toolbar .status { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.editor-toolbar label.check.small { flex-direction: row; align-items: center; gap: 0.3rem; font-size: 0.8rem; }
.editor-toolbar .input, .editor-toolbar .select { padding: 0.3rem 0.6rem; border-radius: 10px; }
.page-strip { display: flex; gap: 0.25rem; padding: 0.3rem 0.8rem; background: var(--tint); border-bottom: 1px solid var(--line); }
.page-tab { font: inherit; font-weight: 700; font-size: 0.8rem; background: transparent; border: 2px solid transparent; border-radius: 10px; padding: 0.25rem 0.6rem; cursor: pointer; color: var(--ink); }
.page-tab.active { background: var(--panel); border-color: var(--line); }
.page-tab.add { color: var(--muted); }
.editor-body { display: flex; flex: 1; min-height: 0; }
.toolbox { width: 96px; flex: 0 0 96px; background: var(--panel); border-right: 1px solid var(--line); padding: 0.5rem 0.45rem; overflow-y: auto; }
.toolbox-grid { display: grid; grid-template-columns: 38px 38px; gap: 0.3rem; justify-content: center; }
.tool-rule { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 0.25rem 0; }
.tool-spacer { width: 38px; height: 36px; }
.tool { width: 38px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; background: var(--bg); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); }
.tool svg { width: 22px; height: 22px; display: block; }
.tool.wide { grid-column: 1 / -1; width: 100%; font-size: 0.8rem; font-weight: 800; }
.tool.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tool:hover:not(.active) { border-color: var(--accent); }
.canvas-scroll { flex: 1; overflow: auto; background: #e9e2fb; padding: 1.2rem; outline: none; }
.canvas-scroll:focus { box-shadow: inset 0 0 0 2px rgba(75, 59, 176, 0.3); }
.canvas-zoom { position: relative; margin: 0 auto; }
.diagram-page { display: block; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.18); user-select: none; touch-action: none; }
.diagram-page text { user-select: none; }
.inspector { width: 320px; flex: 0 0 320px; background: var(--panel); border-left: 1px solid var(--line); padding: 0.8rem; overflow-y: auto; font-size: 0.85rem; }
.inspector h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.inspector h4 { margin: 0.8rem 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.inspector label { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; color: var(--muted); font-weight: 700; }
.inspector label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
.inspector .select, .inspector .input { min-width: 0; width: 100%; padding: 0.3rem 0.5rem; border-radius: 10px; }
.inspector .input.narrow { width: 5rem; }
.inspector .row { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.inspector .row label { flex: 1; }
.inspector textarea.input { font: inherit; resize: vertical; }
.inspector input[type="color"] { width: 3rem; height: 1.8rem; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; }
.inspector .tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid var(--line); margin-bottom: 0.5rem; }
.inspector .tabs.sub { margin-top: 0.2rem; }
.inspector .tab-btn { font: inherit; font-weight: 700; font-size: 0.78rem; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0.3rem 0.5rem; cursor: pointer; color: var(--muted); }
.inspector .tab-btn.active { background: var(--bg); border-color: var(--line); color: var(--ink); margin-bottom: -1px; }
.inspector .swatches { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.3rem 0; }
.inspector .swatch { display: inline-block; min-width: 1.8rem; text-align: center; padding: 0.15rem 0.3rem; border-radius: 6px; color: #fff; font-size: 0.7rem; font-weight: 700; }
.inspector .text-style { margin-bottom: 0.4rem; }
.inspector .text-style .row { margin-bottom: 0.3rem; align-items: center; }
.inspector .text-style .select { flex: 1; }
.inspector .toggle { font: inherit; width: 2rem; height: 1.8rem; background: #fff; border: 2px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); }
.inspector .toggle.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.inspector .sep { width: 1px; height: 1.4rem; background: var(--line); margin: 0 0.2rem; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(43, 33, 80, 0.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { background: var(--panel); border-radius: var(--radius); padding: 1.4rem 1.6rem; width: min(560px, 92vw); max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 1rem; margin: 0.8rem 0; }
.form-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); min-width: 0; }
.form-grid .select, .form-grid .input { min-width: 0; width: 100%; box-sizing: border-box; }
.form-grid .input.narrow { width: 6rem; }
.modal { overflow-x: hidden; }
.form-grid label.check { flex-direction: row; align-items: center; gap: 0.4rem; grid-column: span 2; }

/* ---- Simon ---- */
.simon { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.simon-setup { width: 320px; flex: 0 0 320px; margin-top: 0; }
.simon-setup label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: 0.5rem; }
.simon-setup label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
.simon-setup .select, .simon-setup .input { min-width: 0; width: 100%; }
.simon-setup .input.narrow { width: 5rem; }
.simon-setup h4 { margin: 0.9rem 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.simon-board { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.6rem; }
.simon-title { margin: 0; font-size: 1.6rem; }
.scale-wheel { max-width: 100%; height: auto; overflow: visible; }   /* lit segments glow past the circle */
.wheel-segment { transition: none; }
.wheel-glow { display: none; }
.wheel-glow.on, .wheel-glow.now { display: block; }
/* The note sounding, even when it already glows (a cut on the symmetry page): a dark outline marks it. */
/* While a note sounds: one thin dark edge around the note and its degree together (not one per piece, which doubled
   where they meet), and no white edge on the pieces inside it. */
.wheel-glow.now path[stroke="#FFFFFF"] { stroke: none; }
.wheel-glow.now .wheel-glow-edge { stroke: #2b2150; stroke-width: 2; }
.simon-wheel .wheel-glow.now path[stroke="#FFFFFF"] { stroke: #FFFFFF; stroke-width: 3; }   /* Simon keeps its own white edge */
.simon-wheel .wheel-glow.now .wheel-glow-edge { stroke: none; }
/* Four ways: the note sounding, ringed on its way's graph (its column in the grid lights as .lick-cell.now). */
.way-graph circle.now { stroke: #ffb300; stroke-width: 4; }
.wheel-segment.lit path { stroke: #FFFFFF; }

/* ---- Pitch input & tuner ---- */
.pitch-input label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: 0.5rem; }
.pitch-input .select { min-width: 0; width: 100%; }
.tuner { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.tuner-side { width: 320px; flex: 0 0 320px; margin-top: 0; }
.tuner-side h4 { margin: 0.9rem 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.tuner-side .select { min-width: 0; width: 100%; }
.tuner-side label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.string-refs { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.string-refs .button.active { background: var(--good); color: #fff; }
.tuner-face { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 1rem; min-width: 320px; }
.tuner-note { font-size: 5rem; font-weight: 900; line-height: 1; color: var(--muted); }
.tuner-note.in-tune { color: var(--good); }
.tuner-note.flat, .tuner-note.sharp { color: var(--coral-deep); }
.tuner-octave { color: var(--muted); margin-bottom: 0.25rem; }
.tuner-gauge { width: min(440px, 100%); height: auto; }
.tuner-cents { font-size: 1.2rem; font-weight: 900; min-height: 1.6rem; }
.tuner-cents.in-tune { color: var(--good); }
.level-bar { width: 200px; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 0.6rem; }
.level-bar span { display: block; height: 100%; background: var(--good); transition: width 0.08s linear; }

/* ---- Metronome ---- */
.metro { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.metro-main { width: 100%; flex: 1 1 100%; margin-top: 0; display: flex; flex-direction: column; gap: 0.6rem; }   /* the metronome sits above the timer, full width, so its mixer has room */
.metro-main .metro-mixer { align-self: center; }
.metro-tempo { display: flex; align-items: center; gap: 0.4rem; justify-content: center; margin-top: 1.1rem; }
/* The "bpm" caption floats above the box so it doesn't push the −5/−1/+1/+5 buttons off-centre: they line up with the input. */
.metro-bpm { position: relative; display: block; }
.metro-bpm span { position: absolute; bottom: calc(100% + 3px); left: 0; right: 0; text-align: center; font-size: 0.8rem; font-weight: 800; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.metro-title { text-align: center; font-size: 1.9rem; margin: 0 0 0.4rem; }
.metro-main, .metro-practice { position: relative; }
.panel-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 8px; }
.panel-close:hover { color: var(--ink); background: var(--bg); }
.practice-start { padding-top: 1rem; }
.metro-bpm .input { width: 6rem; min-width: 0; font-size: 2rem; font-weight: 900; text-align: center; padding: 0.2rem; appearance: textfield; -moz-appearance: textfield; }
.metro-bpm .input::-webkit-outer-spin-button, .metro-bpm .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.metro-slider { width: 100%; accent-color: var(--accent); }
.metro-marking { text-align: center; }
.beat-indicator { display: flex; gap: 0.6rem; justify-content: center; padding: 0.8rem 0; }
.beat-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--line); }
.beat-dot.first { border: 2px solid var(--accent); }
.beat-dot.on { background: var(--accent); transform: scale(1.25); }
.beat-dot.on.accent { background: var(--coral); }
.metro-controls > label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.metro-controls > label.check { flex-direction: row; align-items: center; gap: 0.4rem; align-self: flex-end; padding-bottom: 0.5rem; }
.metro-controls > label .select { min-width: 0; }
.metro-practice { flex: 1; min-width: 340px; margin-top: 0; }
.metro-practice label.inline { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.metro-practice label.check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; margin: 0.5rem 0; }
.practice-table .input { min-width: 0; width: 100%; }
.practice-table .input.narrow { width: 5rem; }
.practice-now { text-align: center; padding: 1rem; border-radius: var(--radius-sm); background: var(--tint); }
.practice-now.rest { background: #e3f6ec; }
.practice-now.paused { background: var(--amber-soft); }
.practice-block { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid rgba(43, 33, 80, 0.12); }
.practice-block-clock { font-size: 1.8rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.practice-name { font-size: 1.4rem; font-weight: 900; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.practice-clock { font-size: 4rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.practice-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 0.6rem auto 0.3rem; max-width: 420px; }
.practice-bar span { display: block; height: 100%; background: var(--accent); transition: width 0.2s linear; }
.practice-list { margin: 0.8rem 0 0; padding-left: 1.4rem; }
.practice-list li.current { font-weight: 900; color: var(--accent); }
.practice-list li.done { color: var(--muted); text-decoration: line-through; }

/* ---- Calendar ---- */
.cal-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
.cal-title { font-size: 1.3rem; margin: 0 0 0 0.6rem; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--line); border: 2px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.cal-dow { background: var(--tint); padding: 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 900; text-align: center; }
.cal-cell { background: var(--panel); min-height: 96px; padding: 0.25rem; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.cal-cell.other { background: #faf8ff; color: var(--muted); }
.cal-cell.today .cal-day { background: var(--coral); color: var(--ink); }
.cal-cell:hover { background: #fbf9ff; }
.cal-day { font-size: 0.8rem; font-weight: 700; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chip { font: inherit; font-weight: 700; font-size: 0.72rem; text-align: left; background: var(--tint); color: var(--accent); border: 0; border-left: 3px solid var(--accent); border-radius: 6px; padding: 0.15rem 0.3rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-time { color: var(--muted); }
.chip.cancelled, .cal-event.cancelled, tr.cancelled td { text-decoration: line-through; opacity: 0.55; }
.chip.completed, .cal-event.completed { background: #e3f6ec; border-left-color: var(--good); color: #1d6b3d; }
.chip.noshow, .cal-event.noshow { background: #fde6e4; border-left-color: var(--bad); color: #7a1f1a; }
.cal-week { border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow: hidden; }
.cal-week-head { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-bottom: 1px solid var(--line); background: var(--tint); }
.cal-week-day { padding: 0.4rem; text-align: center; font-size: 0.85rem; font-weight: 700; }
.cal-week-day.today { color: var(--coral-deep); font-weight: 900; }
.cal-week-body { display: grid; grid-template-columns: 60px repeat(7, 1fr); max-height: 72vh; overflow-y: auto; }
.cal-gutter { border-right: 1px solid var(--line); }
.cal-hour { height: 48px; font-size: 0.7rem; color: var(--muted); text-align: right; padding-right: 0.3rem; transform: translateY(-0.5em); }
.cal-col { position: relative; border-right: 1px solid var(--line); }
.cal-slot { height: 24px; border-bottom: 1px dashed #f0ebff; cursor: pointer; }
.cal-slot:not(.half) { border-bottom-style: solid; border-bottom-color: var(--line); }
.cal-slot:hover { background: #fbf9ff; }
.cal-event { position: absolute; left: 3px; right: 3px; font: inherit; font-weight: 700; font-size: 0.72rem; text-align: left; background: var(--tint); color: var(--accent); border: 0; border-left: 3px solid var(--accent); border-radius: 6px; padding: 0.15rem 0.3rem; cursor: pointer; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.cal-event-notes { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #fbf9ff; }
.lesson-dialog h4 { margin: 0.8rem 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.lesson-dialog label.check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--ink); margin-bottom: 0.2rem; }
.lesson-dialog .weekdays { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.lesson-dialog .weekdays label.check { margin: 0; }
.lesson-dialog .conflict { background: var(--amber-soft); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0.5rem 0; font-size: 0.85rem; color: var(--amber-ink); }
.lesson-dialog .conflict ul { margin: 0.3rem 0 0.5rem 1rem; }
.dialog-actions { margin-top: 0.8rem; }
.dialog-actions .spacer { flex: 1; }

/* Tab editor */
.tab-editor { display: flex; flex-direction: column; gap: 0.6rem; }
.tab-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; background: var(--panel); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; box-shadow: 0 6px 0 var(--shadow); }
.tab-toolbar label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.tab-toolbar .input, .tab-toolbar .select { min-width: 0; padding: 0.3rem 0.6rem; border-radius: 10px; }
.tab-toolbar .input.narrow { width: 4.5rem; }
.tab-toolbar .spacer { flex: 1; }
.group-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 900; margin-left: 0.3rem; }
.button.secondary.small, .tab-toolbar .button.secondary { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.tab-message { color: var(--bad); font-size: 0.85rem; }
.tab-surface { overflow: auto; background: #fff; border: 2px solid var(--line); border-radius: var(--radius-sm); outline: none; max-height: 70vh; }
.tab-surface:focus { border-color: var(--accent); }
.tab-svg { display: block; user-select: none; -webkit-user-select: none; }
.tab-svg.fit { width: 100%; height: auto; }
.tab-help p { margin: 0.3rem 0; line-height: 1.7; }
textarea.ascii { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: 0.85rem; white-space: pre; }
.tab-gp-pick { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; padding: .7rem 1rem; background: var(--amber-soft); border-radius: var(--radius-sm); color: var(--amber-ink); }
.tab-gp-warnings { margin: .5rem 0; padding: .7rem 1rem; border: 2px solid var(--line); border-radius: var(--radius-sm); }
.tab-gp-warnings ul { margin: .3rem 0 .5rem 1.1rem; padding: 0; }
.tab-join { background: var(--amber-soft); }

/* Printing a tab: only the staff, as large as the page allows. */
@media print {
    @page { margin: 12mm; }
    html, body { height: auto; min-height: 0; background: #fff; overflow: visible; }
    .shell { display: block; min-height: 0; padding-top: 1px; }   /* the 1px keeps a child's top margin from collapsing out of the page box, which added a blank page */
    .content > *:first-child, .content > * > *:first-child { margin-top: 0; }
    .topbar, .sidebar, .site-footer, #blazor-error-ui, .tab-toolbar, .tab-help, .tab-gp-pick, .tab-gp-warnings, .tab-editor > section, .content > h1, .content > p { display: none !important; }
    .content, .content:has(.editor) { max-width: none; padding: 0; }
    .tab-surface { max-height: none; overflow: visible; border: 0; border-radius: 0; }
    .tab-svg { max-width: 100%; height: auto; }
    .no-print, .print-button, #tool-quickbar, .page-fav { display: none !important; }
    .print-only { display: block !important; }
}
.print-only { display: none; }

/* Printing the arpeggio play-along: the chart with every bar's arpeggio under it, nothing that plays or sets up. */
.pa-head-end { display: inline-flex; align-items: center; gap: .6rem; }
.button.print-button { display: inline-flex; align-items: center; gap: .35rem; line-height: 1; }
.play-all .print-button { margin-left: 1.25rem; }
.scale-filters .print-button, .cw-page .toolbar .print-button { align-self: flex-end; margin-bottom: .25rem; }   /* level with the dropdowns, not their labels */
.button.print-button svg { display: block; width: 15px; height: 15px; flex: none; position: relative; top: -0.5px; }
@media print {
    .pa-setup-main, .pa-setup, .pa-board .transport-bar, .pa-board .rhythm-transport, .pa-board .tb-fold, .pa-board .mixer, .pa-barfrom, .pa-neck2, .pa-board .open-in-host > :not(svg), .pa-caution, .pa-key, .tool-feedback { display: none !important; }
    .pa-board { border: 0; padding: 0; box-shadow: none; }
    .pa-sheet-scroll { max-height: none !important; overflow: visible !important; padding: 0; scrollbar-gutter: auto; }
    .arp-box.dim { opacity: 1; }
    .ls-bar.now { background: transparent !important; box-shadow: none !important; }
    .ls-chord.now { box-shadow: none !important; }
    .pa-head .shape-title { font-size: 1.4rem; margin: 0; }
    .ls-bar { break-inside: avoid; }
}

/* Printing the Chord chart: the title and the chart (or the circle), nothing that plays or sets up. */
@media print {
    .cc-toolbar, .chord-circle-board .transport-bar, .chord-circle-board .rhythm-transport, .chord-circle-board .tb-fold, .chord-circle-side { display: none !important; }
    .chord-circle-board { border: 0; padding: 0; box-shadow: none; }
    .chord-circle-board .cc-slot.now .cc-wedge { filter: none; }
    .chord-circle-board .cc-hand { display: none; }
}

/* Printing Scales & modes: the scale's panel (description, formula, relations, degree table) and the modes list. */
@media print {
    .content:has(.scales-print) > .toolbar, .scale-head-actions, .scale-more, .scales-print-modes .modes-toolbar, .scales-print-modes > .print-only > p,
    .modes-table th:last-child, .modes-table td:last-child, .panel.backing, .ad-slot { display: none !important; }
    .scales-print, .scales-print-modes { border: 0; padding: 0; box-shadow: none; }
    .scales-print h2 { font-size: 1.6rem; margin: 0 0 .3rem; }
    .scales-print-modes h2 { font-size: 1.3rem; margin: .8rem 0 .2rem; }
    .modes-table tr { break-inside: avoid; }
}

/* Printing Scales by mood: the title and the view as text, the mood's note, then every row of the list. */
.sm-print-head h1 { margin: 0 0 .1rem; font-size: 1.7rem; }
.sm-print-head p { margin: 0 0 .6rem; font-size: 1rem; }
@media print {
    .sm-toolbar, .sm-moods, .sm-row .play-button { display: none !important; }
    .sm-about, .content:has(.sm-print-head) .panel { border: 0; padding: 0; box-shadow: none; }
    .sm-about { margin-bottom: .4rem; }
    .sm-list .sm-row { grid-template-columns: minmax(0, 1.5fr) 20rem minmax(0, 1fr) 80px; gap: .5rem; break-inside: avoid; }
    .sm-bright, .sm-bright > span, .sm-tag.on { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sm-map-panel > :not(.sm-map) { display: none !important; }
    .sm-map { width: 100%; max-width: none; height: auto; max-height: 86vh; margin: 0 auto; display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .sm-map-panel { border: 0; padding: 0; }
}

/* Printing Every N-note scale: the title, the lead, and every matching row with its degrees, steps and names. */
.es-print-head h1 { margin: 0 0 .3rem; }
@media print {
    .es-print-head p { font-size: .95rem; margin: 0 0 .6rem; }
    .content:has(.es-print-head) > p.muted, .scale-filters, .filter-note, .scale-table th:last-child, .scale-table td:last-child, .scale-table .button, .pager { display: none !important; }
    .scale-table tr { break-inside: avoid; }
    .scale-table tr.selected { background: transparent; }
    .coined-mark { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Printing the Fretboard: the scale, its notes and the neck, landscape so the neck runs the width of the page. */
@media print {
    .content:has(.fb-print) > .toolbar, .fb-relative, .fb-print .open-in-host > :not(svg) { display: none !important; }
    .fb-print { border: 0; padding: 0; box-shadow: none; }
    .fb-print h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
    .fb-print .open-in-host { padding: 0; margin: 0; }
    .fb-print .fretboard { max-width: 100%; height: auto; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Printing Strumming patterns: the key, then every library pattern with its cells and hand strip. */
/* A strumming pattern's strokes under a bar of a chart (StrumRow). */
.strum-row { display: grid; grid-template-columns: repeat(var(--slots, 8), minmax(0, 1fr)); gap: 2px; margin: .25rem .2rem 0; align-items: end; }
.strum-row .ss { display: flex; flex-direction: column; align-items: center; font-style: normal; line-height: 1; border-radius: 6px; padding: 2px 0 1px; }
.strum-row .ss b { font-size: .95rem; font-weight: 900; color: var(--accent); }
.strum-row .ss.up b { color: #ff7a59; }
.strum-row .ss.ghost b { color: #c9c2ea; }
.strum-row .ss.mute b, .strum-row .ss.bass b { color: var(--ink); }
.strum-row .ss.accent b { font-size: 1.15rem; }
.strum-row .ss small { font-size: .55rem; font-weight: 800; color: var(--muted); margin-top: 1px; }
.strum-row .ss.beat small { color: var(--ink); }
.strum-row.sixteenths .ss b { font-size: .75rem; } .strum-row.sixteenths .ss.accent b { font-size: .9rem; } .strum-row.sixteenths .ss small { font-size: .45rem; }
.strum-row .ss.now { background: #ffd54a; } .strum-row .ss.now b, .strum-row .ss.now small { color: #2b2150; }
.strum-row .ss.ghost.now { background: #fff3c4; }
.ls-bar .strum-row { grid-column: 1 / -1; }
/* With a strum or picking row under each bar, the row sits on the bar's bottom edge and the chord (or the repeat sign)
   is centred in the space above it, so the rows line up across the line whatever the bar holds. */
.ls-bar:has(> .strum-row) > .ls-chords, .ls-bar:has(> .strum-row) > .ls-repeat { margin-block: auto; }
/* A fingerpicking pattern under a bar (PickRow): each slot a tiny column, a m i then the thumb, the ones that play in color. */
.strum-row .ss.pick b { display: grid; font-size: .55rem; line-height: 1.1; color: #d9d3f0; font-weight: 900; }
.strum-row .ss.pick b span.on { color: #ff7a59; }
.strum-row .ss.pick b span.p.on { color: var(--accent); }
.strum-row .ss.pick.accent b { font-size: .6rem; }
.strum-row .ss.pick.now b span, .strum-row .ss.pick.now b span.on { color: #2b2150; }
.strum-row.sixteenths .ss.pick b { font-size: .45rem; }
.strum-patterns .section-head { align-items: center; margin-bottom: .2rem; }
.strum-patterns .section-head h2 { font-size: 1.2rem; margin: 0; }
@media print {
    .strum-page { display: none !important; }
    .strum-print h1 { margin: 0 0 .3rem; font-size: 1.7rem; }
    .strum-print .legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: #555; margin-bottom: .6rem; }
    .strum-print .legend span { display: inline-flex; align-items: center; gap: .3rem; }
    .strum-print .legend i { width: 11px; height: 11px; border-radius: 3px; box-sizing: border-box; display: inline-block; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .strum-print .sw-down { background: var(--accent); } .strum-print .sw-up { background: #ff7a59; } .strum-print .sw-ghost { background: #c9c2ea; }
    .strum-print .sw-mute { background: var(--ink); } .strum-print .sw-bass { background: var(--accent); border-radius: 50%; } .strum-print .sw-accent { background: var(--tint); border: 2px solid var(--accent); }
    .strum-print-pattern { break-inside: avoid; margin-bottom: 1.6rem; }
    .strum-print .strum-name { font-size: 1rem; margin: 0 0 .25rem; }
    .strum-print .strum-cells { min-width: 0; gap: 4px; grid-template-columns: repeat(var(--slots, 8), minmax(0, 1fr)); max-width: 560px; }
    .strum-print .strum-cells.sixteenths { max-width: 680px; }
    .strum-print .strum-cell { aspect-ratio: 1 / 1.2; border-radius: 9px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .strum-print .strum-cell .arrow { width: 18px; height: 28px; }
    .strum-print .strum-cell .count { font-size: .75rem; padding-top: .15rem; }
    .strum-print .strum-cell .kind { font-size: .5rem; padding-bottom: .15rem; }
    .strum-print .strum-hand { min-width: 0; gap: 4px; margin: .25rem 0 .4rem; max-width: 560px; }
    .strum-print .strum-hand i { height: 4px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .strum-print .strum-cells.sixteenths + .strum-hand { max-width: 680px; }
    .strum-print .pick-cell { aspect-ratio: 1 / 1.7; }
    .strum-print .pick-cell .fg { font-size: .6rem; min-height: .9rem; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .pick-print-hint { margin: .3rem 0 0; max-width: 680px; }
    .pick-print-head { font-size: 1.15rem; margin: 1rem 0 .6rem; break-after: avoid; }
}

/* Printing the circle: the wheel alone, no window or handle, no highlights. */
@media print {
    .cw-page .toolbar, .cw-page .legend, .cw-page > div + div, .chord-wheel .cw-window, .chord-wheel .cw-window-labels, .chord-wheel .cf-sounding, .chord-wheel .cf-sounding-glow { display: none !important; }
    .cw-print-title { margin: 0 0 .4rem; font-size: 1.7rem; }
    .cw-page { display: block; }
    .cw-wheel-wrap { max-width: none; width: 100%; margin: 0 auto; }
    .cw-page .chord-wheel .cf-wedge.faded { opacity: 1 !important; }
    .cw-page .chord-wheel .cf-major.selected, .cw-page .chord-wheel .cf-major.neighbour, .cw-page .chord-wheel .cf-major.related { fill: #ffe3d9 !important; }
    .cw-page .chord-wheel .cf-minor.selected, .cw-page .chord-wheel .cf-minor.neighbour, .cw-page .chord-wheel .cf-minor.related { fill: #dcd6f7 !important; }
    .chord-wheel .cf-center-title, .chord-wheel .cf-center-sub { display: none; }
    .chord-wheel .cf-wedge.shared { fill: inherit !important; }
    .chord-wheel .cf-wedge.hovered { stroke: none; }
    .cw-page .chord-wheel { width: 100% !important; max-width: none !important; height: auto; max-height: 88vh; display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Printing the Chords page: the key's chord table, then the shapes (or the chart), nothing that plays or sets up. */
@media print {
    .content:has(.chords2-print) > .toolbar, .chords2-print .play-all, .chords2-table th:first-child, .chords2-table td:first-child,
    .chords-chart .section-head, .chords-chart .chords-chart-tools, .chords-chart .chords2-shape-tools, .chords2-detail, .chords-chart > p.muted { display: none !important; }
    .content:has(.arp-print) > .toolbar, .arp-print .arp-tools, .arp-print .arp-hint, .arp-print .play-all { display: none !important; }
    .arp-print .chords2-title { cursor: default; }
    .chords2-print, .chords-chart, .arp-print { border: 0; padding: 0; box-shadow: none; }
    .chords2-print h2 { font-size: 1.5rem; margin: 0 0 .4rem; }
    .chords2-table tr.clickable { cursor: default; }
    .chords2-card, .diagram-card { break-inside: avoid; box-shadow: none !important; outline: none !important; background: transparent !important; border-color: transparent !important; }
    .chords2-chips button.on { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .chords-chart .diagrams { gap: .6rem .8rem; }
    .chords-chart .diagram-card { width: 160px; padding: 0; }
    .chords-chart .chord-diagram { width: 145px; }
}

/* Fretboard Trainer */
.fretboard .string.dim { opacity: .25; }
.fretboard .string.target-string { stroke: var(--coral-deep); }
.fretboard .string-label.target-string-label { fill: var(--coral-deep); font-weight: 900; }
.fretboard.picker.interactive .pick-cell { fill: transparent; cursor: pointer; }
.fretboard.picker.interactive .pick-cell:hover { fill: rgba(255, 122, 89, .25); }
.fretboard .pick circle { stroke: #fff; stroke-width: 1.5; }
.fretboard .pick text { font-size: 10px; fill: #fff; text-anchor: middle; font-weight: 900; pointer-events: none; }
.fretboard .pick-target circle { fill: var(--coral); }
.fretboard .pick-target text { fill: var(--ink); }
.fretboard .pick-correct circle { fill: var(--good); }
.fretboard .pick-wrong circle { fill: var(--bad); }
.fretboard .pick-missed circle { fill: rgba(47, 158, 91, .15); stroke: var(--good); stroke-width: 2.5; stroke-dasharray: 3 2; }
.fretboard .pick-missed text { fill: #1d6b3d; }
.fretboard .heat { stroke: #fff; stroke-width: 1; pointer-events: none; }
.fretboard .heat-0 { fill: #c8403a; }
.fretboard .heat-1 { fill: #e08a3c; }
.fretboard .heat-2 { fill: #e3c04a; }
.fretboard .heat-3 { fill: #8cc152; }
.fretboard .heat-4 { fill: #2f9e5b; }
.fret-trainer { display: grid; gap: 1rem; max-width: 1150px; }
.fret-trainer .prompt { font-size: 1.5rem; margin: .25rem 0; font-weight: 700; }
.fret-trainer .prompt b { color: var(--coral-deep); }
.fret-trainer .answers { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.fret-trainer .answers .button { min-width: 3.4rem; }
.fret-trainer .answers .button.right { background: var(--good); color: #fff; }
.fret-trainer .answers .button.wrong { background: var(--bad); color: #fff; }
.fret-trainer .scorebar { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--muted); font-size: .95rem; }
.fret-trainer .scorebar b { color: var(--ink); font-size: 1.1rem; }
.fret-trainer .feedback { min-height: 1.6rem; font-weight: 900; }
.fret-trainer .feedback.good { color: var(--good); }
.fret-trainer .feedback.bad { color: var(--bad); }
.fret-trainer .mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.fret-trainer .mode-card { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; cursor: pointer; display: block; background: #fff; }
.fret-trainer .mode-card.selected { border-color: var(--coral); background: #fff3ee; }
.fret-trainer .mode-card input { margin-right: .4rem; }
.fret-trainer .string-checks { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.fret-trainer .heat-legend { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted); }
.fret-trainer .heat-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.fret-trainer .tabs { display: flex; gap: .5rem; }

/* Circle of fifths */
.circle-fifths { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.circle-fifths .cf-wedge { stroke: #fff; stroke-width: 2; cursor: pointer; transition: fill .12s; }
.circle-fifths .cf-sig { cursor: default; fill: var(--tint); }
.circle-fifths .cf-major { fill: #ffe3d9; }
.circle-fifths .cf-minor { fill: #dcd6f7; }
.circle-fifths .cf-major:hover { fill: #ffc9b8; }
.circle-fifths .cf-minor:hover { fill: #c6bdf2; }
.circle-fifths .cf-major.neighbour { fill: #ffa78c; }
.circle-fifths .cf-minor.neighbour { fill: #a497e6; }
.circle-fifths .cf-major.related { fill: #ffc2ae; }
.circle-fifths .cf-minor.related { fill: #bbb1ee; }
.circle-fifths .cf-major.selected { fill: #ff7a59; }
.circle-fifths .cf-minor.selected { fill: #4b3bb0; }
.circle-fifths .cf-minor.selected ~ text, .circle-fifths .cf-label { pointer-events: none; }
.circle-fifths .cf-label { text-anchor: middle; fill: var(--ink); font-family: Nunito, Segoe UI, Arial, sans-serif; }
.circle-fifths .cf-label-major { font-size: 24px; font-weight: 900; }
.circle-fifths .cf-label-minor { font-size: 18px; font-weight: 700; }
.circle-fifths .cf-label-sig { font-size: 14px; fill: var(--muted); }
.circle-fifths .cf-label-alt { font-size: 14px; fill: var(--muted); }
.circle-fifths .cf-center { fill: #fff; stroke: var(--line); stroke-width: 2; }
.circle-fifths .cf-center-title { text-anchor: middle; font-size: 26px; font-weight: 900; fill: var(--ink); font-family: Nunito, Segoe UI, Arial, sans-serif; }
.circle-fifths .cf-center-sub { text-anchor: middle; font-size: 14px; fill: var(--muted); font-family: Nunito, Segoe UI, Arial, sans-serif; }
.circle-page { display: grid; grid-template-columns: minmax(300px, 560px) minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .circle-page { grid-template-columns: 1fr; } }
.circle-page .chord-table td, .circle-page .chord-table th { padding: .25rem .6rem; text-align: left; }
.legend, .circle-page .legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.legend i, .circle-page .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.tool-card .tab-digit { font-size: 16px; font-weight: 900; fill: currentColor; font-family: Nunito, sans-serif; }

body { overflow-x: hidden; }

/* Practice journal */
.journal { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .journal { grid-template-columns: 1fr; } }
.journal .panel { margin-top: 0; }
.journal > div > .panel + .panel { margin-top: 1.2rem; }
.journal-form label.memo { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); margin: 0.8rem 0; }
.journal-form textarea.input { min-width: 0; width: 100%; resize: vertical; font-weight: 500; }
.journal-cal .cal-cell { min-height: 64px; }
.journal-cal .cal-cell.selected { outline: 3px solid var(--coral); outline-offset: -3px; }
.journal-cal .chip { cursor: default; white-space: normal; }
.journal-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.journal-entries li { background: var(--bg); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; }
.journal-when { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.journal-memo { white-space: pre-line; margin: 0.3rem 0; }
.journal-memo .journal-again { margin-top: .3rem; }
.journal-actions { gap: 0.2rem; }
.journal-actions .link-button { padding: 0.1rem 0.4rem; font-size: 0.85rem; }
.link-button.danger { color: var(--bad); }
.journal-nudge { margin: 0.8rem 0 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); }
.metro-controls > .button.small { align-self: flex-end; margin-bottom: 0.15rem; }

/* Every seven-note scale */
.scale-filters { align-items: flex-end; margin: 0.6rem 0 0.4rem; }
.scale-filters label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.scale-filters label.check { flex-direction: row; align-items: center; padding-bottom: 0.6rem; }
.scale-table { background: var(--panel); border-radius: var(--radius-sm); overflow: hidden; }
.scale-table > thead th { background: var(--tint); }
.degrees { display: inline-grid; grid-template-columns: repeat(7, 2.4rem); font-size: 1rem; font-weight: 700; }
.degrees > span { text-align: center; padding: 0.1rem 0; border-radius: 999px; border: 2px solid transparent; line-height: 1.3; }
.degrees > span.alt { color: var(--coral-deep); }
/* The degree sounding: filled like the mode chart's cell on Scales & Modes, wherever degrees are listed (tables, modes list, ladder). */
.degrees > span.now, .degrees > span.alt.now, .degrees > span.moved.now, .ladder-grid .degrees span.moved.now { background: var(--accent); border-color: var(--accent); color: #fff; border-radius: 6px; box-shadow: none; }
.degrees.plain { display: inline-flex; flex-wrap: wrap; gap: 0.1rem 0.15rem; font-weight: inherit; }
.degrees.plain > span { padding: 0.1rem 0.35rem; }   /* scales that aren't seven notes: the ring sits evenly round each degree */
.degree-block { display: inline-flex; flex-direction: column; }
.degree-steps { display: inline-grid; grid-template-columns: repeat(7, 2.4rem); font-size: 0.72rem; font-weight: 800; color: var(--muted); line-height: 1.2; }
/* The scale with its octave (1 to 8): eight degrees, the seven steps between them. */
.degrees.octave, .degree-steps.octave { grid-template-columns: repeat(8, 2.4rem); }
.degrees > span.oct:not(.now) { color: var(--muted); }
.degree-steps > span { text-align: center; transform: translateX(50%); white-space: nowrap; }   /* each step sits between the two degrees it joins */
.degree-steps > span.wide { color: var(--coral-deep); }
@media (max-width: 700px) { .scale-table .degrees, .scale-table .degree-steps { grid-template-columns: repeat(7, 1.75rem); } }
.mode-chart .mc-cell.now { background: var(--accent); color: #fff !important; border-radius: 6px; }
.modes-row > td { background: var(--bg); padding: 0.4rem 0.7rem 0.8rem 2rem; }
.modes-table { background: transparent; }
.modes-table tr.rep td { font-weight: 700; }
.pager { margin-top: 1rem; align-items: center; }
.pager-nav { display: inline-flex; align-items: center; gap: 0.35rem; }
.pager .button.pager-btn { width: 2.1rem; height: 2.1rem; min-width: 0; padding: 0; gap: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.pager-btn svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pager-where { padding: 0 0.4rem; white-space: nowrap; }
.filter-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.filter-note .link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.view-toggle { margin: 0.4rem 0 0.6rem; }
.wheel-view { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.wheel-view .scale-wheel { flex: none; }
.wheel-title { margin: 0 0 0.3rem; }
.wheel-modes { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.wheel-modes .button { text-align: left; }
.mode-chart { display: grid; grid-template-columns: 2rem 9rem repeat(var(--cols), minmax(1.6rem, 1fr)); gap: 0; background: var(--panel); border: 2px solid var(--ink); border-radius: 10px; overflow-x: auto; font-size: 0.85rem; }
.mode-chart > div { padding: 0.25rem 0.1rem; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 1.9rem; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.mode-chart .mc-head { background: var(--tint); font-weight: 900; border-bottom: 2px solid var(--ink); }
.mode-chart .mc-corner { background: var(--tint); border-bottom: 2px solid var(--ink); }
.mode-chart .mc-roman { font-weight: 900; color: var(--muted); }
.mode-chart .mc-name { justify-content: flex-start; padding-left: 0.5rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--ink); }
.mode-chart .mc-cell { color: transparent; }
.mode-chart .mc-cell.in { color: var(--muted); }
.mode-chart .mc-cell.in.on { color: var(--ink); font-weight: 700; }
.mode-chart .mc-cell.first { border-left: 2px solid var(--ink); }
.mode-chart .mc-cell.last { border-right: 2px solid var(--ink); }
.mode-chart .mc-cell.top { border-top: 2px solid var(--ink); }
.mode-chart .mc-cell.bottom { border-bottom: 2px solid var(--ink); }
.mode-chart .mc-cell.root { font-weight: 900; color: var(--coral-deep); }
.mode-chart .mc-cell.in.on.root { color: var(--coral-deep); }
.mode-chart .mc-head.on { color: var(--ink); }
.mode-chart .mc-cell.in.on.alt { color: var(--coral-deep); background: #fff1ea; }
.mode-chart .mc-cell.in.now, .mode-chart .mc-cell.in.on.alt.now, .mode-chart .mc-cell.in.on.root.now { background: var(--accent); color: #fff; border-radius: 6px; }
.view-toggle .mode-order { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; margin-right: 0.4rem; }
.mode-order-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); text-align: center; }   /* above its toggle, centered */

/* Dev tools (development only) */
.nav-link.dev-link { background: var(--amber-soft); color: var(--amber-ink); }
.dev-shortcuts { margin-bottom: 1rem; }
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; align-items: start; }
.dev-grid .panel { margin-top: 0; }
.dev-grid > div > .panel + .panel { margin-top: 1.2rem; }
.dev-grid .form-stack .input, .dev-grid .form-stack .select { min-width: 0; width: 100%; }
.dev-grid .form-stack .input.narrow { width: 6rem; }
.dev-grid .form-row label { flex: 1; }
.dev-grid .form-row label.check { flex: none; flex-direction: row; align-items: center; padding-bottom: 0.5rem; }

/* YouTube */
.yt-icon { display: inline-block; vertical-align: -2px; }
.badge.yt-badge { background: #fff0f0; color: #7a1a1a; display: inline-flex; align-items: center; gap: 0.3rem; }
.yt-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 900; }
.yt-section h2 { display: flex; align-items: center; gap: 0.5rem; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.yt-card { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--ink); font-weight: 500; }
.yt-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--tint); display: block; transition: transform 0.12s; }
.yt-card:hover img { transform: translateY(-2px); }
.yt-card.playing img { outline: 3px solid var(--coral); }
.yt-title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-player { margin: 0.4rem 0 1rem; }
.yt-player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; background: #000; }
.yt-now { margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.badge.patreon-badge { background: #ffe4e6; color: #8a1c2b; }
.teacher-links { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.patreon-link { font-weight: 900; color: #c8102e; }
.dev-confirm { gap: 0.4rem; white-space: nowrap; }
.link-icon { display: inline-block; vertical-align: -3px; }
.badge.insta-badge { background: #fbe7f5; color: #7a1a5e; }
.insta-link { font-weight: 900; color: #b0208a; }
.badge.yt-badge, .badge.patreon-badge, .badge.insta-badge { display: inline-flex; align-items: center; gap: 0.3rem; }
.patreon-link, .insta-link, .yt-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.tile-body h3 a { color: var(--ink); text-decoration: none; }
.tile-body h3 a:hover { color: var(--accent); }
.tile-more { margin: 0.4rem 0 0; }
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(0.95); }
.section-cta { margin: 1.6rem 0 0; }

/* For teachers */
.teach-hero .teach-stats { flex: 1 1 320px; display: grid; gap: 0.8rem; }
.teach-note { margin: -1rem 0 1.5rem; }
.teach-feature { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.3fr); gap: 2rem; align-items: center; margin-top: 2.5rem; }
.teach-feature.flip { grid-template-columns: minmax(300px, 1.3fr) minmax(260px, 1fr); }
.teach-feature.flip .teach-text { order: 2; }
@media (max-width: 800px) { .teach-feature, .teach-feature.flip { grid-template-columns: 1fr; } .teach-feature.flip .teach-text { order: 0; } }
.teach-text h2 { font-size: 1.8rem; }
.teach-sample { margin-top: 0; }
.teach-sample .sample-tile { max-width: 22rem; box-shadow: none; border: 2px solid var(--line); }
.teach-sample .sample-cal .cal-cell { min-height: 58px; }
.teach-sample .sample-bars { height: 160px; }
.teach-sample .cards { margin-top: 0; }
.teach-sample .card { box-shadow: none; border: 2px solid var(--line); }
.teach-cta { text-align: center; margin-top: 3rem; padding: 2.4rem; }
.teach-cta h2 { font-size: 2rem; }
.teach-link { font-weight: 900; }

/* Challenge cards */
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.challenge { border-radius: var(--radius); padding: 1.4rem; background: var(--panel); box-shadow: 0 8px 0 var(--shadow); display: flex; flex-direction: column; gap: 0.4rem; }
.challenge h3 { font-size: 1.35rem; line-height: 1.2; margin: 0; }
.challenge p { margin: 0 0 0.6rem; color: var(--muted); }
.challenge > .row { margin-top: auto; padding-top: 0.5rem; }   /* play and link sit on the card's bottom edge, whatever is above them */
.challenge-kicker { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.35rem; }
.challenge-icon { width: 1.35rem; height: 1.35rem; flex: none; }
.challenge-icon.clef { width: 0.57rem; height: 1.6rem; margin: -0.15rem 0.1rem; }   /* the clef is tall and thin (422 × 1191); an explicit width, because some mobile browsers stretch an SVG with width:auto to the whole card */
.challenge-more { border-top: 2px dashed var(--line); margin-top: 0.6rem; padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.challenge.mint .challenge-kicker { color: #1f7a52; }
.challenge.amber .challenge-kicker { color: #b4650e; }
.challenge.lilac .challenge-kicker { color: var(--accent); }
.challenge.coral .challenge-kicker { color: var(--coral-deep); }
.challenge.mint { border-top: 6px solid var(--mint); }
.challenge.amber { border-top: 6px solid var(--amber); }
.challenge.lilac { border-top: 6px solid #cfc7ff; }
.challenge.coral { border-top: 6px solid var(--coral); }

/* Metrics (development only) */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; align-items: start; }
.metrics-grid .panel { margin-top: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.prose h2 { margin-top: 1.2rem; }
a.account-name { text-decoration: none; color: var(--ink); }

/* ---- Feedback box at the foot of every tool, and share buttons ---- */
.tool-feedback { margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 0 var(--shadow); }
.tf-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.tf-head h3 { margin: 0; font-size: 1.1rem; }
.tf-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.7rem; }
.tf-stars { display: inline-flex; gap: 0.1rem; }
.tf-star { background: none; border: 0; padding: 0 0.1rem; font-size: 1.7rem; line-height: 1; color: var(--line); cursor: pointer; }
.tf-star.on { color: var(--amber); }
.tf-star:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.tf-text { flex: 1 1 16rem; min-width: 12rem; }
.tf-thanks { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.share-btn.ghost { background: transparent; box-shadow: none; border: 1px solid var(--line); }
.streak { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--amber); color: var(--ink); font-weight: 800; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.9rem; }
.metrics-grid .panel.wide { grid-column: 1 / -1; }
.feedback-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.feedback-list li { padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--bg); }

/* Focus moves to the page heading after each navigation (for screen readers); the ring that comes with it isn't wanted. */
h1:focus, h1:focus-visible { outline: none; }
/* ---- Account page ---- */
.account-photo { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.account-photo .photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; font-size: 2rem; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.3rem; box-shadow: 0 0 0 2px var(--panel); }
.avatar.initials { display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--ink); font-size: 0.75rem; font-weight: 900; }
/* Member-posted challenges: who posted it, and the posting form. */
.challenge-by { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.challenge-by b { color: var(--ink); }
.challenge-by .link-button { margin-left: auto; }
.community-challenges { margin-top: 2.5rem; }
.challenge-form { margin-top: 1.5rem; max-width: 46rem; }
.challenge-form textarea.input { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; }
.challenge-form .input { width: 100%; box-sizing: border-box; }
.account-name { display: inline-flex; align-items: center; }
/* ---- Tuner views ---- */
.seg-toggle { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 0.8rem; width: fit-content; max-width: 100%; }
.toolbar > .seg-toggle { margin-bottom: 0; height: 2.5rem; box-sizing: border-box; align-items: stretch; }
.seg-toggle button { background: #fff; border: 0; padding: 0.35rem 1rem; font: inherit; font-weight: 800; color: var(--muted); cursor: pointer; }
.seg-toggle button.on { background: var(--accent); color: #fff; }
.glossary-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.glossary-head .glossary-view { margin-bottom: 0; }
.legend-entry dd p { margin: 0 0 0.35rem; }
.legend-entry a.glossary-term { color: inherit; text-decoration: none; }
.legend-entry a.glossary-term:hover { text-decoration: underline; }
/* Three or more choices: a thin line between them, so the middle ones have edges too */
.seg-toggle button + button { border-left: 1px solid var(--line); }
.seg-toggle button.on + button, .seg-toggle button + button.on { border-left-color: transparent; }
.seg-toggle:has(> :nth-child(2):last-child) button + button { border-left: 0; }
.rack-tuner { width: min(760px, 100%); height: auto; }

/* ---- Saved metronome settings, trainer spacing ---- */
.metro-presets { flex: 1 1 100%; margin-top: 0; }
.preset-list { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; }
.preset-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.3rem 0.6rem; border-radius: 10px; background: var(--bg); }
.preset-row .link-button { padding: 0.2rem 0; }
.panel-close.inline { position: static; margin-left: auto; font-size: 1.3rem; }
.string-checks { margin: 0.6rem 0 0.9rem; }
.trainer-reset { margin-top: 1rem; }

/* ---- Account buttons, reopen bar, wheel mode list, journal files ---- */
.account-photo .form-stack { align-items: flex-start; }
.metro .reopen { flex: 1 1 100%; margin: 0; display: flex; gap: 0.6rem; }
.wheel-modes { display: grid; gap: 0.4rem; justify-items: start; }
.mode-pick { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; text-align: left; }
.mode-pick .degrees { grid-template-columns: repeat(7, 2rem); font-size: 0.95rem; }
.mode-pick .degrees.octave { grid-template-columns: repeat(8, 2rem); }
.mode-pick.secondary .degrees > span.alt { color: var(--coral-deep); }
.mode-pick:not(.secondary) .degrees > span.alt { color: #ffe9d6; }
/* The note sounding is circled on a light fill, so its text goes dark whatever the button's color. */
.mode-pick:not(.secondary) .degrees > span.now, .mode-pick:not(.secondary) .degrees > span.alt.now { color: var(--ink); background: #fff; border-color: var(--ink); }
.pager .pager-size { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.pager .pager-size .select { width: auto; }
.journal-files { list-style: none; padding: 0; margin: 0.3rem 0; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.journal-files a { font-weight: 700; }
.link-button.attach { cursor: pointer; }
.storage-line { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; }
.storage-line .level-bar { flex: 1 1 8rem; width: auto; margin-top: 0; display: inline-block; }

/* ---- Materials ---- */
.materials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.material-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.material-list li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0.6rem; border-radius: 10px; background: var(--bg); }
.material-list a { font-weight: 700; }
/* ---- Diagram editor menu bar and icon bar ---- */
.menubar { display: flex; align-items: center; gap: 0.1rem; padding: 0.15rem 0.6rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.menubar .menu-btn.flat { background: transparent; padding: 0.35rem 0.7rem; border-radius: 8px; font-weight: 700; }
.menubar .menu-btn.flat:hover, .menubar .menu.open > .menu-btn.flat { background: var(--bg); }
.menubar .menu-list { min-width: 15rem; }
.menu-item { display: flex; justify-content: space-between; gap: 1.5rem; width: 100%; text-align: left; font: inherit; font-weight: 600; background: none; border: 0; padding: 0.4rem 0.9rem; border-radius: 8px; color: var(--ink); cursor: pointer; text-decoration: none; }
.menu-item:hover:not(:disabled) { background: var(--bg); }
.menu-item:disabled { color: var(--line); cursor: default; }
.menu-item kbd { font: inherit; font-size: 0.75rem; color: var(--muted); }
.menu-sep { height: 1px; background: var(--line); margin: 0.3rem 0.4rem; }
.menu-note { font-size: 0.78rem; color: var(--muted); padding: 0.2rem 0.9rem 0.4rem; max-width: 20rem; }
.menu-note kbd { font: inherit; font-weight: 800; color: var(--ink); background: var(--bg); padding: 0 0.3rem; border-radius: 4px; }
.menubar-status { margin-left: auto; font-size: 0.8rem; color: var(--muted); }
.ibtn { width: 32px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--ink); cursor: pointer; font: inherit; font-weight: 900; }
.ibtn svg { width: 20px; height: 20px; }
.ibtn:hover:not(:disabled) { background: var(--bg); border-color: var(--line); }
.ibtn:disabled { color: var(--line); cursor: default; }
.ibtn.on { background: var(--tint); border-color: var(--accent); }
.editor-toolbar .doc-title { margin-left: auto; }
.menubar .menu:hover:not(.open) .menu-list { display: none; }

/* ---- Metrics panels: long routes wrap, tables never spill ---- */
.metrics-grid .panel { min-width: 0; overflow-x: auto; }
.metrics-grid .table { width: 100%; table-layout: auto; }
.metrics-grid .table th, .metrics-grid .table td { padding: 0.45rem 0.5rem; }
.metrics-grid .table code { white-space: normal; overflow-wrap: anywhere; }   /* long event names wrap, so the count columns stay in view */
.metrics-grid .table td { vertical-align: middle; }
.metrics-grid .table td.num, .metrics-grid .table th.num { white-space: nowrap; }
/* ---- Tab editor, arranged like a notation program: menus, transport, palette | score | song panel ---- */
.tab-editor.gp { gap: 0; background: var(--panel); border-radius: var(--radius); box-shadow: 0 8px 0 var(--shadow); overflow: hidden; }
.tab-editor.gp .menubar { border-radius: var(--radius) var(--radius) 0 0; }
.tab-transport { flex-wrap: nowrap; overflow-x: auto; }
.transport { display: flex; align-items: center; gap: 0.7rem; }
.transport .play { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.transport .play.stop { background: var(--coral); color: var(--ink); }
.transport-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 12rem; }
.transport label.check.small { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-weight: 700; }
.track-tabs { display: flex; gap: 0.25rem; align-items: center; overflow-x: auto; }
.track-tab { font: inherit; font-size: 0.8rem; font-weight: 800; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.7rem; cursor: pointer; color: var(--ink); white-space: nowrap; }
.track-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.track-tab.add { padding: 0.3rem 0.6rem; }
.tab-body { display: grid; grid-template-columns: 168px minmax(0, 1fr) 230px; min-height: 60vh; }
.tab-palette { border-right: 1px solid var(--line); padding: 0.4rem; background: var(--bg); overflow-y: auto; }
.pal-label { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 900; margin: 0.45rem 0 0.2rem 0.1rem; }
.pal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.15rem; }
.pal { height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; color: var(--ink); font: inherit; font-weight: 800; }
.pal .glyph { font-size: 1.05rem; line-height: 1; font-family: "Segoe UI Symbol", "Noto Music", "Noto Sans Symbols2", serif; }
.pal .glyph small { font-size: 0.9rem; font-weight: 900; }
.pal .txt { font-size: 0.72rem; line-height: 1; }
.pal .txt.small { font-size: 0.55rem; line-height: 1; text-align: center; }
.pal:hover:not(:disabled) { border-color: var(--accent); }
.pal.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pal:disabled { color: var(--line); cursor: default; }
.pal.danger:hover { border-color: var(--coral-deep); }
.tab-main { padding: 0.5rem 0.7rem; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.4rem; background: #ece7fb; }
.tab-main .muted.small { font-size: 0.75rem; margin: 0; }
.tab-editor.gp .menubar .menu-btn.flat { font-size: 0.85rem; padding: 0.25rem 0.6rem; }
.tab-editor.gp .menubar { padding: 0.05rem 0.4rem; }
.tab-editor.gp .editor-toolbar { padding: 0.25rem 0.6rem; }
.tab-transport .ibtn { width: 28px; height: 26px; }
.tab-transport .ibtn svg { width: 17px; height: 17px; }
.transport .play { width: 32px; height: 32px; font-size: 0.9rem; }
.transport-info { min-width: 9rem; font-size: 0.85rem; }
.transport-info .small { font-size: 0.72rem; }
.track-tab { font-size: 0.72rem; padding: 0.2rem 0.55rem; }
.tab-main .tab-surface { margin: 0; }
.tab-side { border-left: 1px solid var(--line); padding: 0.4rem 0.6rem; background: var(--bg); font-size: 0.78rem; overflow-y: auto; }
.tab-side h4 { margin: 0.6rem 0 0.3rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.tab-side label { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.5rem; color: var(--muted); font-weight: 700; }
.tab-side label.check { flex-direction: row; align-items: center; gap: 0.4rem; }
.tab-side .input, .tab-side .select { min-width: 0; width: 100%; padding: 0.22rem 0.45rem; border-radius: 8px; font-size: 0.8rem; }
.tab-side .input.narrow { width: 5rem; }
.tab-side .row { display: flex; align-items: center; gap: 0.4rem; }
.tab-side .row .select { width: auto; }
.side-tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid var(--line); margin-bottom: 0.3rem; }
.side-tabs button { font: inherit; font-weight: 800; font-size: 0.72rem; background: transparent; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0.25rem 0.55rem; cursor: pointer; color: var(--muted); }
.side-tabs button.on { background: var(--panel); border-color: var(--line); color: var(--ink); margin-bottom: -1px; }
.tab-editor.gp > .panel { margin: 0.8rem 1rem; }
@media (max-width: 900px) { .tab-body { grid-template-columns: 1fr; } .tab-palette, .tab-side { border: 0; border-bottom: 1px solid var(--line); } .pal-grid { grid-template-columns: repeat(10, 1fr); } }
/* The editor gets the whole window width, like a desktop program; the feedback box below keeps the normal column. */
.content:has(.tab-editor.gp) { max-width: none; padding: 0.6rem 1rem 3rem; }
.content:has(.tab-editor.gp) > .tool-feedback { max-width: 1180px; margin-left: auto; margin-right: auto; }
.tab-surface { border-width: 1px; max-height: none; }

/* ---- Under-construction note on the home page ---- */
.construction { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.2rem; padding: 0.6rem 1rem; border-radius: 999px; background: var(--amber-soft, #fff1dc); border: 2px dashed var(--amber); color: var(--ink); font-weight: 600; }
.construction-icon { font-size: 1.2rem; }
.construction { position: relative; padding-right: 2.6rem; }
.note-close { position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(43, 33, 80, 0.08); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.note-close:hover { background: rgba(43, 33, 80, 0.16); }
.construction a { font-weight: 800; }
.construction.phone-note { background: var(--mint, #d6f5e3); border-color: #7fe2a5; margin-top: -0.6rem; }
/* ---- Tab player (phone-first; fine on a desktop too) ---- */
.tab-player { display: flex; flex-direction: column; gap: 0.8rem; padding-bottom: 7rem; }
.player-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.player-head h1 { margin: 0; font-size: 1.6rem; }
.player-head p { margin: 0.2rem 0 0; }
.player-tracks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; }
.player-tracks label.check.small { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.player-surface { max-height: none; border-width: 1px; }
.player-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(43, 33, 80, 0.12); }
.play-big { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 1.4rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.play-big.stop { background: var(--coral); color: var(--ink); }
.player-controls { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; min-width: 0; }
.player-controls label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.player-controls .select { min-width: 0; padding: 0.35rem 0.5rem; border-radius: 10px; font-size: 0.9rem; }
.player-controls .row { display: inline-flex; align-items: center; gap: 0.3rem; }
.player-controls input[type="checkbox"] { width: 20px; height: 20px; }
@media (max-width: 700px) {
    .player-bar { gap: 0.6rem; padding-left: 0.7rem; padding-right: 0.7rem; }
    .player-controls { gap: 0.3rem 0.6rem; font-size: 0.78rem; }
    .player-controls label.check { padding: 0.2rem 0; }
}
/* Phone note on pages that need a bigger screen */
.phone-only { display: none; }
@media (max-width: 700px) { .phone-only { display: block; } }

/* Dev: teacher prospects page */
.prospect-filters { flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.prospect-filters .input { flex: 1 1 240px; min-width: 0; }
.pchip { font: inherit; font-size: 0.82rem; font-weight: 700; background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; }
.pchip b { color: var(--ink); margin-left: 0.25rem; }
.pchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pchip.on b { color: #fff; }
.prospect-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr); gap: 1rem; align-items: start; }
.prospect-list { max-height: 78vh; overflow: auto; }
.prospect-list .table td { padding: 0.45rem 0.5rem; font-size: 0.9rem; }
.prospect-list tr.selected td { background: var(--tint); }
.prospect-list .reach { white-space: nowrap; color: var(--muted); }
.prospect-edit h3 { margin: 1rem 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.prospect-head { align-items: center; gap: 0.6rem; }
.prospect-head h2 { margin: 0; }
.prospect-actions { flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.prospect-actions .spacer { flex: 1; }
.badge.st-New { background: var(--tint); }
.badge.st-Ready { background: #e3f6ec; color: #1d6b3d; }
.badge.st-Invited { background: var(--amber-soft); color: var(--amber-ink); }
.badge.st-Accepted { background: var(--mint); color: var(--mint-ink); }
.badge.st-Declined, .badge.st-NoGo { background: #fde6e4; color: #7a1f1a; }
@media (max-width: 900px) { .prospect-grid { grid-template-columns: 1fr; } .prospect-list { max-height: none; } }

/* Dev: email tester */
.mail-grid { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(360px, 1.4fr); gap: 1rem; align-items: start; }
.mail-list { list-style: none; margin: 0.8rem 0; padding: 0; display: grid; gap: 0.4rem; }
.mail-list li { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.3rem 0.5rem 0.3rem 0.3rem; }
.mail-list li.selected { border-color: var(--accent); background: var(--tint); }
.mail-pick { flex: 1; display: grid; text-align: left; font: inherit; background: none; border: 0; padding: 0.4rem 0.6rem; cursor: pointer; color: var(--ink); border-radius: 8px; }
.mail-preview { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: 12px; background: #f6f1ff; }
.mail-text { white-space: pre-wrap; background: var(--tint); border-radius: 10px; padding: 0.8rem 1rem; font-size: 0.9rem; }
@media (max-width: 900px) { .mail-grid { grid-template-columns: 1fr; } }

.practice-controls { margin-top: 1rem; align-items: center; }
.impersonate .select { flex: 1 1 320px; min-width: 0; }

/* Scale picker: a text box that filters every scale as you type */
.scale-picker { position: relative; min-width: 16rem; }
.scale-picker .input { width: 100%; }
.scale-options { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 20rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 24px rgba(43, 33, 80, 0.14); }
.scale-options li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px; cursor: pointer; }
.scale-options li small { white-space: nowrap; }
.scale-options li.hi, .scale-options li:hover { background: var(--tint); }
.scale-options li.current span { color: var(--accent); font-weight: 700; }
.scale-options li.group { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; cursor: default; padding-top: 0.6rem; }
.scale-options li.group:hover { background: none; }
.scale-options li.parent span { font-weight: 800; }
.scale-options li.mode { padding-left: 1.6rem; }
.scale-options { max-height: 24rem; }

/* Notes stepper on Scales & Modes: − Any/5/6/7/8/12 + */
.stepper { display: inline-flex; align-items: center; gap: 0.3rem; }
.stepper .button { padding: 0.35rem 0.7rem; line-height: 1; }
/* In a toolbar every control is the same height, so the labels above them line up. */
.toolbar .select:where(:not(.snd-panel *, .fxb *)), .toolbar .input:where(:not(.snd-panel *, .fxb *)), .toolbar .stepper:where(:not(.snd-panel *, .fxb *)) { height: 2.5rem; box-sizing: border-box; }
.toolbar .stepper:where(:not(.snd-panel *, .fxb *)) { padding: 0 0.3rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; justify-content: space-between; min-width: 7.5rem; }
.toolbar .stepper .button { padding: 0.25rem 0.6rem; }
.range-row { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-weight: 700; }
.toolbar .range-row .input { width: 4.5rem; }
.stepper-value { min-width: 2.6rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Backing tracks */
.yt-frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: #000; margin-bottom: 0.5rem; }
.yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.track-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.track { display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; font: inherit; background: var(--tint); border: 2px solid transparent; border-radius: 12px; padding: 0.4rem; cursor: pointer; color: var(--ink); }
.track:hover, .track-list li.now .track { border-color: var(--accent); }
.track img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; flex: none; }
.track-text { display: grid; min-width: 0; }
.track-text b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-play { margin-left: auto; color: var(--accent); font-weight: 900; padding-right: 0.5rem; }
@media (max-width: 700px) { .track img { width: 88px; height: 50px; } .track-text b { white-space: normal; } }

/* Admin: backing-track review */
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.review-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.review-row img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; flex: none; }
.review-text { display: grid; min-width: 0; flex: 1 1 260px; }
.review-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.review-list .yt-frame { margin-top: 0.5rem; max-width: 560px; }

/* Patterns: rhythm from two pulses */
.crumbs { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.3rem; }
.tool-card.soon { background: var(--panel); border: 2px dashed var(--line); color: var(--muted); }
.tool-card.soon .tool-name { color: var(--muted); }
.rhythm-grid { display: grid; grid-template-columns: minmax(320px, 1.3fr) minmax(280px, 1fr); gap: 1.2rem; align-items: start; }
.rhythm-grid .panel { margin-top: 0; }
.rhythm-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem; margin-bottom: 0.8rem; }
.rhythm-pick label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.rhythm-pick label.check { flex-direction: row; align-items: center; padding-bottom: 0.5rem; }
.rhythm-against { padding-bottom: 0.55rem; color: var(--muted); font-weight: 700; }
.rhythm-circle { display: flex; flex-direction: column; align-items: center; }
.rhythm-circle svg { width: min(100%, 380px); height: auto; }
.rhythm-legend { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; margin-top: 0.3rem; }
.rhythm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; }
.rhythm-strip { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin: 0.8rem 0 0.3rem; }
.rhythm-strip .unit { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 6px; background: var(--tint); color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.rhythm-strip .unit.hit { background: var(--accent); color: #fff; font-weight: 900; }
.rhythm-strip .unit.on { outline: 3px solid var(--coral); outline-offset: -1px; }
.rhythm-formula { text-align: center; font-size: 1.1rem; margin: 0.2rem 0 0.8rem; font-variant-numeric: tabular-nums; }
.rhythm-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.rhythm-transport > label { font-size: 0.85rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.rhythm-transport .input.narrow { width: 4.5rem; }
.rhythm-hear { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.rhythm-sounds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.rhythm-lane { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); background: var(--tint); font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.rhythm-lane .select { min-width: 0; padding: 0.3rem 0.5rem; }
.rhythm-lane.lane-0 { box-shadow: inset 4px 0 0 #ff7a59; }
.rhythm-lane.lane-1 { box-shadow: inset 4px 0 0 #2f9e5b; }
.rhythm-lane.lane-2 { box-shadow: inset 4px 0 0 #4b3bb0; }
.rhythm-lesson h3 { margin: 1rem 0 0.3rem; font-size: 1rem; }
.rhythm-lesson p { line-height: 1.55; }
@media (max-width: 900px) { .rhythm-grid { grid-template-columns: 1fr; } }
/* Polyrhythm trainer */
.metro-poly { margin: 0.6rem 0 0; }
.poly-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.poly-pulses { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; }
.poly-against { align-self: center; font-size: 0.8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.poly-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--tint); }
.poly-pulse .select { width: auto; }
.poly-pulse.a { box-shadow: inset 4px 0 0 #ff7a59; }
.poly-pulse.b { box-shadow: inset 4px 0 0 #2f9e5b; }
.poly-pulse input[type=range] { width: 6rem; accent-color: var(--accent); }
.poly-label { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-weight: 900; font-size: 0.8rem; color: #fff; flex: none; }
.poly-label.a { background: #ff7a59; }
.poly-label.b { background: #2f9e5b; }
.poly-dot { transform-box: fill-box; transform-origin: center; transition: transform 0.12s ease-out; }
.poly-dot.on { transform: scale(1.7); transition: none; }   /* swells at once, on the click; shrinks back gently */
.poly-strip { display: flex; flex-direction: column; gap: 4px; margin: 0.8rem 0 0.3rem; overflow-x: auto; padding-bottom: 0.2rem; }
.poly-row { display: flex; gap: 3px; align-items: center; }
.poly-row .unit { width: 1.6rem; height: 1.6rem; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--tint); color: var(--muted); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.poly-row .unit.hit.a { background: #ffd8cc; color: #8a2a12; }
.poly-row .unit.hit.b { background: #c9eedb; color: #14382b; }
.poly-row .unit.one.a { background: #ff7a59; color: #fff; }
.poly-row .unit.one.b { background: #2f9e5b; color: #fff; }
.poly-row .unit.on { outline: 3px solid var(--ink); outline-offset: -1px; }
.poly-phrase { font-size: 1.15rem; font-weight: 700; color: var(--muted); margin: 0.6rem 0; }
.poly-phrase span { display: inline-block; padding: 0.1rem 0.35rem; border-radius: 8px; color: var(--ink); }
.poly-phrase span.on { background: var(--accent); color: #fff; }
.poly-readout { margin: 0.3rem 0 0.6rem; }
.poly-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--tint); margin: 0.4rem 0 0.8rem; }
.poly-practice label { font-size: 0.85rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.poly-practice .input.narrow { width: 4rem; }
.poly-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.poly-steps { padding-left: 1.2rem; line-height: 1.5; }
.poly-steps li { margin-bottom: 0.35rem; }
.tuner-voice { margin: 0.6rem 0 0; }
.table tr.sounding td { background: var(--accent-soft); }
.coined-mark { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; border-radius: 999px; background: var(--tint); color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.1em; }
.tuner-voice .voice-pick { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
@media (max-width: 700px) { .poly-row .unit { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; } }
@media (max-width: 700px) { .rhythm-strip .unit { width: 1.3rem; height: 1.3rem; } }

/* Patterns: scales from symmetry */
.sym-cell { margin: 0.4rem 0 0.8rem; }
.sym-cell .row { gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.sym-chip { font: inherit; font-weight: 800; font-size: 0.9rem; background: var(--panel); color: var(--muted); border: 2px solid var(--line); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; }
.sym-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sym-chip.fixed { cursor: default; opacity: 0.8; }
.sym-wheel { align-items: center; }
.sym-facts { flex: 1 1 220px; min-width: 0; }
.sym-facts .rhythm-formula { text-align: left; }

/* Patterns: one lick, four ways */
.lick-grid { display: grid; grid-template-columns: 2.2rem repeat(var(--cols), minmax(1.4rem, 2.2rem)); gap: 3px; align-items: center; margin: 0.4rem 0 1rem; }
.lick-label { font-size: 0.75rem; font-weight: 800; color: var(--muted); text-align: right; padding-right: 0.3rem; font-variant-numeric: tabular-nums; }
.lick-label.root { color: var(--coral-deep); }
.lick-cell { aspect-ratio: 1; border: 0; border-radius: 5px; background: var(--tint); cursor: pointer; padding: 0; }
.lick-cell.root { background: #f3e7e2; }
.lick-cell.on { background: var(--accent); }
.lick-cell.on.root { background: var(--coral); }
.lick-cell.now { outline: 2px solid var(--coral); outline-offset: -1px; }
.four-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.way { background: var(--tint); border-radius: 12px; padding: 0.6rem 0.8rem; border: 2px solid transparent; }
.way.now { border-color: var(--coral); }
.way-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.way-graph { width: 100%; height: 64px; background: var(--panel); border-radius: 8px; }
.way-notes { font-weight: 700; margin-top: 0.3rem; letter-spacing: 0.04em; }
.way-tab { font-variant-numeric: tabular-nums; }

/* Patterns: chords that walk the circle */
.cycle-wheel { width: min(100%, 340px); height: auto; flex: none; }
.cycle-list { margin: 0 0 0.6rem; padding-left: 1.4rem; columns: 2; column-gap: 1.2rem; font-size: 1.05rem; }
.cycle-list li { padding: 0.15rem 0.3rem; border-radius: 6px; break-inside: avoid; }
.cycle-list li.now { background: var(--amber-soft); }

/* Chord progressions: one card per chord, lit while it sounds */
.prog-chords { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.prog-chord { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.7rem 0.4rem; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; box-shadow: 0 3px 0 var(--shadow); }
.prog-chord:hover { border-color: var(--accent); }
.prog-chord.now { background: var(--accent); border-color: var(--accent); color: #fff; }
.prog-chord.now .muted { color: #fff; opacity: 0.85; }
.prog-roman { font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.prog-symbol { font-weight: 800; }
/* Long chord names (♯v(add4,no5), G♯m(add4,no5)) stay inside the card: the kind of chord prints smaller after the
   numeral, and anything still too long wraps instead of running over the edge. */
.prog-chord { min-width: 0; }
.prog-roman, .prog-symbol { max-width: 100%; text-align: center; overflow-wrap: anywhere; }
.prog-roman-kind { font-size: 0.55em; font-weight: 800; margin-left: 0.05em; }
.diagram-title { flex-wrap: wrap; }
.prog-bar { align-self: flex-start; margin-left: 0.2rem; }
.diagram-card { border-radius: 14px; padding: 0.4rem 0; border: 2px solid transparent; }
.diagram-card.sounding { border-color: var(--accent); background: var(--tint); }
.diagram-title .diagram-play { padding: 0.1rem 0.55rem; min-height: 0; }

/* The round play button (Shared/PlayButton.razor): ▶, and ■ while it sounds */
.play-button { --size: 36px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; border: 0; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
    background: var(--coral); color: var(--ink); transition: transform .08s ease, background .15s ease; }
.play-button svg { width: 56%; height: 56%; }
.play-button:hover { background: var(--coral-deep); }
.play-button.playing:hover { filter: brightness(1.08); }
.play-button:active { transform: scale(0.94); }
.play-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.play-button.playing { background: var(--accent); color: #fff; }
.play-button:disabled { opacity: .45; cursor: default; transform: none; }
.play-button.small { --size: 28px; }
.play-button.big { --size: 48px; }
.challenge .row { align-items: center; }

/* The share button (Shared/ShareButton.razor): share symbol + "Share" */
.share-btn { display: inline-flex; align-items: center; gap: 0.35rem; }
.share-btn .share-icon { width: 0.95rem; height: 0.95rem; flex: none; }
/* Challenge cards: the kind of challenge on the left, Share in the top-right corner */
.challenge-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.challenge-top .share-btn { margin: -0.3rem -0.4rem 0 0; }

.challenge-top .challenge-kicker { transform: translateY(-3px); }   /* lines the kicker's text up with "Share" */

/* Reveal (Shared/Reveal.razor): "Show the answer" and the answer under it */
.reveal { margin-top: 0.4rem; }
.reveal-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-weight: 800; font-size: 0.85rem; color: var(--accent); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; }
.reveal-toggle:hover span { text-decoration: underline; }
.reveal-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.reveal-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.reveal-answer { margin-top: 0.4rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--tint); color: var(--ink); font-weight: 600; }
.reveal-answer[hidden] { display: none; }

/* Backing tracks: suggesting one */
.track-suggest { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.track-suggest h3 { margin: 0 0 0.2rem; font-size: 1rem; }
.track-suggest .row .input { flex: 1; min-width: 14rem; }
/* See it: the fifth challenge color */
.challenge.sky { border-top: 6px solid #9fd3f5; }
.challenge.sky .challenge-kicker { color: #1f6ea3; }
.challenge-pending { align-self: flex-start; font-size: 0.75rem; font-weight: 800; color: var(--amber-ink, #8a5a00); background: var(--amber-soft, #fff1cf); border-radius: 999px; padding: 0.15rem 0.6rem; }

/* The challenge editor: the live card on the left (it stays in view), the steps beside it; stacked on phones */
.challenge-editor { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.5rem; align-items: start; margin-top: 1rem; }
.challenge-editor-preview { position: sticky; top: 1rem; }
.challenge-editor-preview.single { max-width: 360px; margin-top: 1rem; }
.challenge-editor-preview .challenge { min-height: 14rem; }
.challenge-editor-fields fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.editor-step { background: var(--panel); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: 0 4px 0 var(--shadow); display: flex; flex-direction: column; gap: 0.7rem; }
.editor-step h2 { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.step-no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.85rem; }
.editor-step label:not(.check) { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; }
.editor-step .row { align-items: flex-end; flex-wrap: wrap; gap: 0.6rem; }
.chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-list li { display: inline-flex; align-items: center; gap: 0.3rem; }
.challenge-thanks h2 { color: var(--accent); }
@media (max-width: 760px) {
    .challenge-editor { grid-template-columns: 1fr; }
    .challenge-editor-preview { position: static; }
}

/* My challenges */
.my-challenges { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.my-challenge { display: flex; flex-direction: column; gap: 0.5rem; }
.my-challenge-status { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.challenge-cta .row { gap: 0.6rem; }
.challenge-editor-fields .editor-step { margin: 0; }
.editor-step label > .muted.small { font-weight: 600; }
.community-challenges .challenge-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }   /* one member card stays card-sized */
.with-icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.btn-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.title-with-action { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.add-challenge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent); color: #fff; box-shadow: 0 3px 0 #2f2480; }
.add-challenge:hover { background: #5a49c9; color: #fff; }
/* The Challenges page: pages of three rows of three, slid with ‹ › */
@media (min-width: 701px) {
    .carousel .carousel-track.pages { gap: 1.4rem; grid-auto-columns: 100%; }
    .challenge-page { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; align-content: start; }
}
@media (min-width: 701px) and (max-width: 1000px) { .challenge-page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.challenge-by .link-button + .link-button { margin-left: 0; }

/* Admin → Challenges */
.review-challenge { display: flex; flex-direction: column; gap: 0.8rem; }
.review-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 340px)); gap: 1.2rem; align-items: start; }
.review-challenge label:not(.check) { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; }

/* Admin home and the Dev tools' Admin tab: one card per admin page */
.admin-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.9rem; margin-top: 0.6rem; }
.admin-link { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--panel); border: 2px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 3px 0 var(--shadow); }
.admin-link:hover { border-color: var(--accent); }
.admin-link b { font-size: 1.05rem; }
.admin-link.attention { border-color: var(--coral); background: #fff5f1; }
.admin-link.attention span { color: var(--coral-deep); font-weight: 800; }
/* Dev tools: one tab at a time */
.dev-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem; }
/* The member's own menu (name and picture in the top bar) */
.account-menu .menu-btn.account-name { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.9rem 0.3rem 0.3rem; font-weight: 900; }
.account-menu .menu-list { min-width: 15rem; }
.menu-logout { margin: 0.3rem 0 0; border-top: 1px solid var(--line); padding-top: 0.3rem; }
.menu-logout .nav-link { width: 100%; text-align: left; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
/* The play button in white, for pages whose other buttons are white */
.play-button.secondary { background: var(--panel); color: var(--ink); border: 2px solid var(--line); }
.play-button.secondary:hover { background: var(--tint); border-color: var(--accent); }
.play-button.secondary.playing { background: var(--accent); border-color: var(--accent); color: #fff; }
/* The mode chart with a play button at the start of each row */
.mode-chart.with-play { grid-template-columns: 2.6rem 2rem 9rem repeat(var(--cols), minmax(1.6rem, 1fr)); }
.mode-chart .mc-play { padding: 0.15rem; }

/* Every 7-note scale: each row's play and Modes buttons, one above the other, centred */
.row-actions { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.modes-toolbar { margin-bottom: 0.3rem; align-items: flex-end; }   /* the toggles line up along their bottoms, under Order's label */
.modes-toolbar .seg-toggle { margin-bottom: 0; }
.modes-toolbar .modes-views { margin-left: 0.2rem; }
.modes-toolbar .modes-rooting { margin: 0 0.6rem 0 0; }
.fb-relative { margin: 0 0 0.8rem; }
.fb-relative .seg-toggle { margin-bottom: 0; }
.fb-relative .seg-toggle button { font-size: 0.9rem; }
.mode-notes span { margin-right: 0.5em; }
.mode-notes span.changed { color: var(--coral-deep); font-weight: 800; }
.mode-chart.same-root .mc-head { font-size: 0.72rem; white-space: nowrap; }
.wheel-play { align-items: center; gap: 0.6rem; }

/* "Challenge the community" beside its heading, everything on one centre line */
.title-with-action { align-items: center; }
.title-with-action h2 { margin: 0; line-height: 1.2; }
.button.add-challenge { line-height: 1; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.add-challenge .btn-icon { display: block; }
.play-all { align-items: center; gap: 0.45rem; }
.play-all .seg-toggle { margin-bottom: 0; }

/* Simon: the controls in the middle of the wheel, laid out like the 1978 game's black hub. Sized from the wheel's width. */
.simon-wheel { position: relative; width: 560px; max-width: 100%; aspect-ratio: 1; container-type: inline-size; }
.simon-wheel .scale-wheel { width: 100%; height: auto; display: block; }
.simon-hub { position: absolute; left: 50%; top: 50%; width: 38cqw; height: 38cqw; transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #3a2f63, #1d1638 70%); box-shadow: inset 0 0 0 0.7cqw #120d24, 0 0.6cqw 1.6cqw rgba(29, 22, 56, 0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqw; color: #fff; }
.simon-readout { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-height: 7cqw; }
.simon-readout b { font-size: 4.4cqw; letter-spacing: 0.04em; }
.simon-readout span { font-size: 2.4cqw; color: #cbc2f0; }
.simon-keys { display: flex; align-items: flex-start; gap: 2.2cqw; }
.simon-key-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; font-size: 2.1cqw; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #cbc2f0; }
.simon-key, .simon-start { border: 0; border-radius: 50%; cursor: pointer; padding: 0; }
.simon-key { width: 6.4cqw; height: 6.4cqw; margin-top: 2.4cqw; background: #e9e4fb; }
.simon-start { width: 11.2cqw; height: 11.2cqw; background: var(--coral, #ff6b5b); }
.simon-key:active:not(:disabled), .simon-start:active { transform: scale(0.94); }
.simon-key:disabled { opacity: 0.35; cursor: default; }
.simon-key:focus-visible, .simon-start:focus-visible, .simon-skill button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.simon-skill { display: flex; align-items: center; gap: 0.6cqw; padding: 0 2cqw; font-size: 1.8cqw; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #cbc2f0; }
.simon-skill span { margin-right: 0.3cqw; }
.simon-skill button { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; border: 0.3cqw solid #8f86b8; background: transparent; color: #fff; font-size: 2cqw; font-weight: 800; padding: 0; cursor: pointer; line-height: 1; }
.simon-skill button.on { background: #fff; color: #1d1638; border-color: #fff; }
.simon-skill button:disabled { cursor: default; }
.simon-skill button:disabled:not(.on) { opacity: 0.4; }

/* Circle of fifths: the chord playing glows gold, pulsing gently, so you can follow I–IV–V–I round the circle. */
.circle-fifths .cf-sounding { fill: rgba(255, 213, 74, 0.35); stroke: #ffb300; stroke-width: 5; stroke-linejoin: round; pointer-events: none; }
.circle-fifths .cf-sounding-glow { fill: none; stroke: #ffd54a; stroke-width: 16; stroke-linejoin: round; opacity: 0.55; filter: blur(5px); pointer-events: none; animation: cf-pulse 0.9s ease-in-out infinite alternate; }
@keyframes cf-pulse { from { opacity: 0.35; } to { opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .circle-fifths .cf-sounding-glow { animation: none; } }
.legend i.sounding-swatch { background: rgba(255, 213, 74, 0.5); box-shadow: inset 0 0 0 2px #ffb300; }

/* Note shapes (/theory/shapes): the circle on the left, what it is on the right. */
.shapes { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.shapes-board { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0; }
.shapes-view { gap: 0.8rem; align-items: center; justify-content: space-between; }
.shapes-view .pchips { display: inline-flex; gap: 0.35rem; }
.note-shape { width: 100%; height: auto; max-width: 480px; align-self: center; overflow: visible; }
.note-shape .ns-ring { fill: none; stroke: var(--line); stroke-width: 2; }
.note-shape .ns-spoke { stroke: var(--line); stroke-width: 1; opacity: 0.6; }
.note-shape .ns-mirror { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.55; }
.note-shape .ns-shape { fill: rgba(75, 59, 176, 0.14); stroke: var(--accent); stroke-width: 3.5; stroke-linejoin: round; transition: all .2s; }
.note-shape .ns-note { cursor: pointer; }
.note-shape .ns-dot { stroke: var(--line); stroke-width: 2; transition: fill .15s; }
.note-shape .ns-note:hover .ns-dot { stroke: var(--accent); }
.note-shape .ns-note.on .ns-dot { stroke: #fff; stroke-width: 3; }
.note-shape .ns-root-ring { fill: none; stroke: var(--coral); stroke-width: 3.5; }
.note-shape .ns-glow { opacity: 0.55; filter: blur(6px); display: none; }
.note-shape .ns-note.lit .ns-glow, .note-shape .ns-note.now .ns-glow { display: block; }
.note-shape .ns-name { text-anchor: middle; font-size: 15px; font-weight: 800; fill: var(--muted); pointer-events: none; }
.note-shape .ns-note.on .ns-name { fill: #fff; }
.note-shape .ns-degree { text-anchor: middle; font-size: 14px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.shapes-hint { margin: 0; text-align: center; }
.shapes-moves { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; }
.shapes-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.shapes-side .panel { margin-top: 0; }
.shape-title { margin: 0; }
.shape-facts th { width: 6rem; color: var(--muted); font-weight: 700; text-align: left; }
.shape-facts td { font-weight: 700; letter-spacing: 0.02em; }
.shape-play { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin: 0.8rem 0; }
.pchip.small { padding: 0.15rem 0.55rem; font-size: 0.78rem; margin-left: 0.2rem; }
.shape-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.shape-notes { padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.shape-notes .ic { display: inline-block; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--accent-soft, #ece8ff); font-weight: 700; font-size: 0.85rem; }
.shape-notes .ic.none { opacity: 0.4; }
.shape-names { padding-left: 1.1rem; columns: 2 16rem; }
.shape-names li { break-inside: avoid; margin-bottom: 0.25rem; }
@media (max-width: 900px) { .shapes { grid-template-columns: 1fr; } }

.wheel-legend { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; gap: 0.35rem 0.8rem; }
.fourways-actions { margin-top: 1rem; }
.wheel-with-legend { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 360px; }
.wheel-with-legend .wheel-legend { justify-content: center; margin: 0; }
.note-shape .ns-mark { fill: none; stroke: #ffb300; stroke-width: 4; animation: ns-pulse 0.9s ease-in-out infinite alternate; }
.note-shape .ns-ghost { fill: none; stroke: #ffb300; stroke-width: 2.5; stroke-dasharray: 4 4; }
@keyframes ns-pulse { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .note-shape .ns-mark { animation: none; } }

/* Mode ladder (/theory/mode-ladder) */
.ladder { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ladder-board { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0; }
.ladder-toolbar { gap: 1rem; align-items: flex-end; }
.ladder-slider { display: flex; align-items: center; gap: 0.6rem; }
.ladder-slider input[type=range] { flex: 1; accent-color: var(--accent); }
.ladder-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ladder-side .panel { margin-top: 0; }
.ladder-change { font-size: 1.05rem; }
.ladder-degrees { display: flex; gap: 0.35rem; margin: 0.4rem 0; }
.ladder-degrees span { min-width: 2.3rem; text-align: center; padding: 0.3rem 0.2rem; border-radius: 8px; background: var(--accent-soft, #ece8ff); font-weight: 800; }
.ladder-degrees span.alt { color: #2F6FB5; }
.ladder-degrees span.moved { background: #fff1c2; box-shadow: inset 0 0 0 2px #ffb300; }
.ladder-rungs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; }
.ladder-rung { width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font: inherit; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.8rem; cursor: pointer; color: var(--ink); }
.ladder-rung.on { border-color: var(--accent); background: var(--accent-soft, #ece8ff); }
.ladder-rung.hearing { border-color: var(--warm, #ff7a59); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warm, #ff7a59) 35%, transparent); }
.ladder-rung-degrees { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.04em; }
@media (max-width: 900px) { .ladder { grid-template-columns: 1fr; } }

/* Chord circle (/theory/chord-circle) */
.chord-circle-layout { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.chord-circle-board { margin-top: 0; }
.chord-circle { width: 100%; height: auto; display: block; overflow: visible; }
.chord-circle .cc-rim { fill: none; stroke: var(--line); stroke-width: 2; }
.chord-circle .cc-slot { cursor: pointer; }
.chord-circle .cc-wedge { stroke: #fff; stroke-width: 2.5; opacity: 0.88; transition: opacity .15s, filter .15s; }
.chord-circle .cc-slot:hover .cc-wedge { opacity: 1; }
.chord-circle .cc-slot.now .cc-wedge { opacity: 1; stroke: #ffb300; stroke-width: 5; filter: drop-shadow(0 0 8px rgba(255, 190, 60, 0.9)); }
.chord-circle .cc-symbol { text-anchor: middle; font-weight: 800; fill: #fff; pointer-events: none; }
.chord-circle .cc-roman { text-anchor: middle; font-size: 11px; font-weight: 700; fill: rgba(255, 255, 255, 0.85); pointer-events: none; }
.chord-circle .cc-bar { text-anchor: middle; font-size: 12px; font-weight: 700; fill: var(--muted); }
.chord-circle .cc-barline { stroke: var(--ink); stroke-width: 1.5; opacity: 0.35; }
.chord-circle .cc-centre { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.chord-circle .cc-centre-title { text-anchor: middle; font-size: 26px; font-weight: 800; fill: var(--ink); }
.chord-circle .cc-centre-sub { text-anchor: middle; font-size: 13px; fill: var(--muted); }
.chord-circle .cc-hand { transform-box: view-box; transform-origin: 260px 260px; transition-property: transform; transition-timing-function: linear; opacity: 0; pointer-events: none; }
.chord-circle .cc-hand.on { opacity: 1; }
.chord-circle .cc-hand line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.chord-circle .cc-hand circle { fill: var(--coral); }
.chord-circle-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.chord-circle-side .panel { margin-top: 0; }
.cc-legend { flex-direction: column; gap: 0.35rem; }
@media (max-width: 900px) { .chord-circle-layout { grid-template-columns: 1fr; } }
.note-shape .ns-note { transition: transform 0.75s var(--motion-ease); }
.note-shape .ns-shape, .note-shape .ns-mirror { transition: opacity 0.25s; }
.note-shape.morphing .ns-shape, .note-shape.morphing .ns-mirror { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .note-shape .ns-note { transition: none; } }

/* v2 previews */
.v2-badge { display: inline-block; vertical-align: middle; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: #fff1c2; color: #7a5600; border: 1px solid #ffd37a; border-radius: 999px; padding: 0.15rem 0.6rem; margin-left: 0.4rem; }
.scale-mood { font-size: 1.02rem; }
.fit-chip { display: inline-block; margin: 0.15rem 0.3rem 0.15rem 0; padding: 0.15rem 0.55rem; border-radius: 8px; background: var(--accent-soft, #ece8ff); font-weight: 800; }
.fit-list { padding-left: 1.1rem; columns: 2 14rem; }
.wheel-order { display: inline-flex; gap: 0.35rem; }
.preview-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.preview-list .panel { margin: 0; }
.ladder-order { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.ladder-grid { margin: 0.4rem 0; }
.ladder-grid .degrees span.moved { background: #fff1c2; box-shadow: inset 0 0 0 2px #ffb300; border-radius: 6px; }
.ladder-rung { flex-wrap: wrap; }
.ladder-rung .ladder-grid { margin: 0; }
.cc-toolbar { margin-top: 1.2rem; }
.chord-circle-layout { margin-top: 1.2rem; }

/* Lead sheet: a chord chart four bars to a line (Chord circle's Chart view). */
.chord-circle-layout.as-chart { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
.cc-view { justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.lead-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.9rem; }
.ls-bar { position: relative; min-height: 104px; padding: 1.5rem 0.5rem 0.5rem 0.7rem; border-left: 2px solid var(--ink); display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--ls-tint) 16%, transparent), transparent 75%); transition: background .2s, box-shadow .2s; }
.ls-bar:nth-child(4n) { border-right: 2px solid var(--ink); }
.ls-bar.starts { border-left: 6px double var(--ink); }
.ls-bar.ends { border-right: 6px double var(--ink); }
.ls-bar.last { border-right: 0; box-shadow: inset -3px 0 0 var(--ink), inset -8px 0 0 var(--panel), inset -10px 0 0 var(--ink); }
.ls-bar.now { background: #fff4cc; box-shadow: inset 0 0 0 3px #ffb300; }
.ls-bar.last.now { box-shadow: inset 0 0 0 3px #ffb300, inset -3px 0 0 var(--ink); }
.ls-section { position: absolute; top: 0.25rem; left: 0.3rem; min-width: 1.5rem; height: 1.5rem; padding: 0 0.3rem; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 900; font-size: 0.9rem; display: grid; place-items: center; }
.ls-num { position: absolute; top: 0.3rem; right: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.ls-chords { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.ls-chord { font: inherit; background: none; border: 0; padding: 0 0.15rem 0.15rem; cursor: pointer; color: var(--ink); text-align: left; border-bottom: 4px solid var(--ls-color); border-radius: 2px; display: flex; flex-direction: column; }
.ls-chord:hover { background: color-mix(in srgb, var(--ls-color) 12%, transparent); }
/* The sounding chord gets no darker box of its own (the bar's highlight says where we are); in a bar with two chords a
   deeper underline, drawn below the line so nothing shifts, says which one. */
.ls-chord.now { background: transparent; box-shadow: 0 3px 0 var(--ls-color); }
.ls-chord.now:hover { background: transparent; }
.ls-symbol { white-space: nowrap; line-height: 1; }
.ls-root { font-size: 2.1rem; font-weight: 900; letter-spacing: -0.02em; }
.ls-acc { font-size: 1.15rem; font-weight: 800; vertical-align: 0.9em; margin-left: 0.04em; }
.ls-quality { font-size: 1.1rem; font-weight: 800; margin-left: 0.08em; }
.ls-chords.split .ls-root { font-size: 1.6rem; }
.ls-chords.split .ls-quality { font-size: 0.95rem; }
.ls-roman { font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-top: 0.25rem; }
.ls-repeat { font: inherit; background: none; border: 0; cursor: pointer; color: var(--muted); width: 46px; height: 36px; padding: 0; align-self: center; }
.ls-repeat svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .chord-circle-layout.as-chart { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .lead-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ls-bar:nth-child(4n) { border-right: 0; }
    .ls-bar:nth-child(2n) { border-right: 2px solid var(--ink); }
    .ls-bar.ends { border-right: 6px double var(--ink); }
    .ls-root { font-size: 1.7rem; }
}
.ls-bar.last .ls-num { right: 1rem; }

/* Transport: ⏮ ◀ ▶/❚❚ ■ ▶ ⏭, a bar readout and Loop. */
.transport-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 1rem; padding: 0.55rem 0.8rem; border-radius: 999px; background: var(--accent-soft, #ece8ff); outline: none; }
.transport-bar:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.tb-btn, .tb-main, .tb-loop { border: 0; cursor: pointer; display: inline-grid; place-items: center; font: inherit; }
.tb-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.tb-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--accent); }
.tb-btn:disabled { opacity: 0.4; cursor: default; }
.tb-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tb-main { width: 52px; height: 52px; border-radius: 50%; background: var(--coral); color: var(--ink); margin: 0 0.15rem; }
.tb-main:active { transform: scale(0.96); }
.tb-main.playing { background: var(--accent); color: #fff; }
.tb-main svg { width: 24px; height: 24px; fill: currentColor; }
.tb-readout { margin-left: 0.4rem; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.35rem; min-width: 7.5rem; }
.tb-section { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 900; font-size: 0.8rem; }
.tb-loop { margin-left: auto; gap: 0.3rem; grid-auto-flow: column; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--panel); color: var(--muted); font-weight: 800; font-size: 0.85rem; box-shadow: inset 0 0 0 1.5px var(--line); }
.tb-loop svg { width: 18px; height: 18px; stroke: currentColor; }
.tb-loop.on { background: var(--accent); color: #fff; box-shadow: none; }
@media (max-width: 600px) { .transport-bar { border-radius: 18px; } .tb-loop { margin-left: 0; } }
.tb-readout { min-width: 0; }
.tb-loop { margin-left: 0.3rem; }
.progression-picker { display: flex; min-width: 0; }
.progression-picker .prog-pick-btn { width: 100%; min-width: 12rem; max-width: 20rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* opens the browser of progressions */

/* Chord charts: the editor, the player and the gallery. */
.chart-editor { display: flex; flex-direction: column; gap: 1rem; }
.chart-editor .panel { margin: 0; }
.chart-meta { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.chart-meta label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.chart-meta label.grow { flex: 1 1 16rem; }
.chart-toolbar { flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.chart-toolbar label.small { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.tb-sep { width: 1px; height: 1.6rem; background: var(--line); margin: 0 0.25rem; }
.chart-entry { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-top: 0.8rem; }
.chart-entry label.grow { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.chord-input { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
.chord-palette { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.55rem; }
.palette-chip b { color: var(--accent); margin-right: 0.2rem; }
.chart-options { flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; margin-bottom: 0.8rem; }
.chart-options label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.chart-options label.check { flex-direction: row; align-items: center; }
.chart-cells { display: grid; gap: 0.2rem; align-items: end; width: 100%; }
.chart-cell { min-height: 3.2rem; display: flex; flex-direction: column; justify-content: flex-end; }
.chart-cell.empty { border: 0; background: none; padding: 0; }
.chart-view.editable .chart-cell.empty { cursor: pointer; border-radius: 6px; }
.chart-view.editable .chart-cell.empty:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.chart-slot { display: block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line); margin: 0 0 0.8rem 0.3rem; }
.chart-cell.selected { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.chart-cell.bad { border: 0; background: #ffe7e2; border-radius: 6px; cursor: pointer; }
.chart-bad { color: #c62828; font-weight: 800; text-decoration: wavy underline; }
.chart-view .ls-chord { min-width: 0; }
.chart-view .ls-root { font-size: 1.75rem; }
.chart-view .ls-quality { font-size: 0.95rem; }
.ls-bar.selected { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.ls-bar.rep-start { border-left: 6px double var(--ink); }
.ls-bar.rep-start::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); box-shadow: 0 -12px 0 var(--ink); transform: translateY(2px); }
.ls-bar.rep-end { border-right: 6px double var(--ink); }
.ls-bar.rep-end::after { content: ""; position: absolute; right: 4px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); box-shadow: 0 -12px 0 var(--ink); transform: translateY(2px); }
.ls-ending { position: absolute; top: 0.2rem; left: 2.2rem; font-size: 0.78rem; font-weight: 900; color: var(--ink); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); padding: 0 0.6rem 0 0.25rem; }
.chart-problems { margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fff1ee; color: #8a2a1c; }
.chart-problems ul { margin: 0.3rem 0 0 1.1rem; padding: 0; }
.chart-text textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; }
.chart-text summary { cursor: pointer; font-weight: 800; margin-top: 0.6rem; }
.chart-list { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.35rem; }
.chart-list li { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.chart-title { margin: 0; }
.chart-title-row { align-items: flex-start; gap: 1rem; flex-wrap: wrap; }

/* Scales & Modes: "How it sounds, and where to use it" folds out under the description. */
.scale-more { margin: 0.4rem 0 1rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent-soft, #ece8ff) 45%, var(--panel)); }
.scale-more > summary { cursor: pointer; list-style: none; padding: 0.7rem 1rem; display: flex; align-items: center; gap: 0.6rem; font-weight: 900; font-size: 1.05rem; color: var(--ink); }
.scale-more > summary::-webkit-details-marker { display: none; }
.scale-more > summary::before { content: ""; width: 0.5rem; height: 0.5rem; margin: 0 0.25rem 0 0.1rem; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.scale-more[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.scale-more > summary:hover .scale-more-title { color: var(--accent); }
.scale-more-body { padding: 0 1rem 0.6rem 2.15rem; }
.scale-more-body p { margin: 0.35rem 0 0.6rem; }

/* ---- Arpeggio play-along ---- */
.pa-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.arp-box { width: 100%; max-width: 132px; height: auto; display: block; margin-top: 0.2rem; }
.arp-box .grid { stroke: #8a80b3; stroke-width: 1; }
.arp-box .nut { fill: var(--ink); }
.arp-box .fret-label { font-size: 8px; fill: var(--muted); text-anchor: end; font-weight: 700; }
.arp-box .dot circle { fill: var(--note); }
.arp-box .dot.root circle { fill: var(--root); }
.arp-box .dot text { font-size: 6.2px; fill: #fff; text-anchor: middle; font-weight: 800; }
.arp-box .dot.now circle { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.arp-box .dot.now text { fill: var(--ink); }
.arp-box.dim { opacity: 0.55; }
.pa-sound { margin-top: 0.8rem; }

/* ---- Lead sheet v2 with a diagram under each chord (play-along v2) ---- */
.pa-show { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin: 0 0 0.8rem; }
.pa-show label { font-size: 0.85rem; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.pa-show label:has(input:disabled), .pa-show label:has(select:disabled) { opacity: 0.5; }
.ls2 { margin-top: 0.6rem; }
.ls2.with-below .ls-bar { justify-content: flex-start; padding: 0.3rem 0.45rem 0.4rem 0.55rem; min-height: 0; }
.ls2.with-below .ls-section { top: 0.3rem; left: 0.3rem; }
.ls2.with-below .ls-num { top: 0.35rem; }
.ls2.with-below .ls-chords { flex-wrap: nowrap; align-items: flex-start; justify-content: space-around; gap: 0.4rem; }
.ls2.with-below .ls-chord { align-items: center; border-bottom-width: 0; padding: 0; flex: 1; min-width: 0; }
/* The header line: name and numeral side by side, underlined in the chord's color like the chart. */
.ls-head { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0 0.2rem 0.1rem; border-bottom: 3px solid var(--ls-color); border-radius: 2px; max-width: calc(100% - 3.2rem); white-space: nowrap; }
.ls2.with-below .ls-root { font-size: 1.45rem; }
.ls2.with-below .ls-acc { font-size: 0.85rem; }
.ls2.with-below .ls-quality { font-size: 0.9rem; }
.ls2.with-below .ls-head .ls-roman { margin: 0; font-size: 0.75rem; }
.ls2.with-below .ls-chords.split .ls-root { font-size: 1.15rem; }
.ls2.with-below .ls-chords.split .ls-quality { font-size: 0.78rem; }
.ls2.with-below .ls-chords.split .ls-head { max-width: 100%; }
.ls2 .ls-chord.no-symbol { padding-top: 1.2rem; }
.ls-below { display: flex; justify-content: center; width: 100%; margin-top: 0.15rem; }
.pa-diagram { display: flex; flex-direction: column; align-items: center; width: 100%; }
.ls2.with-below .arp-box { max-width: 168px; }
.ls2 .ls-chords.split .arp-box { max-width: 112px; }
.ls2.with-below .ls-chord.now { background: transparent; box-shadow: none; }
.ls2.with-below .ls-chords:not(.split) .ls-chord.now { background: transparent; }

/* Play-along v2: transport at the top of the board, the neck under the chart */
.pa-board > .transport-bar:first-child { margin-top: 0; }
.pa-board .pa-sound { margin: 0.7rem 0 0.9rem; }
.pa-neck2 { margin-top: 1rem; }
.pa-neck-title { margin: 0 0 0.35rem; display: flex; align-items: baseline; gap: 0.45rem; }
.pa-neck-title b { font-size: 1.15rem; }
/* The dark neck (play-along): a dark board, light strings and frets, notes colored like the diagrams in the bars. */
.fretboard.dark { width: 100%; max-width: none; }
.fretboard.dark .board { fill: #17131f; }
.fretboard.dark .nut { stroke: #e9e4d8; stroke-width: 6; }
.fretboard.dark .fret { stroke: #9a96a3; stroke-width: 2; }
.fretboard.dark .string { stroke: #cfc9bf; }
.fretboard.dark .marker { fill: #d8d4cc; opacity: 0.85; }
.fretboard.dark .fret-number { font-size: 13px; font-weight: 700; }
.fretboard.dark .note circle { fill: var(--note); stroke: #17131f; stroke-width: 1.5; }
.fretboard.dark .note.root circle { fill: var(--root); }
.fretboard.dark .note text, .fretboard.dark .note.root text { font-size: 11px; font-weight: 900; fill: #fff; }
.fretboard.dark .note.now circle { fill: #fff; stroke: var(--note); stroke-width: 4; }
.fretboard.dark .note.root.now circle { stroke: var(--root); }
.fretboard.dark .note.now text { fill: var(--ink); }

/* Arpeggios from the 3rd, 5th, 7th: dots named against the chord; extensions green, avoid notes amber, the chord's root faint */
:root { --ext: #2e9d6a; --avoid: #d08a16; }
.arp-box .dot.tone circle { fill: var(--note); }
.arp-box .dot.ext circle, .fretboard .note.ext circle { fill: var(--ext); }
.arp-box .dot.avoid circle, .fretboard .note.avoid circle { fill: var(--avoid); }
.arp-box .dot.root.ext circle, .arp-box .dot.root.tone circle, .fretboard .note.root.ext circle, .fretboard .note.root.tone circle { fill: var(--root); }
.fretboard .ghost circle { fill: none; stroke: #e9e4d8; stroke-width: 2; stroke-dasharray: 3 3; opacity: 0.75; }
.fretboard .ghost text { font-size: 11px; font-weight: 800; fill: #e9e4d8; opacity: 0.75; text-anchor: middle; }
.pa-sub { font-size: 0.8rem; font-weight: 800; color: var(--ink); margin: 0.1rem 0 0; }
.pa-caution { margin: 0 0 0.8rem; padding: 0.55rem 0.8rem; border-left: 4px solid var(--avoid); background: color-mix(in srgb, var(--avoid) 10%, transparent); border-radius: 8px; font-size: 0.9rem; }
.pa-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; margin: 0.2rem 0 0.4rem; }
.pa-key .k { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-left: 0.4rem; }
.pa-key .k.root { background: var(--root); } .pa-key .k.tone { background: var(--note); } .pa-key .k.ext { background: var(--ext); } .pa-key .k.avoid { background: var(--avoid); }
.pa-key .k.ghost { border: 2px dashed var(--muted); }

/* Phones: a mode button keeps its degrees and name on one line, as on a computer, just tighter (narrower degree columns,
   smaller type, less padding); degree grids of any size (8-note scales set their columns inline) narrow to fit. */
@media (max-width: 700px) {
    .mode-pick { grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.3rem 0.7rem; }
    .mode-pick-name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .degrees[style], .degree-steps[style] { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 1.9rem; }
    .mode-pick .degrees, .mode-pick .degrees[style] { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 1.4rem; font-size: 0.85rem; }
    .mode-pick .degrees > span { padding: 0; }
    .wheel-modes { width: 100%; justify-items: stretch; }
    .wheel-modes .mode-pick { display: grid; }
}

/* ---- Chord charts shared with the community ---- */
.badge.chart-status.pending { background: var(--amber-soft); color: var(--amber-ink); }
.badge.chart-status.rejected { background: var(--coral); color: var(--ink); }
.chart-share { display: flex; flex-direction: column; gap: 0.6rem; }
.chart-share .section-head h2 { margin: 0; }
.chart-list .chart-note { flex-basis: 100%; margin: 0.1rem 0 0; }
.chart-review { display: flex; flex-direction: column; gap: 0.8rem; }
.chart-review label:not(.check) { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; }

/* ---- Play-along: where each bar's arpeggio starts ---- */
.pa-barfrom { gap: 0.35rem; align-items: center; margin: 0.2rem 0 0.6rem; }
.pa-barfrom .pchip { padding: 0.15rem 0.6rem; font-size: 0.8rem; }
.pa-sub.pa-set { color: var(--accent); }
.pa-barfrom .link-button { font-size: 0.85rem; }

/* The note sounding now: a bright cyan ring and glow round the dot, which keeps its own color (start, chord tone,
   extension, avoid), so you can see both what it is and that it's playing. Last in the file so it wins over the colors. */
:root { --sounding: #22d3ee; }
.fretboard .note.now circle, .fretboard.dark .note.now circle, .fretboard.dark .note.root.now circle,
.arp-box .dot.now circle {
    stroke: var(--sounding); stroke-width: 4;
    filter: drop-shadow(0 0 5px var(--sounding));
}
.fretboard .note.now:not(.ext):not(.avoid):not(.tone):not(.root) circle { fill: var(--note); }
.fretboard .note.root.now:not(.ext):not(.avoid):not(.tone) circle { fill: var(--root); }
.arp-box .dot.now:not(.ext):not(.avoid):not(.tone):not(.root) circle { fill: var(--note); }
.arp-box .dot.root.now:not(.ext):not(.avoid):not(.tone) circle { fill: var(--root); }
.fretboard .note.now text, .fretboard.dark .note.now text, .arp-box .dot.now text { fill: #fff; }
.fretboard .note.now circle, .arp-box .dot.now circle { transform-box: fill-box; transform-origin: center; transform: scale(1.18); }
.arp-box .dot.now circle { stroke-width: 1.8; filter: drop-shadow(0 0 2px var(--sounding)); }
.fretboard.dark .note.now circle { stroke-width: 3; }
.fretboard.dark .note.now:not(.root) circle, .fretboard.dark .note.tone.now:not(.root) circle { fill: var(--note); }
.fretboard.dark .note.root.now circle { fill: var(--root); }
.fretboard.dark .note.ext.now:not(.root) circle, .fretboard .note.ext.now:not(.root) circle, .arp-box .dot.ext.now:not(.root) circle { fill: var(--ext); }
.fretboard.dark .note.avoid.now circle, .fretboard .note.avoid.now circle, .arp-box .dot.avoid.now circle { fill: var(--avoid); }

/* The chord's own root, when the arpeggio starts from another note: pink, so it stands out from the strings on the
   neck and from the white page in the key. */
:root { --chord-root: #ff4fa3; }
.fretboard .ghost circle { fill: #9c1f5f; stroke: var(--chord-root); stroke-width: 2.5; stroke-dasharray: 4 3; opacity: 1; }
.fretboard .ghost text { fill: #fff; opacity: 1; }
.pa-key .k.ghost { border: 2px dashed var(--chord-root); background: #9c1f5f; }

/* Open strings named in the small arpeggio boxes; the dark neck's strings named beside the nut */
.arp-box .dot.open text { font-size: 4.6px; }
.fretboard.dark .string-label { fill: #5a5285; font-weight: 800; font-size: 12px; }

/* A page's own control at the right-hand end of the transport: the play-along's fold for its sound settings */
.tb-end { margin-left: auto; display: inline-flex; align-items: center; }
.tb-fold { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.tb-fold:hover { background: #fff; }
.tb-fold svg { width: 26px; height: 26px; stroke: currentColor; transition: transform 0.15s ease; }
.tb-fold.open svg { transform: rotate(180deg); }
.pa-sound[hidden] { display: none !important; }
.transport-bar:has(.tb-end) .tb-loop { margin-left: 0; }

/* ---- Scale finder ---- */
.sf-pick { display: flex; flex-direction: column; gap: 0.8rem; }
.sf-notes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.35rem; }
.sf-note { padding: 0.55rem 0; font-size: 0.95rem; text-align: center; white-space: nowrap; }
.sf-note:nth-child(2), .sf-note:nth-child(4), .sf-note:nth-child(7), .sf-note:nth-child(9), .sf-note:nth-child(11) { font-size: 0.78rem; }
.sf-note.home { box-shadow: 0 0 0 3px var(--root); }
@media (max-width: 700px) { .sf-notes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sf-tools { align-items: center; gap: 0.8rem; }
.sf-results { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 900px) { .sf-results { grid-template-columns: 1fr; } }
.sf-list h2 { font-size: 1.05rem; margin: 0.2rem 0 0.4rem; }
.sf-matches { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; gap: 0.15rem; }
.sf-matches li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline; padding: 0.25rem 0.5rem; border-radius: 8px; }
.sf-matches li.on { background: var(--tint); }
.sf-match { font-weight: 800; text-align: left; }
.sf-chosen h3 { margin: 1rem 0 0.4rem; }
.sf-chords td { vertical-align: middle; }
.sf-chord { margin: 0.15rem 0.25rem 0.15rem 0; color: var(--ink); }

/* ---- Scales by mood ---- */
.sm-moods { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.8rem; }
.sm-mood { font-size: 0.9rem; padding: 0.4rem 0.9rem; }
.sm-about p { margin: 0.2rem 0; }
.sm-tip { padding: 0.5rem 0.8rem; border-left: 4px solid var(--accent); background: var(--tint); border-radius: 8px; }
.sm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
/* Every row has its degrees and steps, in a column wide enough for eight so the tags line up row to row. */
.sm-row { display: grid; grid-template-columns: auto minmax(0, 1.2fr) 21rem minmax(0, 1fr) 120px; gap: 0.7rem; align-items: center; padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--line); }
.sm-name { display: flex; flex-direction: column; min-width: 0; }
.sm-degrees { overflow: visible; }   /* the column grows to the widest scale (the eight-note bebops), so nothing scrolls */
.sm-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.sm-tag { font-size: 0.72rem; font-weight: 800; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--tint); color: var(--muted); }
.sm-tag.on { background: var(--accent); color: #fff; }
/* Dark to bright: deep violet through lilac to amber, and a white knob with an ink ring that reads at either end. */
.sm-bright { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #4a3a8f, #a994ff, #ffd36b); position: relative; margin: 4px 7px; }
.sm-bright span { position: absolute; inset: 0 auto 0 0; background: transparent; }
.sm-bright span::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); box-sizing: border-box; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
@media (max-width: 700px) { .sm-row, .sm-row.detail { grid-template-columns: auto 1fr; } .sm-tags, .sm-bright, .sm-degrees { grid-column: 2; } .sm-degrees { overflow-x: auto; } }
.sm-map { width: 100%; height: auto; display: block; }
.sm-map-field { fill: color-mix(in srgb, var(--tint) 60%, transparent); stroke: var(--line); }
.sm-map-axis { stroke: var(--line); stroke-dasharray: 4 5; }
.sm-map-region { font-size: 15px; font-weight: 900; fill: var(--muted); opacity: 0.55; }
.sm-map-region.end, .sm-map-axis-label.end { text-anchor: end; }
.sm-map-axis-label { font-size: 12px; font-weight: 800; fill: var(--muted); }
.sm-dot { cursor: pointer; }
.sm-dot circle { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: none; }
.sm-dot.named circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.sm-dot:hover circle, .sm-dot.on circle { fill: var(--root); }
.sm-dot.on circle { stroke: var(--ink); stroke-width: 2.5; }
.sm-dot-label { font-size: 11px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.sm-map-panel .sm-list { margin-top: 0.6rem; }

/* The whole bar of a lead sheet can be clicked (its first chord), not just the chord names */
.ls-bar.clickable { cursor: pointer; }
.ls-bar.clickable:hover:not(.now) { background: color-mix(in srgb, var(--ls-tint) 7%, transparent); }
.sm-dot-label.end { text-anchor: end; }
.footer-credit { font-size: 0.75rem; opacity: 0.75; }

/* Challenge cards: the line under the question cut to three lines, with "more…" */
.challenge .clamp-wrap { margin: 0 0 0.6rem; }
.challenge .clamp-wrap p { margin: 0; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-wrap.open .clamp { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.clamp-wrap .more-btn { display: none; padding: 0; margin-top: 0.1rem; }
.clamp-wrap.clamped .more-btn, .clamp-wrap.open .more-btn { display: inline; }

/* Play-along: the first settings row stays; its fold (at the end of the row) hides the rest */
.pa-setup-fold { margin-left: auto; align-self: flex-end; margin-bottom: 0.1rem; }
.pa-setup[hidden] { display: none !important; }
.pa-toolbar-more { margin-top: 0.9rem; }

/* Chord chart: Chart / Circle at the right-hand end of the player */
.tb-end { gap: 0.5rem; }
.tb-end .cc-view { display: inline-flex; gap: 0.3rem; margin: 0; }
#cc-sound[hidden] { display: none !important; }
.chord-circle-board .pa-head { margin: 0.2rem 0 0.5rem; }
/* the circle's column is wide enough for the player and Chart / Circle on one line */
.chord-circle-layout:not(.as-chart) { grid-template-columns: minmax(0, 700px) minmax(0, 1fr); }
.chord-circle-layout:not(.as-chart) .chord-circle { max-width: 560px; margin: 0 auto; display: block; }
@media (max-width: 900px) { .chord-circle-layout:not(.as-chart) { grid-template-columns: 1fr; } }

/* A tight transport bar (the Chord chart's circle view, a phone) drops the "Loop" word and "Bar" so nothing wraps */
.transport-bar { container-type: inline-size; }
@container (max-width: 700px) {
    .tb-readout .tb-unit { display: none; }
}
/* Only a really tight bar (a phone) drops the "Loop" word: the Chord chart keeps the full Loop pill. */
@container (max-width: 470px) {
    .tb-loop-text { display: none; }
    .tb-loop { padding: 0.35rem 0.5rem; }
}
/* Each dot in a key stays on the same line as its words */
.pa-key-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; margin-right: 0.4rem; }
.pa-key-item .k { margin-left: 0; }
@media (max-width: 600px) { .pa-key-item { white-space: normal; } }
/* The circle view needs the full width for its player until the window is wide */
@media (max-width: 1250px) { .chord-circle-layout:not(.as-chart) { grid-template-columns: 1fr; } }

/* Backing tracks on the scale pages: folded to a heading until opened */
.backing-head { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.backing-head h2 { margin: 0; }
.backing-head .muted { flex: 1; }
.backing-head .tb-fold { flex: none; }
.backing.open .backing-head { margin-bottom: 0.6rem; }
.backing > div[hidden] { display: none !important; }

/* The player and its opened sound settings read as one block: the same tint runs on under the bar */
.pa-board .pa-sound { margin: 0; padding: 0.3rem 1.2rem 0.9rem; background: var(--accent-soft, #ece8ff); border-radius: 0 0 22px 22px; }
.pa-board .transport-bar:has(+ .pa-sound:not([hidden])) { border-radius: 24px 24px 0 0; padding-bottom: 0.6rem; }
.pa-board .pa-sound:not([hidden]) + * { margin-top: 0.9rem; }

/* Tuner: Start on top, the settings folded under it */
.tuner-head { margin-bottom: 0.4rem; }
.tuner-head h1 { margin: 0; }
.pitch-input.button-first .pitch-buttons { margin-bottom: 0.6rem; }
.tuner-side .pitch-input.button-first .pitch-buttons { justify-content: center; }   /* the tuner's Start / Stop, centred in its panel */
.pitch-input div[hidden], #tuner-settings[hidden] { display: none !important; }
.pitch-input label .link-button { margin-top: 0.2rem; align-self: flex-start; }
/* Scales by mood: the view switch sits on the same line as the dropdowns beside it */
.sm-toolbar { align-items: center; }
.strum-feel { display: inline-flex; align-items: center; gap: 0.5rem; }
.strum-feel-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.strum-feel .seg-toggle { margin-bottom: 0; }
.pattern-pick { align-self: flex-end; min-height: 2.5rem; }
/* The Scales table's degrees and intervals, each opening the Intervals page on it. */
.iv-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.iv-link:hover { color: var(--accent); text-decoration-style: solid; }
.iv-explain { margin: 0.5rem 0 0; }
/* A segmented toggle with its label above it, in a toolbar, like the labelled dropdowns beside it. */
.tb-field { display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.tb-field-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); text-align: center; }   /* centred over its segments */
.tb-field .seg-toggle { margin-bottom: 0; height: 2.5rem; box-sizing: border-box; align-items: stretch; }
.note-values .note-sym { font-size: 1.25rem; line-height: 1; vertical-align: -0.12em; margin-right: 0.15rem; }
/* A note value in symbols (NoteSymbol.razor): a single eighth or sixteenth with its flags, the triplet beamed with its 3 */
.note-sym { display: inline-flex; align-items: center; }
.note-svg { height: 1.35em; width: auto; vertical-align: -0.3em; }
/* A toggle of note values: each symbol and its name centred on one line */
.note-values button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.note-values .note-sym { margin: 0; vertical-align: 0; }
.note-values .note-svg { display: block; vertical-align: 0; }
.fxb-clear { margin-left: auto; }
/* A preset's card: its tags along the bottom; the Erasmus picks group with the site's logo */
.fxb-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: auto; padding-top: 0.35rem; padding-right: 2.7rem; }
.fxb-tag { font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--tint); color: var(--muted); }
img.fxb-gicon-erasmus { width: 16px; height: 16px; }
.preset-pick-btn { min-width: 9rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The drums picker's form to save the groove, above the cards */
.fxb-save { border: 2px dashed var(--accent); border-radius: 12px; background: var(--tint); padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.fxb-save .preset-save { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fxb-save .preset-save .input { flex: 1 1 12rem; }
.fxb-save p { margin: 0; }
.admin-pattern-groove { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0; }
.fxb-tile.is-action { border-style: dashed; }
.fxb-tile a.fxb-pick { text-decoration: none; color: var(--ink); }
.note-svg-triplet { height: 1.4em; }
.note-values button:disabled { opacity: 0.55; cursor: default; }
/* The metronome: Beats per bar and Subdivision, then Accent beat 1 and the sounds on a row of their own, then Start. */
.metro-controls { flex-wrap: wrap; }
.metro-controls > .metro-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.metro-controls > .metro-accent { align-self: center; gap: 0.6rem; margin-right: 1rem; padding-bottom: 0; }
/* Accent beat 1 and the Sounds button on one centre line (the general .metro-controls > label.check rule sits switches on the row's bottom edge) */
.metro-controls > label.check.metro-accent { align-self: center; min-height: 0; padding-bottom: 0; }
.metro-controls > .snd-drawer { align-self: center; }
.metro-practice-opts { gap: 0.6rem 2rem; }
.metro-practice-opts label.check.label-first, .om-switches label.check.label-first { gap: 0.6rem; }
.pattern-pick .pattern-pick-btn { min-width: 12rem; max-width: 18rem; }
.click-pick-btn { width: 100%; min-width: 9rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a rhythm tool's click sound, opening the browser of them */
.fxb-glyphs { display: block; margin-top: 0.2rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxb-tile .fxb-glyphs { margin-top: auto; padding-top: 0.35rem; }   /* the pattern sits on the card's bottom edge, level across a row of cards */
.fxb-glyphs .pg-row { display: inline-flex; gap: 0.05rem; letter-spacing: 0; }
.fxb-glyphs .pg { display: inline-flex; flex-direction: column; align-items: center; min-width: 0.85em; line-height: 1.15; }
.fxb-glyphs .pg small { font-size: 0.68rem; font-weight: 800; color: var(--muted); }
.fxb-glyphs .pg.sep { color: var(--line); }
.fxb-glyphs b { color: var(--accent); }
.fxb-pick-icon { width: 14px; height: 15px; flex: none; }
.fxb-avatar { width: 20px; height: 20px; margin-right: 0; flex: none; box-shadow: none; }
.fxb-avatar.initials { font-size: 0.55rem; }
/* Favorites and Recent: the star and clock from the bar under the main menu */
.fxb-gicon { width: 15px; height: 15px; flex: none; display: inline-grid; place-items: center; }
.fxb-gicon svg { width: 15px; height: 15px; }
.fxb-gicon-fav svg { fill: #f5b301; stroke: none; }
.fxb-gicon-recent svg { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
/* The ☆ on each card, top right: hollow, solid gold once it's a favorite */
.fxb-star { position: absolute; top: 0.35rem; right: 0.4rem; z-index: 1; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: #b9b2d3; }
.fxb-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fxb-star:hover { color: #f5b301; }
.fxb-star.on { color: #f5b301; }
.fxb-star.on svg { fill: #f5b301; }
.fxb-tile.can-fav .fxb-name { padding-right: 1.5rem; }
/* The picker window (PickerDialog): moved by its title bar, resized from the corner; where it's put, it stays */
.picker-dialog .picker-handle { cursor: move; user-select: none; touch-action: none; }
.picker-dialog .picker-handle input, .picker-dialog .picker-handle button, .picker-dialog .picker-handle label { cursor: auto; }
.picker-dialog .picker-handle button { cursor: pointer; }
.picker-dialog.placed { transform: none; }
.picker-dialog .fxb-acts { margin-left: auto; }   /* the buttons on the right (the Use button names what's picked) */
.picker-dialog.moving, .picker-dialog.resizing { user-select: none; }
.picker-dialog.moving { opacity: 0.96; }
.picker-grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 2;
    background: linear-gradient(135deg, transparent 0 45%, var(--muted) 45% 52%, transparent 52% 62%, var(--muted) 62% 69%, transparent 69% 79%, var(--muted) 79% 86%, transparent 86%); opacity: 0.55; }
.picker-grip:hover { opacity: 1; }
.fxb-avatar-wrap { display: inline-flex; flex: none; }
.fxb-avatar-wrap .avatar { width: 20px; height: 20px; margin: 0; box-shadow: none; }
.fxb-avatar-wrap .avatar.initials { font-size: 0.55rem; }
@media (max-width: 700px) {
    .picker-dialog .picker-handle { cursor: auto; }
    .picker-grip { display: none; }
}
/* A community pattern's sharer on its card (photo and name, the name to their community page), and how many have picked it */
.fxb-author { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; color: var(--ink); }
.fxb-author .avatar { width: 18px; height: 18px; margin: 0; box-shadow: none; flex: none; }
.fxb-author .avatar.initials { font-size: 0.5rem; }
.fxb-author a, .fxb-author span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fxb-tile .fxb-uses { color: var(--muted); font-size: 0.72rem; }

/* The community page (/community, /community/{id}) */
.community-back { margin: 0 0 0.5rem; }
.community-author { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.community-author h1 { margin: 0; }
.community-author p { margin: 0.2rem 0 0; }
.avatar.avatar-big { width: 72px; height: 72px; margin: 0; font-size: 1.5rem; }
.community-h2 { margin: 1.2rem 0 0.6rem; }
.community-people { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.community-person { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem 0.45rem 0.5rem; border: 2px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; }
.community-person:hover { border-color: #8f7be8; }
.community-person .avatar { margin: 0; }
.community-person span { display: flex; flex-direction: column; line-height: 1.15; }
.community-person small { color: var(--muted); font-size: 0.75rem; }
.community-section { margin-bottom: 1rem; }
.community-section h2 small { font-size: 0.85rem; font-weight: 700; margin-left: 0.3rem; }
.community-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.8rem; }
.community-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); }
.community-card h3 { margin: 0; font-size: 1.05rem; }
.community-card p { margin: 0; }
.community-glyphs { margin: 0.3rem 0; font-size: 1rem; }
.community-card-foot { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.7rem; }
.community-by { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 0.85rem; color: var(--ink); text-decoration: none; }
.community-by:hover { color: var(--accent); }
.community-by .avatar { width: 22px; height: 22px; margin: 0; box-shadow: none; }
.community-by .avatar.initials { font-size: 0.55rem; }
.community-try { margin-left: auto; }
/* Favorites: drag the cards into order */
.fxb-tile.can-drag { cursor: grab; }
.fxb-tile.can-drag .fxb-pick { cursor: grab; }
.fxb-tile.dragging { opacity: 0.45; }
.fxb-tile.drop-here { border-color: #f5b301; box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.25); }
/* A new pattern: the note and the save box right under it */
.strum-new { margin: 0.4rem 0 0.6rem; padding: 0.6rem 0.8rem; border: 2px dashed var(--accent); border-radius: 12px; background: var(--tint); }
.strum-new p { margin: 0 0 0.4rem; }   /* the Community group's Erasmus pick */
/* My patterns: where each stands with the community, and the share switch under the save box. */
.preset-status { font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 0.05rem 0.5rem; white-space: nowrap; }
.preset-status.s-private { background: var(--tint); color: var(--muted); }
.preset-status.s-pending { background: #fff1d6; color: #7a4a00; }
.preset-status.s-published { background: #dcf3e3; color: #1d6b39; }
.preset-status.s-rejected { background: #fde2e2; color: #8a2a2a; }
.preset-share { margin-top: 0.4rem; }
.admin-pattern .admin-pattern-glyphs { margin: 0.4rem 0 0.2rem; font-size: 1rem; }
/* The note to the member: its label on top, the box full width under it */
.admin-pattern-note { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; margin: 0.6rem 0; font-weight: 700; }
.admin-pattern-note textarea { width: 100%; max-width: 40rem; resize: vertical; font-weight: 400; }
.admin-pattern-kind { margin: 0 0 0 auto; } .fxb-glyphs i { color: #ff7a59; font-style: normal; } .fxb-glyphs s { color: #c9c2ea; text-decoration: none; } .fxb-glyphs .sep { color: var(--line); }
.strum-feel .seg-toggle button:disabled { cursor: default; opacity: 0.55; }
.sm-toolbar .seg-toggle { margin-bottom: 0; }
.sm-toolbar > label { flex-direction: row; align-items: center; gap: 0.5rem; }   /* "Root" beside its picker, level with the view buttons */
/* Scales by mood: Sound beside its picker like Root, and the direction and Print on the same centre line. */
.toolbar.sm-toolbar > .voice-pick { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; }
.sm-toolbar > .play-direction-picker, .sm-toolbar > .print-button, .sm-toolbar > * > .print-button { align-self: center; margin: 0; }

/* Promos: a course or product a page points to */
.promo-body { display: flex; gap: 1.1rem; align-items: flex-start; }
.promo-head { margin: 0 0 0.6rem; }
.promo-headrow { display: flex; align-items: center; gap: 0.6rem; }
.promo-headrow .promo-head { flex: 1; }
.promo-fold { width: auto; height: 34px; padding: 0 0.25rem 0 0.75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.1rem; margin-bottom: 0.6rem; background: var(--tint); }
.promo-fold .promo-more { font-size: 0.85rem; font-weight: 700; }
.promo-rest { margin-top: 1rem; display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.promo-subhead { margin: 0 0 -0.5rem; }
.ad-preview .promo-body { flex-direction: column; }
.ad-preview .promo-pic, .ad-preview .promo-pic img { width: 100%; flex-basis: auto; }
.admin-ad.dim { opacity: 0.75; }
.admin-ad h2 .pill { vertical-align: middle; margin-left: 0.4rem; font-size: 0.8rem; }
.admin-ad-setup { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: grid; gap: 0.8rem; }
.admin-ad-setup h3 { margin: 0.4rem 0 0; }
.admin-placement { padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--tint); display: grid; gap: 0.4rem; }
.admin-placement .grow { flex: 1; min-width: 220px; }
.admin-condition { gap: 0.4rem; }
.admin-condition-label { font-weight: 700; min-width: 7rem; }
.promo-offer { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.promo-code { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--amber-soft); color: var(--amber-ink); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.95rem; }
.promo-code .star { color: #e3a008; animation: promo-twinkle 1.6s ease-in-out infinite; }
.promo-code .star:last-child { animation-delay: 0.8s; }
@keyframes promo-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
@media (prefers-reduced-motion: reduce) { .promo-code .star { animation: none; } }
.promo-pic { flex: 0 0 180px; }
.promo-pic img { display: block; width: 180px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--tint); }
.promo-text { flex: 1; min-width: 0; }
.promo-lead { margin: 0 0 0.3rem; font-size: 1.05rem; }
.promo-lead a { color: var(--ink); }
.promo .clamp-wrap p { margin: 0; }
.promo-actions { margin: 0.6rem 0 0; align-items: center; gap: 0.6rem; }
@media (max-width: 600px) { .promo-body { flex-direction: column; } .promo-pic, .promo-pic img { width: 100%; flex-basis: auto; } }

/* ---- Lesson planner ---- */
.planner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; margin-top: 0.8rem; }
@media (max-width: 900px) { .planner { grid-template-columns: 1fr; } }
.planner-main { display: grid; gap: 0.8rem; }
.planner-title { font-size: 1.5rem; font-weight: 900; padding: 0.5rem 0.8rem; }
.planner-for { margin: -0.4rem 0 0; }
.planner-add { position: relative; }
.planner-add > .input { width: 100%; box-sizing: border-box; font-size: 1.05rem; padding: 0.7rem 0.9rem; border-width: 2px; }
.planner-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 0.3rem; background: var(--panel); border: 2px solid var(--line); border-radius: 14px; box-shadow: 0 10px 24px rgba(43, 33, 80, 0.15); max-height: 22rem; overflow-y: auto; }
.planner-suggest li { padding: 0.45rem 0.7rem; border-radius: 10px; cursor: pointer; display: flex; gap: 0.6rem; align-items: baseline; }
.planner-suggest li.on { background: var(--tint); }
.planner-empty { margin: 0; }
.planner-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.planner-step { background: var(--panel); border-radius: var(--radius); padding: 0.7rem 0.9rem; box-shadow: 0 4px 0 var(--shadow); display: grid; gap: 0.5rem; }
.planner-step.done { opacity: 0.85; }
.planner-step-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.planner-num { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 0.85rem; flex: none; }
.planner-text { flex: 1; min-width: 12rem; }
.planner-step-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; }
.planner-min { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.planner-settings { gap: 0.8rem; align-items: flex-end; }
.planner-settings label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.planner-settings .stepper { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 12px; background: #fff; }
.planner-settings .stepper button { border: 0; background: none; font: inherit; font-weight: 900; width: 2rem; height: 2.2rem; cursor: pointer; color: var(--ink); }
.planner-settings .stepper input { width: 3.6rem; border: 0; text-align: center; font: inherit; font-weight: 800; background: none; }
.planner-note { font-size: 0.9rem; }
.planner-total { margin: 0; }
.planner-side { min-width: 0; }
.planner-side .panel:first-child { margin-top: 0; }
.planner-side .select { width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; }
.planner-side .panel > * { min-width: 0; }
.planner-side > .panel > .button { justify-self: start; }
.planner-main > label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 700; }
.planner-main > label .input { width: 100%; box-sizing: border-box; }
.planner-side .panel { display: grid; gap: 0.6rem; }
.planner-side h2 { margin: 0; font-size: 1.2rem; }
.planner-side label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; font-weight: 700; }
.planner-side label.check { flex-direction: row; align-items: flex-start; gap: 0.5rem; font-weight: 600; }
.plan-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.plan-checklist li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--line); }
.plan-checklist li.done .plan-step > a, .plan-checklist li.done .plan-step > span:first-child { text-decoration: line-through; opacity: 0.7; }
.plan-checklist input[type=checkbox] { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; }
.plan-step { display: flex; flex-direction: column; }
.plan-step > a { font-weight: 800; }
.plan-note { margin-top: 0.1rem; }

/* Admin → View as: the strip across the top while the admin sees the site as someone else. */
.viewing-as { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 1rem; background: #fff3c4; color: #5a4300; font-size: 0.9rem; border-bottom: 2px solid #f0d27a; }
.viewing-as form { margin: 0; }
.view-as-list { display: grid; gap: 0.3rem; }
.chords-chart-tools { gap: 0.8rem; align-items: center; }
.chords-chart-tools label { gap: 0.4rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.chords-chart-tools .seg-toggle { margin-bottom: 0; }

/* Chords v2: the chart's inversion chips and the focused chord's details. */
.arp-cards .diagram-card { width: 150px; }
.arp-card { cursor: pointer; }
.arp-card:hover { background: var(--tint); }
.arp-card:focus-visible { outline: 3px solid #ffd54a; }
.arp-card .chords2-title { cursor: pointer; }
.arp-cards .arp-box { margin: 0.2rem auto 0; }
.arp-tools { flex-wrap: wrap; }
.chords2-table tr.clickable { cursor: pointer; }
.chords2-title { background: none; border: 0; font: inherit; cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 8px; width: 100%; display: flex; justify-content: center; }
.chords2-title:hover { background: var(--tint); }
.chords2-card.focused { border-color: var(--accent); }
.chords2-recipe { display: block; font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.chords2-recipe code { font-size: .72rem; background: var(--tint); border-radius: 6px; padding: 0 .3rem; }
.chords2-chips { display: inline-flex; gap: 0.2rem; margin-top: 0.3rem; }
.chords2-chips button { min-width: 1.7rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 999px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 0.75rem; font-weight: 800; color: var(--muted); cursor: pointer; }
.chords2-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chords-chart .ls-bar .chords2-chips { margin-top: 0.2rem; }
.chords2-hint { margin: -0.3rem 0 0.6rem; }
.chords2-detail { margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--tint); }
.chords2-detail h3 { margin: 0; }
.chords2-detail .table { background: transparent; }
.chords2-detail tr.clickable { cursor: pointer; }
.chords2-shape-tools { gap: 1rem; margin: 0.8rem 0 0.8rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.chords2-shape-tools label.row { gap: 0.4rem; }
.chords2-shape-tools label.check { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Phones: the pager's buttons centered on their own line, the per-page choice centered under them. */
@media (max-width: 700px) {
    .pager { flex-direction: column; justify-content: center; gap: 0.6rem; }
    .pager-nav { justify-content: center; }
    .pager .pager-size { margin-left: 0; }
    .pager .pager-size .select { width: 5.5rem; min-width: 0; flex: none; }
}

/* Song Learner */
.sl { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.2rem; align-items: start; }
.sl .panel { margin-top: 0; }
.sl-side { display: grid; gap: 1rem; }
.sl-side h4 { margin: 0.9rem 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.sl-side h4:first-child { margin-top: 0; }
.sl-head { align-items: center; }
.sl-head h1 { margin: 0; }
.sl-open { position: relative; overflow: hidden; cursor: pointer; }
.sl-open input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sl-song { margin: 0.4rem 0 0.7rem; }
.sl-private { color: var(--muted); font-size: 0.85rem; margin-left: 0.4rem; }
.sl-video { width: 100%; max-height: 320px; border-radius: 10px; background: #000; margin-bottom: 0.6rem; }
.sl-wave { display: block; width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 10px; touch-action: none; cursor: crosshair; }
.sl.dropping .sl-wave { outline: 3px dashed var(--accent); outline-offset: 3px; }
.sl-transport { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.7rem; }
.sl-play { min-width: 5.5rem; }
.sl-time { font-variant-numeric: tabular-nums; font-weight: 800; margin: 0 0.4rem; }
.sl-zoom { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.sl-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.8rem; }
.sl-speed { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 260px; font-weight: 700; }
.sl-speed span { white-space: nowrap; min-width: 7.5rem; }
.sl-speed input { flex: 1; }
.sl-chips { display: inline-flex; gap: 0.3rem; }
.sl-keys { font-size: 0.8rem; margin: 0.9rem 0 0; }
.sl-keys kbd { font: inherit; font-weight: 800; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.3rem; }
.sl-loop-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sl-ab { display: inline-flex; align-items: center; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.sl-ab .button { padding: 0.1rem 0.45rem; }
.sl-check { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; }
.sl-save-loop { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.sl-save-loop .input { flex: 1; min-width: 0; }
.sl-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.sl-list li { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.sl-list li.on { border-color: var(--accent); background: var(--accent-soft); }
.sl-pick { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0.35rem 0.55rem; font: inherit; color: inherit; cursor: pointer; font-size: 0.9rem; }
.sl-pick.static { cursor: default; }
.sl-best { float: right; font-weight: 800; color: var(--accent); }
.sl-x { background: none; border: 0; color: var(--muted); font-size: 1.15rem; padding: 0.2rem 0.6rem; cursor: pointer; }
.sl-x:hover { color: var(--coral-deep); }
.sl-trainer { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.sl-trainer label, .sl-field { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.sl-trainer .select { min-width: 0; }
.sl-trainer p { width: 100%; margin: 0; font-size: 0.85rem; }
.sl-field { margin-top: 0.45rem; }
.sl-field .select, .sl-field input { flex: 1; min-width: 0; }
.sl-note { font-size: 0.85rem; margin: 0.3rem 0; }
@media (max-width: 900px) {
    .sl { grid-template-columns: minmax(0, 1fr); }
    .sl-wave { height: 150px; }
    .sl-zoom { margin-left: 0; }
    .sl-keys { display: none; }
}
.sl-trainer[hidden], .sl-video[hidden] { display: none; }
.sl input[type="range"] { accent-color: var(--accent); }
.sl-bar { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.85rem; }
.sl-pitch { gap: 0.6rem; }
.sl-pitch-label { font-weight: 700; min-width: 7.5rem; }
.sl-cents { display: flex; align-items: center; flex: 1 1 120px; }
.sl-cents input { width: 100%; }
.sl-tempo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sl-tempo label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.sl-tempo .input.narrow { width: 5.2rem; }
.sl-tempo .select { min-width: 0; }
.sl-tap { min-width: 4.5rem; touch-action: manipulation; user-select: none; }
.sl-tap:active { transform: scale(0.96); }
.sl-left { display: grid; gap: 1rem; min-width: 0; align-content: start; }
.sl-hear h4 { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.sl-hear-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.sl-hear-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.sl-hear-where { margin: 0.7rem 0 0.2rem; font-size: 0.85rem; }
.sl-hear-chord { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sl-hear-chord > b { font-size: 1.7rem; line-height: 1.1; }
.sl-hear-notes { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; margin-left: auto; }
.sl-note-chip { background: var(--accent); color: #fff; border-radius: 999px; padding: 0.05rem 0.55rem; font-weight: 800; font-size: 0.85rem; }
.sl-keys-svg { display: block; width: 100%; height: auto; margin: 0.3rem 0 0.6rem; }
.sl-keys-svg rect { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.sl-keys-svg rect.black { fill: var(--ink); stroke: none; }
.sl-keys-svg rect.on { fill: var(--accent); }
.sl-keys-svg rect.black.on { fill: var(--coral-deep); }
.sl-keys-svg text { font-size: 7px; fill: var(--muted); font-weight: 700; }
.sl-tuning, .sl-key { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0 0; font-size: 0.92rem; }
.sl-key a { font-weight: 700; font-size: 0.85rem; }
.sl-bars { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.sl-bars-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sl-bars-head .button { margin-left: auto; }
.sl-bar-list { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 0.3rem; }
.sl-bar-list button { width: 100%; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.5rem; font: inherit; font-weight: 800; color: inherit; cursor: pointer; }
.sl-bar-list button:hover { border-color: var(--accent); }
.sl-bar-list .muted { font-weight: 700; font-size: 0.75rem; margin-right: 0.25rem; }
.sl-hear-head .seg-toggle { margin: 0 0 0 auto; }
.sl-hear-head .seg-toggle button { padding: 0.2rem 0.8rem; font-size: 0.85rem; }
.sl-note-chip.dim { background: var(--line); color: var(--muted); }
.sl-written { margin-top: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.sl-written-open { display: inline-flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.sl-roll { display: block; width: 100%; height: auto; max-height: 260px; margin: 0.6rem 0 0.3rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.sl-roll rect { fill: var(--line); cursor: pointer; }
.sl-roll rect.mel { fill: var(--accent); }
.sl-roll rect.c-row { fill: var(--accent-soft); opacity: 0.5; cursor: default; }
.sl-roll rect.head { fill: var(--coral-deep); cursor: default; }
.sl-sep { font-size: 0.85rem; margin-left: 0.2rem; }
.sl-lesson { background: var(--accent-soft); border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0 0 0.7rem; font-size: 0.92rem; line-height: 1.5; }
.sl-lesson > span { display: block; }
.sl-lesson-best { font-weight: 800; color: var(--accent); }

/* Email-list signup box */
.signup { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1.5rem 0 0; }
.signup-done { border-left-color: var(--mint-ink, #1f7a52); }
.signup-head { font-weight: 900; font-size: 1.05rem; margin: 0 0 0.2rem; }
.signup-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
.signup-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.signup-row .input { flex: 1 1 220px; min-width: 0; }
.signup-err { color: var(--coral-deep); font-size: 0.85rem; margin: 0.4rem 0 0; }
.signup-x { position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; }
.signup-x:hover { color: var(--ink); }
/* On the Song Learner it sits in the side column; give it room */
.sl-side .signup { margin-top: 0; }

/* Reactive ear training */
.react { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.react .panel { margin-top: 0; }
.react-stage { display: flex; flex-direction: column; }
.react-chord { display: flex; align-items: center; justify-content: center; min-height: 190px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); margin: 0.6rem 0 1rem; transition: background 0.2s, border-color 0.2s; }
.react-chord.on { border-color: var(--accent); background: var(--accent-soft); }
.react-name { font-size: 3.4rem; font-weight: 900; color: var(--ink); letter-spacing: -0.01em; }
.react-q { font-size: 3.4rem; font-weight: 900; color: var(--muted); }
.react-cue { color: var(--muted); font-weight: 700; }
.react-transport { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.react-play { min-width: 6rem; }
.react-reveal { font-size: 1.5rem; font-weight: 900; }
.react-controls h4 { margin: 0.9rem 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.react-controls h4:first-child { margin-top: 0; }
.react-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.react-level { margin: 0.2rem 0 0; font-size: 0.9rem; }
.react-gaps { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.react-check { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; margin-top: 0.6rem; }
.react-hint { margin-top: 0.9rem; }
@media (max-width: 820px) { .react { grid-template-columns: minmax(0, 1fr); } }

/* "On this day" guitarist ribbon */
.almanac { background: var(--ink); color: #fff; font-size: 0.85rem; }
.almanac-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 30px; padding: 0.25rem 0.4rem 0.25rem 0.9rem; position: relative; flex-wrap: wrap; }
.almanac-label { flex-shrink: 0; font-weight: 800; white-space: nowrap; }
.almanac-cake { margin-right: 0.15rem; }
.almanac-summary { font-weight: 600; min-width: 0; }
.almanac a { color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.almanac a:hover { color: var(--amber, #ffb86b); }
.almanac-style { margin-left: 0.5rem; white-space: nowrap; color: var(--amber, #ffb86b) !important; }
.almanac-summary .almanac-rot { display: none; }
.almanac-summary .almanac-rot.on { display: inline; }
.almanac-chevron { margin-left: auto; margin-right: 1.9rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; cursor: pointer; color: #fff; opacity: 0.7; user-select: none; transition: transform 0.2s, background 0.2s, opacity 0.2s; }
.almanac-chevron svg { width: 0.95rem; height: 0.95rem; display: block; }
.almanac-chevron:hover { opacity: 1; background: rgba(255,255,255,0.16); }
.almanac-exp:checked ~ .almanac-bar .almanac-chevron { transform: rotate(180deg); opacity: 1; }
.almanac-x { position: absolute; right: 0.4rem; top: 0.35rem; background: none; border: 0; color: #fff; opacity: 0.65; font-size: 1.1rem; line-height: 1; padding: 0.2rem 0.5rem; cursor: pointer; }
.almanac-x:hover { opacity: 1; }
.almanac-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; background: rgba(255,255,255,0.06); }
.almanac-exp:checked ~ .almanac-panel { max-height: 50vh; }
.almanac-prow { padding: 0.35rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.12); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .almanac-panel, .almanac-chevron { transition: none; } }
@media (max-width: 560px) { .almanac { font-size: 0.8rem; } .almanac-style { margin-left: 0; display: inline-block; } }

/* "In the style of" cards */
.style-card { max-width: 820px; margin: 0 auto; }
.style-card .kicker { color: var(--accent); font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; margin: 0; }
.style-card h1 { margin: 0.2rem 0 0.4rem; }
.style-card h2 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; }
.style-moves { display: grid; gap: 0.6rem; }
.style-move { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 1rem; }
.style-move h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.style-move p { margin: 0; color: var(--muted); }
.style-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.style-jam { background: var(--accent-soft); border-radius: 12px; padding: 0.9rem 1.1rem; margin-top: 1.2rem; }
.style-jam h2 { margin-top: 0; }
.style-note { margin-top: 1.6rem; }

/* Admin almanac preview: hold the banner in flow so the admin can see it on the page */
.almanac-stage { position: relative; border: 1px dashed var(--line); border-radius: 10px; overflow: hidden; margin: 0.4rem 0; }
.almanac-stage .almanac-preview { position: static; }
table .is-today > td { background: var(--accent-soft); }

/* Creator courses (e.g. the Alfred Potter preview) */
.course { max-width: 860px; margin: 0 auto; }
.course .kicker { color: var(--accent); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; font-size: .76rem; margin: 0; }
.course h1 { margin: .25rem 0 .4rem; }
.course h2 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.course-preview-flag { max-width: 860px; margin: 0 auto 1rem; background: color-mix(in srgb, var(--now) 15%, var(--panel)); border: 1px solid var(--now); border-radius: 12px; padding: .8rem 1rem; font-size: .95rem; }
.course-support { background: var(--accent-soft); border-radius: 12px; padding: 1rem 1.2rem; }
.course-support h2 { margin-top: 0; }
.course-toc { display: grid; gap: 1rem; }
.course-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
.course-sec h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.course-sec ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.course-sec li a { font-weight: 700; }
.course-sec .pill { margin-left: .4rem; }
.course-note { margin-top: 1.6rem; }
.lesson-nav { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 1.2rem 0; }

/* Sequence player */
.seq { display: grid; gap: 1rem; margin: 1rem 0; }
.seq-neck { overflow-x: auto; }
.seq-tab { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; font-variant-numeric: tabular-nums; }
.seq-note { min-width: 1.7rem; text-align: center; padding: .15rem .3rem; border-radius: 7px; font-weight: 700; color: var(--muted); }
.seq-note.on { background: var(--accent); color: #fff; }
.seq-gap { width: .8rem; }
/* The lesson player reuses the play-along's panel (.pa-board) and sound drawer (.pa-sound) so it looks identical. */
.seq-player { margin-top: 0; }
/* Ascending / Descending sits in the middle of the bar, centred between the play button and the tempo/loop controls. */
.seq-dir { flex: 1; display: inline-flex; justify-content: center; gap: .4rem; }
.seq-dir-btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: .85rem; padding: .4rem .9rem; border-radius: 999px; background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.seq-dir-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--accent); }
.seq-dir-btn.on { background: var(--coral); color: var(--ink); box-shadow: none; }
.seq-dir-btn:disabled { cursor: default; opacity: .75; }
.seq-tempo { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: var(--muted); }
.seq-tempo .input.narrow { width: 4rem; }
.seq-player .tb-loop { margin-left: .2rem; }
.seq-tabs { display: grid; gap: 1rem; }
.seq-tab-one { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem 0.8rem; overflow-x: auto; }
.seq-tab-label { display: block; font-size: 0.8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }

/* "Your tools" quick-access bar (pinned favourites + recently used; kept per browser) */
.quickbar { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.4rem 0.9rem; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.quickbar[hidden] { display: none; }
.qb-label { font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; margin-right: 0.1rem; }
.qb-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.qb-chip:hover { background: var(--accent); color: #fff; }
/* Pin stars on the Tools-page cards */
.tool-card-wrap { position: relative; }
.tool-fav { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--muted); opacity: 0.45; padding: 0.2rem; z-index: 2; transition: opacity 0.15s, transform 0.15s, color 0.15s; }
.tool-fav:hover { opacity: 1; transform: scale(1.15); }
.tool-fav.on { color: #f5b301; opacity: 1; }
/* A real table cell (not a flex box), so its bottom border runs the row's full height like the others. */
.practice-actions { white-space: nowrap; vertical-align: middle; }
.practice-actions > button { vertical-align: middle; }
.practice-actions > button + button { margin-left: 0.35rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.icon-btn svg { display: block; }

.table tr.row-hidden td { opacity: 0.5; }
.seq-tab-pick { background: none; border: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0 0 0.3rem; }
.seq-tab-pick:hover:not(:disabled) { color: var(--ink); }
.seq-tab-pick.on { color: var(--accent); }
.seq-tab-one.muted-tab { opacity: 0.55; }
.seq-tab-label.on { color: var(--accent); }

/* "Open in Tab editor / Neck diagrams": a small corner button on any tab or neck (OpenInTool). Quiet until hovered, tinted
   for the tool it opens: coral for tabs, mint for neck diagrams. */
.open-in-host { position: relative; }
.open-in { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 8px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); opacity: 0.7; transition: opacity 0.15s, transform 0.15s; }
.open-in:hover, .open-in:focus-visible { opacity: 1; transform: translateY(-1px); }
.open-in svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.open-in.to-tab { border-color: var(--coral); }
.open-in.to-tab svg { stroke: var(--coral-deep); }
.open-in.to-diagram { border-color: var(--mint); }
.open-in.to-diagram svg { stroke: var(--mint-ink); }
.open-in.to-diagram svg .dot { fill: var(--mint); stroke: var(--mint-ink); }
.seq-tab-one.muted-tab .open-in { opacity: 0.9; }

/* Admin: the creator-course editor (/admin/courses). */
.course-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.course-form label, .course-details > label, .course-edit-lesson > label { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 700; margin-bottom: 0.6rem; }
.course-details summary { cursor: pointer; list-style: none; }
.course-details summary h2 { display: inline; }
.course-details summary::before { content: "▸ "; color: var(--muted); }
.course-details[open] summary::before { content: "▾ "; }
.course-link-row { gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: nowrap; }
.course-link-row .input:first-child { max-width: 16rem; }
.course-consent { margin: 0.8rem 0; }
.course-edit { display: grid; grid-template-columns: minmax(220px, 290px) 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
.course-edit-list { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.course-edit-list ul { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.course-edit-list h3 { margin: 0.6rem 0 0.2rem; }
.course-edit-item { width: 100%; display: flex; justify-content: space-between; gap: 0.5rem; text-align: left; font: inherit; background: none; border: 0; border-radius: 8px; padding: 0.3rem 0.5rem; cursor: pointer; color: var(--ink); }
.course-edit-item:hover { background: var(--line); }
.course-edit-item.on { background: var(--coral); font-weight: 800; }
.course-tabs-head { margin-top: 1.2rem; }
.course-part { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem; margin-bottom: 0.8rem; }
.course-part-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.3rem; }
.course-part-head .input:first-child { flex: 1 1 12rem; }
.course-part-tab { overflow-x: auto; }
.course-add-part { gap: 0.4rem; }
@media (max-width: 800px) { .course-edit { grid-template-columns: 1fr; } .course-edit-list { position: static; max-height: none; } }

/* The quiet reconnect (App.razor, js/reconnect.js): a small toast at the bottom instead of Blazor's full-screen
   "Rejoining the server…". Hidden until Blazor says the connection dropped, and then only shown if it takes more than a
   moment, so a quick rejoin after unlocking the phone passes without a flicker. */
#components-reconnect-modal.reconnect-toast { display: none; }
#components-reconnect-modal.reconnect-toast.components-reconnect-show,
#components-reconnect-modal.reconnect-toast.components-reconnect-failed,
#components-reconnect-modal.reconnect-toast.components-reconnect-rejected {
    display: inline-flex; align-items: center; gap: 0.5rem; position: fixed; left: 50%; bottom: 1rem; z-index: 1000;
    transform: translateX(-50%); padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--ink); color: #fff;
    font-weight: 700; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    opacity: 0; animation: reconnect-in 0.25s ease 1.2s forwards;
}
@keyframes reconnect-in { to { opacity: 1; } }
.reconnect-spin { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: reconnect-spin 0.8s linear infinite; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .reconnect-spin { animation: none; } }

/* The studio mixer (MixerChannel): one row per sound. A Guitar Pro-style speaker switches the channel on and off, then
   its name, its sound, a console fader over a recessed groove (the bright tick is unity) with a level meter, and %. */
.mixer { display: flex; flex-direction: column; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0.2rem 0.8rem; }
.mx-row { display: grid; grid-template-columns: 34px auto minmax(7rem, 11rem) minmax(8rem, 1fr) 2.6rem; align-items: center; gap: 0.6rem; padding: 0.55rem 1.4rem 0.55rem 0; border-top: 1px solid var(--line); }   /* the right padding: the faders a little shorter */
.mx-row:first-child { border-top: 0; }
.mixer > .mx-note { margin: 0; padding: 0.6rem 0; border-top: 1px solid var(--line); }
/* The bass's other choices, under its channel. */
/* The bass's sound and options, on the mixer row's columns (speaker 34px, symbol 30px, picker): its box sits under the pickers. */
.mixer > .bass-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.6rem; border-top: 0; padding: 0 0 0.6rem; }   /* the switches line up with the bottom of the sound dropdown */
.mixer > .bass-more > .bass-more-label { padding-bottom: 0.6rem; }
.bass-more-label { flex: none; width: calc(34px + 30px + 0.6rem); text-align: right; font-weight: 800; color: var(--muted); }
.mixer > .bass-more > .select { flex: 0 1 11rem; width: 11rem; min-width: 7rem; }
.mixer > .bass-more:has(.bass-line-pill) { align-items: center; }   /* the line as a pill (like a percussion instrument), level with nothing else */
.mixer > .bass-more:has(.bass-line-pill) > .bass-more-label { padding-bottom: 0; }
.perc-editor-tools .bass-line-btn { min-width: 10rem; max-width: 14rem; text-align: left; padding: 0.3rem 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* which bass line, in its editor */
/* The two switches: beside the box when there's room, else on their own line under it. */
.bass-more-checks { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1.1rem; min-width: min(100%, 18rem); }
.bass-more-checks label.check { display: inline-flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.2rem; white-space: nowrap; margin: 0; padding: 0; }   /* the label above its switch */
.bass-more label:not(.check) { display: inline-flex; align-items: center; gap: 0.4rem; }
.mx-name { font-weight: 800; font-size: 0.9rem; color: var(--ink); }
.mx-name.icon { position: relative; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); }
.mx-name.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mx-name.icon svg .thin { stroke-width: 1; opacity: 0.45; }
.mx-name.icon svg .fill { fill: currentColor; stroke: none; }
.mx-name.icon::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);   /* beside the icon, over the picker: above it the Sounds panel's top edge cut it off, centered its left edge did */ padding: 0.2rem 0.5rem; border-radius: 6px;
    background: var(--ink); color: #fff; font-size: 0.75rem; font-weight: 800; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; z-index: 5; }
.mx-name.icon:hover::after { opacity: 1; }
.mx-pick label { margin: 0; gap: 0; }
.mx-pick select { width: 100%; }
.mx-pct { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: left; font-variant-numeric: tabular-nums; margin-left: -0.25rem; }   /* right after the fader's end */
/* Level with the fader's groove, not the middle of groove-plus-lights: the lights under it (3px gap + 4px) would pull it 3.5px low. */
@media (min-width: 641px) { .mx-pct { padding-bottom: 7px; line-height: 1; } }
/* A channel switched off keeps its picker and fader as they are (only the speaker shows it's off): moving the fader switches it back on. */
.mx-speaker { width: 34px; height: 30px; padding: 0; border-radius: 6px; border: 1px solid #2c2c2a; display: grid; place-items: center; cursor: pointer;
    background: linear-gradient(#5f5e5a, #3a3a38); color: #d3d1c7; }
.mx-speaker svg { width: 20px; height: 20px; }
.mx-speaker .cone { fill: currentColor; }
.mx-speaker .wave, .mx-speaker .cross { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.mx-speaker.on { color: #fff; }
.mx-speaker:not(.on) { color: #888780; }
.mx-speaker:not(.on) .cross { stroke: #f09595; }
.mx-speaker:hover { filter: brightness(1.15); }
.mx-speaker:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mx-fader { display: flex; flex-direction: column; min-width: 0; }
.mx-slot { position: relative; height: 34px; display: block; }
.mx-groove { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: #2c2c2a; box-shadow: inset 0 1px 2px #000; }
.mx-marks { position: absolute; left: 8px; right: 8px; top: 3px; bottom: 3px; display: flex; justify-content: space-between; pointer-events: none; }
.mx-marks i { width: 1px; background: var(--line); }
.mx-marks i.u { width: 2px; background: var(--muted); }
.mx-slot input { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; touch-action: none; }
.mx-slot input::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.mx-slot input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 32px; margin-top: 1px; border-radius: 3px; border: 1px solid #2c2c2a;
    background: linear-gradient(90deg, #5f5e5a 0, #888780 30%, #b4b2a9 46%, #f1efe8 48%, #f1efe8 52%, #b4b2a9 54%, #888780 70%, #5f5e5a 100%),
                repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 4px);
    background-blend-mode: multiply; box-shadow: 0 2px 3px rgba(0, 0, 0, .45); }
.mx-slot input::-moz-range-track { height: 34px; background: transparent; }
.mx-slot input::-moz-range-thumb { width: 14px; height: 30px; border-radius: 3px; border: 1px solid #2c2c2a; box-shadow: 0 2px 3px rgba(0, 0, 0, .45);
    background: linear-gradient(90deg, #5f5e5a, #b4b2a9 46%, #f1efe8 50%, #b4b2a9 54%, #5f5e5a); }
.mx-slot input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mx-leds { display: flex; gap: 2px; margin-top: 3px; }
.mx-leds span { flex: 1; height: 4px; border-radius: 1px; background: var(--line); }
.mx-leds span.lit { background: #639922; }
.mx-leds span.lit.amber { background: #ef9f27; }
.mx-leds span.lit.red { background: #e24b4a; }
@media (max-width: 640px) {
    .mx-row { grid-template-columns: 34px 30px minmax(0, 1fr) 2.6rem; grid-template-areas: "spk name pick pct" "fad fad fad fad"; row-gap: 0.4rem; }
    .mx-speaker { grid-area: spk; } .mx-name { grid-area: name; } .mx-pct { grid-area: pct; } .mx-pick { grid-area: pick; } .mx-fader { grid-area: fad; }
}
.mx-symbol { font-size: 1rem; font-weight: 900; color: var(--ink); line-height: 1; }
.mixer { max-width: 44rem; }
.mixer + .mixer { margin-top: 0.6rem; }
.poly-pulse .mixer { flex-basis: 100%; }
.poly-pulse .mx-slot input[type=range] { width: 100%; accent-color: auto; }   /* the old 6rem rule for the pulse sliders cut the fader's track short, so a drag stopped part way */
.poly-pulse .mx-pick .select { width: 100%; }
.rhythm-mixer { margin-bottom: 0.6rem; }
.sl-mixer { margin: 0.4rem 0 0.6rem; }
.mixer { margin-bottom: 0.6rem; }

/* The loop button outside a transport bar (LoopButton Standalone): same pill, no push right, an outline on white. */
.tb-loop.standalone { margin-left: 0; border: 1.5px solid var(--line); }
.tb-loop.standalone.on { border-color: var(--accent); }
.tb-loop:disabled { opacity: .45; cursor: default; }

/* The mixer's sound picker fills its column like the others (the shared sound picker brings its own label and sizes). */
.mx-pick .voice-pick, .mx-pick > label { display: block; width: 100%; margin: 0; }
.mx-pick .voice-pick .select, .mx-pick .select { width: 100%; font-size: inherit; }
/* The play-along's chart scrolls inside its own box, with the scrollbar on the right. */
.pa-sheet-scroll { max-height: min(72vh, 980px); overflow-y: auto; padding-right: 0.3rem; scrollbar-gutter: stable; }
/* Each chord's block (name plus its neck diagram) runs the full height of the bar, so hovering anywhere on the diagram,
   or the space under it, lights up the whole block. */
.ls2.with-below .ls-chords { flex: 1 1 auto; align-items: stretch; }
.ls2.with-below .ls-chord { justify-content: flex-start; border-radius: 6px; }

/* ---- Song Learner v2: the waveform, then isolating the guitar ---- */
.sl2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.sl2-left { display: grid; gap: 1rem; min-width: 0; }
.sl2-side { display: grid; gap: 1rem; }
.sl2-side h4 { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
@media (max-width: 900px) { .sl2 { grid-template-columns: minmax(0, 1fr); } }
.sl2-track { margin-top: 0.9rem; }
.sl2-track-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.7rem; margin-bottom: 0.4rem; }
.sl2-wave { height: 230px; }
.sl2-part { display: block; width: 100%; height: 96px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sl2-rest-name { color: #2f9e8f; }
.sl2-guitar-name { color: #e8743b; }
.sl2-parts[hidden] { display: none; }
.sl2 .panel { margin-top: 0; }
.sl2.dropping .sl-wave { outline: 3px dashed var(--accent); outline-offset: 3px; }
.sl2 input[type="range"] { accent-color: var(--accent); }
.sl2 h2 { margin: 0 0 0.8rem; font-size: 1.2rem; }
.sl2 h3 { margin: 1.2rem 0 0.2rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.sl2-range { font-size: 0.9rem; }
.sl2-step { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.sl2-step .seg-toggle { margin-bottom: 0; }
.sl2-step .seg-toggle button:disabled { opacity: 0.45; cursor: default; }
.sl2-hint { flex-basis: 100%; margin: 0; }
.sl2-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem 1.4rem; align-items: end; margin-top: 0.5rem; }
.sl2-filters .sl-field { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.9rem; }
.sl2-tip { grid-column: 1 / -1; margin: -0.3rem 0 0.2rem; }



.sl2-nudge { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.sl2-edge { display: inline-flex; align-items: center; gap: 0.3rem; }
.sl2-nudge .button { min-width: 2.6rem; font-family: ui-monospace, monospace; }
.sl2-pitch { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem 1.4rem; align-items: start; margin: 0.6rem 0 0.8rem; }
@media (max-width: 640px) { .sl2-pitch { grid-template-columns: minmax(0, 1fr); } }
.sl2-note { border: 2px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem; text-align: center; box-sizing: border-box; width: 220px; height: 136px; overflow: hidden; }
.sl2-note-name { font-size: 3rem; font-weight: 900; line-height: 1.05; color: var(--ink); }
.sl2-note-detail { font-size: 0.85rem; margin-top: 0.15rem; height: 1.3em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl2-cents { position: relative; height: 10px; margin: 0.6rem 0.2rem 0.2rem; border-radius: 999px; background: linear-gradient(90deg, #f3c7b4, #e9f6ef 42%, #e9f6ef 58%, #f3c7b4); }
.sl2-cents-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--muted); }
.sl2-cents-needle { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: #e8743b; transition: left 0.08s linear; }
.sl2-cents-needle.ok { background: #2f9e8f; }
.sl2-trail-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; }
.sl2-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sl2-chips .sl-note-chip { cursor: pointer; border: 0; font: inherit; font-weight: 800; font-size: 0.85rem; }

.speed-picker, .sl2-speeds { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.speed-picker button, .sl2-speeds button { background: linear-gradient(#fff, #eef0f4); border: 0; border-right: 1px solid var(--line); padding: 0.28rem 0.55rem; font: inherit; font-size: 0.82rem; font-weight: 800; color: var(--ink); cursor: pointer; }
.speed-picker button:last-child, .sl2-speeds button:last-child { border-right: 0; }
.speed-picker button.on, .sl2-speeds button.on { background: linear-gradient(#5a5f6b, #3c404a); color: #fff; }
.speed-picker button:disabled, .sl2-speeds button:disabled { opacity: 0.5; cursor: default; }
.sl2-zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; }
.sl2-zoom input[type="range"] { width: 130px; }
.sl2-mag { background: none; border: 0; padding: 0.15rem; color: var(--muted); cursor: pointer; display: inline-flex; }
.sl2-mag svg { width: 20px; height: 20px; }
.sl2-mag:hover:not(:disabled) { color: var(--ink); }
.sl2-mag:disabled { opacity: 0.45; cursor: default; }
.sl2-zoom .button { margin-left: 0.3rem; }
.sl2-video { display: block; max-height: 340px; margin: 0.2rem auto 0.6rem; }
.sl2-video[hidden] { display: none; }
.sl2-nudge-note { text-align: center; }
.sl2-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sl2-section-head h2 { margin: 0; }
.sl2-isolate:not(.closed) .sl2-section-head { margin-bottom: 0.8rem; }
.sl2-chevron { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: none; color: var(--accent); cursor: pointer; transition: transform 0.2s, background 0.2s; transform: rotate(180deg); }
.sl2-isolate.closed .sl2-chevron { transform: none; }
.sl2-chevron svg { width: 1.25rem; height: 1.25rem; }
.sl2-chevron:hover { background: var(--accent-soft, rgba(91,63,214,0.1)); }
.sl2-section-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sl2-chevron { transition: none; } }

.sl2-note-name { height: 3.2rem; }
.sl2-cents.off { visibility: hidden; }
.sl2-neck-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; margin: 0.4rem 0 0.5rem; }
.sl2-neck-bar .sl-field { display: flex; flex-direction: column; gap: 0.2rem; font-weight: 700; font-size: 0.85rem; }
.sl2-neck-bar .select { min-width: 0; padding: 0.3rem 0.6rem; }
.sl2-neck .pick-cell { fill: transparent; cursor: pointer; touch-action: none; }
.sl2-neck .pick-cell:hover { fill: rgba(255, 122, 89, .22); }
.sl2-neck .pick-cell.held { fill: rgba(255, 122, 89, .45); }
.sl2-places { min-height: 1.4em; }
.sl2-hear { touch-action: none; user-select: none; }
.sl2-hear.held { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 640px) { .sl2-note { width: 100%; } }

/* Under the song's waveform: start segment | clear, zoom, range | end segment */
.sl2-under { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.sl2-under > .nudge-seg:first-child { justify-self: start; }
.sl2-under > .nudge-seg:last-child { justify-self: end; }
.sl2-under-mid { display: inline-flex; align-items: center; gap: 0.5rem; }
.sl2-under .sl2-zoom { margin-left: 0; }
.nudge-seg { display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.nudge-seg button { background: none; border: 0; border-right: 1px solid var(--line); min-width: 2.4rem; padding: 0.3rem 0.55rem; font: inherit; font-family: ui-monospace, monospace; font-size: 0.85rem; font-weight: 800; color: var(--ink); cursor: pointer; }
.nudge-seg button:last-child { border-right: 0; }
.nudge-seg button:hover:not(:disabled) { background: var(--accent-soft, rgba(91,63,214,0.1)); }
.nudge-seg button:active:not(:disabled) { background: var(--accent); color: #fff; }
.nudge-seg button:disabled { opacity: 0.45; cursor: default; }
.sl2-icon { background: none; border: 0; padding: 0.15rem; color: var(--muted); cursor: pointer; display: inline-flex; }
.sl2-icon svg { width: 22px; height: 22px; }
.sl2-icon:hover:not(:disabled) { color: var(--ink); }
.sl2-icon:disabled { opacity: 0.4; cursor: default; }
.sl2-video { width: 100%; max-height: 420px; border-radius: 0; margin: 0; display: block; }
@media (max-width: 720px) {
    .sl2-under { grid-template-columns: 1fr 1fr; }
    .sl2-under-mid { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}

.mx-name svg.mx-no .dim { opacity: 0.5; }
.mx-name.icon svg .neck { stroke-width: 2.3; } .mx-name.icon svg .head { stroke-width: 3; }
.mx-name.icon svg .hole { fill: var(--panel, #fff); stroke: none; } .mx-name.icon svg .hole-line { stroke: var(--panel, #fff); stroke-width: 1.2; }
.sl2-parts .mixer { margin: 0.6rem 0 0.35rem; }
.sl2-parts-head { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }

.mx-name.icon svg.mx-big { width: 32px; height: 32px; }
.mx-name.icon:has(svg.mx-big) { width: 34px; height: 34px; }
.mx-name.icon svg.mx-no > circle, .mx-name.icon svg.mx-no > path { stroke-width: 2; }
.sl2-parts .mixer { max-width: none; }
.sl2-under-left { justify-self: start; display: inline-flex; align-items: center; gap: 0.45rem; }

.sl2-spot-pill { display: inline-block; min-width: 5.6rem; text-align: center; font-variant-numeric: tabular-nums; }

.sl2-video-box { position: relative; overflow: hidden; border-radius: 12px; background: #000; margin: 0.2rem 0 0.3rem; cursor: crosshair; touch-action: none; user-select: none; }
.sl2-video-box[hidden] { display: none; }
.sl2-video-box video { pointer-events: none; }
.sl2-crop-rect { position: absolute; border: 2px dashed #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35); pointer-events: none; display: none; }
.sl2-video-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; min-height: 2rem; }
.sl2-cut:hover:not(:disabled) { color: #c0392b; }
.sl2-cuts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.5rem; }
.sl2-cut-chip { display: inline-flex; align-items: center; gap: 0.25rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.25rem 0.1rem 0.6rem; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; background: repeating-linear-gradient(135deg, #fff, #fff 6px, #f1eff7 6px, #f1eff7 12px); }
.sl2-cut-chip button { border: 0; background: none; color: var(--muted); font-size: 1rem; line-height: 1; padding: 0 0.3rem; cursor: pointer; border-radius: 999px; }
.sl2-cut-chip button:hover { color: var(--ink); background: var(--line); }

.sl2-track-head .transport-bar { margin-top: 0; padding: 0.3rem 0.55rem; }

/* The practice timer: undo (do a finished block again) and Restart all */
.practice-list li { display: flex; align-items: center; gap: 0.4rem; }
.practice-list li.new-round { border-top: 1px solid var(--line); margin-top: 0.35rem; padding-top: 0.35rem; }   /* where the set starts over
.practice-undo { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; height: 1.7rem; padding: 0 0.65rem; font: inherit; font-size: 0.78rem; font-weight: 800; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; flex: none; }
.practice-undo svg { width: 1rem; height: 1rem; }
.practice-undo:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.practice-restart { display: inline-flex; align-items: center; gap: 0.35rem; }
.practice-restart svg { width: 1rem; height: 1rem; }
/* Song Learner v2: the transport keeps its buttons in one row */
.sl2-track-head .transport-bar { flex: 0 0 auto; flex-wrap: nowrap; container-type: normal; }   /* sized by its buttons, not by the row */

/* A mixer symbol that plays its sound when pressed (the metronome) */
.mx-name.previewable { cursor: pointer; border-radius: 8px; touch-action: none; user-select: none; transition: background 0.1s; }
.mx-name.previewable:hover { background: var(--accent-soft, rgba(91,63,214,0.1)); }
.mx-name.previewable.previewing { background: var(--accent); color: #fff; }

/* The fret being held on Song Learner v2's neck: its note in a circle, and the string drawn bent */
.sl2-held { pointer-events: none; }
.sl2-held circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.sl2-held text { font-size: 10px; font-weight: 800; fill: #fff; }
.sl2-bent-string { fill: none; stroke: var(--coral-deep, #e8743b); stroke-linecap: round; stroke-linejoin: round; }

/* The favorites and recents bar, and the star by each page's title */
.quickbar { gap: 0.4rem 1.1rem; }
.qb-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.qb-label { display: inline-flex; align-items: center; gap: 0.3rem; }
.qb-label svg { width: 15px; height: 15px; }
.qb-favs .qb-label svg { fill: #f5b301; stroke: none; }
.qb-recents .qb-label svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.qb-recents { padding-left: 1rem; border-left: 1px solid var(--line); }
.qb-recents .qb-chip { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.qb-recents .qb-chip:hover { background: var(--accent-soft); color: var(--ink); }
.qb-hint { color: var(--muted); font-size: 0.8rem; }
.qb-chip.fav { touch-action: none; user-select: none; cursor: grab; }
.qb-chip.fav.dragging { position: relative; z-index: 20; cursor: grabbing; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); background: var(--accent); color: #fff; }
.qb-chip.drop-before { box-shadow: -3px 0 0 var(--accent); }
.qb-chip.drop-after { box-shadow: 3px 0 0 var(--accent); }
.page-fav { position: absolute; z-index: 30; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--muted); }
.page-fav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.page-fav:hover { color: #f5b301; }
.page-fav.on svg { fill: #f5b301; stroke: #f5b301; }

/* Admin: the menu editor and its live preview */
.menu-admin-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 0.6rem; }
.menu-admin-head h2 { margin: 0; }
.menu-admin-head .sl-field { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.9rem; }
.menu-admin-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.menu-preview-bar { position: relative; border-radius: 16px; }
.menu-preview-bar .topbar-inner { justify-content: flex-start; gap: 1rem; }
.menu-preview-bar .topnav { display: flex; }
.menu-preview-room { height: 22rem; }   /* room for a menu held open */
.menu-tree { display: grid; gap: 0.35rem; }
.menu-row { display: grid; grid-template-columns: 1.8rem 1.8rem minmax(9rem, 1.2fr) minmax(9rem, 1.3fr) 10.5rem auto auto; grid-template-areas: "fold kind title url icon active tools" ". . about about large card card";
            gap: 0.3rem 0.5rem; align-items: center; padding: 0.45rem 0.6rem; margin-left: calc(var(--depth, 0) * 1.6rem); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.menu-row.menu { border-left: 4px solid var(--accent); }
.menu-row.group { border-left: 4px solid var(--muted); background: var(--bg, #faf9ff); }
.menu-row.off { opacity: 0.55; }
.menu-row-kind { grid-area: kind; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--ink); }
.menu-row-kind svg { width: 1.25rem; height: 1.25rem; }
.menu-row-kind.none { border: 1px dashed var(--line); border-radius: 8px; }
.menu-row-kind-letter { font-size: 0.72rem; font-weight: 900; color: var(--muted); }
.menu-row:not(.link) .menu-row-about { grid-column: 3 / -1; }
.menu-row-large { grid-area: large; min-width: 0; }
/* A dropdown that shows pictures (IconPicker). */
.icon-picker { position: relative; min-width: 0; }
.icon-picker-button { width: 100%; display: flex; align-items: center; gap: 0.5rem; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 0.3rem 0.5rem; cursor: pointer; text-align: left; min-height: 2.4rem; }
.icon-picker-button[aria-expanded="true"], .icon-picker-button:focus-visible { border-color: var(--accent); outline: none; }
.icon-picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-picker-caret { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-picker-icon { flex: none; width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; color: var(--ink); }
.icon-picker-icon svg { width: 100%; height: 100%; }
.icon-picker-icon.large { width: 2.4rem; height: 1.8rem; }
.icon-picker-icon.none { border: 1px dashed var(--line); border-radius: 6px; }
.icon-picker-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); min-width: 14rem; max-height: 20rem; overflow-y: auto; margin: 0; padding: 0.3rem; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(43, 33, 80, 0.16); }
.icon-picker-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 8px; cursor: pointer; font-weight: 700; }
.icon-picker-list li:hover, .icon-picker-list li.active { background: var(--tint); }
.icon-picker-list li.chosen { color: var(--accent); }
.menu-row-card { grid-area: card; display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.menu-row-card .select { min-width: 0; }
.menu-row-largeview.tool-card { display: inline-grid; place-items: center; width: 3.4rem; height: 2.6rem; padding: 0.2rem; border-radius: 8px; flex: none; }
.menu-row-largeview svg { width: 100%; height: 100%; }
.menu-row-title { grid-area: title; } .menu-row-url { grid-area: url; } .menu-row-icon { grid-area: icon; min-width: 0; } 
.menu-row-active { grid-area: active; white-space: nowrap; } .menu-row-tools { grid-area: tools; display: inline-flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.menu-row-about { grid-area: about; font-size: 0.82rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.menu-row .input, .menu-row .select { padding: 0.35rem 0.6rem; min-width: 0; }
@media (max-width: 1100px) {
    .menu-row { grid-template-columns: 1.8rem 1.8rem 1fr 1fr; grid-template-areas: "fold kind title title" ". . url url" ". . icon active" ". . tools tools" ". . about about" ". . large card"; }
}

/* ── Modal arpeggios: a mode's chord plus its color note ── */
.ma-intro { max-width: 760px; }
.ma-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.ma-toolbar label { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.ma-toolbar .seg-toggle, .ma-card .seg-toggle { margin-bottom: 0; }
.ma-layout { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: flex-start; margin: 1.3rem 0; }
.ma-modes { flex: 1 1 260px; max-width: 340px; display: flex; flex-direction: column; gap: 2px; padding: 1.1rem 0.8rem; }
.ma-modes-head { font-weight: 800; padding: 0 0.8rem 0.5rem; }
.ma-modes-foot { margin: 0.6rem 0.8rem 0; }
.ma-mode { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 0.6rem; align-items: center; padding: 0.55rem 0.8rem; border-radius: 16px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.ma-mode:hover { background: var(--tint); }
.ma-mode.on { background: var(--tint); box-shadow: inset 0 0 0 2px var(--line); }
.ma-mode b { color: var(--accent); }
.ma-mode small { grid-column: 1 / -1; color: var(--muted); font-weight: 700; }
.ma-card { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.ma-card h2 { margin: 0; }
.ma-card h3, .ma-section h3 { margin: 0; }
.ma-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.ma-sub { color: var(--muted); font-weight: 800; font-size: 1.1rem; }
.ma-hear { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ma-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 1.9rem; padding: 0 0.6rem; border-radius: 999px; font-weight: 800; box-sizing: border-box; background: var(--tint); color: var(--accent); white-space: nowrap; }
.ma-chip.small { height: 1.5rem; min-width: 1.8rem; font-size: 0.8rem; }
.ma-chip.root { background: var(--root); color: var(--ink); }
.ma-chip.tone { background: var(--note); color: #fff; }
.ma-chip.color { background: var(--amber); color: var(--amber-ink); box-shadow: inset 0 0 0 2px #c77a1f; }
.ma-chip.upper { background: var(--tint); color: var(--accent); }
.ma-chip.left { background: transparent; color: #a79fcb; }
.ma-degrees { display: flex; flex-direction: column; gap: 0.35rem; overflow-x: auto; }
.ma-deg-row, .ma-step-row { display: grid; grid-template-columns: repeat(8, 2.9rem); text-align: center; }
.ma-step-row { margin-left: 1.45rem; font-size: 0.75rem; font-weight: 800; color: var(--muted); }
.ma-key { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.4rem; font-weight: 700; }
.ma-key > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ma-dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; display: inline-block; }
.ma-dot.root { background: var(--root); } .ma-dot.tone { background: var(--note); } .ma-dot.upper { background: #b9adf2; }
.ma-dot.color { background: var(--amber); box-shadow: inset 0 0 0 2px #c77a1f; }
.ma-left { color: #a79fcb; font-weight: 900; }
.ma-why { margin: 0; background: var(--tint); border-radius: var(--radius-sm); padding: 0.8rem 1.1rem; }
.ma-neck-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.ma-neck-head .seg-toggle { margin-left: auto; }
.ma-neck { overflow-x: auto; }
.fretboard .note.color circle { fill: var(--amber); stroke: #c77a1f; stroke-width: 2; }
.fretboard .note.color text { fill: var(--amber-ink); }
.fretboard .note.upper circle { fill: #b9adf2; }
.fretboard .note.upper text { fill: var(--ink); }
.fretboard .note.color.now circle, .fretboard .note.upper.now circle { fill: #fff; stroke: var(--ink); }
.ma-section { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.3rem; }
.ma-section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.ma-stack, .ma-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ma-triads { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.7rem; }
.ma-triad { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
.ma-triad.color { border-color: var(--amber); background: #fff6e8; }
.ma-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; }
.ma-compare-card { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ma-compare-card.on { border-color: var(--accent); background: #f8f5ff; }
.ma-compare-title { display: flex; align-items: center; gap: 0.5rem; }
.ma-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: 0; font-weight: 800; }

/* ── Challenges: new ones every month ── */
.challenge-month { margin: 1.2rem 0 2rem; }
.challenge-month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
.challenge-month-head h2 { margin: 0; }
.challenge-month-sub { margin: 0; color: var(--muted); }
.challenge-month-sub b { color: var(--accent); }
.challenge-mail-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 1rem; background: var(--tint); box-shadow: none; }
.challenge-mail-ask p { margin: 0; }
.challenge-waiting-head, .challenge-past-month { margin: 1.4rem 0 0.7rem; }
.challenge-past { margin: 0 0 2rem; }
.challenge-past h2 { margin-bottom: 0.4rem; }
.mail-preview { width: 100%; height: 640px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
select.this-month { border-color: var(--accent); }

/* Admin → Menu: dragging entries around the preview (js/menu-editor.js) */
.menu-preview-bar .menu-list [data-mid] { cursor: grab; touch-action: none; user-select: none; }
.menu-preview-bar [data-kind="menu"] { cursor: grab; touch-action: none; user-select: none; }
.menu-preview-bar .menu-empty { display: block; padding: 0.5rem 0.7rem; max-width: 16rem; white-space: normal; }
.menu-preview-bar.dragging, .menu-preview-bar.dragging * { cursor: grabbing; }
.menu-preview-bar.dragging .menu:not(.open):hover .menu-list { display: none; }   /* only the menu the drag opened */
.menu-preview-bar [data-kind="menu"].drop-into { background: var(--tint); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 999px; }
.menu-drop-line { position: fixed; height: 3px; border-radius: 3px; background: var(--accent); pointer-events: none; z-index: 20000; display: none; }
.menu-drag-ghost { position: fixed; pointer-events: none; z-index: 20001; background: var(--panel); color: var(--ink); font-weight: 800; padding: 0.35rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(43, 33, 80, 0.25); white-space: nowrap; }

.menu-row-fold { grid-area: fold; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; padding: 0; flex: none; }
.menu-row-fold:hover { background: var(--tint); color: var(--accent); }
.menu-row-fold svg { width: 18px; height: 18px; transition: transform 0.15s; }
.menu-row-fold.shut svg { transform: rotate(-90deg); }
.menu-row-fold.none { cursor: default; }
.menu-row-fold.none:hover { background: transparent; }

/* ── Progression map: every chord a key offers, from the middle outward ── */
.pm-intro { max-width: 760px; }
.pm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-bottom: 1.3rem; }
.pm-toolbar label { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.pm-toolbar .seg-toggle { margin-bottom: 0; }
.pm-map { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.3rem; }
.pm-map-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.pm-map-head h2 { margin: 0; }
.pm-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--tint); color: var(--accent); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; font-weight: 800; text-decoration: none; }
.pm-pill.ghost { background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line); border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.pm-ring { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; }
.pm-ring.off { opacity: 0.5; }
.pm-ring-label { width: 10rem; flex: none; display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.5rem; }
.pm-ring-label b { font-size: 0.9rem; }
.pm-ring-label small { font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.pm-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: 1; align-items: center; min-width: 0; }
.pm-ring-hint { align-self: center; }
.pm-chord { position: relative; border: 0; font: inherit; cursor: pointer; border-radius: 18px; padding: 0.6rem 0.5rem 0.45rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 5.4rem; color: var(--ink); background: var(--panel); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow 0.12s, transform 0.12s; }
.pm-chord b { font-size: 1.15rem; font-weight: 900; }
.pm-chord small { font-size: 0.72rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pm-chord:hover:not(:disabled) { transform: translateY(-1px); }
.pm-chord:disabled { cursor: default; }
.pm-chord.home { background: var(--root); box-shadow: none; }
.pm-chord.home small { color: var(--amber-ink); }
.pm-chord.dia { box-shadow: inset 0 0 0 2px #cfc7ff; background: #f8f5ff; }
.pm-chord.next { box-shadow: 0 0 0 3px var(--accent); background: var(--panel); }
.pm-chord.next::after { content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; background: var(--accent); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.pm-chord.here { background: var(--accent); color: #fff; box-shadow: none; }
.pm-chord.here small { color: #dcd5ff; }
.pm-chord.dim { opacity: 0.4; }
.pm-chord.now { transform: scale(1.06); }
.pm-why { background: var(--tint); border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; display: flex; gap: 0.9rem; align-items: center; flex-wrap: wrap; line-height: 1.5; }
.pm-why-text { flex: 1 1 320px; }
.pm-why-tools { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 0.9rem; }
.pm-prog { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.3rem; }
.pm-prog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.pm-prog-head h3, .pm-help h3 { margin: 0; }
/* Its transport on a line of its own under the heading, from the left: Play, Tempo, Beats, Loop. */
.pm-prog-play { flex-basis: 100%; display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-top: 0.3rem; }
.pm-prog-play .select { min-width: 0; width: 4.6rem; }
.pm-prog-play label { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; }
.pm-bars { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pm-bar { display: inline-flex; align-items: center; gap: 0.35rem; border: 2px solid var(--line); border-radius: 14px; padding: 0.35rem 0.5rem 0.35rem 0.7rem; background: var(--panel); font-weight: 900; font-size: 1.05rem; }
.pm-bar small { font-size: 0.72rem; color: var(--muted); font-weight: 800; }
.pm-bar.now { box-shadow: 0 0 0 3px var(--accent); }
.pm-bar.empty { border-style: dashed; color: #b9b0d9; font-weight: 700; font-size: 0.9rem; padding-right: 0.7rem; }
.pm-bar-x { border: 0; background: transparent; color: #b9b0d9; font: inherit; font-weight: 700; cursor: pointer; padding: 0 0.2rem; border-radius: 6px; }
.pm-bar-x:hover { color: var(--bad); background: var(--tint); }
.pm-prog-links { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
/* Saving your progression under My progressions */
.pm-save { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; max-width: 34rem; }
.pm-save .preset-save { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pm-save .preset-save .input { flex: 1 1 12rem; }
.pm-save p { margin: 0; }
.pm-help { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.3rem; }
.pm-help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; font-size: 0.9rem; line-height: 1.5; }
.pm-help-grid > div { border: 2px solid var(--line); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; }
@media (max-width: 700px) { .pm-ring-label { width: 100%; padding-top: 0; } }
.pm-why-shape { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; flex: none; }
.pm-why-shape .muted { font-family: Consolas, "Cascadia Mono", monospace; }
.pm-bar[draggable] { cursor: grab; }
.pm-bar.dragging { opacity: 0.4; }
.pm-bar.over { box-shadow: -4px 0 0 var(--accent); }

/* ── Chord wheel (circle v2): the window that turns to the key, the pivots ── */
.cw-preview-tag { display: inline-block; font-size: 0.8rem; font-weight: 800; background: var(--tint); color: var(--accent); border-radius: 999px; padding: 0.2rem 0.7rem; vertical-align: middle; margin-left: 0.5rem; }
.cw-wheel-wrap { touch-action: none; }
.chord-wheel { user-select: none; }
.chord-wheel .cf-wedge.faded { opacity: 0.35; }
.chord-wheel .cf-wedge.shared { fill: #9be7c4 !important; opacity: 1; }
.chord-wheel .cf-wedge.hovered { stroke: var(--good); stroke-width: 3; opacity: 1; }
.chord-wheel .cw-window { transition: transform 0.45s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.chord-wheel .cw-window.dragging { transition: none; }
.chord-wheel .cw-frame { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.chord-wheel .cw-frame-dim { stroke-width: 2; stroke-dasharray: 5 4; }
.chord-wheel .cw-frame-whole { fill: rgba(43, 33, 80, 0.05); }
.chord-wheel .cw-window-label-dim { font-size: 11px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.chord-wheel .cw-handle { fill: var(--panel); stroke: var(--ink); stroke-width: 3; }
.chord-wheel .cw-handle-line { stroke: var(--ink); stroke-width: 3; }
.chord-wheel .cw-window-label { text-anchor: middle; font-family: Nunito, Segoe UI, Arial, sans-serif; font-size: 15px; font-weight: 900; fill: var(--ink); }
.cw-page .legend { flex-direction: column; gap: 0.35rem; }
.cw-page .legend span { display: inline-flex; align-items: center; }
.cw-page .legend i { flex: none; width: 14px; height: 14px; box-sizing: border-box; }
.legend .cw-legend-window { border: 2.5px solid var(--ink); background: transparent; }
.legend .cw-legend-dim { border: 2px dashed var(--ink); background: transparent; }
.cw-chord-grid { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.cw-chord-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.8rem, 1fr)); gap: 0.5rem; }
.cw-chord { border: 2px solid var(--line); border-radius: 14px; background: var(--panel); font: inherit; cursor: pointer; padding: 0.5rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; color: var(--ink); text-align: center; }
.cw-chord small { font-size: 0.75rem; font-weight: 800; color: var(--muted); }
.cw-chord b { font-size: 1.15rem; font-weight: 900; }
.cw-chord .muted { font-size: 0.75rem; }
.cw-chord em { font-style: normal; font-size: 0.7rem; color: var(--accent); font-weight: 800; }
.cw-chord.major { border-color: #ffa78c; background: #fff3ee; }
.cw-chord.minor { border-color: #a497e6; background: #f4f1ff; }
.cw-chord.dim { border-style: dashed; }
.cw-chord.now { box-shadow: 0 0 0 3px var(--accent); }
.cw-pivots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }
.cw-pivot-chip { border: 2px solid #9be7c4; background: #effbf5; border-radius: 14px; padding: 0.4rem 0.8rem; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.cw-pivot-chip b { font-size: 1.05rem; font-weight: 900; }
.cw-pivot-chip small { font-size: 0.72rem; color: var(--muted); font-weight: 800; }

/* ---- Strumming patterns ---- */
.strum-page { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto auto; gap: 1rem 1.5rem; align-items: stretch; }
.strum-builder { grid-column: 1; grid-row: 1; min-width: 0; }
.strum-practice { grid-column: 1; grid-row: 2; min-width: 0; }
.strum-side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.strum-side > .panel { margin: 0; }
.strum-patterns { display: flex; flex-direction: column; min-height: 0; }
.strum-share-tools { gap: 0.5rem; flex-wrap: nowrap; }
.strum-patterns .strum-lib { flex: 1 1 0; height: 0; min-height: 12rem; overflow-y: auto; padding-right: .2rem; scrollbar-gutter: stable; }
@media (max-width: 900px) {
  .strum-page { grid-template-columns: 1fr; grid-template-rows: auto; }
  .strum-builder, .strum-practice, .strum-side { grid-column: 1; grid-row: auto; }
  .strum-patterns .strum-lib { height: auto; max-height: 24rem; }
}
.strum-page h4 { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
.strum-name { font-size: 1.15rem; font-weight: 900; margin-top: .4rem; }
.strum-name small { font-weight: 700; color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.strum-name .strum-ramp { color: var(--accent); }
.strum-bar { overflow-x: auto; padding: .7rem .5rem .6rem; margin: 0 -.5rem; display: grid; gap: .8rem; }
.strum-cells { display: grid; grid-template-columns: repeat(var(--slots, 8), minmax(44px, 1fr)); gap: 6px; min-width: 420px; }
.strum-cells.sixteenths { grid-template-columns: repeat(var(--slots, 16), minmax(30px, 1fr)); min-width: 620px; }
.strum-cell { position: relative; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); aspect-ratio: 1 / 1.35; display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; cursor: pointer; user-select: none; transition: transform .08s, box-shadow .08s; }
.strum-cell:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.strum-cell .count { font-size: .9rem; font-weight: 900; color: var(--muted); padding-top: .25rem; font-variant-numeric: tabular-nums; }
.strum-cell .count.and { font-size: .8rem; }
.strum-cell .arrow { width: 26px; height: 40px; }
.strum-cells.sixteenths .strum-cell .arrow { width: 18px; height: 30px; }
.strum-cells.sixteenths .strum-cell .count { font-size: .78rem; }
.strum-cells.sixteenths .strum-cell .count.and { font-size: .68rem; }
.strum-cells.sixteenths .strum-cell .kind { font-size: .5rem; letter-spacing: .02em; }
.strum-cells.sixteenths .strum-cell { border-radius: 11px; }
.strum-play { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; }
.strum-mixer { margin-top: .8rem; }
.strum-no-drums { margin: .4rem 0; }
.strum-prog { margin-top: .2rem; }
.strum-cell .kind { font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-bottom: .3rem; white-space: nowrap; text-align: center; justify-self: center; max-width: none; }
.strum-cell.down .arrow, .strum-cell.bass .arrow { color: var(--accent); }
.strum-cell.up .arrow { color: #ff7a59; }
.strum-cell.ghost .arrow, .strum-cell.ghost .kind { color: #c9c2ea; }
.strum-cell.mute .arrow { color: var(--ink); }
.strum-cell.accent { border-color: var(--accent); background: var(--tint); }
.strum-cell.accent .arrow { transform: scale(1.18); }
.strum-cell.beat .count { color: var(--ink); }
.strum-cell.now { border-color: #ffb300; background: #ffd54a; box-shadow: 0 0 0 4px rgba(255, 179, 0, .5), 0 6px 14px rgba(255, 179, 0, .35); transform: translateY(-4px) scale(1.06); z-index: 1; }
.strum-cell.now .arrow, .strum-cell.now .count, .strum-cell.now .kind { color: #2b2150; }
.strum-cell.ghost.now { background: #fff3c4; box-shadow: 0 0 0 3px rgba(255, 179, 0, .3); transform: translateY(-2px); }
.strum-cell.ghost.now .arrow, .strum-cell.ghost.now .kind { color: #b9a35a; }
.strum-cell.on { box-shadow: inset 0 -4px 0 var(--good); }
.strum-cell.early { box-shadow: inset 0 -4px 0 #ffb300; }
.strum-cell.late, .strum-cell.missed { box-shadow: inset 0 -4px 0 var(--bad); }
.strum-hand { display: grid; grid-template-columns: repeat(var(--slots, 8), 1fr); gap: 6px; min-width: 420px; margin-top: .4rem; }
.strum-hand i { height: 6px; border-radius: 3px; background: #c9c2ea; display: block; }
.strum-hand i.d { background: var(--accent); }
.strum-hand i.u { background: #ff7a59; }
.strum-foot { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.strum-foot .legend i { box-sizing: border-box; }
.strum-foot .sw-down { background: var(--accent); } .strum-foot .sw-up { background: #ff7a59; } .strum-foot .sw-ghost { background: #c9c2ea; }
.strum-foot .sw-mute { background: var(--ink); } .strum-foot .sw-bass { background: var(--accent); border-radius: 50%; } .strum-foot .sw-accent { background: var(--tint); border: 2px solid var(--accent); }
.strum-hint { background: var(--tint); border-radius: 12px; padding: .6rem .8rem; font-size: .9rem; margin-top: .9rem; }
.strum-hint b { color: var(--accent); }
.strum-chords { display: grid; gap: .5rem; }
.strum-shapes { gap: .6rem 1rem; margin-top: .2rem; }
.strum-shapes .diagram-card { width: 150px; padding: 0; }
.strum-shapes .chord-diagram { width: 100%; height: auto; display: block; }
.strum-chords .chord-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.strum-chords .chord-chip { border: 2px solid var(--line); border-radius: 12px; padding: .35rem .7rem; font: inherit; font-weight: 800; background: var(--panel); color: var(--ink); cursor: pointer; }
.strum-chords .chord-chip.on { border-color: #ff7a59; background: #ff7a59; color: #fff; }
.strum-chord-input { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 700; color: var(--muted); max-width: 28rem; }
.strum-modes { display: grid; gap: .4rem; }
.strum-mode { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; border: 2px solid var(--line); border-radius: 14px; padding: .5rem .7rem; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.strum-mode.on { border-color: var(--accent); background: var(--tint); }
.strum-mode .n { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: .85rem; }
.strum-mode .t { font-weight: 900; display: block; } .strum-mode .d { font-size: .85rem; color: var(--muted); display: block; }
.strum-tap { display: grid; gap: .6rem; margin-top: .8rem; }
.strum-tap .tap-pad { height: 110px; border-radius: 18px; border: 3px dashed var(--line); display: grid; place-items: center; font-weight: 900; color: var(--muted); cursor: pointer; user-select: none; text-align: center; padding: 0 1rem; touch-action: manipulation; }
.strum-tap .tap-pad.hit { background: var(--tint); border-style: solid; border-color: var(--accent); }
.strum-tap .tap-pad:focus-visible { outline: 3px solid #ffd54a; }
.strum-verdict { font-size: .9rem; margin: 0; }
.strum-lib { display: grid; gap: .5rem; }
.strum-lib button { text-align: left; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); padding: .55rem .7rem; font: inherit; color: var(--ink); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; }
.strum-lib button.on { border-color: var(--accent); background: var(--tint); }
.strum-lib .nm { font-weight: 900; }
.strum-lib .tier { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .55rem; background: #d9f3e4; color: #2f9e5b; white-space: nowrap; }
.strum-lib .tier.t2 { background: var(--tint); color: var(--accent); } .strum-lib .tier.t3 { background: #ffe4dc; color: #c2491f; }
.strum-lib .arrows { grid-column: 1 / -1; font-weight: 800; letter-spacing: .12em; color: var(--muted); font-size: .85rem; }
.strum-lib .arrows b { color: var(--accent); } .strum-lib .arrows i { color: #ff7a59; font-style: normal; } .strum-lib .arrows s { color: #c9c2ea; text-decoration: none; } .strum-lib .arrows .sep { color: var(--line); }
.strum-link { word-break: break-all; background: var(--tint); border-radius: 10px; padding: .5rem .6rem; font-weight: 700; }
.strum-page .preset-save { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.strum-page .preset-save .input { flex: 1 1 10rem; }
@media (prefers-reduced-motion: reduce) { .strum-cell { transition: none; } }
/* The improv trainer: the loop, the live neck, practice and listening side by side. */
.improv-mixer { margin-top: .8rem; }
.improv-comp { margin-top: .4rem; }
.improv-track .strum-chords { margin-top: .9rem; }
.improv-bars .chord-chip.lead { border-style: dashed; }
.improv-bars .chord-chip.lead::before { content: "♪ "; color: var(--muted); }
.improv-neck-panel .section-head { align-items: flex-end; flex-wrap: wrap; gap: .6rem 1rem; }
.improv-neck-tools { gap: .8rem; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--muted); }
.improv-neck-tools label.row { gap: .4rem; }
.improv-cue { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; margin: 1rem 0 .5rem; font-size: 1.05rem; }
.improv-now b { font-size: 1.4rem; }
.improv-next { font-size: .95rem; color: var(--muted); border-radius: 999px; padding: .15rem .7rem; background: var(--tint); transition: background .2s; }
.improv-next b { color: var(--ink); }
.improv-next.soon { background: #ffd54a; color: #2b2150; }
.improv-next.soon b { color: #2b2150; }
.improv-neck .fretboard .note.scale circle { fill: #d9d3f0; stroke: #fff; }
.improv-neck .fretboard .note.scale text { fill: var(--accent); }
.improv-neck .fretboard .note.avoid circle { fill: #f3d9d2; }
.improv-neck .fretboard .note.avoid text { fill: #a04a2f; }
.improv-neck .fretboard .note.target circle { stroke: #ffb300; stroke-width: 3.5; }
.improv-neck .fretboard .note.off { opacity: .22; }
.improv-neck .fretboard .note.now circle { fill: #ffd54a !important; stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(1.18); }
.improv-neck .fretboard .note.now text { fill: #2b2150 !important; }
.improv-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.improv-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.improv-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.improv-legend .sw-root { background: var(--root); } .improv-legend .sw-tone { background: var(--note); } .improv-legend .sw-scale { background: #d9d3f0; }
.improv-legend .sw-avoid { background: #f3d9d2; } .improv-legend .sw-target { background: var(--panel); border: 3px solid #ffb300; } .improv-legend .sw-off { background: var(--note); opacity: .22; }
.improv-why { margin-top: .6rem; } .improv-why summary { cursor: pointer; font-weight: 800; color: var(--accent); font-size: .9rem; }
.improv-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; }
@media (max-width: 860px) { .improv-two { grid-template-columns: 1fr; } }
.improv-practice h4, .improv-listen h4 { font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
.improv-phrase-tools { margin-top: .6rem; }
.improv-phrase { display: grid; gap: .25rem; border: 2px dashed var(--line); border-radius: 14px; padding: .6rem .8rem; margin-top: .4rem; }
.improv-phrase.on { border-style: solid; border-color: var(--accent); background: var(--tint); }
.improv-phrase-notes { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; }
.improv-phrase-notes b { color: var(--accent); } .improv-phrase-notes i { font-style: normal; color: var(--muted); }
.improv-rules { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; }
.improv-rules .select { height: 2rem; }
.improv-heard { display: flex; align-items: baseline; gap: .8rem; margin-top: .6rem; padding: .5rem .8rem; border-radius: 14px; background: var(--tint); }
.improv-heard-note { font-size: 1.6rem; font-weight: 900; min-width: 3rem; }
.improv-heard.tone { background: #d9f3e4; } .improv-heard.tone .improv-heard-note { color: #2f9e5b; }
.improv-heard.scale .improv-heard-note { color: var(--accent); }
.improv-heard.avoid { background: #ffe9d6; } .improv-heard.avoid .improv-heard-note { color: #c2491f; }
.improv-heard.outside { background: #ffe4dc; } .improv-heard.outside .improv-heard-note { color: var(--bad); }
.improv-take { display: grid; gap: .3rem; margin-top: .5rem; } .improv-take audio { width: 100%; max-width: 420px; }
.improv-links { flex-wrap: wrap; gap: .5rem; align-items: center; }
/* The scale finder's chosen scale: the notes, and under them the degrees with their steps, column for column. */
.sf-rows { display: grid; justify-items: start; gap: .35rem; margin: .2rem 0 .6rem; }
/* The glossary: a search, the letters, and the terms as a definition list. */
.glossary-tools { align-items: flex-end; }
.glossary-search { flex: 1 1 18rem; max-width: 28rem; }
.glossary-search .input { width: 100%; }
.glossary-letters { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1rem 0 .8rem; }
.glossary-letters a, .glossary-letters span, .glossary-letters button { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; font-weight: 800; font-size: .85rem; text-decoration: none; }
.glossary-letters a, .glossary-letters button { background: var(--tint); color: var(--accent); padding: 0; } .glossary-letters button:hover { text-decoration: none; background: var(--line); }
.glossary-letters a:hover { background: var(--accent); color: #fff; }
.glossary-letters span { opacity: .4; }
.glossary-count { margin: 0 0 .6rem; }
.glossary { margin: 0; }
.glossary-letter { font-size: 1.4rem; font-weight: 900; color: var(--accent); margin: 1.2rem 0 .4rem; padding-bottom: .2rem; border-bottom: 2px solid var(--line); scroll-margin-top: 5rem; }
.glossary-letter:first-child { margin-top: 0; }
.glossary-entry { padding: .55rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 5rem; }
.glossary-entry:last-child { border-bottom: 0; }
.glossary-entry dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.glossary-term { font-weight: 900; font-size: 1.05rem; }
.glossary-cat { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); background: var(--tint); border-radius: 999px; padding: .1rem .5rem; }
.glossary-entry dd { margin: .2rem 0 0; line-height: 1.5; }
.glossary-see { display: inline-block; margin-left: .4rem; font-weight: 700; white-space: nowrap; }
@media print {
    .content:has(.glossary-list) > .toolbar, .glossary-letters, .glossary-see { display: none !important; }
    .glossary-list { border: 0; padding: 0; box-shadow: none; }
    .glossary-entry { break-inside: avoid; }
}
/* The fingerpicking page: the same grid with a column of fingers in each cell (a m i, then the thumb), each a toggle. */
.pick-cells { grid-template-columns: repeat(var(--slots, 8), minmax(48px, 1fr)); }
.pick-cells.sixteenths { grid-template-columns: repeat(var(--slots, 16), minmax(34px, 1fr)); min-width: 660px; }
.pick-cell { aspect-ratio: 1 / 1.85; grid-template-rows: auto 1fr auto; }
.pick-cell button.count { background: none; border: 0; font: inherit; font-size: .9rem; font-weight: 900; cursor: pointer; border-radius: 8px; }
.pick-cell button.count:hover { background: var(--tint); }
.pick-cell .fingers { display: grid; grid-template-rows: repeat(4, 1fr); gap: 2px; align-self: stretch; justify-self: stretch; width: 100%; box-sizing: border-box; padding: .1rem .4rem; min-width: 0; }
.pick-cell .fg { border: 0; background: var(--tint); border-radius: 6px; font: inherit; font-size: .72rem; font-weight: 900; color: #c9c2ea; cursor: pointer; line-height: 1; padding: 0; min-height: 1.15rem; display: grid; place-items: center; }
.pick-cell .fg:hover { color: var(--ink); }
.pick-cell .fg.on { background: #ff7a59; color: #fff; }
.pick-cell .fg.thumb.on { background: var(--accent); color: #fff; }
.pick-cell .fg:focus-visible { outline: 2px solid #ffd54a; }
.pick-cell.ghost .kind { color: #c9c2ea; }
.pick-cell.pinch .kind, .pick-cell.strum .kind { color: var(--accent); }
.pick-cell .fg.thumb { font-size: .8rem; }
.pick-cell.now .fg { background: rgba(255, 255, 255, .7); color: #a9a2c9; }
.pick-cell.now .fg.on { background: #ff7a59; color: #fff; }
.pick-cell.now .fg.thumb.on { background: var(--accent); }
.pick-cells.sixteenths .pick-cell .fg { font-size: .6rem; min-height: .95rem; }
.pick-cells.sixteenths .pick-cell .fingers { padding: .1rem .15rem; }
.pick-cell span.fg { cursor: default; }

/* ---- Hand percussion over a drum groove (PercussionPicker): a pill per instrument, outlined dashed when it suits the
   style, filled when on, with its own level slider. A full-width row under the Drums channel. ---- */
.perc-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0 0.6rem; border-top: 1px dashed var(--line); }
.perc-row > .mx-speaker, .perc-row > .perc-icon { flex: none; }
.perc-row > .perc-icon { margin-top: 0; }
/* Percussion switched off keeps its pills and levels as they are; moving a level switches it back on. */
.perc-row .mx-speaker:disabled { opacity: 0.45; cursor: default; }
.perc-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.perc-pill { display: inline-flex; align-items: center; gap: 0.3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.perc-pill.fits { border-color: var(--accent); border-style: dashed; }
.perc-pill.on { background: var(--accent-soft); border-color: var(--accent); border-style: solid; padding-right: 0.5rem; }
.perc-toggle { font: inherit; font-weight: 700; font-size: 0.8rem; color: var(--ink); background: none; border: 0; border-radius: 999px; padding: 0.25rem 0.65rem; cursor: pointer; }
.perc-pill.on .perc-toggle { padding-right: 0.1rem; }   /* the level slider sits close after the name */
.perc-pill.on .perc-toggle { color: var(--accent); }
.perc-level { width: 4.5rem; accent-color: var(--accent); }
@media (max-width: 560px) { .perc-row { flex-direction: column; gap: 0.3rem; } }

/* ── Editing a groove: the drums and each percussion part as steps, hidden until a ✎ opens them ── */
.mx-pick-edit { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.mx-pick-edit .select { min-width: 0; flex: 1; }
/* The drums picker: "Rock (ride) · 808" in one button, the kit in the accent color; cut short with … when narrow */
.drums-pick-btn { display: flex; align-items: center; min-width: 0; text-align: left; }
.drums-pick-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drums-pick-text b { font-weight: 700; }
.drums-pick-kit { color: var(--accent); font-weight: 700; }
.fxb-tabs { margin: 0; }
.fxb-tabs button { padding: 0.25rem 0.9rem; font-size: 0.85rem; }
.perc-edit { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.perc-edit svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.perc-edit[aria-expanded="true"] { background: var(--accent); color: #fff; }
.perc-pill .perc-edit { width: 1.5rem; height: 1.5rem; }
.perc-pill.editing { box-shadow: none; }
.perc-edited { font-size: 0.68rem; font-weight: 800; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0.05rem 0.4rem; }
.perc-editor { border-top: 1px solid var(--line); padding: 0.7rem 0 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.perc-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.perc-editor-tools { gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.perc-editor-tools label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; }
.perc-editor-tools .select { padding: 0.3rem 0.5rem; }
.perc-editor-note { margin: 0; }
.perc-strikes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.perc-strike { font: inherit; font-weight: 800; font-size: 0.82rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.perc-strike.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.step-grid-box { overflow-x: auto; padding: 8px 8px 10px; margin: -8px -8px 0; }   /* room for a lit column's glow at either end */
.step-grid { display: flex; gap: 0.2rem; align-items: stretch; min-width: max-content; }
.step-names, .step-col { display: flex; flex-direction: column; gap: 0.4rem; }
.step-names { width: 5.4rem; flex: none; }
.step-col { flex: 1 1 1.5rem; min-width: 1.5rem; padding: 0.25rem 0.1rem 0.35rem; border: 2px solid transparent; border-radius: 10px; transition: background 0.06s; }
.step-col.beat { background: var(--bg); }
.step-count { height: 1.1rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); opacity: 0.75; }
.step-col.beat .step-count { font-weight: 900; color: var(--ink); opacity: 1; }
.step-name { height: 2.6rem; display: flex; align-items: center; font-weight: 900; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-name.guide { height: 0.55rem; font-size: 0.72rem; font-weight: 700; color: var(--muted); overflow: visible; }
.step-cell { height: 2.6rem; padding: 0; border-radius: 8px; border: 2px solid var(--line); background: var(--panel); display: flex; align-items: flex-end; overflow: hidden; cursor: pointer; }
.step-cell > span { display: block; width: 100%; height: 0; background: var(--line); }
.step-cell.v1 { border-color: #c9bdf5; } .step-cell.v1 > span { height: 20%; background: #c9bdf5; }
.step-cell.v2 { border-color: #9d8fe0; } .step-cell.v2 > span { height: 45%; background: #9d8fe0; }
.step-cell.v3 { border-color: #6b5bc8; } .step-cell.v3 > span { height: 72%; background: #6b5bc8; }
.step-cell.v4 { border-color: var(--accent); } .step-cell.v4 > span { height: 100%; background: var(--accent); }
.step-cell:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; }
/* A tone grid (the bass line): the tone written in the cell, filled when it plays, orange for a lead-in. */
.step-cell.tone { align-items: center; justify-content: center; font: inherit; font-size: 0.85rem; font-weight: 900; color: var(--accent); }
.step-cell.tone.t-note { background: var(--accent); border-color: var(--accent); color: #fff; }
.step-cell.tone.t-lead { background: #ffd8cc; border-color: #ff7a59; color: #8a2a12; }
.step-cell.tone.t-next { background: #c9bdf5; border-color: #9d8fe0; color: #2b2150; }
.step-guide { height: 0.55rem; margin: 0 0.25rem; border-radius: 999px; background: var(--tint); }
.step-guide.hit { background: #b9aee6; }
/* The step sounding, as the groove plays or is previewed: its whole column in gold, as the picking and strumming cells light. */
.step-col.now { border-color: #ffb300; background: #ffd54a; box-shadow: 0 0 0 3px rgba(255, 179, 0, .45), 0 4px 10px rgba(255, 179, 0, .3); }
.step-col.now .step-count { color: #2b2150; font-weight: 900; opacity: 1; }
.step-col.now .step-cell:not(.v1):not(.v2):not(.v3):not(.v4) { background: #fff3c4; border-color: #ffcf5c; }
.step-col.now .step-guide { background: #ffe49a; } .step-col.now .step-guide.hit { background: #c08a00; }

/* The play direction control (PlayDirectionPicker): the button, and what it's set to in words. At the end of a toolbar
   row it sits to the right of everything else. */
.play-direction-picker { display: inline-flex; align-items: center; gap: 0.4rem; }
.play-direction-words { font-size: 0.85rem; font-weight: 700; color: var(--muted); white-space: nowrap; min-width: 6.5rem; }
.modes-toolbar .play-direction-picker { margin-left: auto; }

/* The polyrhythm trainer's famous songs: the dropdown, and the song's card (its two parts, where to listen, the source). */
.poly-song-pick .select { width: 100%; }
.poly-song-pick .song-pick-btn { display: block; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poly-song-card { margin: 0.6rem 0 0.4rem; padding: 0.7rem 0.85rem; background: var(--tint); border-radius: 12px; }
.poly-song-card p { margin: 0 0 0.45rem; }
.poly-song-card p:last-child { margin-bottom: 0; }
.poly-song-card .mode-song-video { margin: 0.6rem 0 0; max-width: 560px; }
.yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
.yt-poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.yt-poster .yt-play { position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 2.9rem; margin: -1.45rem 0 0 -2.1rem; border-radius: 14px; background: #ff0033; display: grid; place-items: center; }
.yt-poster .yt-play svg { width: 1.6rem; height: 1.6rem; fill: #fff; }
.yt-poster:hover .yt-play, .yt-poster:focus-visible .yt-play { background: #cc0029; }
.poly-song-card .poly-label { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: 0.7rem; vertical-align: middle; margin-right: 0.15rem; }

.poly-songs-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.poly-songs-head h2 { margin-bottom: 0.4rem; }
.poly-practice-head { margin-top: 1.6rem; }

/* ---- Odd meters: bars drawn to scale (--om-q = one quarter note), each split into its groups, a dot per pulse (the
   bar's first beat biggest, each group's first next), the count under it. While it plays the pulse, its group and the
   bar light on the audio clock (classes now / sounding, from erasmusLights). ---- */
.om-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .om-layout { grid-template-columns: 1fr; } }
.om-tools { flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.om-chart { margin-top: 0.8rem; }
.om-section { margin-bottom: 1rem; }
.om-section-name { font-size: 0.95rem; margin: 0.4rem 0 0.35rem; color: var(--muted); }
.om-bars { display: flex; flex-wrap: wrap; gap: 0.9rem 0.5rem; }
.om-bar { position: relative; min-width: 3.4rem; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px; padding: 1.55rem 0.3rem 0.4rem; background: var(--panel); transition: border-color 0.1s, box-shadow 0.1s; }
.om-bar.sounding { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.om-sig { position: absolute; top: 0.3rem; left: 0.45rem; font-weight: 800; font-size: 0.8rem; color: var(--ink); white-space: nowrap; }
.om-groups { display: flex; }
.om-group { display: flex; border-left: 1px dashed var(--line); border-radius: 6px; }
.om-group:first-child { border-left: 0; }
.om-group.now { background: var(--accent-soft); }
.om-pulse { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.2rem 0; }
.om-dot { --d: 6px; width: var(--d); height: var(--d); margin: calc((14px - var(--d)) / 2) 0; border-radius: 50%; background: var(--muted); opacity: 0.55; transition: transform 0.06s; }
.om-pulse.lead .om-dot { --d: 10px; background: var(--ink); opacity: 1; }
.om-pulse.down .om-dot { --d: 14px; background: var(--ink); opacity: 1; }
.om-pulse.now .om-dot { background: var(--coral); opacity: 1; transform: scale(1.3); }
.om-say { font-size: 0.72rem; font-weight: 700; line-height: 1; color: var(--muted); }
.om-pulse.lead .om-say, .om-pulse.down .om-say { color: var(--ink); }
.om-pulse.now .om-say { color: var(--coral-deep); }
.om-own { margin-top: 1rem; }
.om-own summary { cursor: pointer; font-weight: 700; }
.om-own .row { gap: 0.5rem; align-items: center; }
.om-own-text { flex: 1; min-width: 14rem; font-family: Consolas, "Cascadia Mono", monospace; }
.om-side .select { width: 100%; }

/* A letter in a mixer symbol's top-left corner (MixerChannel Badge): "C" for chords, "L" for lead on the improv trainer. */
.mx-badge { position: absolute; top: -4px; left: -6px; z-index: 1; min-width: 0.85rem; padding: 0 0.15rem; border-radius: 4px; background: var(--ink); color: #fff; font-size: 0.62rem; font-weight: 900; line-height: 1.3; text-align: center; pointer-events: none; }


/* ── Yes/no switch (YesNoToggle) ── */
.yn-toggle { position: relative; display: inline-flex; align-items: center; width: 4.1rem; height: 1.9rem; padding: 0 0.55rem 0 1.95rem; border-radius: 999px; border: 2px solid var(--line); background: var(--tint); color: var(--muted); font: inherit; font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: background 0.15s; }
.yn-toggle .yn-knob { position: absolute; left: 0.2rem; top: 50%; width: 1.35rem; height: 1.35rem; margin-top: -0.675rem; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 3px rgba(43, 33, 80, 0.3); transition: left 0.15s; }
.yn-toggle.yes { background: var(--accent); border-color: var(--accent); color: #fff; padding: 0 1.95rem 0 0.6rem; }
.yn-toggle.yes .yn-knob { left: calc(100% - 1.55rem); }
.yn-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* The challenge editor's note, octave and Add, lined up on one center line. */
.note-adder { align-items: center; }
.note-adder > * { margin-top: 0; margin-bottom: 0; }

/* Dragging a row to a new place (challenges admin). The arrows stay for keyboards, out of sight until focused. */
tr[draggable="true"] { cursor: grab; }
tr.dragging { opacity: 0.45; }
tr.drop-here td { box-shadow: inset 0 3px 0 var(--accent); }
.drag-grip { display: inline-grid; place-items: center; width: 1.6rem; height: 2rem; color: var(--muted); vertical-align: middle; }
.drag-grip svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.sr-only-buttons { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only-buttons:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

/* ── A song's video with its count (SyncedVideo, admin Beat maps): the bar and beat, and a polyrhythm's two lanes ── */
.bf { margin-top: 0.6rem; max-width: 560px; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; gap: 0.5rem; }
.bf-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.bf-head label { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 800; }
.bf-count { font-weight: 900; font-size: 1.15rem; min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.bf-beats { display: flex; gap: 0.35rem; }
.bf-beat { flex: 1; text-align: center; padding: 0.35rem 0; border-radius: 8px; border: 2px solid var(--line); font-weight: 900; color: var(--muted); }
.bf-beat.on { border-color: #ffb300; background: #ffd54a; color: #2b2150; }
.bf-beat:first-child.on { background: var(--coral); border-color: var(--coral-deep); }
.bf-lane { display: flex; align-items: center; gap: 0.35rem; }
.bf-lane .poly-label { flex: none; }
.bf-dot { flex: 1; height: 0.9rem; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); }
.bf-lane.a .bf-dot.on { background: #ff7a59; border-color: #f26a47; }
.bf-lane.b .bf-dot.on { background: #2f9e5b; border-color: #23824a; }
.bf-dot:first-of-type { box-shadow: inset 0 0 0 2px rgba(43, 33, 80, 0.15); }
.bf-jumps { gap: 0.35rem; }
.bf-note { margin: 0.35rem 0 0; }
.beatmap-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 0.8rem; }
@media (max-width: 900px) { .beatmap-grid { grid-template-columns: 1fr; } }
.beatmap-tap { margin-top: 0.6rem; }
.beatmap-tap-pad { min-width: 9rem; }
.beatmap-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.beatmap-section { gap: 0.4rem; margin-bottom: 0.35rem; }
.beatmap-save { margin-top: 0.9rem; }
.beatmap-admin .bf { max-width: none; margin-top: 1rem; }

/* The beat-map tool's waveform (js/beatwave.js). */
.beatwave-panel { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.beatwave-head { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.beatwave-head h2 { margin: 0; }
canvas.beatwave { width: 100%; height: 200px; display: block; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); touch-action: none; }
canvas.beatwave:focus-visible { outline: 3px solid var(--coral); }
.beatwave-tools { gap: 0.4rem; }
.beatwave-sep { width: 1px; height: 1.6rem; background: var(--line); }
.beatwave-help { margin: 0; }
.beatwave-sync { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--tint); }

/* The beat-map waveform's selected bar: its name, then the nudge steps, snap, hear and remove. */
.beatwave-selected { gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.beatwave-sel-label { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 12.5em; text-align: center; }

/* The beat-map page's waveform, laid out like the Song Learner: the file centred, zoom and range, the waveform, then the transport. */
.beatwave-file { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.4rem 0 0.8rem; }
.beatwave-zoom { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.beatwave-zoom .sl2-zoom { margin-left: 0; }
.beatwave-transport { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin: 0.6rem 0 0.9rem; }
.beatwave-transport .transport-bar { margin-top: 0; }
.beatmap-save { margin-top: 1rem; }

/* Before a file is loaded the waveform is the place to drop one; a file dragged over it lights it up. */
.beatwave-box { position: relative; }
.beatwave-drop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; padding: 1rem;
    border: 2px dashed var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.beatwave-drop svg { width: 34px; height: 34px; color: var(--accent); }
.beatwave-box.over .beatwave-drop, .beatwave-box.over canvas.beatwave { border-color: var(--accent); background: var(--accent-soft, #ece8ff); }
/* The transport keeps its buttons in one row beside the speeds (as a flex item it would otherwise shrink and stack them). */
.beatwave-transport .transport-bar { flex: 0 0 auto; flex-wrap: nowrap; container-type: normal; padding: 0.3rem 0.55rem; }   /* sized by its buttons, as on the Song Learner */
p.beatwave-file { margin: 0.2rem 0 0.6rem; text-align: center; }

/* ---- Site search (js/search.js): the Search button before the account, the box that drops down under it ---- */
.site-search-btn { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 0.42rem 0.95rem; font: inherit; font-weight: 800; cursor: pointer; line-height: 1.2; }
.site-search-btn:hover, .site-search-btn:focus-visible, .site-search-btn[aria-expanded="true"] { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.site-search-btn svg, .nav-search svg, .ss-bar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.nav-search { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; margin-left: auto; }
.ss-scrim { position: fixed; inset: 0; background: rgba(43, 33, 80, 0.32); z-index: 900; }
.ss-panel { position: fixed; top: 70px; right: 24px; z-index: 901; width: min(660px, calc(100vw - 24px)); max-height: min(78vh, 720px); display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(43, 33, 80, 0.28); overflow: hidden; }
.ss-scrim[hidden], .ss-panel[hidden] { display: none; }
.ss-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); color: var(--accent); }
.ss-bar svg { width: 20px; height: 20px; }
.ss-input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); background: transparent; padding: 0.3rem 0; }
.ss-input::-webkit-search-cancel-button { display: none; }
.ss-esc { font: inherit; font-size: 0.75rem; font-weight: 800; color: var(--muted); border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 0.2rem 0.45rem; cursor: pointer; }
.ss-body { overflow-y: auto; padding: 0.3rem 0.5rem 0.6rem; }
.ss-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.6rem 0.25rem; }
.ss-more { font-weight: 700; letter-spacing: 0; text-transform: none; }
.ss-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.6rem; border-radius: 10px; text-decoration: none; color: var(--ink); }
.ss-item:hover, .ss-item.sel { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.ss-badge { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 0.8rem; font-weight: 900; color: var(--ink); background: var(--tint); overflow: hidden; }
.ss-badge svg { width: 28px; height: 28px; }
.ss-badge.g-scales-modes { background: #e3f8ee; } .ss-badge.g-chords, .ss-badge.g-progressions, .ss-badge.g-chord-charts { background: #fff1dc; }
.ss-badge.g-glossary { background: #eef3ff; } .ss-badge.g-songs { background: #ffe8f0; } .ss-badge.g-admin { background: #f1edf7; }
.ss-badge.c-mint { background: #e3f8ee; } .ss-badge.c-amber { background: #fff1dc; } .ss-badge.c-coral { background: #ffe6de; }
.ss-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.ss-title { font-weight: 800; }
.ss-title mark { background: #ffe2d6; color: inherit; border-radius: 3px; padding: 0 1px; }
.ss-sub { font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-answer { margin: 0.5rem 0.3rem 0.3rem; padding: 0.85rem 1rem; border-radius: 14px; background: var(--bg); border: 2px solid #c9bdf5; display: flex; flex-direction: column; gap: 0.55rem; }
.ss-answer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.ss-answer-title { font-size: 1.3rem; font-weight: 900; }
.ss-answer-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); }
.ss-notes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ss-note { min-width: 2rem; height: 2rem; padding: 0 0.35rem; box-sizing: border-box; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); display: inline-grid; place-items: center; font-weight: 900; font-size: 0.9rem; }
.ss-line { margin: 0; font-size: 0.88rem; color: var(--muted); }
.ss-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ss-go { display: inline-flex; align-items: center; min-height: 38px; padding: 0 0.95rem; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 800; font-size: 0.9rem; }
.ss-go:hover, .ss-go.sel { background: var(--ink); color: #fff; }
.ss-hear { min-height: 38px; padding: 0 0.95rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); font: inherit; font-weight: 800; font-size: 0.9rem; color: var(--ink); cursor: pointer; }
.ss-more-link { font-weight: 800; font-size: 0.9rem; padding: 0 0.4rem; }
.ss-more-link.sel { text-decoration: underline; }
.ss-recent { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.3rem; border-radius: 10px; }
.ss-recent-q { flex: 1; padding: 0.45rem 0.4rem; color: var(--ink); font-weight: 800; text-decoration: none; border-radius: 8px; }
.ss-recent-q:hover, .ss-recent-q.sel { background: var(--tint); }
.ss-forget { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1.1rem; cursor: pointer; border-radius: 8px; }
.ss-jump { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.2rem 0.6rem 0.4rem; }
.ss-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 0.85rem; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.88rem; }
.ss-chip:hover, .ss-chip.sel { border-color: var(--accent); color: var(--accent); }
.ss-none { margin: 0.9rem 0.6rem 0.2rem; color: var(--muted); }
.ss-none b { color: var(--ink); }
.ss-hint { font-size: 0.85rem; }
.ss-foot { padding: 0.55rem 1rem; border-top: 1px solid var(--line); background: var(--bg); font-size: 0.75rem; color: var(--muted); }
.ss-foot b { color: var(--ink); }
@media (max-width: 700px) {
    .nav-search { display: inline-flex; }
    .account-box .site-search-btn { display: none; }
    .ss-panel { inset: 0; top: 0; right: 0; width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
    .ss-foot { display: none; }
    .ss-item { min-height: 52px; }
}

/* ---- Sound effects over the drums (FxPicker): pills with when they play, an editor like the percussion's ---- */
.fx-row .fx-spacer { flex: none; width: 34px; }
.fx-when { font-size: 0.72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.fx-remove { width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.fx-remove:hover { background: var(--panel); color: var(--bad); }
.fx-add .select { font-size: 0.8rem; padding: 0.25rem 1.8rem 0.25rem 0.7rem; border-radius: 999px; min-height: 0; }
.fx-add-btn { font: inherit; font-size: 0.85rem; font-weight: 800; color: var(--accent); background: var(--panel); border: 2px dashed var(--accent); border-radius: 999px; padding: 0.3rem 0.9rem; cursor: pointer; }
.fx-add-btn:hover, .fx-add-btn:focus-visible { background: var(--tint); }
/* A picker that opens the sound browser: looks like a box to choose from, with a play-list badge on the right saying "opens
   a list of sounds to hear and pick", and the name kept to one line. */
.fx-sound-btn { position: relative; text-align: left; cursor: pointer; font: inherit; font-weight: 700; min-width: 9rem; max-width: 100%;
    padding-right: 2.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-sound-btn::after { content: ""; position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; border-radius: 8px;
    background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b3bb0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h11M4 11h11M4 16h6'/%3E%3Cpath d='M14 14.5v5.5l5-2.75z' fill='%234b3bb0'/%3E%3C/svg%3E") center / 1.05rem no-repeat; }
.fx-sound-btn:hover, .fx-sound-btn:focus-visible { border-color: var(--accent); outline: none; }
.fx-sound-btn:hover::after, .fx-sound-btn:focus-visible::after { background-color: #ddd3ff; }

/* ---- The sound browser (FxBrowser.razor): groups on the left, a search, the sounds as tiles you can hear ---- */
.fxb-scrim { position: fixed; inset: 0; background: rgba(43, 33, 80, 0.32); z-index: 950; }
.fxb { position: fixed; z-index: 951; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100vw - 24px)); height: min(600px, calc(100vh - 40px));
    display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 60px rgba(43, 33, 80, 0.25); overflow: hidden; color: var(--ink); }
.fxb-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.fxb-title { font-weight: 900; white-space: nowrap; }
.fxb-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; border: 2px solid var(--line); border-radius: 12px; padding: 0 0.7rem; min-height: 42px; color: var(--accent); }
.fxb-search:focus-within { border-color: var(--accent); }
.fxb-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.fxb-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-weight: 700; font-size: 1rem; color: var(--ink); background: transparent; }
.fxb-close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: inherit; font-size: 1.2rem; cursor: pointer; flex: none; }
.fxb-body { flex: 1; display: flex; min-height: 0; }
.fxb-groups { width: 196px; flex: none; border-right: 1px solid var(--line); padding: 0.5rem; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; background: var(--bg); }
.fxb-group { flex: none; line-height: 1.2; display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 40px; padding: 0.45rem 0.75rem; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.fxb-group:hover { background: var(--tint); }
.fxb-group.on { background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.fxb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fxb-gname { flex: 1; }
.fxb-count { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.fxb-list { flex: 1; min-width: 0; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; }
.fxb-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.fxb-list-head h2 { margin: 0; font-size: 1.2rem; font-weight: 900; }
.fxb-key { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.fxb-key b, .fxb-tune { color: var(--accent); }
.fxb-tune { margin-left: 0.2em; }
.fxb-none { margin: 0.4rem 0; color: var(--muted); font-weight: 700; }
.fxb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.fxb-tile { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 12px; background: var(--panel); min-height: 58px; }
.fxb-tile:hover { border-color: #8f7be8; }
.fxb-tile.on { border-color: var(--accent); background: var(--tint); }
.fxb-pick { flex: 1; min-width: 0; align-self: stretch; text-align: left; border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer; padding: 0.5rem 0.25rem 0.5rem 0.75rem; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.fxb-name { font-weight: 800; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fxb-sub { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
/* A tile with a link (an instrument's Wikipedia page): the link sits where the line under the name would, outside the pick button */
.fxb-tile { position: relative; }
.fxb-tile.has-link .fxb-pick { padding-bottom: 1.45rem; }
.fxb-links { position: absolute; left: 0.75rem; right: 3rem; bottom: 0.4rem; display: flex; gap: 0.6rem; font-size: 0.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; }   /* clear of the ▶ on the right */
.fxb-links a { color: var(--accent); text-decoration: none; }
.fxb-links a:hover { text-decoration: underline; }
.fxb-play { flex: none; width: 36px; height: 36px; margin-right: 0.6rem; border-radius: 50%; border: 2px solid #c9bdf5; background: var(--panel); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.fxb-play svg { width: 14px; height: 14px; fill: currentColor; }
.fxb-play:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fxb-play.playing, .fxb-play.previewing { background: #ff7a59; border-color: #ff7a59; color: var(--ink); }
/* Taller tiles: the ▶ centred on the right; the name uses the full width at the top, the lines under it keep clear of the ▶. */
.fxb-tile { min-height: 88px; align-items: stretch; }
.fxb-pick { justify-content: flex-start; padding: 0.55rem 0.75rem 0.5rem; }
.fxb-tile .fxb-sub, .fxb-tile .fxb-glyphs { padding-right: 2.7rem; }
.fxb-tile { min-height: 96px; }   /* tall enough for a name that wraps, so the ▶ (centred) clears the lines under a short name too */
.fxb-tile .fxb-play { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); margin: 0; }
.fxb-tile.has-link .fxb-pick { padding-bottom: 1.7rem; }
.timer-mixer { margin: 0.6rem 0 0.9rem; max-width: 720px; }
.voice-pick { display: inline-flex; align-items: center; gap: 0.4rem; }
.fxb-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); background: var(--bg); flex-wrap: wrap; }
.fxb-picked { font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.fxb-extra { font-size: 0.85rem; font-weight: 700; margin-right: auto; }
/* My sound effects (account/sounds) and the admin's review of them */
.ms-upload-row { align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; }
.ms-upload-row label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 700; font-size: 0.85rem; }
.ms-file input[type=file] { font-size: 0.85rem; max-width: 16rem; }
.ms-table td { vertical-align: middle; }
.ms-rename .input { width: 14rem; }
.ms-state { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-right: 0.4rem; }
.ms-state.pending { color: var(--amber-ink); }
.ms-state.shared { color: var(--good, #2e8b57); }
.ms-state.rejected { color: var(--bad); }
.ms-share { gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
.sound-review audio, .ms-table audio { height: 2rem; max-width: 100%; }
.fxb-acts { display: flex; gap: 0.5rem; }
.fxb-adds { display: flex; gap: 0.5rem; flex-wrap: wrap; }   /* "+ Save this preset" and the like, bottom left */
.fxb-add { font-weight: 800; }
.fxb-go { background: #ff7a59; border-color: #ff7a59; color: var(--ink); }
@media (max-width: 700px) {
    .fxb { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; height: 82vh; border-radius: 22px 22px 0 0; border: 0; }
    .fxb-head { flex-wrap: wrap; }
    .fxb-search { order: 3; flex-basis: 100%; }
    .fxb-close { margin-left: auto; width: 44px; height: 44px; }
    .fxb-body { flex-direction: column; }
    .fxb-groups { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); flex: none; }
    .fxb-group { width: auto; flex: none; border: 2px solid var(--line); border-radius: 999px; min-height: 40px; }
    .fxb-group.on { box-shadow: none; border-color: var(--accent); }
    .fxb-tiles { grid-template-columns: minmax(0, 1fr); }
    .fxb-play { width: 44px; height: 44px; }
    .fxb-acts { flex: 1; justify-content: flex-end; }
}
.fx-controls { gap: 0.6rem 1.2rem; align-items: center; flex-wrap: wrap; }
.fx-controls label { display: inline-flex; align-items: center; gap: 0.4rem; }
.fx-controls input[type="range"] { width: 6.5rem; accent-color: var(--accent); }
.fx-controls .fx-tune input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.fx-num { min-width: 2.6em; font-variant-numeric: tabular-nums; font-weight: 800; }
.fx-warn { color: var(--bad); margin: 0; }
@media (max-width: 560px) { .fx-row .fx-spacer { display: none; } }

/* ---- The sounds drawer (SoundsDrawer.razor): the mixer behind one button ---- */
.snd-drawer { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0.4rem 0; }
.snd-btn { display: inline-flex; align-items: center; gap: 0.6rem; border: 2px solid var(--accent); background: #fff; color: var(--ink); border-radius: 999px;
    padding: 0.35rem 0.85rem 0.35rem 0.6rem; font: inherit; font-weight: 900; cursor: pointer; }
.snd-btn:hover, .snd-btn:focus-visible { background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(75, 59, 176, 0.18); }
.snd-icons { display: inline-flex; align-items: center; gap: 0.3rem; }
.snd-icon { position: relative; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); }
.snd-icon > svg:first-child { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd-icon > svg:first-child .thin { stroke-width: 1; opacity: 0.45; }
.snd-icon > svg:first-child .fill { fill: currentColor; stroke: none; }
.snd-icon > svg:first-child .hole { fill: #fff; stroke: none; }
.snd-icon.off { color: #9a94b3; }
.snd-slash { position: absolute; inset: 0; width: 24px; height: 24px; fill: none; stroke: #1d1a26; stroke-width: 2; stroke-linecap: round; }
.snd-chev { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.snd-drawer[data-open] .snd-chev { transform: rotate(180deg); }
.snd-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 900; width: min(690px, calc(100vw - 24px)); max-height: min(75vh, 900px); overflow-y: auto;
    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(43, 33, 80, 0.22); padding: 0.4rem 0.9rem 0.8rem; text-align: left; }
.snd-drawer[data-open] .snd-panel { display: block; }
.snd-panel > .mixer { margin: 0; border: 0; box-shadow: none; padding: 0; }
/* Two channels or fewer: no button, the mixer where it always was. */
.snd-drawer.snd-inline { display: block; margin: 0; }
.snd-drawer.snd-inline .snd-btn { display: none; }
.snd-drawer.snd-inline .snd-panel { display: block; position: static; width: auto; max-height: none; overflow: visible; border: 0; box-shadow: none; padding: 0; background: transparent; }
@media (max-width: 700px) {
    .snd-panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 80vh; border-radius: 18px 18px 0 0; }
}
.perc-pills .fx-add-btn { align-self: center; }
.perc-toggle.previewable.previewing { color: var(--coral); }

/* The improv trainer's second row: tempo, count-in, the Sounds button and Play, lined up on the tempo box. */
.improv-transport { align-items: flex-end; }
.improv-transport .snd-drawer { margin: 0; }
.improv-transport > .check { min-height: 2.6rem; display: inline-flex; align-items: center; }
/* The tempo box (TempoStepper.razor): − number + in one bordered box, the same in a toolbar or anywhere else. */
.tempo-stepper { height: 2.5rem; box-sizing: border-box; padding: 0 0.3rem; border: 2px solid var(--line); border-radius: 14px; background: #fff; justify-content: space-between; min-width: 7.5rem; vertical-align: middle; }
.tempo-stepper .button { padding: 0.25rem 0.6rem; }
.tempo-stepper .input { border: 0; height: auto; padding: 0.2rem 0.3rem; width: 3.6rem; text-align: center; background: transparent; }
/* Snug: just room for three digits between − and + (over the toolbar's wider stepper and the inputs' 10rem minimum). */
.stepper.tempo-stepper, .toolbar .stepper.tempo-stepper { min-width: 0; width: auto; gap: 0.15rem; padding: 0 0.25rem; }
.stepper.tempo-stepper .input, .toolbar .stepper.tempo-stepper .input { min-width: 0; width: 2.7rem; padding: 0.2rem 0.1rem; }
.stepper.tempo-stepper .button, .toolbar .stepper.tempo-stepper .button { padding: 0.2rem 0.5rem; }
.tempo-stepper .input::-webkit-inner-spin-button, .tempo-stepper .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tempo-stepper .input { -moz-appearance: textfield; }
.tempo-stepper .button:disabled { opacity: 0.4; cursor: default; }

/* ---- Every checkbox is a yes/no switch, the same pill as YesNoToggle.razor (the challenges editor's Active): grey "No"
   with the knob on the left, violet "Yes" with it on the right. Drawn on the real checkbox, so every page's binding,
   label and keyboard use (Tab, Space) work as before. A checkbox that must stay a tick box takes class="keep-checkbox". */
input[type="checkbox"]:not(.keep-checkbox) {
    -webkit-appearance: none; appearance: none; position: relative; flex: none; box-sizing: border-box;
    width: 4.1rem; height: 1.9rem; margin: 0; border-radius: 999px; border: 2px solid var(--line); background: var(--tint);
    font: inherit; vertical-align: middle; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
input[type="checkbox"]:not(.keep-checkbox)::before {
    content: ""; position: absolute; left: 0.2rem; top: 50%; width: 1.35rem; height: 1.35rem; margin-top: -0.675rem; border-radius: 50%;
    background: var(--panel); box-shadow: 0 1px 3px rgba(43, 33, 80, 0.3); transition: left 0.15s;
}
input[type="checkbox"]:not(.keep-checkbox)::after {
    content: "No"; position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
    font-size: 0.8rem; font-weight: 800; line-height: 1; color: var(--muted);
}
input[type="checkbox"]:not(.keep-checkbox):checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:not(.keep-checkbox):checked::before { left: calc(100% - 1.55rem); }
input[type="checkbox"]:not(.keep-checkbox):checked::after { content: "Yes"; right: auto; left: 0.6rem; color: #fff; }
input[type="checkbox"]:not(.keep-checkbox):focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
input[type="checkbox"]:not(.keep-checkbox):disabled { opacity: 0.45; cursor: default; }

/* Play-along: a little room between the pickers above and the row of yes/no switches. */
.row.pa-show { margin-top: 0.9rem; align-items: center; }
.pa-show .pa-neck-shows .seg-toggle { margin-bottom: 0; }
/* Neck shows has its label above it: the row sits on its bottom edge, each switch as tall as the segments so all their middles line up */
.row.pa-show:has(.pa-neck-shows) { align-items: flex-end; }
.row.pa-show:has(.pa-neck-shows) > label.check { min-height: 2.5rem; }

/* Tuner: room between the tuning picker and the string buttons. */
.string-refs { margin-top: 0.7rem; }

/* Metronome: the Sounds button right after Accent beat 1, on the row's baseline. */
.metro-controls > .snd-drawer { margin: 0; align-self: flex-end; }
/* Timer: its two yes/no switches side by side. */
.metro-practice-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.6rem; margin: 0.5rem 0; }
.metro-practice .metro-practice-opts label.check { margin: 0; }

/* Odd meters: Loop sits on the tempo box's line; the yes/no switches get a row below. */
/* Tempo, the part and Loop all centred on the big Play button: the labels sit beside their controls, not above. */
.om-tools > label:where(:not(.check)) { flex-direction: row; align-items: center; gap: 0.5rem; }
.om-switches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; margin: 0.9rem 0 0.4rem; }
.om-switches label.check { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; }

/* Simon: room between Start listening and the replay button. */
.simon-replay { margin-top: 0.8rem; }
/* The Sounds button inside a toolbar row (Strumming, Picking, Improv): on the row's baseline. The toolbar's label and
   box rules above stop at the Sounds panel and the sound browser, which keep their own layout. */
.toolbar > .snd-drawer { margin: 0; align-self: flex-end; }

/* Picking and Strumming: room above the Sounds button when it wraps under the boxes above it. */
.strum-builder .snd-drawer { margin-top: 0.6rem; }

/* Improv, Strumming, Picking: a yes/no switch in the tempo row sits centred on the 2.5rem boxes beside it. */
.toolbar.improv-transport > label.check, .toolbar.strum-transport > label.check { padding-bottom: 0; min-height: 2.5rem; align-self: flex-end; align-items: center; }

/* Scales by mood: the Root box only as wide as a note name. */
.sm-toolbar .select:where(:not(.snd-panel *, .fxb *)) { min-width: 0; }
.sm-toolbar label > .select { width: 4.6rem; }

/* Every N-note scale: Up and down then Print, side by side on one line, centred on each other and level with the boxes. */
.scale-filters > .play-direction-picker, .scale-filters > .print-button { align-self: flex-end; margin-bottom: 0.35rem; }
.scale-filters > .play-direction-picker .play-direction-words { min-width: 0; }
/* Chord chart / play-along sound row: the Sounds button right after Comping, on the same line. */
.pa-sound > .snd-drawer { margin: 0; }

/* The Notes stepper (ScaleChooser) wears the tempo box: − 7 + in one snug bordered box, the number centred. */
.tempo-stepper .stepper-value { min-width: 2.2rem; text-align: center; font-weight: 800; color: var(--ink); }

/* The sound browser's chips (a scale's number of notes) and its sections (famous songs by mode or by artist). */
.fxb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.fxb-chips-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); margin-right: 0.2rem; }
.fxb-chip { min-width: 2.4rem; min-height: 2rem; padding: 0 0.75rem; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 800; font-size: 0.85rem; cursor: pointer; }
.fxb-chip:hover { border-color: var(--accent); }
.fxb-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fxb-sections { margin: 0; }
.fxb-sections button { padding: 0.25rem 0.8rem; font-size: 0.82rem; }
.fxb-section { margin: 0.4rem 0 -0.1rem; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* The Scale button: room for a long scale name. */
.scale-pick-btn { min-width: 13rem; }

/* ---- Intervals (theory/intervals): the chart of names, a column per interval, and the picked one's card ---- */
.iv-chart-scroll { overflow-x: auto; }
.iv-chart { display: flex; flex-direction: column; gap: 0.45rem; min-width: 820px; }
.iv-row { display: grid; grid-template-columns: 8.5rem repeat(13, minmax(0, 1fr)); align-items: stretch; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.iv-label { display: flex; align-items: center; padding: 0.5rem 0.7rem; background: var(--ink); color: #fff; font-weight: 800; font-size: 0.95rem; }
.iv-cell { min-height: 2.8rem; padding: 0.3rem 0.15rem; border: 0; border-left: 1px dashed var(--line); background: #fff; color: var(--ink); font: inherit; cursor: pointer; display: grid; place-items: center; text-align: center; }
.iv-cell:hover { background: var(--tint); }
.iv-cell.on { background: var(--accent-soft, #ece8ff); box-shadow: inset 0 -3px 0 var(--accent); }
.iv-latin { font-size: 0.68rem; font-weight: 700; color: var(--muted); line-height: 1.1; }
.iv-big { font-size: 1.05rem; font-weight: 800; }
.iv-numeral { font-family: Georgia, 'Times New Roman', serif; font-weight: 600; }
.iv-split { display: flex; flex-direction: column; font-size: 0.72rem; line-height: 1.1; }
.iv-split > span:first-child { border-bottom: 1px solid var(--muted); padding-bottom: 1px; }
.iv-notation-row { grid-template-columns: 8.5rem 1fr; }
.iv-staff { width: 100%; height: 6.5rem; display: block; background: #fff; }
.iv-staff-line { stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.iv-clef { font-family: 'Segoe UI Symbol', 'Noto Music', 'Bravura', serif; font-size: 62px; fill: var(--ink); }
.iv-acc { font-size: 20px; font-weight: 700; fill: var(--ink); }
.iv-head { fill: var(--ink); }
.iv-head.on { fill: var(--accent); }
.iv-detail h2 { margin: 0; }
.iv-detail-short { font-size: 1rem; }
.iv-hear { gap: 0.4rem; align-items: center; }
.iv-songs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
.iv-song { border: 2px solid var(--line); border-radius: 14px; padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
.iv-song p { margin: 0; }
.iv-dir { font-size: 0.75rem; font-weight: 800; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.3rem; background: var(--tint); color: var(--accent); }
.iv-dir.down { background: #fff1dc; color: #8a5a00; }
.iv-yt { align-self: flex-start; }

/* Scales by mood: the moods in the filter as pills (each with ×), and "+ Mood" with the rest in a small panel under it. */
.sm-moods { align-items: center; }
.sm-mood-pill { padding-right: 0.3rem; }
.sm-mood-pill .perc-toggle { cursor: default; }
.sm-mood-add { position: relative; display: inline-flex; }
.sm-mood-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: min(560px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
    padding: 0.7rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 36px rgba(43, 33, 80, 0.2); }
.sm-mood-menu .button { margin-left: auto; }

/* Scales by mood: the songs under each mood. */
.sm-songs-head { margin: 0.8rem 0 0.5rem; font-size: 1rem; }

/* Every Root and Key dropdown (RootPicker) as narrow as its longest name ("C♯ / D♭", "D♭ (C♯)"), not stretched to the toolbar's columns */
.select.root-pick, .toolbar .select.root-pick:where(:not(.snd-panel *, .fxb *)) { width: 8.5rem; max-width: 8.5rem; flex: none; }
/* Modal arpeggios: the sound button a little wider, so the instrument's name has room */
.ma-toolbar .voice-pick .fx-sound-btn { min-width: 13rem; }

/* The circle orders (Half steps / Circle of fifths / Circle of fourths) as segment toggles: no gaps between the segments */
.seg-toggle.wheel-order, .seg-toggle.ladder-order, .seg-toggle.note-order { gap: 0; flex-wrap: nowrap; }
.shapes-view .seg-toggle.note-order { margin-bottom: 0; }

/* "Show: Chord degrees | Note names | Intervals" (Chords, Arpeggios): a segment toggle with its label above, centered */
.show-labels { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.show-labels-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); }
.show-labels .seg-toggle { margin-bottom: 0; }
.show-labels.own-line { flex-basis: 100%; align-items: flex-start; }   /* on its own line under the shape controls */
.show-labels.own-line .show-labels-label { align-self: flex-start; margin-left: 0.2rem; }
.seg-toggle.cc-view { margin-bottom: 0; gap: 0; }   /* Chart | Circle in the chord chart's transport bar */
.pattern-pick-btn { min-width: 14rem; max-width: 22rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* the comping pattern, opening the browser of patterns */
.toolbar > .toolbar-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; }   /* starts a new row in a wrapping toolbar */

/* The browser's search box stays one row (the magnifying glass at the right end), whatever a page's own label rules
   (.scale-filters label, .toolbar label…) would make of a label inside it */
.fxb label.fxb-search { display: flex; flex-direction: row; align-items: center; flex: 1; gap: 0.5rem; font-size: inherit; color: var(--accent); }
@media (max-width: 700px) { .fxb label.fxb-search { flex-basis: 100%; } }   /* on a phone it takes its own row under the title, as before */

/* The Sound picker in a toolbar: its label above its button, like the toolbar's other dropdowns */
.toolbar > .voice-pick:where(:not(.snd-panel *, .fxb *)) { flex-direction: column; align-items: stretch; gap: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); }
/* A browser group's bracket on its own line: "Fingers" over "(p i m a)" */
.fxb-gname-more { display: block; font-size: 0.78em; font-weight: 700; color: var(--muted); }

/* ---- Motion -------------------------------------------------------------------------------------------------------
   One duration and one easing for the whole site. Things move when what they show changes (a new key, voicing, mode or
   view), not while the sound plays, unless the movement is the timing (the chord circle's trail, the beat dots, the
   strum arrows, the polyrhythm chasers). Everything here stops under prefers-reduced-motion (the block at the end). */
:root { --motion-fast: 300ms; --motion-ms: 450ms; --motion-slow: 600ms; --motion-ease: cubic-bezier(0.33, 0, 0.2, 1); }

/* Fretboard and chord-box dots (Neck, ChordBox): placed by a transform, keyed by string, so they slide to new frets;
   a dot that wasn't there before fades in. */
.motion-dot { transition: transform var(--motion-ms) var(--motion-ease); animation: motion-in var(--motion-fast) var(--motion-ease) both; }
@keyframes motion-in { from { opacity: 0; } }

/* Mode ladder: the note that moved slides a half step round the circle; its own dot shows once it lands. */
.note-shape .ns-mover { pointer-events: none; animation: ns-move var(--motion-slow) var(--motion-ease) both; }
.note-shape .ns-mover .ns-dot { stroke: #fff; stroke-width: 3; }
.note-shape .ns-mover .ns-name { fill: #fff; }
@keyframes ns-move { from { transform: translate(var(--fx), var(--fy)); } to { transform: translate(var(--tx), var(--ty)); } }
.note-shape .ns-note.arriving > .ns-dot, .note-shape .ns-note.arriving > .ns-name { animation: ns-wait var(--motion-slow) steps(1, end) both; }
@keyframes ns-wait { from { opacity: 0; } to { opacity: 1; } }

/* Chord chart circle: each chord's stretch of the rim draws itself over the chord's length, then fades. */
.chord-circle .cc-trail { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none;
    animation: cc-draw var(--draw) linear forwards, cc-fade 1.8s var(--motion-ease) var(--draw) forwards; }
@keyframes cc-draw { to { stroke-dashoffset: 0; } }
@keyframes cc-fade { to { opacity: 0; } }

/* Progression map: the chords that can follow light up ring by ring (delays set per chip). */
.pm-chord.next { animation: pm-next-in var(--motion-ms) var(--motion-ease) both; }
@keyframes pm-next-in { from { opacity: 0.2; transform: scale(0.86); } }

/* Intervals: the staff's note heads slide to a new root; the picked one climbs from the root a line or space at a time. */
.iv-head-at { transition: transform var(--motion-ms) var(--motion-ease); }
.iv-head-at.on { animation: iv-climb var(--climb) steps(var(--steps), jump-none) both; }
@keyframes iv-climb { from { transform: translate(var(--x), var(--y0)); } to { transform: translate(var(--x), var(--y)); } }

/* Modes chart, Same notes: the staircase builds a row at a time. */
.mode-chart.build .mc-cell.in { animation: mc-step var(--motion-ms) var(--motion-ease) both; }
@keyframes mc-step { from { opacity: 0; transform: translateX(-10px); } }

/* Metronome: each beat's dot swells at once and eases back, harder on the accent. */
.beat-dot { transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.beat-dot.on { transform: scale(1.3); transition: none; }
.beat-dot.on.accent { transform: scale(1.55); }

/* Strum arrows flick the way the stroke goes as it plays. */
.strum-row .ss.now b { animation: ss-flick var(--motion-fast) var(--motion-ease); }
.strum-row .ss.up.now b { animation-name: ss-flick-up; }
@keyframes ss-flick { from { transform: translateY(-5px); } }
@keyframes ss-flick-up { from { transform: translateY(5px); } }

/* Polyrhythm: the hand carries a dot round each ring; where they land together a ring flashes and spreads. */
.poly-chaser { opacity: 0.9; }
.poly-meet { fill: none; stroke: #ffd54a; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(1.35);
    transition: opacity var(--motion-ms) var(--motion-ease), transform var(--motion-ms) var(--motion-ease); }
.poly-meet.on { opacity: 1; transform: scale(1); transition: none; }

/* Tuners: the needle eases to each reading instead of jumping. */
.tuner-needle { transform-origin: 200px 200px; transition: transform var(--motion-fast) var(--motion-ease); }

@media (prefers-reduced-motion: reduce) {
    .motion-dot, .iv-head-at, .beat-dot, .poly-meet, .tuner-needle, .note-shape .ns-note { transition: none !important; }
    .motion-dot, .note-shape .ns-note.arriving > *, .pm-chord.next, .iv-head-at.on, .mode-chart.build .mc-cell.in,
    .strum-row .ss.now b, .chord-circle .cc-trail { animation: none !important; }
    .note-shape .ns-mover, .poly-chaser { display: none; }
}

/* ---- Site-wide: a yes/no switch's label comes before it ("Count-in [Yes]"). The pages write the switch first, so the
   row is turned round here rather than in every page. Labels already written label-first are left alone. */
:where(label.check:not(.label-first)):has(> input[type="checkbox"]:not(.keep-checkbox):first-child) { display: inline-flex; }
label.check:not(.label-first):has(> input[type="checkbox"]:not(.keep-checkbox):first-child) { flex-direction: row-reverse !important; justify-content: flex-end; align-items: center; column-gap: 0.55rem; }

/* Admin → Instruments: one panel per instrument */
.inst-filters { gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 1rem 0 0.6rem; }
.inst-search { min-width: 14rem; flex: 1 1 14rem; max-width: 24rem; }
.inst-row { padding: 0.9rem 1.1rem; margin-top: 0.7rem; }
.inst-row.inst-off { opacity: 0.72; }
.inst-row.inst-dirty { outline: 2px solid #ff7a59; }
.inst-main { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.inst-play { position: static; transform: none; margin: 0; }
.inst-name { display: flex; flex-direction: column; gap: 0.15rem; font-weight: 700; flex: 1 1 16rem; }
.inst-name .input { max-width: 22rem; }
.inst-acts { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; }
.inst-badge { font-size: 0.75rem; font-weight: 800; color: var(--accent); background: var(--bg); border-radius: 999px; padding: 0.15rem 0.55rem; }
.inst-groups { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.6rem; }
.inst-newgroup { width: 9rem; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.inst-links { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin-top: 0.6rem; }
.inst-links label { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; flex: 1 1 18rem; }
.inst-links .input { flex: 1; min-width: 10rem; }

/* The site's own confirm dialog (ConfirmHost): above everything, the picker popups too */
.confirm-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(43, 33, 80, 0.35); }
.confirm-box { position: fixed; z-index: 1201; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px));
    background: var(--panel); color: var(--ink); border-radius: 18px; padding: 1.3rem 1.4rem 1.1rem; box-shadow: 0 22px 60px rgba(43, 33, 80, 0.3); }
.confirm-box h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.confirm-box p { margin: 0 0 1rem; color: var(--muted); line-height: 1.45; }
.confirm-acts { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

/* A table row's buttons side by side (the admin Challenges list: Edit, Delete) */
.admin-row-acts { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; }