… */
.modal, .modal-overlay {
position: fixed;
inset: 0;
z-index: 80;
display: none;
place-items: end center;
background: rgba(4, 5, 9, .6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
animation: fadeIn var(--dur-med) var(--ease);
}
.modal.show { display: grid; }
.modal-overlay[hidden] { display: none; }
.modal-card, .onboarding__card {
width: 100%;
max-width: 560px;
max-height: 88dvh;
overflow-y: auto;
background: var(--surface-container-high);
color: var(--on-surface);
border: 1px solid transparent;
border-radius: var(--shape-xl) var(--shape-xl) 0 0;
padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
box-shadow: var(--elevation-3);
}
.modal.show .modal-card { animation: riseIn var(--dur-med) var(--ease); }
.modal-card .section-title { margin-top: 0; }
.modal-actions, .modal__actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-5);
}
.modal__handle {
width: 40px;
height: 4px;
border-radius: var(--shape-full);
background: color-mix(in srgb, var(--on-surface) 22%, transparent);
margin: 0 auto var(--space-4);
}
@media (min-width: 600px) {
.modal, .modal-overlay { place-items: center; padding: var(--space-6); }
.modal-card, .onboarding__card {
border-radius: var(--shape-xl);
max-width: 480px;
}
}
/* ---------- Notice: honest simulated/mock disclaimer ----------
Tonal orange container. Never hide it. */
.notice {
border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
background: color-mix(in srgb, var(--primary) 8%, transparent);
border-radius: var(--shape-md);
padding: var(--space-4);
font-size: var(--ts-body-md);
color: var(--on-primary-container);
margin-bottom: var(--space-4);
}
.notice strong { color: var(--on-primary-container); }
.notice p + p { margin-top: var(--space-2); }
/* Duplicate-mix warning variant — inherits .notice; hook kept for JS.
Wraps the Combine button below the text in narrow mix-card columns
instead of letting it overflow the card. */
.dup-notice {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
}
.dup-notice .btn { flex-shrink: 0; }
/* ---------- Form controls (M3 filled fields) ----------
Note: input:not([type]) covers bare elements, which
default to the text state but don't match [type="text"]. */
select,
input[type="text"],
input:not([type]) {
width: 100%;
min-height: 56px;
appearance: none;
-webkit-appearance: none;
background: var(--surface-container-highest);
border: 1px solid var(--outline-variant);
border-radius: var(--shape-md);
padding: var(--space-3) var(--space-4);
color: var(--on-surface);
font-size: var(--ts-body-lg);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
select:hover,
input[type="text"]:hover,
input:not([type]):hover { border-color: var(--outline); }
select:focus,
input[type="text"]:focus,
input:not([type]):focus {
border-color: var(--primary);
outline: none;
}
.select-wrap { position: relative; }
.select-wrap::after {
content: "▾";
position: absolute;
right: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--on-surface-variant);
pointer-events: none;
}
.select-wrap select { padding-right: var(--space-10); }
/* ---------- Dividers ---------- */
.divider, hr {
border: 0;
border-top: 1px solid var(--outline-variant);
margin-block: var(--space-4);
}
/* ---------- Brand ----------
In-app brand system (web/assets/brand/BRAND.md).
Marks sit on black/dark only; the --brand-accent variable tints
chrome AROUND the artwork (rings, glows, selected states) — the
artwork itself is never stretched, recolored, or gradient-washed. */
/* Section header mark (small, round, tasteful). */
.section-mark {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
}
/* Shared empty-state artwork (Library / Mixes / Search). */
.brand-empty__art {
display: block;
width: min(240px, 62%);
height: auto;
margin: 0 auto var(--space-4);
border-radius: var(--shape-lg);
border: 1px solid var(--outline-variant);
background: #000;
}
.brand-empty__title {
font-size: var(--ts-title-md);
font-weight: var(--weight-semibold);
color: var(--on-surface);
}
/* Now Playing placeholder artwork (nothing playing yet). */
.np-empty__art {
display: block;
width: min(200px, 52%);
height: auto;
margin: 0 auto var(--space-4);
border-radius: var(--shape-xl);
border: 1px solid var(--outline-variant);
background: #000;
box-shadow: var(--elevation-2);
}
/* LionDavid tip-bar bust mark. */
.tip-bar__bust {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 50%;
}
/* Brand picker tiles (radio-style). */
.brand-note {
font-size: var(--ts-body-md);
color: var(--on-surface-variant);
margin-bottom: var(--space-2);
max-width: 60ch;
}
.brand-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.brand-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-height: 48px;
padding: var(--space-3) var(--space-2);
border-radius: var(--shape-lg);
border: 1px solid var(--outline-variant);
background: var(--surface-container-low);
color: var(--on-surface);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.brand-tile img {
width: 56px;
height: 56px;
border-radius: var(--shape-md);
}
.brand-tile__label {
font-size: var(--ts-label-lg);
font-weight: var(--weight-semibold);
}
.brand-tile__note {
font-size: var(--ts-label-sm);
color: var(--on-surface-variant);
}
.brand-tile:hover { border-color: var(--outline); }
.brand-tile[aria-checked="true"] {
border-color: var(--brand-accent);
box-shadow: 0 0 0 1px var(--brand-accent),
0 0 14px color-mix(in srgb, var(--brand-accent) 35%, transparent);
background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-container-low));
}
.brand-tile:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
}
/* Brand accent swatches (radio-style). */
.brand-swatches {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.brand-swatch {
display: inline-flex;
align-items: center;
gap: var(--space-3);
min-height: 56px;
padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
border-radius: var(--shape-full);
border: 1px solid var(--outline-variant);
background: var(--surface-container-low);
color: var(--on-surface);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
-webkit-tap-highlight-color: transparent;
}
.brand-swatch__dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--sw, var(--brand-accent));
flex-shrink: 0;
}
.brand-swatch__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.brand-swatch__label {
font-size: var(--ts-label-lg);
font-weight: var(--weight-semibold);
}
.brand-swatch__note {
font-size: var(--ts-label-sm);
color: var(--on-surface-variant);
}
.brand-swatch:hover { border-color: var(--outline); }
.brand-swatch[aria-checked="true"] {
border-color: var(--sw, var(--brand-accent));
box-shadow: 0 0 0 1px var(--sw, var(--brand-accent));
}
.brand-swatch:focus-visible {
outline: 2px solid var(--on-surface);
outline-offset: 2px;
}
/* ---------- Brand icon gallery (GitHub-style variant picker) ----------
Rows load from icons/variants/manifest.json at runtime. The selected
row gets the brand-accent ring/glow; the accent tints chrome only,
never the artwork itself. */
.brand-gallery {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.brand-sheet {
border: 1px solid var(--outline-variant);
border-radius: var(--shape-lg);
overflow: hidden;
background: #000;
}
.brand-sheet img {
display: block;
width: 100%;
height: auto;
}
.brand-row {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 64px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--outline-variant);
border-radius: var(--shape-lg);
background: var(--surface-container-low);
color: inherit;
text-align: left;
cursor: pointer;
width: 100%;
}
.brand-row__thumb {
width: 48px;
height: 48px;
border-radius: var(--shape-md);
flex-shrink: 0;
background: #000;
}
.brand-row__meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.brand-row__name {
font-size: var(--ts-label-lg);
font-weight: var(--weight-semibold);
}
.brand-row__desc {
font-size: var(--ts-label-sm);
color: var(--on-surface-variant);
}
.brand-row__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--outline);
color: transparent;
flex-shrink: 0;
}
.brand-row:hover { border-color: var(--outline); }
.brand-row[aria-checked="true"] {
border-color: var(--brand-accent);
box-shadow: 0 0 0 1px var(--brand-accent),
0 0 14px color-mix(in srgb, var(--brand-accent) 35%, transparent);
background: color-mix(in srgb, var(--brand-accent) 8%, var(--surface-container-low));
}
.brand-row[aria-checked="true"] .brand-row__check {
border-color: var(--brand-accent);
background: var(--brand-accent);
color: #000;
}
.brand-row:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
}
.brand-gallery__note {
font-size: var(--ts-label-sm);
color: var(--on-surface-variant);
padding: var(--space-2) var(--space-1) 0;
}
/* ============================================================
Declutter pass — info-tips, Labs accordion, LionDavid assistant
============================================================ */
/* ---------- ⓘ info button + popover ---------- */
.info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 6px;
border-radius: var(--shape-full);
border: 1px solid var(--outline-variant);
background: transparent;
color: var(--on-surface-variant);
font-size: .72rem;
font-style: italic;
font-family: Georgia, serif;
line-height: 1;
cursor: pointer;
vertical-align: middle;
flex: none;
}
.info-btn:hover { color: var(--on-surface); border-color: var(--outline); }
.info-btn[aria-expanded="true"] {
color: var(--on-primary-container);
border-color: var(--primary);
background: var(--primary-container);
}
.info-pop {
position: fixed;
z-index: 300;
padding: var(--space-3);
border-radius: var(--shape-md);
background: var(--surface-container-high);
border: 1px solid var(--line-strong);
box-shadow: var(--elevation-3);
color: var(--on-surface);
font-size: var(--ts-body-md);
line-height: var(--lh-body);
animation: riseIn var(--dur-fast) var(--ease);
}
/* ---------- Labs (collapses the technique prototypes) ---------- */
.labs-card { padding: var(--space-4); }
.labs-head { display: flex; align-items: center; margin: 0 0 var(--space-1); }
.labs-head .section-title { margin: 0; }
.labs-sub { margin: 0 0 var(--space-3); color: var(--on-surface-variant); font-size: var(--ts-body-md); }
.labs-row {
border: 1px solid var(--outline-variant);
border-radius: var(--shape-md);
margin-top: var(--space-2);
background: var(--surface-container-low);
overflow: hidden;
}
.labs-row > summary {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
cursor: pointer;
list-style: none;
font-weight: var(--weight-medium);
}
.labs-row > summary::-webkit-details-marker { display: none; }
.labs-row > summary::before {
content: "";
flex: none;
width: 8px;
height: 8px;
border-right: 2px solid var(--on-surface-variant);
border-bottom: 2px solid var(--on-surface-variant);
transform: rotate(-45deg);
transition: transform var(--dur-fast) var(--ease);
}
.labs-row[open] > summary::before { transform: rotate(45deg); }
.labs-row > summary .chip { margin-left: auto; }
.labs-row > summary .info-btn { margin-left: 0; }
.labs-body { padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--outline-variant); }
.labs-body .tech-panel { border: 0; background: transparent; padding: var(--space-2) 0 0; margin: 0; }
.labs-body .tech-panel + .tech-panel { margin-top: 0; }
/* ---------- LionDavid assistant: FAB + sheet ---------- */
#lion-fab {
position: fixed;
right: 16px;
bottom: calc(var(--tabbar-height) + 16px);
z-index: 90;
width: 56px;
height: 56px;
padding: 0;
border-radius: var(--shape-full);
border: 2px solid var(--brand-accent, var(--primary));
background: var(--surface-container-high);
box-shadow: var(--elevation-3);
cursor: pointer;
overflow: hidden;
}
#lion-fab img { width: 100%; height: 100%; object-fit: cover; display: block; }
#lion-fab .fab-dot {
position: absolute;
top: 2px;
right: 2px;
width: 12px;
height: 12px;
border-radius: var(--shape-full);
background: var(--primary);
border: 2px solid var(--surface);
}
#lion-fab.attn { animation: fabNudge 1.6s var(--ease) 2; }
@keyframes fabNudge {
0%, 100% { transform: translateY(0); }
30% { transform: translateY(-6px); }
60% { transform: translateY(0); }
}
/* Lift above the player bar when it is visible. */
#player:not([hidden]) ~ #lion-fab { bottom: calc(var(--tabbar-height) + 96px + 16px); }
@media (min-width: 600px) {
#lion-fab { bottom: 16px; }
#player:not([hidden]) ~ #lion-fab { bottom: 112px; }
}
.lion-sheet { max-width: 420px; }
.lion-sheet__head { display: flex; align-items: center; gap: var(--space-3); }
.lion-sheet__head img { width: 56px; height: 56px; border-radius: var(--shape-full); object-fit: cover; }
.lion-sheet__head h3 { margin: 0; font-size: var(--ts-title-md); }
.lion-sheet__head p { margin: 2px 0 0; color: var(--on-surface-variant); font-size: var(--ts-body-md); }
.lion-sheet__tip {
margin: var(--space-3) 0;
padding: var(--space-3);
border-radius: var(--shape-md);
background: var(--surface-container-low);
border: 1px solid var(--outline-variant);
font-size: var(--ts-body-md);
min-height: 3.2em;
}
.lion-sheet__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
/* Slim LionDavid strip on Home (replaces the old intro card). */
.lion-strip {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--shape-lg);
background: var(--surface-container-low);
border: 1px solid var(--outline-variant);
margin-bottom: var(--space-4);
}
.lion-strip img { width: 44px; height: 44px; border-radius: var(--shape-full); object-fit: cover; flex: none; }
.lion-strip__text { flex: 1; min-width: 0; }
.lion-strip__text strong { display: block; font-size: var(--ts-title-sm); }
.lion-strip__text span { color: var(--on-surface-variant); font-size: var(--ts-body-md); }
/* ---------- Sources rows: less chrome per row ---------- */
.source-row .track-meta { min-width: 0; }
.source-row .btn-ghost { padding: 6px 8px; }
.src-blurb { display: none; } /* blurb now lives behind the ⓘ next to the tier chip */