and
its legend item in dashFormatStackHTML, app.js), not by colour or label —
five static rules, not a dynamic selector, because the row is already
capped at 5 formats everywhere else on this card. :has() reaches across
the .dash-fmt-donut/.dash-fmt-legend split (arcs and legend items are
siblings' descendants, not siblings themselves). */
.dash-fmt-donut circle,.dash-fmt-legend-item{transition:opacity .15s ease}
.dash-fmt-donut-row:has([data-i="0"]:hover) :is(circle,.dash-fmt-legend-item):not([data-i="0"]),
.dash-fmt-donut-row:has([data-i="1"]:hover) :is(circle,.dash-fmt-legend-item):not([data-i="1"]),
.dash-fmt-donut-row:has([data-i="2"]:hover) :is(circle,.dash-fmt-legend-item):not([data-i="2"]),
.dash-fmt-donut-row:has([data-i="3"]:hover) :is(circle,.dash-fmt-legend-item):not([data-i="3"]),
.dash-fmt-donut-row:has([data-i="4"]:hover) :is(circle,.dash-fmt-legend-item):not([data-i="4"]){opacity:.3}
/* ── Favorites tile grid + filter pills, §4 ─────────────────────────────── */
/* The total used to live in its own row here (.dash-fav-head/.dash-fav-total)
— moved into the section-head next to the title instead (the owner,
2026-09-13, follow-up round), so only the pills are left in this row. */
.dash-fav-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.dash-fav-pill{
border-radius:999px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer;
background:var(--card);border:1px solid var(--r-hairline);color:var(--ink-soft);
transition:border-color .12s ease,color .12s ease;
}
.dash-fav-pill:hover{border-color:var(--accent);color:var(--accent)}
.dash-fav-pill.active{background:var(--ink);border-color:var(--ink);color:var(--card)}
/* Size swapped with Through the crate (2026-09-16, the owner) — was a 150px
floor; Through the crate's old 118px/92px(mobile) sizes now used here. */
.dash-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px}
.dash-fav-tile{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
box-shadow:var(--r-shadow-cover);transition:transform .18s ease,box-shadow .18s ease}
.dash-fav-item:hover .dash-fav-tile{transform:translateY(-8px);box-shadow:var(--r-shadow-cover-hi)}
.dash-fav-item.artist .dash-fav-tile{border-radius:999px}
/* The outer tile clips to a circle for an artist, but .image-slot itself
still carries its own base border-radius:8px (style.css) — without this,
a photo-less artist's dashed "no image" border draws as a rounded square
that the circular clip then cuts off at an angle, instead of the dashed
ring reading as one clean circle (the owner, 2026-09-16). */
.dash-fav-item.artist .image-slot{border-radius:50%}
/* A shape per kind (TODO.md item 161, option A). Show: a ticket — the
headliner photo on top, a tear-off stub with the date below, two notches
at the perforation (a mask, so the notches show the page behind). */
.dash-fav-item.show .dash-fav-tile{display:flex;flex-direction:column;background:var(--card);
/* Four cut-outs, intersected: the two top corners (the owner, 2026-09-26
— "more like a ticket") and the two perforation notches. */
--tk:radial-gradient(circle 9px at 0 72%,#0000 98%,#000),radial-gradient(circle 9px at 100% 72%,#0000 98%,#000),
radial-gradient(circle 10px at 0 0,#0000 98%,#000),radial-gradient(circle 10px at 100% 0,#0000 98%,#000);
-webkit-mask:var(--tk);-webkit-mask-composite:source-in;
mask:var(--tk);mask-composite:intersect}
.dash-fav-ticket-pic{flex:1;min-height:0;position:relative}
.dash-fav-ticket-pic .image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.dash-fav-ticket-stub{flex:none;height:28%;border-top:2px dashed var(--line);display:flex;align-items:center;justify-content:space-between;
gap:6px;padding:0 10px;font-size:10px;color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.dash-fav-ticket-stub b{color:var(--ink);font-weight:600}
/* Song: a record — grooves, the cover as the centre label, a spindle hole. */
.dash-fav-item.song .dash-fav-tile{border-radius:50%;
background:repeating-radial-gradient(circle at 50% 50%,#161a22 0 2px,#2a303b 2px 3px)}
.dash-fav-disc-label{position:absolute;inset:30%;border-radius:50%;overflow:hidden}
.dash-fav-disc-label .image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.dash-fav-disc-label::after{content:"";position:absolute;left:50%;top:50%;width:14%;height:14%;margin:-7% 0 0 -7%;border-radius:50%;background:var(--card);z-index:1}
.dash-fav-item{cursor:pointer}
.dash-fav-title{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:10px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dash-fav-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Row layout, §5 ─────────────────────────────────────────────────────
.dash-shows-split/.dash-shows-side (Recent shows + a side column of two
more cards) is gone — the follow-up round's reshuffle (the owner,
2026-09-13) paired every card off differently: Upcoming shows next to
Recent shows (plain .panel-grid, same as it's used elsewhere), then
Shows per year wide next to Most common formats narrow (needs its own
ratio, .dash-row-split below), then Most collected artists / Most seen
live / Most frequent companions three across (plain .panel-grid again —
auto-fit already gives 3 columns when there's room, 2 or 1 otherwise). */
/* align-items default (stretch), not :start (the owner, 2026-09-13 — wanted
both cards the same height) — both panels now stretch to match whichever
is taller; .dash-year-panel below centers the year chart vertically in
that extra space the same way .dash-fmt-panel already centers the donut,
so a stretch never just dumps blank space at the bottom of either. */
/* min-width:0 on both columns — same grid-refuses-to-shrink-below-content
bug as the hero's yearbar earlier this session (the owner, 2026-09-13,
mobile pass): without it, Shows per year's many-years .yearbar-wrap
(and, to a lesser extent, Most common formats' legend) kept the whole
card — and with it the row, and with it the page — from ever shrinking
below their own intrinsic content width, so both cards rendered wider
than the screen instead of the year chart just scrolling inside itself
the way .yearbar-wrap's own overflow-x:auto already allows. */
.dash-row-split{display:grid;grid-template-columns:2fr 1fr;gap:22px}
.dash-row-split > *{min-width:0}
@media (max-width:1100px){.dash-row-split{grid-template-columns:1fr}}
.dash-year-panel{display:flex;flex-direction:column}
.dash-year-panel > .nav-wrap{margin:auto 0}
/* Recent shows — timeline rows (§5, replaces miniShowLineHTML on this page). */
.dash-recent-list{display:flex;flex-direction:column}
.dash-recent-row{
display:grid;grid-template-columns:74px 1fr auto;gap:16px;align-items:center;
padding:12px 10px;margin:0 -10px;border-top:1px solid var(--r-hairline);
}
.dash-recent-row:first-child{border-top:none}
.dash-recent-date{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink)}
.dash-recent-type{font-size:9px;letter-spacing:.12em;color:var(--ink-soft);margin-top:2px}
.dash-recent-info{display:flex;align-items:center;gap:10px;min-width:0}
.dash-recent-thumb{flex:none;width:34px;height:34px}
.dash-recent-thumb .yr-disc-img,.dash-recent-thumb .yr-disc-ini{width:34px;height:34px;font-size:13px}
/* dashShowDiscHTML()'s own ♪ fallback (item 123 follow-up, 2026-09-16) —
same oversized-icon issue as .dash-rank-row above, same fix: .slot-icon's
own fixed font-size (style.css) was sized for a much bigger cover. */
.dash-recent-thumb .slot-icon{font-size:14px}
.dash-recent-body{min-width:0}
.dash-recent-title{font-size:14.5px;font-weight:600;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-recent-place{font-size:12.5px;color:var(--ink-soft);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1100px){
.dash-hero-inner{grid-template-columns:1fr;gap:28px;justify-items:start}
.dash-hero-line{font-size:36px}
.dash-hero-brand-mark{width:140px;height:140px}
.dash-hero-brand-text{font-size:32px}
}
@media (max-width:760px){
.dash-hero{padding:26px 20px 24px}
.dash-hero-line{font-size:28px}
/* Het hele merkblok weg op mobiel (the owner, 2026-09-13, mobiele ronde) —
op dit formaat is er geen ruimte meer voor zowel de tekst als het
plaatje naast de grote statregels; de statregels winnen. Het hele
.dash-hero-brand-blok (wordmark + plaatje), niet alleen het plaatje —
de wordmark kwam pas in een latere ronde terug, dezelfde afweging geldt. */
.dash-hero-brand{display:none}
.dash-body{padding:18px 0 24px}
.dash-recent-row{grid-template-columns:56px 1fr;row-gap:4px}
/* Was repositioned onto its own row under the title (grid-column:2) —
The owner's mobile walkthrough call (2026-09-16): drop it there entirely
rather than have it wrap onto a visible second line. Applies to both
Recent shows and Upcoming shows — both share .dash-recent-row. */
.dash-recent-row .type-badge{display:none}
/* Shows per year breekt op mobiel uit .panel's eigen 24px binnenmarge, zodat
de scrollstrook echt tot de randen van de kaart loopt in plaats van
binnen de kaartpadding te blijven hangen — zelfde swipe-strook-gevoel als
de Account/Admin-tabbladen op dit formaat (.profile-sidebar hierboven),
al blijft dit binnen de kaart (geen paginabrede uitbraak, het is geen
paginanavigatie). .yearbar-wrap scrollt zelf al met verborgen
scrollbalk — dit verandert alleen wáár die rand ligt. */
.dash-year-panel .yearbar-wrap{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
/* Through the crate's old mobile tile size (92px), swapped over with the
rest of the size swap above. */
.dash-fav-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
}
@media (prefers-reduced-motion:reduce){
.dash-fav-item:hover .dash-fav-tile{transform:none}
}
/* ── "Door de bak" / "Through the crate" marquee ─────────────────────────
Niet in fase12-dashboard.md (die stelde 'm uit tot een eigen fase), maar
wél in README.md's oorspronkelijke schermbeschrijving (scherm 1, blok b)
én in the owner's eigen geëxporteerde ontwerp voor deze sessie — de latere
spec-tekst is na dat exportmoment nooit bijgewerkt. Opgebouwd uit de
README's eigen specificatie voor dit blok, inclusief de al bestaande
@keyframes crateScroll-naam uit README's tokentabel. */
.dash-crate{margin-bottom:24px}
/* Kop is nu .section-head (zelfde structuur als Coming Up: titel, teller er
direct achter, dan de haarlijn) i.p.v. een eigen title+meta-rij — the owner,
2026-09-13. De titel zelf blijft ongewijzigd op zijn eigen
.dash-crate-title in plaats van het gedeelde .section-title — dat laatste
zou 'm (per .dash .section-title verderop) terugzetten op de kleine
mono-eyebrow, en the owner wilde deze titel juist met rust gelaten zien. */
.dash-crate-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:var(--ink);margin:0}
/* padding on the track (not just margin) — follow-up round, 2026-09-13,
"laat de hoes waar je overheen hovert eruit springen zoals bij
favorites": a hover lift needs headroom to lift *into*, and
.dash-crate-track's overflow:hidden (essential — it's what hides the
doubled row's seams as it scrolls) would otherwise clip the top of a
lifted tile flush against the track's own edge. */
.dash-crate-track{overflow:hidden;border-radius:12px;margin-top:4px;padding:10px 0 4px}
.dash-crate-row{display:flex;width:max-content;gap:14px;animation:crateScroll 46s linear infinite}
/* Pausing on hover (same rule) — a tile that's still sliding away the
instant it lifts defeats the point of a hover effect. */
.dash-crate-row:hover{animation-play-state:paused}
/* Size swapped with Favorites (2026-09-16, the owner) — was 118px/92px
(mobile), Favorites' own 150px floor now used here too, no separate
mobile size (Favorites never had one either). 150px confirmed good on
mobile (the owner); desktop bumped further below to 170px, matching
Releases' own grid-view cover floor (.cover-grid, minmax(170px,1fr)) —
that grid has no single fixed size either (1fr lets it grow), so its
floor is the one concrete number to match here. */
.dash-crate-tile{flex:none;width:150px;height:150px;border-radius:6px;overflow:hidden;
box-shadow:0 8px 18px rgba(16,24,40,.18);cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease}
@media (min-width:761px){
.dash-crate-tile{width:170px;height:170px}
}
.dash-crate-tile[aria-hidden]{cursor:default}
/* Same lift the Favorites grid uses (.dash-fav-item:hover .dash-fav-tile) —
:not([aria-hidden]) excludes the seamless-loop echo copies, which were
already cursor:default (non-interactive, nothing to pop). z-index+relative
so the enlarged tile paints over its flex neighbours instead of tucking
behind whichever one comes later in source order. */
.dash-crate-tile:not([aria-hidden]):hover{
transform:translateY(-8px) scale(1.05);box-shadow:0 14px 28px rgba(16,24,40,.3);
position:relative;z-index:1;
}
.dash-crate-tile .image-slot{width:100%;height:100%}
.dash-crate-tile .image-slot img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes crateScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
.dash-crate-row{animation:none}
.dash-crate-tile:not([aria-hidden]):hover{transform:none}
}
/* ── Screen audit follow-ups (2026-09-15) ─────────────────────────────────
A few small, independent fixes that came out of going screen-by-screen
through the redesign — grouped here rather than scattered near each
screen's own section, since none of them share a home with anything
above. */
/* Admin → Data integrity: duplicate/near-match groups (renderAdminChecks(),
public/app.js) were each their own hand-written inline
style="border:1px solid var(--line);border-radius:10px" box — the same
box-in-a-panel mismatch as .au-card, just never given a shared class.
Replaces that with a flush, hairline-divided sub-section inside the
already-soft-shadowed .panel — no nested border at all — plus a small
mono label above each group instead of repeating the title/artist (or
title/date) on every row. */
@media (max-width:560px){
.di-audit-row{flex-direction:column;align-items:flex-start;gap:2px}
}
/* Data integrity: Orphaned catalog entries (2026-09-16, mobile walkthrough)
— label wraps its own text now instead of pushing the button around;
the button keeps its natural width so its own two words never wrap. */
.di-orphan-row{align-items:center;gap:10px}
.di-orphan-row .filter-row-label{min-width:0;overflow-wrap:break-word}
.di-orphan-row button{flex:none;white-space:nowrap}
/* Data integrity: Similar artist/festival names (2026-09-16, mobile
walkthrough) — name pair + its two action buttons used to share one row
(.filter-row), cramped on a phone. Stack on mobile instead: label on its
own line, actions full-width below. */
.di-name-pair{flex-direction:row}
@media (max-width:560px){
.di-name-pair{flex-direction:column;align-items:stretch;gap:8px}
.di-name-pair-actions{width:100%}
}
/* Similar track titles: true 50/50 columns — see the inline comment at the
call site for why (justify-content:space-between on two unsized flex
items was letting either side's length push the other around). */
.di-track-title,.di-track-release{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-group{margin-bottom:18px}
.ck-group:last-child{margin-bottom:0}
.ck-group-label{
font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;
letter-spacing:0.08em;color:var(--ink-soft);padding:10px 0 6px;border-top:1px solid var(--r-hairline);
}
.ck-group:first-child .ck-group-label{border-top:none;padding-top:0}
.ck-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin:0 -8px;padding:10px 8px;border-radius:var(--r-radius-sm);
cursor:pointer;transition:background .12s ease;
}
.ck-row:hover{background:var(--bg-alt)}
.ck-group-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:8px 8px 2px}
/* Bulk-import / alias checklist tables (.import-table-wrap, style.css) —
still the pre-redesign 6px radius with no shadow, the one thing left
over from Table view once List/Grid were confirmed already fixed.
Reused by Table view, the Alias modal's name checklist, and Import
review's bulk-add tables — one rule, not a special case per screen.
background added 2026-09-16 (TODO.md item 123) — the border+shadow were
already here, but neither the wrap nor .import-table/td (style.css) ever
set a background, so it sat on var(--bg), the plain page colour, not
actually a white card despite looking framed like one. Every other use
of this class already lives inside a white .modal, so this is a visual
no-op there — only Releases' Table view (bare on the page) changes. */
.import-table-wrap{border-radius:var(--r-radius-sm);box-shadow:var(--r-shadow-1);background:var(--card)}
/* Rounds just a hovered row's outer edges — valid on real boundaries,
no markup change needed. Matches the rounded-hover idiom used everywhere
else (.notif-row, .hc-row-toggle, .ck-row, …) without giving up the
table's own dense grid, which (unlike a card list) is the right shape for
ten columns of collection data. */
.data-table tbody tr.clickable:hover td:first-child{border-radius:8px 0 0 8px}
.data-table tbody tr.clickable:hover td:last-child{border-radius:0 8px 8px 0}
/* Discogs pressing-picker cards (barcode scan / URL import results) — flat
6px boxes with no shadow. Purely cosmetic softening to match every other
card-shaped thing in the app; the barcode scanner viewfinder right next
to these is already its own distinct, already-fine look and isn't
touched here. */
.discogs-result{border-radius:var(--r-radius-sm);box-shadow:var(--r-shadow-1)}
/* Auth/onboarding screens (TODO.md item 120, 2026-09-15) — the one group
the redesign never reached; all eleven screens (renderSetup/renderLogin/
renderTwoFactorPrompt/renderForgotPassword/renderResetPassword/
renderMustChangePassword/renderSignup/renderVerifyEmail/
renderChooseDisplayName/renderConfirmEmailChange/renderPendingApproval)
share this one wrapper. No sidebar/dark chrome exists pre-login to
"match the rest of the app" against, so rather than leave it as a plain
grey page with a bordered box floating on it, .auth-screen borrows the
sidebar's own navy gradient — --r-chrome-1/--r-chrome-2, the same fixed,
non-theme-dependent colors the sidebar itself uses (see "1. Chrome"
above), so this reads the same regardless of the viewer's light/dark
setting — plus a wordmark, so the brand is the first thing seen instead
of a bare "Log in" heading with nothing above it.
Each screen's own .auth-card already gets the redesign's global radius/
shadow sweep (.panel, .stat-card, .auth-card, … in "2. Oppervlakken"
above) for free. Deliberately not touched any further here:
.form-input/.submit-btn/.form-grid/the private-checkbox row are TODO.md
item 118's own separate pass, shared with every form in the app, not
just these eleven — redoing them here first would mean redoing them
again once 118 lands. */
.auth-screen{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
background:linear-gradient(160deg,var(--r-chrome-1) 0%,var(--r-chrome-2) 100%);
min-height:100vh;padding:40px 24px;
}
.auth-wordmark{
font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;
color:var(--r-chrome-ink);letter-spacing:0.5px;
}
/* Shared form primitives (TODO.md items 117 + 118, 2026-09-15) — every
text field, dropdown, submit/cancel button and the private-checkbox row
across the whole app, all pure CSS on already-shared classes (no markup
changes needed anywhere, unlike the .au-card pass above). Extends a
direction already shipped once: .delete-modal .btn-cancel is already
pill-shaped, with its own comment saying the base .btn-cancel wasn't
redesigned everywhere "since TODO.md item 118 covers that" — this is
that follow-through, not a new proposal. */
.form-input,
.select{
border-radius:var(--r-radius-sm);
transition:border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus{
box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.meta-label{letter-spacing:0.08em}
.submit-btn,
.btn-cancel{border-radius:999px}
/* Native checkboxes app-wide (the release/show "Private" toggle is the
main one, but this covers any other checkbox too) — tints the browser's
own control with the app's accent instead of leaving it default blue.
No custom-built control, so focus/keyboard/screen-reader behavior is
untouched. */
input[type="checkbox"]{accent-color:var(--accent)}
/* Search boxes (TODO.md item 117) — three drifted shapes converge to one.
.help-center-search retired in favor of .form-input's own look directly
(same radius/background now, so there's nothing left to differ); Admin/
Filters/Release notes search fields already use plain .form-input, so
they picked up the change above for free. .search-input (the header
box) already used the same var(--card) background this converged onto
below (item 121) — just gets the same radius for shape consistency with
everything else.
Follow-up (TODO.md item 121, 2026-09-16): .form-input's background went
var(--bg) → var(--card) app-wide — the grey "recessed" look read as
dated next to the header search's white. .help-center-search mirrors
that here since it's a separate rule, not a shared class. Two effects,
both intended: fields inside a white .panel/.modal now separate from
their surface by border alone (var(--line) is faint, but this was a
deliberate trade against the busier "white + stronger border" mockup
option); fields with no .panel of their own — Release notes, Help
Center — go from blending into var(--bg) invisibly to standing out as
a white box on the page, same visual idiom the header search already
used. Deliberately not var(--card) via a literal white: staying on the
token keeps dark mode correct (var(--card) is a dark surface there, not
a jarring white box) and keeps every field matched to whatever surface
actually sits behind it. */
.help-center-search{background:var(--card);border-radius:var(--r-radius-sm)}
.search-input{border-radius:var(--r-radius-sm)}
/* Add forms (2026-09-26, the owner — TODO.md item 155): the top panel says
typing searches too, and what it finds carries a fixed "Found on
Discogs / Setlist.fm" label; "Already in Crate & Encore" is the other
kind of match (after Add). */
.import-type-along{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}
.import-type-along svg{flex:none;width:15px;height:15px;margin-top:1px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round}
.import-type-along strong{color:var(--ink);font-weight:600}
.match-src{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);background:var(--suggest-bg, rgba(22,48,92,0.07));border-radius:5px;padding:2px 6px;margin-right:4px;vertical-align:1px}
/* Add/Edit show sections (what, when, where, tours, title) — a hairline,
no boxes, so the form stays calm. */
.form-grid.form-section{margin-bottom:0;padding:14px 0}
.show-type-row + .form-grid.form-section{padding-top:0}
.form-grid.form-section + .form-grid.form-section,
#festival-hint-slot + .form-grid.form-section{border-top:1px solid var(--line)}
.form-grid.form-section.release-first-section{padding-top:0}
.form-grid.form-section > .span-2 > .format-edit-row:first-child{margin-top:0}
/* Required fields (2026-09-26, the owner — mockup "Formulierregels" i A):
the * on a field or on a group ("Where *"), and above the Add / Save
button what is still missing while it's disabled. */
.req-group-note{font-family:'Archivo',sans-serif;text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:400;color:var(--ink-soft)}
.form-missing{font-size:12px;color:var(--warn-ink, #8a5a00);background:var(--warn-bg, #fff4d6);border-radius:8px;padding:7px 10px;margin:10px 0 12px} /* 12px: Add has only 4px above its buttons (Edit has 20, margins collapse) */
/* Private + the buttons + "* Required" form the form's own last section
(2026-09-26, the owner): a hairline above Private, the legend under the
buttons. */
.form-private-row{display:flex;align-items:center;gap:8px;font-size:13px;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.form-required-legend{margin:10px 0 0}
/* Services page (TODO.md item 156) — Discogs, Setlist.fm, Ticketmaster. */
.services-lede{font-size:13px;color:var(--ink-soft);margin:0 0 18px;max-width:62ch}
.services-kind{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin:8px 0 -4px}
.cs-body{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
/* Artists → Want to see live: Tour alerts status, links to Services. */
.tour-status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin:0 0 14px}
.tour-status-line strong{color:var(--ink);font-weight:600}
.tour-status-line .link-hint{margin-left:auto}
/* Add release: the less-used fields folded (TODO.md item 147 step 1a). */
.more-details-btn{width:100%;display:flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:8px;background:none;padding:9px 12px;font:inherit;font-size:12.5px;color:var(--accent);cursor:pointer;text-align:left}
.more-details-btn small{color:var(--ink-soft);font-size:12px}
.more-details-btn span{margin-left:auto;font-size:15px}
.more-details-btn:hover{background:var(--bg-alt)}
.more-details-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Admin → Usage "Emails sent" (2026-09-26): kind · 30 days · all time. */
.filter-row.uc-email-row{display:grid;grid-template-columns:1fr 70px 70px;gap:10px;align-items:center}
.filter-row.uc-email-row > :not(:first-child){text-align:right}
.filter-row.uc-email-head{padding-bottom:4px}
/* Dashboard "Coming up": tour dates of artists you want to see (TODO.md
item 157) under your own upcoming shows. */
.dash-tour-head{display:flex;align-items:center;gap:6px;margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft)}
.dash-tour-head svg{width:14px;height:14px;fill:none;stroke:#e0843f;stroke-width:1.7}
.dash-tour-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.dash-tour-list .dash-tour-row:first-child{border-top:none}
.dash-tour-info{background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0}
.dash-tour-info strong{display:block;font-size:13.5px;font-weight:600}
.dash-tour-info small{display:block;font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-tour-info:hover strong{text-decoration:underline}
.dash-tour-info:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.dash-tour-more{font-size:12px;color:var(--ink-soft);margin-top:6px}
.dash-tour-acts{display:flex;align-items:center;gap:6px}
.icon-btn.dash-tour-skip{width:28px;height:28px;border-radius:7px;font-size:16px;color:var(--ink-soft)}
.tour-date.is-not-going .tour-date-block,.tour-date.is-not-going .tour-date-info{opacity:.45}
.icon-btn.dash-tour-skip svg{width:14px;height:14px}
.btn-outline.tour-date-go{padding:5px 11px;font-size:12px}
/* A text button that sits inside a sentence (2026-09-26) — .link-hint is a
flex block and broke "Alerts via Ticketmaster: X (change)" onto two lines. */
.inline-link{display:inline;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);font-weight:600;cursor:pointer}
.inline-link:hover{text-decoration:underline}
.inline-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.tour-match-change{color:var(--ink-soft)}
.tour-date-sect .tour-date-links{margin-top:8px}
.tour-date-sect > .tour-date-links:first-child{margin-top:0}
/* Tour date "not going" label, next to the place (option B). */
.tour-date-ng{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;background:var(--bg-alt);color:var(--ink-soft);border-radius:4px;padding:1px 6px;margin-left:4px;vertical-align:middle;opacity:1}
.tour-date-acts .year-filter{position:relative}
/* View picker at the end of the filter bar (2026-09-26, option A of
"Werkbalk lijstpagina's"); the list switch sits under the title. */
.list-scope-toggle{margin:0 0 14px}
/* Filter bar, left to right (2026-09-26, the owner): View · Sort · Filters
· Clear all — nothing pushed right. View and Sort are pills with a menu,
like Filters; on a phone their menus go full width under the bar, the
same as the Filters panel (keepDropdownsOnScreen()'s narrow branch). */
.fb-group{display:inline-flex;align-items:center;gap:8px;flex:none}
.fb-menu-wrap{position:relative}
.fb-menu-btn{font:inherit;font-size:13px;color:var(--ink);background:var(--card);border:1px solid var(--line);cursor:pointer;white-space:nowrap}
.year-filter-panel.fb-menu{min-width:200px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-radius-sm);box-shadow:var(--r-shadow-2);padding:5px;box-sizing:border-box}
.fb-menu .hero-more-row svg{stroke:var(--ink-soft)}
.fb-menu .hero-more-row.is-current{font-weight:600}
.fb-menu-check{margin-left:auto;color:var(--accent);font-size:12px}
.filterbar .fb-sort{margin-left:0}
/* Room between Private and Cancel / Add when there's no match box between. */
.form-private-row{margin-bottom:14px}
/* Add show: the Setlist note sits under the line, above Private (the owner,
2026-09-27) — the line moves from Private to the block both are in. */
.form-private-sect{border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.form-private-sect .form-private-row{border-top:0;padding-top:0;margin-top:0}
.form-setlist-note{margin:0 0 12px}
/* One weight in the filter bar: View, Sort and an unused Filters pill read
the same; Filters only turns bold (and filled) once a filter is on. */
.filterbar .fbtn:not(.is-active){font-weight:400;font-size:13px}
/* List tabs under the title (2026-09-26, "Lijst-tabbladen" A). */
.list-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:6px 0 16px;overflow-x:auto;scrollbar-width:none}
.list-tab{position:relative;background:none;border:0;padding:8px 0 10px;margin:0;cursor:pointer;white-space:nowrap;
font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;color:var(--ink-soft)}
.list-tab:hover{color:var(--ink)}
.list-tab.active{color:var(--ink)}
.list-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.list-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (max-width:480px){ .list-tabs{gap:20px} .list-tab{font-size:16px} }
/* Filter bar without its card (2026-09-26, "Lijst-tabbladen" B — on trial,
the owner may want it back): only the pills remain, flush with the page's
content edge so nothing floats; the list tabs above carry the weight. To
revert: remove this rule. */
.filterbar{background:none;border:0;padding:0;border-radius:0;box-shadow:none}
/* ── The app's own select (TODO.md item 163) ─────────────────────────────
appSelectHTML(): looks like every other .form-input, opens the filter
bar's menu. The native stays in the DOM as the value holder. */
.app-select{position:relative;display:block;min-width:0}
/* In a .field-flagwrap row (a field that can carry an "imported" flag, e.g.
Country) it takes the row's width like a text field does. */
.field-flagwrap > .app-select{flex:1}
/* Artist fields (item 172): the field with its suggestion list, and the hint
under it — hidden while you type in the field, shown once you leave it. */
.artist-suggest-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
/* Only while the text field itself has focus — not :focus-within, which also
hid the hint the moment its own "Use …" button took focus on mousedown. */
.artist-suggest-wrap:has(.place-suggest-wrap input:focus) .artist-hint-slot{display:none}
.artist-hint-slot:empty{display:none}
/* Several names as a list (item 173): a show's acts (one line each, with
role and tour) and a release's Featuring (chips), each in one box that
looks like a field, with an "Add …" field at the end. */
.name-list-box{box-sizing:border-box;width:100%;border:1px solid var(--line);border-radius:var(--r-radius-sm, 8px);background:var(--card);padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.name-list-box:focus-within{border-color:var(--accent)}
.name-list-box.chips-box{flex-direction:row;flex-wrap:wrap;align-items:center}
.act-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:30px}
.name-chip{display:inline-flex;align-items:center;gap:4px;background:var(--bg-alt);border:1px solid transparent;border-radius:999px;padding:3px 4px 3px 11px;font-size:13.5px;color:var(--ink);max-width:100%}
.name-chip.warn{background:var(--warn-bg);border:1px dashed var(--warn-border);color:var(--warn-ink)}
.name-chip-x{border:none;background:none;color:var(--ink-soft);font-size:15px;line-height:1;padding:0 5px;cursor:pointer}
.name-chip-x:hover{color:var(--danger)}
.act-role{border:1px solid var(--line);border-radius:999px;background:var(--card);padding:3px 10px;font:inherit;font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer}
.act-tour{border:none;background:none;padding:0;font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left}
.act-tour::before{content:"· ";color:var(--ink-soft)}
.act-tour-add{border:none;background:none;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}
.act-tour-input{flex:1;min-width:140px;padding:5px 9px;font-size:12.5px}
.name-add{flex:1;min-width:140px}
.name-add-input{width:100%;box-sizing:border-box;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:5px 2px}
.acts-box .act-line ~ .name-add{border-top:1px dashed var(--line);padding-top:4px}
.list-hint{margin:0 0 0 22px}
.chips-box + .list-hint, .list-hint + .list-hint{margin-top:6px}
.chips-box ~ .list-hint{margin-left:0}
.act-orphan{margin-top:6px}
.artist-hint-slot{display:flex;flex-direction:column;gap:4px}
.artist-hint-slot .festival-hint{margin:0}
.hint-btn{margin-left:6px;border:1px solid currentColor;border-radius:999px;padding:1px 9px;font:inherit;font-size:11.5px;font-weight:600;background:var(--card);color:inherit;cursor:pointer}
.hint-link{background:none;border:none;padding:0;margin-left:8px;font:inherit;font-size:11.5px;color:var(--ink-soft);text-decoration:underline;cursor:pointer}
.app-select-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.app-select-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-size:14px}
.app-select-btn .app-select-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-select-btn:disabled{opacity:.55;cursor:default}
.app-select-btn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.app-select-chev{flex:none;width:7px;height:7px;border-right:1.6px solid var(--ink-soft);border-bottom:1.6px solid var(--ink-soft);transform:rotate(45deg) translate(-2px,-2px)}
.app-select-panel{min-width:100%;width:max-content;max-width:min(340px,calc(100vw - 32px))}
.app-select-rows{max-height:min(320px,50vh);overflow-y:auto}
.app-select-row[disabled]{opacity:.45;cursor:default}
.app-select-row[disabled]:hover{background:none}
.app-select-row .app-select-label{overflow:hidden;text-overflow:ellipsis}
.app-select-search{width:100%;margin:0 0 5px;padding:7px 10px;font-size:13px}
.app-select-group{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:8px 10px 2px}
.app-select-none{padding:8px 10px;font-size:12.5px;color:var(--ink-soft)}
.app-select-row.hidden,.app-select-group.hidden,.app-select-none.hidden{display:none}
/* Compact variant for pill-sized filter rows (Admin → Feedback) and dense tables. */
.app-select.compact .app-select-btn{padding:6px 10px;font-size:12.5px;font-weight:600}
/* In a filter bar the menu reads as a pill, like the bar's own Sort/View. */
.filterbar .app-select-btn{border-radius:999px;width:auto}
/* ── Country list + Venue/City suggestions (TODO.md item 160) ───────────── */
.country-flag{flex:none;width:20px;text-align:center;font-size:15px;line-height:1}
.place-suggest-wrap{position:relative;width:100%}
.place-suggest-panel{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--card);color:var(--ink);
border:1px solid var(--line);border-radius:var(--r-radius-sm);box-shadow:var(--r-shadow-2);padding:5px;max-height:300px;overflow-y:auto}
.place-suggest-panel[hidden]{display:none}
.place-suggest-row{white-space:normal}
.place-suggest-row.is-active{background:var(--bg-alt)}
.place-suggest-main{display:flex;flex-direction:column;min-width:0}
.place-suggest-sub{font-size:11.5px;color:var(--ink-soft)}
.place-suggest-new{color:var(--accent);font-weight:600}
/* A searchable appSelectHTML() menu on a phone: a panel at the top of the
visible screen, sized to what's above the keyboard (--vv-top/--vv-h). */
.app-select-backdrop{position:fixed;inset:0;z-index:199;background:rgba(10,16,28,.45)}
.app-select-panel.sheet{position:fixed;left:12px;right:12px;top:calc(var(--vv-top, 0px) + 12px);bottom:auto;
height:calc(var(--vv-h, 100dvh) - 24px);max-width:none;width:auto;min-width:0;z-index:200;
display:flex;flex-direction:column;padding:8px}
.app-select-panel.sheet .app-select-rows{flex:1;min-height:0;max-height:none}
.app-select-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;font-weight:700;font-size:14px}
.app-select-sheet-close{background:none;border:none;font-size:22px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 6px}
.app-select-panel.sheet .app-select-search{font-size:16px} /* ≥16px: iOS doesn't zoom in on focus */
/* The page's fade-up entry animation moves (transform) its content for a
quarter second on every render — a fixed sheet inside would slide with it. */
.fade-up:has(.app-select-panel.sheet){animation:none}
/* Add release / Add show as a page (TODO.md item 175, option A — the owner,
2026-09-28). The page is the Edit page's shell (.back-link + .panel); its
title gets the edit page's title style, the match/review steps the room a
wide pop-up had. The "+ Add" menu hangs under the button over a clear
overlay (clicking beside it closes it, Escape too — closeTopModal()). */
.add-page{max-width:760px;margin:0 auto}
.add-page.add-page-wide{max-width:1000px}
.add-page .panel > h2,
.add-page .panel > .choose-heading{
font-family:'Archivo',sans-serif;font-size:28px;font-weight:700;
letter-spacing:-0.01em;line-height:1.15;color:var(--ink);margin:0 0 16px;text-transform:none;
}
.modal-overlay.add-menu-overlay{background:transparent;display:block;padding:0}
.add-menu{position:fixed;width:330px;max-width:calc(100vw - 32px);box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:var(--r-radius);box-shadow:var(--r-shadow-2);padding:6px;display:flex;flex-direction:column;max-height:calc(var(--vh) * 80);overflow-y:auto}
.add-menu .choose-option{padding:10px 12px}
.add-draft-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--suggest-border);background:var(--suggest-bg);border-radius:var(--r-radius-sm);padding:10px 12px;margin-bottom:16px;font-size:13px}
.add-draft-when{color:var(--ink-soft);font-size:12px}
.add-draft-actions{display:flex;align-items:center;gap:10px}
/* Sources (TODO.md item 167, option B) — the release page's card under
Release, and the show page's side card. The note is the attribution line
the services' API terms ask for, kept quiet. */
.rel-sources .sources-grid{grid-template-columns:1fr}
.sources-note{margin-top:12px;font-size:11.5px;color:var(--ink-soft)}
.sources-note a{color:inherit;text-decoration:underline}
.cover-credit-fields{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.cover-credit-fields .meta-label{margin-top:4px}
.optional-note{text-transform:none;letter-spacing:0;font-family:'Archivo',sans-serif}
/* Admin → Places (TODO.md item 169, phase 1: cities) — the list of cities
per country on the left, the open city's names on the right. */
.places-layout{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:760px){.places-layout{grid-template-columns:1fr}}
.places-list{display:flex;flex-direction:column;gap:2px;max-height:calc(var(--vh) * 70);overflow-y:auto;padding:10px}
.places-country{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding:10px 8px 4px}
.places-city{display:flex;justify-content:space-between;align-items:center;gap:8px;border:none;background:none;color:var(--ink);text-align:left;padding:7px 8px;border-radius:var(--r-radius-sm);font-size:13px;cursor:pointer}
.places-city:hover{background:var(--bg-alt)}
.places-city.active{background:var(--bg-alt);font-weight:600}
.places-flag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--warn, #8a5a10);border:1px solid currentColor;border-radius:999px;padding:1px 6px;margin-left:4px}
.places-langs{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.places-lang-row{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%}
.places-merge-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.places-wd{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-radius-sm);background:var(--bg-alt)}
.places-wd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.places-wd-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.places-wd-search .form-input{flex:1;min-width:160px}
.places-hit{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.places-alias-sugg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:6px}
/* Venues in Places (item 169 phase 2). */
.places-venues{display:flex;flex-direction:column;gap:2px}
.places-venue{display:flex;justify-content:space-between;align-items:center;gap:8px;border:none;background:none;color:var(--ink);text-align:left;padding:7px 8px;border-radius:var(--r-radius-sm);font-size:13px;cursor:pointer}
.places-venue:hover{background:var(--bg-alt)}
.places-vnames{display:flex;flex-direction:column;gap:6px}
.places-vname-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 24px;gap:6px;align-items:center}
.places-rename-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:6px;align-items:center}
@media (max-width:560px){.places-vname-row{grid-template-columns:1fr 1fr 24px}.places-vname-row input:first-child{grid-column:1/-1}.places-rename-row{grid-template-columns:1fr}}
.venue-now{color:var(--ink-soft)}
/* Places rows (the owner, 2026-09-28: "de layout is niet optimaal") — names
on top, then where and how many, then a row of small buttons that wraps;
the same on desktop and phone, so nothing runs off the card. */
.places-page .di-name-pair{flex-direction:column;align-items:stretch;gap:8px}
.places-page .di-name-pair .filter-row-label{line-height:1.45}
.places-page .di-name-pair .filter-row-label > .filter-row-sub:last-child{display:block;margin:2px 0 0}
.places-page .di-name-pair-actions{flex:0 1 auto !important;flex-wrap:wrap;justify-content:flex-start;gap:6px !important}
.places-page .di-name-pair-actions .btn-outline,.places-page .places-merge-row .btn-outline{padding:5px 12px;font-size:12.5px;max-width:100%;text-align:left;overflow-wrap:anywhere}
.places-hit-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.places-hit .btn-outline{flex:none;white-space:nowrap;padding:5px 12px;font-size:12.5px}
.places-views{width:fit-content;max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.places-views::-webkit-scrollbar{display:none}
.places-views button{white-space:nowrap}
@media (max-width:560px){.places-views button{padding:6px 10px;font-size:12.5px}}
/* Room / stage (item 169 phase 3): "+ Room" only once a venue is typed. */
.form-section:has(input[name="venue"]:placeholder-shown) .add-room-row{display:none}
.add-room-row{margin-top:-6px}
.act-stage-wrap{position:relative;flex:0 1 180px;min-width:120px}
.act-stage-input{padding:5px 9px;font-size:12.5px}
.venue-room{color:var(--ink-soft)}
.places-rooms{display:flex;flex-direction:column;gap:6px}
.places-room-row{display:grid;grid-template-columns:minmax(0,1fr) 28px auto minmax(110px,150px) auto 24px;gap:6px;align-items:center}
.places-room-row .btn-outline{padding:5px 10px;font-size:12px;white-space:nowrap}
@media (max-width:560px){.places-room-row{grid-template-columns:minmax(0,1fr) 28px auto;}.places-room-row .room-empty{display:none}.places-room-row > .app-select{grid-column:1/3}}
/* Place pages (TODO.md item 141): what's known about the place on the left,
your shows there by year on the right; one column on a phone. */
.place-grid{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:18px;align-items:start;margin-top:22px}
.place-grid--single{grid-template-columns:minmax(0,1fr)}
@media (max-width:760px){.place-grid{grid-template-columns:minmax(0,1fr)}}
.place-grid > *{min-width:0}
.place-side{display:flex;flex-direction:column;gap:14px}
.place-children{display:flex;flex-direction:column;gap:2px}
.place-child{display:flex;justify-content:space-between;align-items:center;gap:10px;border:none;background:none;color:var(--ink);text-align:left;padding:8px;border-radius:var(--r-radius-sm);cursor:pointer;font-size:13.5px}
.place-child:hover{background:var(--bg-alt)}
.place-child-main{display:flex;flex-direction:column;min-width:0}
.place-child-sub{font-size:12px;color:var(--ink-soft)}
.place-year{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-top:14px}
.place-year:first-of-type{margin-top:6px}
.place-address{font-size:13.5px;margin:6px 0}
.place-rooms{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.place-link{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.place-link:hover{text-decoration-color:currentColor}
/* Shows map pins and zoom (TODO.md item 141). */
.wm-frame{position:relative}
.wm-wrap{position:relative}
.wm-svg{touch-action:none;cursor:grab}
.wm-svg:active{cursor:grabbing}
.wm-pin{cursor:pointer}
/* White with a dark ring, so a pin reads on a light and on a dark country. */
.wm-pin circle{fill:#fff;stroke:#16305c;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1.5px rgba(16,24,40,.35))}
.wm-pin--many circle{stroke-width:3}
.wm-pin.is-open circle,.wm-pin:hover circle,.wm-pin:focus-visible circle{fill:#c2410c;stroke:#fff}
.wm-pin:focus-visible{outline:none}
.wm-pin text{fill:#16305c;font-family:'IBM Plex Mono',monospace;font-weight:700;text-anchor:middle;pointer-events:none}
.wm-pin.is-open text,.wm-pin:hover text,.wm-pin:focus-visible text{fill:#fff}
.wm-zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.wm-zoom button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:17px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.wm-card{position:absolute;left:min(max(calc(var(--pin-x) + 14px), 8px), calc(100% - 268px));top:min(max(calc(var(--pin-y) - 20px), 8px), calc(100% - 200px));width:260px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-radius);box-shadow:var(--r-shadow-2);padding:12px 14px;display:flex;flex-direction:column;gap:6px;z-index:2;max-height:calc(100% - 16px);overflow-y:auto}
.wm-card-x{position:absolute;top:6px;right:8px;border:none;background:none;font-size:18px;color:var(--ink-soft);cursor:pointer}
.wm-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-right:18px}
.wm-card-line,.wm-card-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;border-top:1px solid var(--line);padding-top:6px}
.wm-card-row{border-left:none;border-right:none;border-bottom:none;background:none;color:var(--ink);cursor:pointer;text-align:left;font-family:inherit}
.wm-card-more{align-self:flex-start;margin-top:4px}
/* A phone: the card below the map, full width, not over it. */
@media (max-width:560px){
.wm-card{position:relative;left:auto;top:auto;width:auto;margin-top:8px;max-height:none}
}
/* The MapLibre Shows map (TODO.md item 141). */
.wm-gl-slot{width:100%;height:min(62vh,560px);min-height:320px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--wm-water)}
.wm-gl{width:100%;height:100%}
.wm-gl-popup .maplibregl-popup-content{background:var(--card);color:var(--ink);border-radius:var(--r-radius);box-shadow:var(--r-shadow-2);padding:12px 14px}
.wm-gl-popup .maplibregl-popup-tip{border-top-color:var(--card);border-bottom-color:var(--card)}
.wm-gl-popup .maplibregl-popup-close-button{font-size:18px;color:var(--ink-soft);padding:2px 8px}
.wm-gl-card{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:200px}
@media (max-width:560px){.wm-gl-slot{height:58vh}}
/* ==========================================================================
Midnight Glow — tokens (redesign 2, 2026-09-30)
--------------------------------------------------------------------------
Nieuwe waarden op de bestaande namen (style.css + de chrome-tokens hier
boven), zodat elke pagina ze direct overneemt; --mg-* alleen voor wat nog
geen naam had. Spec: design_handoff_midnight_glow/midnight-glow.md §2.
Vier selectors i.p.v. drie: style.css zet het lichte palet óók op
:root[data-theme="light"] (specificiteit 0,2,0) — een kale :root hier zou
daar bij een expliciete keuze voor Licht van verliezen.
Contrast (spec §8, ≥ 4,5:1 voor tekst op --bg en --bg-alt): in licht zijn
--accent, --mg-live-ink en --mg-faint één tint donkerder dan de spec
(#0a7fb8 → #0973a8, #b35a1f → #a9541c, #63779a → #586c8e), en de ★
(--mg-fav, een icoon: ≥ 3:1) #c98a1a → #b67c14.
Het thema-mechanisme zelf (theme-init.js, setTheme, setThemeMode) blijft
onaangeroerd; dit verandert alleen wat Light en Dark laten zien.
========================================================================== */
:root, :root[data-theme="light"]{
--bg:#f3f6fb; --bg-alt:#e4f1fb; --hdr-tint:#dcecfa; --card:rgba(255,255,255,.9);
--ink:#0b1a38; --ink-mid:#4a5d7e; --ink-soft:#5d7090;
--line:rgba(10,127,184,.1); --accent:#0973a8; --accent-dark:#0a6a9c;
--olive:#4f6a92; --vinyl:#0b1a38; --danger:#c2412d;
--suggest-bg:rgba(10,127,184,.1); --suggest-border:rgba(10,127,184,.3);
--overlay-bg:rgba(11,26,56,.35);
--mg-bg-glow:radial-gradient(60% 34% at 50% 16%,rgba(31,140,230,.22) 0%,rgba(31,140,230,0) 70%),radial-gradient(45% 30% at 8% 48%,rgba(107,79,196,.07) 0%,rgba(107,79,196,0) 70%),radial-gradient(55% 35% at 96% 72%,rgba(10,127,184,.06) 0%,rgba(10,127,184,0) 70%),radial-gradient(120% 60% at 50% 0%,#cfe3fb 0%,#e6effb 45%,#f3f6fb 100%);
--mg-card-hi:#ffffff; --mg-card-solid:#ffffff;
--mg-label:#4f6a92; --mg-faint:#586c8e; --mg-line-soft:rgba(10,127,184,.06);
--mg-accent-tint:rgba(10,127,184,.1); --mg-accent-line:rgba(10,127,184,.3);
--mg-live:#c96a2b; --mg-live-ink:#a9541c; --mg-live-soft:#9a4d18;
--mg-live-tint:rgba(201,106,43,.11); --mg-live-line:rgba(201,106,43,.36);
--mg-on-live:#ffffff; --mg-live-row-ink:#6b3310;
--mg-fav:#b67c14;
--mg-tag:#6b4fc4; --mg-tag-tint:rgba(107,79,196,.11);
--mg-fill:rgba(11,26,56,.05); --mg-fill-line:rgba(11,26,56,.08);
--mg-btn-bg:linear-gradient(180deg,#1fa3e0,#0a7fb8); --mg-btn-ink:#ffffff;
--mg-btn-shadow:0 6px 14px rgba(10,127,184,.3);
--mg-glow:none; --mg-live-glow:none; --mg-text-glow:none;
--mg-glowline:linear-gradient(90deg,transparent,#3fb9ea 25%,#7fdcff 50%,#3fb9ea 75%,transparent);
--mg-glowline-shadow:0 0 10px rgba(10,127,184,.16);
--mg-logo-shadow:0 6px 16px rgba(10,60,120,.22);
--mg-tabbar:rgba(255,255,255,.96); --mg-sheet:#ffffff;
--mg-on-accent:#ffffff;
--mg-sheet-top:#ffffff;
--mg-bar:rgba(11,26,56,.14);
--mg-tab-filter:none; --mg-tab-ind-glow:0 0 0 transparent;
--mg-hero-ink:#0b1a38; --mg-hero-soft:#4a5d7e; --mg-hero-faint:#63779a;
--mg-hero-line:rgba(10,127,184,.22); --mg-hero-fill:rgba(255,255,255,.7); --mg-hero-hover:rgba(10,127,184,.1);
--mg-hero-overlay:linear-gradient(180deg,rgba(243,246,251,.3) 0%,rgba(243,246,251,.95) 100%);
--mg-hero-card:linear-gradient(135deg,#ffffff 0%,#e4f1fb 100%);
--mg-cover-glow:0 0 0 transparent; --mg-live-card-line:rgba(201,106,43,.14);
--mg-update-line:rgba(10,127,184,.18); --mg-menu-line:rgba(10,127,184,.2);
--mg-nav-glow:0 0 0 transparent; --mg-badge-ink:#1a1204;
--r-radius:16px; --r-radius-sm:10px;
--r-shadow-1:0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06);
--r-shadow-cover:0 10px 22px rgba(20,40,80,.16);
--r-shadow-cover-hi:0 18px 38px rgba(20,40,80,.24);
--r-chrome-1:rgba(255,255,255,.7); --r-chrome-2:rgba(255,255,255,.7);
--r-chrome-ink:#0b1a38; --r-chrome-soft:#4a5d7e; --r-chrome-line:rgba(10,127,184,.12);
--chrome-1:rgba(255,255,255,.7); --chrome-2:rgba(255,255,255,.7);
--chrome-ink:#0b1a38; --chrome-ink-dim:#4a5d7e; --chrome-soft:#4a5d7e;
--chrome-line:rgba(10,127,184,.12); --chrome-active:rgba(10,127,184,.1);
--chrome-hover:rgba(10,127,184,.06); --chrome-accent:#0a7fb8;
/* color-mix-tokens mengen met een vaste kaartkleur: in donker is --card
half doorzichtig, en dan wordt de mix troebel (spec §6). */
--bdg-system-soft:color-mix(in srgb, var(--bdg-system) 30%, var(--mg-card-solid));
--bdg-system-line:color-mix(in srgb, var(--bdg-system) 45%, var(--mg-card-solid));
--wm-water:color-mix(in srgb, var(--accent) 13%, var(--mg-card-solid));
--wm-0:color-mix(in srgb, var(--ink) 20%, var(--mg-card-solid));
--wm-border:color-mix(in srgb, var(--ink) 32%, var(--mg-card-solid));
--wm-1:color-mix(in srgb, var(--accent) 34%, var(--mg-card-solid));
--wm-2:color-mix(in srgb, var(--accent) 55%, var(--mg-card-solid));
--wm-3:color-mix(in srgb, var(--accent) 76%, var(--mg-card-solid));
}
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#050e1d; --bg-alt:#08152a; --hdr-tint:#0c1e3a; --card:rgba(12,28,52,.6);
--ink:#e6eefb; --ink-mid:#aebfda; --ink-soft:#8ea3c4;
--line:rgba(127,220,255,.12); --accent:#7fdcff; --accent-dark:#bdeeff;
--olive:#8fb0da; --vinyl:#0c0e12; --danger:#ff9a8a;
--suggest-bg:rgba(127,220,255,.16); --suggest-border:rgba(127,220,255,.5);
--overlay-bg:rgba(2,6,16,.6);
--mg-bg-glow:radial-gradient(70% 36% at 50% 20%,rgba(56,130,196,.2) 0%,rgba(56,130,196,0) 70%),radial-gradient(45% 30% at 8% 52%,rgba(90,110,200,.08) 0%,rgba(90,110,200,0) 70%),radial-gradient(55% 35% at 96% 72%,rgba(127,220,255,.08) 0%,rgba(127,220,255,0) 70%),radial-gradient(120% 60% at 50% 0%,#0c1e3a 0%,#08152a 45%,#050e1d 100%);
--mg-card-hi:rgba(24,48,92,.55); --mg-card-solid:#0b1a40;
--mg-label:#8fb0da; --mg-faint:#7d93b6; --mg-line-soft:rgba(127,220,255,.08);
--mg-accent-tint:rgba(127,220,255,.16); --mg-accent-line:rgba(127,220,255,.5);
--mg-live:#f0a15e; --mg-live-ink:#f6b87e; --mg-live-soft:#f9d2ad;
--mg-live-tint:rgba(240,161,94,.14); --mg-live-line:rgba(240,161,94,.45);
--mg-on-live:#1a0e04; --mg-live-row-ink:#fff0e2;
--mg-fav:#e0a850;
--mg-tag:#d4c6ff; --mg-tag-tint:rgba(167,139,250,.16);
--mg-fill:rgba(255,255,255,.06); --mg-fill-line:rgba(255,255,255,.1);
--mg-btn-bg:linear-gradient(180deg,#9be7ff,#43b8ee); --mg-btn-ink:#06142b;
--mg-btn-shadow:0 0 20px rgba(127,220,255,.4);
--mg-glow:0 0 14px rgba(127,220,255,.25); --mg-live-glow:0 0 10px rgba(240,161,94,.55);
--mg-text-glow:0 0 14px rgba(240,161,94,.45);
--mg-glowline:linear-gradient(90deg,transparent,#7fdcff 25%,#e8fbff 50%,#7fdcff 75%,transparent);
--mg-glowline-shadow:0 0 14px 2px rgba(127,220,255,.45);
--mg-logo-shadow:0 6px 18px rgba(0,0,0,.45),0 0 18px rgba(127,220,255,.35);
--mg-tabbar:rgba(2,6,13,.97); --mg-sheet:linear-gradient(180deg,#0c1f3c,#050e1d);
--mg-on-accent:#06142b;
--mg-sheet-top:#0f2348;
--mg-bar:rgba(174,191,218,.22);
--mg-tab-filter:drop-shadow(0 0 6px rgba(127,220,255,.7)); --mg-tab-ind-glow:0 0 10px 1px #7fdcff;
--mg-hero-ink:#ffffff; --mg-hero-soft:rgba(230,238,251,.8); --mg-hero-faint:rgba(230,238,251,.6);
--mg-hero-line:rgba(127,220,255,.2); --mg-hero-fill:rgba(255,255,255,.06); --mg-hero-hover:rgba(127,220,255,.14);
--mg-hero-overlay:linear-gradient(180deg,rgba(5,14,29,.3) 0%,rgba(5,14,29,.95) 100%);
--mg-hero-card:linear-gradient(135deg,rgba(20,44,84,.7) 0%,rgba(8,20,42,.6) 100%);
--mg-cover-glow:0 0 40px rgba(127,220,255,.22); --mg-live-card-line:rgba(240,161,94,.18);
--mg-update-line:rgba(127,220,255,.18); --mg-menu-line:rgba(127,220,255,.25);
--mg-nav-glow:0 0 18px rgba(127,220,255,.1); --mg-badge-ink:#1a1204;
--r-shadow-1:0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.28);
--r-shadow-cover:0 10px 22px rgba(0,0,0,.45);
--r-shadow-cover-hi:0 18px 38px rgba(0,0,0,.6);
--r-chrome-1:rgba(3,9,22,.5); --r-chrome-2:rgba(3,9,22,.5);
--r-chrome-ink:#e6eefb; --r-chrome-soft:#8ea3c4; --r-chrome-line:rgba(127,220,255,.1);
--chrome-1:rgba(3,9,22,.5); --chrome-2:rgba(3,9,22,.5);
--chrome-ink:#e6eefb; --chrome-ink-dim:#aebfda; --chrome-soft:#8ea3c4;
--chrome-line:rgba(127,220,255,.1); --chrome-active:rgba(127,220,255,.12);
--chrome-hover:rgba(127,220,255,.06); --chrome-accent:#7fdcff;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#050e1d; --bg-alt:#08152a; --hdr-tint:#0c1e3a; --card:rgba(12,28,52,.6);
--ink:#e6eefb; --ink-mid:#aebfda; --ink-soft:#8ea3c4;
--line:rgba(127,220,255,.12); --accent:#7fdcff; --accent-dark:#bdeeff;
--olive:#8fb0da; --vinyl:#0c0e12; --danger:#ff9a8a;
--suggest-bg:rgba(127,220,255,.16); --suggest-border:rgba(127,220,255,.5);
--overlay-bg:rgba(2,6,16,.6);
--mg-bg-glow:radial-gradient(70% 36% at 50% 20%,rgba(56,130,196,.2) 0%,rgba(56,130,196,0) 70%),radial-gradient(45% 30% at 8% 52%,rgba(90,110,200,.08) 0%,rgba(90,110,200,0) 70%),radial-gradient(55% 35% at 96% 72%,rgba(127,220,255,.08) 0%,rgba(127,220,255,0) 70%),radial-gradient(120% 60% at 50% 0%,#0c1e3a 0%,#08152a 45%,#050e1d 100%);
--mg-card-hi:rgba(24,48,92,.55); --mg-card-solid:#0b1a40;
--mg-label:#8fb0da; --mg-faint:#7d93b6; --mg-line-soft:rgba(127,220,255,.08);
--mg-accent-tint:rgba(127,220,255,.16); --mg-accent-line:rgba(127,220,255,.5);
--mg-live:#f0a15e; --mg-live-ink:#f6b87e; --mg-live-soft:#f9d2ad;
--mg-live-tint:rgba(240,161,94,.14); --mg-live-line:rgba(240,161,94,.45);
--mg-on-live:#1a0e04; --mg-live-row-ink:#fff0e2;
--mg-fav:#e0a850;
--mg-tag:#d4c6ff; --mg-tag-tint:rgba(167,139,250,.16);
--mg-fill:rgba(255,255,255,.06); --mg-fill-line:rgba(255,255,255,.1);
--mg-btn-bg:linear-gradient(180deg,#9be7ff,#43b8ee); --mg-btn-ink:#06142b;
--mg-btn-shadow:0 0 20px rgba(127,220,255,.4);
--mg-glow:0 0 14px rgba(127,220,255,.25); --mg-live-glow:0 0 10px rgba(240,161,94,.55);
--mg-text-glow:0 0 14px rgba(240,161,94,.45);
--mg-glowline:linear-gradient(90deg,transparent,#7fdcff 25%,#e8fbff 50%,#7fdcff 75%,transparent);
--mg-glowline-shadow:0 0 14px 2px rgba(127,220,255,.45);
--mg-logo-shadow:0 6px 18px rgba(0,0,0,.45),0 0 18px rgba(127,220,255,.35);
--mg-tabbar:rgba(2,6,13,.97); --mg-sheet:linear-gradient(180deg,#0c1f3c,#050e1d);
--mg-on-accent:#06142b;
--mg-sheet-top:#0f2348;
--mg-bar:rgba(174,191,218,.22);
--mg-tab-filter:drop-shadow(0 0 6px rgba(127,220,255,.7)); --mg-tab-ind-glow:0 0 10px 1px #7fdcff;
--mg-hero-ink:#ffffff; --mg-hero-soft:rgba(230,238,251,.8); --mg-hero-faint:rgba(230,238,251,.6);
--mg-hero-line:rgba(127,220,255,.2); --mg-hero-fill:rgba(255,255,255,.06); --mg-hero-hover:rgba(127,220,255,.14);
--mg-hero-overlay:linear-gradient(180deg,rgba(5,14,29,.3) 0%,rgba(5,14,29,.95) 100%);
--mg-hero-card:linear-gradient(135deg,rgba(20,44,84,.7) 0%,rgba(8,20,42,.6) 100%);
--mg-cover-glow:0 0 40px rgba(127,220,255,.22); --mg-live-card-line:rgba(240,161,94,.18);
--mg-update-line:rgba(127,220,255,.18); --mg-menu-line:rgba(127,220,255,.25);
--mg-nav-glow:0 0 18px rgba(127,220,255,.1); --mg-badge-ink:#1a1204;
--r-shadow-1:0 1px 2px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.28);
--r-shadow-cover:0 10px 22px rgba(0,0,0,.45);
--r-shadow-cover-hi:0 18px 38px rgba(0,0,0,.6);
--r-chrome-1:rgba(3,9,22,.5); --r-chrome-2:rgba(3,9,22,.5);
--r-chrome-ink:#e6eefb; --r-chrome-soft:#8ea3c4; --r-chrome-line:rgba(127,220,255,.1);
--chrome-1:rgba(3,9,22,.5); --chrome-2:rgba(3,9,22,.5);
--chrome-ink:#e6eefb; --chrome-ink-dim:#aebfda; --chrome-soft:#8ea3c4;
--chrome-line:rgba(127,220,255,.1); --chrome-active:rgba(127,220,255,.12);
--chrome-hover:rgba(127,220,255,.06); --chrome-accent:#7fdcff;
}
}
/* Pagina-achtergrond: de marine/papier-gloed rechtsboven. Vast aan het
venster, zodat hij niet met lange pagina's mee-uitrekt. */
/* The glow sits on a fixed layer behind the page, not as a body background
with background-attachment:fixed — iOS ignores that and then stretches
the glow over the whole (long) page. */
body{background-color:var(--bg);background-image:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--mg-bg-glow);background-color:var(--bg)}
@media (max-width:639px){
}
/* Zwevende vlakken (modals, uitklappanelen, popovers, kaart-popups) liggen
óver inhoud: die krijgen de vaste kaartkleur, anders schemert de pagina
in donker door de half doorzichtige --card heen. */
.modal,
.tour-tooltip,
.year-filter-panel-scroll,
.year-filter-panel.hero-more-panel,
.year-filter-panel.fb-menu,
.add-menu,
.place-suggest-panel,
.wm-card,
.wm-gl-popup .maplibregl-popup-content,
.select option{background:var(--mg-card-solid)}
.wm-gl-popup .maplibregl-popup-tip{border-top-color:var(--mg-card-solid);border-bottom-color:var(--mg-card-solid)}
/* Tekst op een accent-vulling. Tot nu toe #fff of var(--card); in donker is
--accent nu licht ijsblauw (wit erop is onleesbaar) en --card half
doorzichtig. --mg-on-accent is wit in licht, marine in donker. Tekst op een
--ink-vulling krijgt de vaste kaartkleur i.p.v. de doorzichtige --card. */
.btn-add,.ip-btn,.submit-btn,.select option:checked,.timeline-year-pill,
.rel-note-panel .btn-mini-primary,.conn-req-primary,.tl-today-pill,
.wm-clear:hover,.filter-clear:hover,.filter-clear:focus-visible,
.help-center-article mark,.hc-row mark,
.fbtn.is-active,.fav-icon-toggle.active{color:var(--mg-on-accent)}
@media (max-width:640px){.profile-side-btn.active{color:var(--mg-on-accent)}}
.fbtn.is-active + .filter-clear,
.fbtn.is-active + .filter-clear:hover,
.fbtn.is-active + .filter-clear:focus-visible{background:var(--mg-on-accent)}
.notif-pill.active,.dash-fav-pill.active{color:var(--mg-card-solid)}
/* ==========================================================================
Midnight Glow — typografie (spec §2.3)
Eén familie: Archivo met variabele breedte. Breed (125%) voor merk,
paginatitels en sectiekoppen; smal (75%) voor grote cijfers, namen in
hero's en datums. IBM Plex Mono blijft voor labels. Space Grotesk en
IBM Plex Sans zijn vervangen (de font-family-regels hierboven zijn
letterlijk omgezet); hier staan alleen de rollen.
========================================================================== */
body{font-family:'Archivo',system-ui,sans-serif}
h1,h2,h3{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800}
/* Merk en paginatitels — breed, uppercase */
.logo-text,.sidebar .logo-text,.dash-hero-brand-text,.auth-wordmark{font-stretch:125%;font-weight:800;letter-spacing:.04em}
.page-title,.edit-page-title{font-stretch:125%;font-weight:800;font-size:28px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
/* Sectiekoppen — breed, 700, klein uppercase. !important alleen voor de
panel-kop: dashboard.js zet daar font-size:16px inline op de . */
.panel-head h2,.section-title,.dash .dash-title-lg,.dash-crate-title,.settings-group-title,
.srow-head,.acct-head h2,.conn-find-h,.add-page .panel > .choose-heading,.tour-tooltip-title,.ip-title{
font-stretch:125%;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.panel-head h2{font-size:13.5px !important}
.section-title,.dash .dash-title-lg,.dash-crate-title,.settings-group-title,.srow-head{font-size:13px}
.acct-head h2{font-size:17px}
/* Smal — grote cijfers, hero-namen, datums */
.stat-value,.dash-hero-line,.dash-rank-big,.dash-fmt-donut-total,
.tl-year .tl-year-num,.sd-date-day,.song-live-year,.artist-show-year,
.reimport-big,.uc-feature-n,.tour-date-block .d,.timeline-year-pill{font-stretch:75%;font-weight:800;letter-spacing:0}
.dash-hero-line{line-height:.98;text-transform:uppercase}
.tl-year .tl-year-num{font-size:30px}
.tl-when-date{font-stretch:75%;font-weight:600;letter-spacing:.04em}
.tl-artist{font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:0}
.rel-hero-body .detail-title-block{line-height:.95;font-size:clamp(40px,4.4vw,54px)}
.rel-hero-body .detail-title-block .detail-title{font-stretch:75%;font-weight:800;text-transform:uppercase;letter-spacing:0}
/* ==========================================================================
Midnight Glow — desktop-shell (spec §3.1): zijbalk, topbalk, gebruikersmenu
========================================================================== */
.content-col{background:transparent}
.sidebar{
background:var(--chrome-1);border-right:1px solid var(--chrome-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
padding:22px 16px 18px;gap:4px;
}
.sidebar .logo{gap:12px;padding:0 4px 22px;align-items:center}
.sidebar .logo-mark{width:50px;height:50px;border-radius:13px;box-shadow:var(--mg-logo-shadow);overflow:hidden;flex:none}
.sidebar .logo-mark img{width:100%;height:100%;display:block}
.sidebar .logo-text{font-size:17px;line-height:1.02;letter-spacing:.04em;white-space:normal;color:var(--chrome-ink)}
.sidebar .nav{gap:4px}
.sidebar .nav-btn{
gap:12px;padding:10px 12px;border-radius:10px;
font-size:14.5px;font-weight:600;color:var(--chrome-soft);
}
.sidebar .nav-btn::before{display:none}
.sidebar .nav-icon{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar .nav-btn:hover{background:var(--chrome-hover);color:var(--chrome-ink)}
.sidebar .nav-btn.active{
background:var(--chrome-active);color:var(--chrome-ink);
box-shadow:inset 3px 0 0 var(--chrome-accent),var(--mg-nav-glow);
}
.sidebar .nav-btn .nav-count{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mg-faint)}
.sidebar .nav-btn.active .nav-count{color:var(--chrome-ink-dim)}
.sidebar .nav-btn:focus-visible{outline:2px solid var(--chrome-accent);outline-offset:2px}
.sidebar-divider{margin:18px 4px}
.sidebar-update{
margin:-4px 0 0;padding:10px 12px;border-radius:12px;
background:var(--mg-accent-tint);border:1px solid var(--mg-update-line);color:var(--chrome-ink);
}
.sidebar-update:hover{background:var(--mg-accent-tint);border-color:var(--mg-accent-line)}
.sidebar-update-top{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sidebar-update-title{font-size:13px;font-weight:500}
.sidebar-update-more{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
/* Gebruikersknop + popover boven de knop */
.sidebar .user-menu-trigger{
gap:10px;padding:8px 10px;border-radius:12px;
background:var(--mg-fill);border:1px solid var(--mg-fill-line);
}
.sidebar .user-menu-trigger:hover,.sidebar .user-menu.open .user-menu-trigger{background:var(--chrome-active)}
.sidebar .current-user-avatar .conn-av{width:32px;height:32px;font-size:13px}
.sidebar .current-user-name{font-size:13.5px}
.sidebar .user-menu-unread-dot{width:10px;height:10px;top:-2px;right:-2px;background:var(--mg-fav);border:2px solid var(--mg-card-solid)}
.sidebar .user-menu-panel{
background:var(--mg-sheet);border:1px solid var(--mg-menu-line);border-radius:14px;
padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.sidebar .user-menu-item{min-height:36px;padding:0 10px;gap:10px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink)}
.sidebar .user-menu-item svg{width:17px;height:17px;stroke-width:1.7;color:var(--ink-soft)}
.sidebar .user-menu-item:hover{background:var(--mg-accent-tint)}
.sidebar .user-menu-item.active{background:var(--mg-accent-tint)}
.sidebar .user-menu-item.is-danger,.sidebar .user-menu-item.is-danger svg{color:var(--danger)}
.sidebar .user-menu-item-count{background:var(--mg-fav);color:var(--mg-badge-ink);min-width:20px;padding:3px 6px}
.sidebar .user-menu-divider{background:var(--mg-line-soft)}
.sidebar .desktop-version-bar:not(.hidden){
padding:8px 4px 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-faint);
}
/* Topbalk: 60px, doorschijnend over de gloed, haarlijn eronder */
.content-topbar{
min-height:60px;padding:0 28px;
background:var(--chrome-1);border-bottom:1px solid var(--chrome-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.topbar-page-label{font-size:11px;letter-spacing:.18em;color:var(--mg-label)}
.topbar-page-label .crumb-name{color:var(--ink)}
.content-topbar .search-input{
width:300px;height:38px;border-radius:999px;padding:0 34px 0 38px;
background:var(--mg-fill) no-repeat 14px 50%/15px 15px;border:1px solid var(--mg-fill-line);color:var(--ink);font-size:13px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d93b6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}
.content-topbar .search-input::placeholder{color:var(--mg-faint)}
.content-topbar .search-input:focus{outline:none;border-color:var(--mg-accent-line);box-shadow:var(--mg-glow)}
.content-topbar .icon-btn{width:38px;height:38px;border-radius:999px;background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--accent-dark)}
.content-topbar .btn-add{
height:38px;padding:0 18px;border-radius:999px;border:none;
background:var(--mg-btn-bg);color:var(--mg-btn-ink);box-shadow:var(--mg-btn-shadow);
font-size:13px;font-weight:700;
}
.content-topbar .btn-add:hover{filter:brightness(1.06)}
/* ==========================================================================
Midnight Glow — componenten (spec §4)
========================================================================== */
/* Kaart / panel */
.panel,.stat-card,.install-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-radius)}
.panel{padding:16px 18px}
.panel-grid{gap:16px}
.stat-card::before{background:linear-gradient(90deg,var(--accent),transparent 85%);opacity:.5}
.panel-head{margin-bottom:14px}
.section-count,.dash-fav-panel .section-count{font-family:'IBM Plex Mono',monospace;color:var(--mg-faint)}
.meta-label,.stat-label,.list-section-head,.eyebrow,.rel-side-label{color:var(--mg-label)}
.view-all{color:var(--accent)}
/* Pillen: filters, weergave-/sorteermenu, keuzechips */
.fbtn,.fb-menu-btn,.year-chip,.dash-fav-pill,.notif-pill,.pill-group button,.match-filter-chip,.wm-rchip{
padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;
background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink-mid);box-shadow:none;
}
.year-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 11px}
.fbtn:hover,.fb-menu-btn:hover,.year-chip:hover,.dash-fav-pill:hover,.notif-pill:hover,.pill-group button:hover,.match-filter-chip:hover{border-color:var(--mg-accent-line);color:var(--ink)}
.fbtn.is-active,.year-chip.active,.dash-fav-pill.active,.notif-pill.active,.pill-group button.active,.match-filter-chip.active,.wm-rchip.active{
background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark);box-shadow:var(--mg-glow);
}
.fbtn.is-active{padding-right:33px}
.fbtn.cf-toggle.is-active{padding-right:14px}
.fbtn.is-active + .filter-clear,
.fbtn.is-active + .filter-clear:hover,
.fbtn.is-active + .filter-clear:focus-visible{background:var(--accent);color:var(--mg-on-accent);filter:none}
.fb-icon{color:var(--mg-faint)}
/* "Filters" rechts in de balk */
.filterbar > .year-filter:has(.cf-toggle){margin-left:auto}
/* Shows: koperen variant van de actieve pil */
.shows-page .fbtn.is-active,.shows-page .year-chip.active{
background:var(--mg-live-tint);border-color:var(--mg-live-line);color:var(--mg-live-soft);box-shadow:var(--mg-live-glow);
}
.shows-page .fbtn.is-active + .filter-clear{background:var(--mg-live);color:var(--mg-on-live)}
/* Segment (Collection/Wishlist, Release info/Tracklist, instellingen) */
.segmented{padding:4px;gap:4px;background:var(--mg-fill);border:1px solid var(--line);box-shadow:none}
.segmented button{color:var(--ink-mid);font-weight:600}
.segmented button.active{background:var(--mg-accent-tint);color:var(--accent-dark);font-weight:700;box-shadow:inset 0 0 0 1px var(--mg-accent-line)}
.list-tab{color:var(--ink-soft)}
.list-tab.active{color:var(--ink)}
.list-tab.active::after{box-shadow:var(--mg-glow)}
/* Mono-badges: formaat = accent-tint, tag = violet, type = neutraal */
.badge,.badge-row .tag,.rel-hero-badges .badge,.rel-hero-badges .tag{
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:4px 10px;border-radius:999px;background:var(--mg-accent-tint);color:var(--accent-dark);border:1px solid var(--mg-accent-line);
}
.chip,.chip-tag,.rel-hero-badges .chip-tag{
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
padding:4px 10px;border-radius:999px;background:var(--mg-tag-tint);color:var(--mg-tag);border:1px solid transparent;
}
.type-badge,.rel-hero-badges .type-badge{
font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;
padding:4px 10px;border-radius:999px;background:var(--mg-fill);color:var(--ink-mid);border:1px solid var(--mg-fill-line);
}
.type-badge.upcoming{background:var(--mg-live-tint);color:var(--mg-live-soft);border-color:var(--mg-live-line)}
/* Line-up- en companion-chips houden hun eigen (persoons)kleuren. */
.chip-companion{background:var(--bdg-companion);color:#fff;text-transform:none;letter-spacing:.02em}
.chip-artist{background:transparent;color:var(--ink);border:1px solid var(--mg-fill-line);text-transform:none;letter-spacing:0;font-family:inherit;font-size:12px}
.chip-artist--lead{background:var(--mg-accent-tint);color:var(--accent-dark);border-color:var(--mg-accent-line)}
.chip-artist--seen{background:var(--mg-fill);color:var(--ink);border-color:var(--mg-fill-line)}
/* N× LIVE */
.mg-live-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;
font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
background:var(--mg-live);color:var(--mg-on-live);box-shadow:var(--mg-live-glow)}
/* Knoppen */
.submit-btn,.ip-btn,.rel-note-panel .btn-mini-primary,.conn-req-primary{
background:var(--mg-btn-bg);color:var(--mg-btn-ink);border:none;box-shadow:var(--mg-btn-shadow);border-radius:999px;
}
.submit-btn:hover,.ip-btn:hover,.conn-req-primary:hover{filter:brightness(1.06)}
.btn-outline{background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink)}
.btn-outline:hover{border-color:var(--mg-accent-line)}
.btn-outline.danger{color:var(--danger)}
.btn-outline.suggest{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark)}
/* Ronde icoonknop */
.icon-btn,.fav-icon-toggle,.private-icon-toggle,.catalog-link-icon{
border-radius:999px;background:var(--mg-fill);border:1px solid var(--mg-hero-line);color:var(--accent-dark);
}
.icon-btn svg,.private-icon-toggle svg,.catalog-link-icon svg{stroke:var(--accent-dark)}
.icon-btn:hover,.fav-icon-toggle:hover,.private-icon-toggle:hover,.catalog-link-icon:hover{border-color:var(--mg-accent-line);background:var(--mg-accent-tint)}
.fav-icon-toggle.active{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark)}
/* Invoervelden */
.form-input,.select,.search-input,.help-center-search{background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink);border-radius:10px;box-shadow:none}
.form-input:focus,.select:focus,.search-input:focus,.help-center-search:focus{outline:none;border-color:var(--mg-accent-line);box-shadow:var(--mg-glow)}
.select{border-radius:999px}
/* Favoriet: ★ in goud, ook op de hoes */
.favorite-star.active{color:var(--mg-fav)}
.album-card .favorite-star{background:none;color:var(--mg-fav);text-shadow:0 1px 3px rgba(0,0,0,.6);font-size:15px}
.album-card .favorite-star:not(.active){color:rgba(255,255,255,.85)}
/* Gloedlijn — onder elke detail-hero; .mg-glowline voor losse plekken */
.mg-glowline{height:2px;border:0;margin:0;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow)}
.rel-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow);pointer-events:none}
.sd-hero::after{background:linear-gradient(90deg,transparent,var(--mg-live) 25%,var(--mg-live-soft) 50%,var(--mg-live) 75%,transparent);box-shadow:var(--mg-live-glow)}
/* ── Detail-hero, beide thema's ───────────────────────────────────────── */
.rel-hero-bg{background-color:var(--bg-alt)}
.rel-hero-bg::before{filter:blur(40px) saturate(1.1);opacity:.55;transform:none}
.rel-hero-bg::after,.artist-hero .rel-hero-bg::after,.sd-hero .rel-hero-bg::after{background:var(--mg-hero-overlay)}
.artist-hero-light{display:none}
.rel-hero-body,.rel-hero-tools{color:var(--mg-hero-ink)}
.rel-hero-body .detail-title,.rel-hero-feat .name-link,.artist-hero-rel .name-link{color:var(--mg-hero-ink)}
.rel-hero-body .artist-link{color:var(--accent);font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.rel-hero-feat,.rel-hero-meta,.artist-hero-rel,.rel-hero-tools .view-add-label{color:var(--mg-hero-soft)}
.rel-hero-meta{font-family:'IBM Plex Mono',monospace;letter-spacing:.14em}
.rel-hero-feat span,.rel-hero-note,.rel-hero-back{color:var(--mg-hero-faint)}
.rel-hero-back:hover{color:var(--mg-hero-ink)}
.rel-hero-body .favorite-star:not(.active){color:var(--mg-hero-faint)}
.rel-hero-cover .image-slot{border-radius:8px;box-shadow:var(--r-shadow-cover),var(--mg-cover-glow)}
.rel-hero-cover .image-slot:not(.has-image),.artist-hero-photo .image-slot:not(.has-image){background:var(--mg-fill);border:1px dashed var(--mg-hero-line)}
.rel-hero-cover .image-slot:not(.has-image) .slot-label,
.artist-hero-photo .image-slot .slot-label,.artist-hero-photo .image-slot .slot-icon{color:var(--mg-hero-faint)}
.artist-hero-photo{box-shadow:0 0 0 3px var(--accent),var(--r-shadow-cover),var(--mg-cover-glow)}
.artist-hero-photo .image-slot{background:var(--mg-fill)}
/* Ronde knoppen in de hero */
.rel-hero-body .detail-title-adorn .icon-btn,
.rel-hero-icons .icon-btn,.rel-hero-icons .private-icon-toggle,
.rel-hero-tools > .icon-btn,.rel-hero-tools .catalog-link-icon,
.hero-pill,.rel-hero-tools .view-add-row .btn-outline{
background:var(--mg-hero-fill);border:1px solid var(--mg-hero-line);color:var(--accent-dark);
}
.rel-hero-body .detail-title-adorn .icon-btn svg,
.rel-hero-icons .icon-btn svg,.rel-hero-icons .private-icon-toggle svg,
.rel-hero-tools > .icon-btn svg,.rel-hero-tools .catalog-link-icon svg,.hero-pill svg{stroke:var(--accent-dark)}
.rel-hero-body .detail-title-adorn .icon-btn:hover,
.rel-hero-icons .icon-btn:hover,.rel-hero-icons .private-icon-toggle:hover,
.rel-hero-tools > .icon-btn:hover,.rel-hero-tools .catalog-link-icon:hover,
.hero-pill:hover,.rel-hero-tools .view-add-row .btn-outline:hover{background:var(--mg-hero-hover);border-color:var(--mg-accent-line)}
.hero-pill:focus-visible,.hero-more-btn:focus-visible{outline-color:var(--accent)}
.rel-hero-icons .private-icon-toggle.active{background:var(--mg-fav);border-color:transparent}
.rel-hero-icons .private-icon-toggle.active svg{stroke:#1a1204}
.rel-hero-icons .rel-hero-unlink{border-color:var(--mg-hero-line)}
.rel-hero-icons .rel-hero-unlink svg{stroke:var(--mg-hero-soft)}
/* Show-hero */
.sd-date{background:var(--mg-live-tint);border:1px solid var(--mg-live-line);color:var(--mg-hero-ink)}
.sd-date-month,.sd-date-year{color:var(--mg-live-ink)}
.sd-date-day{color:var(--mg-live-ink);text-shadow:var(--mg-text-glow)}
.sd-place{color:var(--mg-hero-soft)}
.sd-approx-note{color:var(--mg-hero-soft);border-color:var(--mg-hero-line)}
.sd-approx-find,.sd-confirm-btn,.sd-day{background:var(--mg-hero-fill);border:1px solid var(--mg-hero-line);color:var(--mg-hero-ink)}
.sd-approx-find:hover,.sd-confirm-btn:hover,.sd-day:hover:not([disabled]){background:var(--mg-hero-hover)}
.sd-confirm{border-color:var(--mg-live-line)}
.sd-confirm-q{color:var(--mg-hero-ink)}
.sd-confirm-btn.yes{background:var(--mg-btn-bg);color:var(--mg-btn-ink);border-color:transparent}
.sd-day.is-active{background:var(--mg-live-tint);border-color:var(--mg-live-line);color:var(--mg-live-soft)}
.sd-day[disabled]:not(.is-active){border-color:var(--mg-line-soft);color:var(--mg-hero-faint)}
/* Dashboard-hero: kaart met gloed, licht in licht */
.dash-hero{background:var(--mg-hero-card);border:1px solid var(--line);color:var(--mg-hero-ink);border-radius:20px}
.dash-hero-eyebrow{color:var(--mg-label)}
.dash-hero-line{color:var(--mg-hero-ink)}
.dash-hero-line .stat-unit{color:var(--accent)}
.dash-hero-actions a{color:var(--mg-hero-ink);border-color:var(--mg-hero-line)}
.dash-hero-actions a:hover{background:var(--mg-hero-hover)}
.dash-hero-brand-text{color:var(--mg-hero-ink)}
/* Sectiekoppen in detail-panelen (Tracklist, Release, Line-up, Setlist,
My note …): breed Archivo zoals de spec (§2.3 "Sectiekop"), i.p.v. de
mono-eyebrow van Encore Console fase 4 (optie A, 2026-09-08). De
veldlabels erbinnen (RECORD LABEL, TOUR …) blijven mono. */
.rel-tracklist-panel .panel-head h2,
.rel-side-label,
.rel-note-panel .section-title,
.sd-panel .section-title{
font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:13px;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.sd-panel .section-count{font-family:'IBM Plex Mono',monospace;color:var(--mg-faint)}
.festival-count-chip{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;padding:4px 10px;
background:var(--mg-fill);color:var(--ink-mid);border:1px solid var(--mg-fill-line)}
.sd-lu--came-for .sd-lu-badge{background:var(--mg-accent-tint);color:var(--accent-dark);border-color:var(--mg-accent-line)}
.sd-lu--also-saw .sd-lu-badge{background:var(--mg-fill);color:var(--ink-mid);border-color:var(--mg-fill-line)}
/* ==========================================================================
Midnight Glow — mobiele shell (spec §3.2)
Onder 640px (zelfde samengestelde conditie als de rest van de mobiele
regels, ook een telefoon in liggende stand): geen zijbalk meer, een
tabbalk onderaan, een topbalk met logo/terug · zoeken · + · ••• · avatar,
en het gebruikersmenu en het ⋯-menu van een detailpagina als sheet.
========================================================================== */
.mg-tabbar,.mg-top-logo,.mg-top-back,.mg-top-btn,.mg-top-avatar,.user-menu-sheet-head{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Zijbalk weg — alleen het gebruikersmenu (als sheet) blijft erin leven. */
.sidebar{
position:static;width:auto;height:0;min-height:0;padding:0;margin:0;gap:0;
border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;z-index:auto;
}
.sidebar > :not(.header-actions){display:none}
/* style.css's old fixed bottom bar left transform:translateY(0) on
#header-actions — a transform makes it the containing block for the
position:fixed sheet inside, which then sat above the screen. */
.sidebar .header-actions{transform:none;transition:none;padding:0;border:0;height:0;z-index:auto}
.sidebar .header-actions > :not(.user-menu){display:none}
.sidebar .user-menu-trigger{display:none}
/* Topbalk */
.content-topbar{min-height:56px;padding:8px 14px;gap:8px;flex-wrap:nowrap}
.content-topbar .header-right{display:contents}
.content-topbar .topbar-page-label{flex:1 1 0;min-width:0;order:0}
.content-topbar:not(.is-sub) .topbar-page-label{
font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:800;font-size:16px;letter-spacing:.05em;color:var(--ink);
}
.content-topbar.is-sub .topbar-page-label{font-size:10.5px;letter-spacing:.16em}
.mg-top-logo{display:block;width:34px;height:34px;border-radius:9px;box-shadow:var(--mg-logo-shadow);flex:none}
.content-topbar.is-sub .mg-top-logo{display:none}
.mg-top-back:not(.hidden){
display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:999px;
background:none;border:1.5px solid var(--accent);color:var(--accent);box-shadow:var(--mg-glow);cursor:pointer;padding:0;
}
.mg-top-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.content-topbar .mg-top-btn:not(.hidden){display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;order:2}
.content-topbar .mg-top-btn svg{width:17px;height:17px;fill:none;stroke:var(--accent-dark);stroke-width:1.9;stroke-linecap:round}
.content-topbar .mg-more-btn svg{fill:var(--accent-dark);stroke:none}
/* + (alleen op hoofdschermen) */
.content-topbar .btn-add{order:3;width:40px;height:40px;padding:0;flex:none;font-size:0;display:flex;align-items:center;justify-content:center}
.content-topbar .btn-add::before{content:"+";font-size:22px;font-weight:600;line-height:1}
.content-topbar.is-sub .btn-add{display:none}
.content-topbar .mg-more-btn{order:4}
.mg-top-avatar:not(.hidden){
display:block;position:relative;order:5;flex:none;width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;border-radius:999px;
}
.mg-top-avatar .conn-av{width:40px;height:40px;font-size:15px}
.mg-top-avatar-dot{position:absolute;top:0;right:0;width:11px;height:11px;border-radius:50%;background:var(--mg-fav);border:2px solid var(--bg)}
.mg-top-avatar:focus-visible,.mg-top-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Zoeken: een eigen rij onder de topbalk, pas na een tik op de knop */
.content-topbar .search-wrap{display:none}
.content-topbar.search-open{flex-wrap:wrap}
.content-topbar.search-open .search-wrap:not(.hidden){display:flex;order:10;flex:1 1 100%}
.content-topbar .search-input{width:100%}
.content-topbar.search-open .mg-search-btn{background:var(--mg-accent-tint);border-color:var(--mg-accent-line)}
/* Tabbalk */
.mg-tabbar:not(.hidden){
display:flex;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:var(--mg-tabbar);border-top:1px solid var(--chrome-line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
padding:10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
}
.tab-btn{
position:relative;width:70px;display:flex;flex-direction:column;align-items:center;gap:4px;
background:none;border:0;padding:4px 0 0;cursor:pointer;font:inherit;font-size:10.5px;font-weight:600;color:var(--mg-faint);
}
.tab-btn svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab-btn.active{color:var(--accent);filter:var(--mg-tab-filter)}
.tab-btn.active::before{
content:"";position:absolute;top:-11px;left:14px;right:14px;height:2px;border-radius:2px;
background:var(--accent);box-shadow:var(--mg-tab-ind-glow);
}
.tab-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.main{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
/* Detailpagina's (full-bleed hero) zetten #view's padding op 0 — met een
id-selector, dus die wint van .main hierboven; zonder dit viel het laatste
paneel (My note) onder de tabbalk (gemeld door de eigenaar). */
#view.view-bleed{padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px))}
body.pre-auth .main{padding-bottom:0}
/* Gebruikersmenu als sheet van onderen */
.sidebar .user-menu-panel{
position:fixed;left:0;right:0;bottom:0;top:auto;z-index:260;
border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);
padding:10px 16px calc(30px + env(safe-area-inset-bottom, 0px));
box-shadow:0 0 0 100vmax var(--overlay-bg);max-height:calc(var(--vh) * 90);overflow-y:auto;
}
.sidebar .user-menu-item{min-height:48px;padding:0 12px;gap:14px;border-radius:12px;font-size:15.5px}
.sidebar .user-menu-item svg{width:20px;height:20px}
.user-menu-sheet-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:4px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--mg-line-soft)}
.user-menu-sheet-grip{grid-column:1 / -1;justify-self:center;margin-bottom:8px}
.user-menu-sheet-avatar .conn-av{width:44px;height:44px;font-size:17px}
.user-menu-sheet-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.user-menu-sheet-name{font-stretch:125%;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Terug zit in de topbalk; de "← BACK" in de hero zou dubbel zijn. */
.rel-hero-back{display:none}
/* ••• : de ⋯-knop in de hero verdwijnt, zijn menu wordt een sheet */
.rel-hero .hero-more-btn{display:none}
.rel-hero:has(.hero-more-panel){z-index:260}
.fade-up:has(.hero-more-panel){animation:none}
.year-filter-panel.hero-more-panel{
position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;max-width:none !important;min-width:0 !important;transform:none !important;
border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);background:var(--mg-sheet-page);
padding:22px 16px calc(30px + env(safe-area-inset-bottom, 0px));
box-shadow:0 0 0 100vmax var(--overlay-bg);z-index:260;
}
.year-filter-panel.hero-more-panel::before{content:"";position:absolute;top:10px;left:50%;margin-left:-24px}
.hero-more-panel .hero-more-row{min-height:48px;font-size:15.5px;gap:14px;border-radius:12px}
}
/* ==========================================================================
Midnight Glow — per pagina (spec §5)
========================================================================== */
/* ── Dashboard ── */
.dash-count-list{display:flex;flex-direction:column;gap:10px}
.dash-count-card{
position:relative;cursor:pointer;border-radius:14px;padding:13px 16px 13px 19px;
background:var(--mg-card-hi);border:1px solid var(--mg-live-card-line);
transition:border-color .15s ease;
}
.dash-count-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--mg-live);box-shadow:var(--mg-live-glow)}
.dash-count-card:hover{border-color:var(--mg-live-line)}
.dash-count-when{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dash-count-rel{font-stretch:75%;font-weight:800;font-size:24px;line-height:1.05;color:var(--mg-live-ink);text-shadow:var(--mg-text-glow)}
.dash-count-date{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label)}
.dash-count-title{font-size:15px;font-weight:700;margin-top:3px;color:var(--ink)}
.dash-count-place{font-size:12.5px;color:var(--ink-soft)}
.yearbar-bar{background:var(--mg-bar)}
.yearbar-col.is-top .yearbar-bar{background:linear-gradient(180deg,var(--mg-live-soft),var(--mg-live));box-shadow:var(--mg-live-glow)}
.yearbar-col.is-top .yearbar-count{color:var(--mg-live-ink)}
.yearbar-clickable:hover .yearbar-bar{background:var(--accent)}
.yearbar-count,.yearbar-year{font-family:'IBM Plex Mono',monospace;color:var(--mg-faint)}
.dash-rank-num{color:var(--mg-faint)}
.dash-rank-row.first .dash-rank-big{color:var(--ink)}
.dash-rank-count{color:var(--ink-mid)}
/* ── Song / hero-tellers (SG1) ── */
.mg-hero-stats{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap}
.mg-hero-stat{display:flex;flex-direction:column;gap:2px}
.mg-hero-stat b{font-stretch:75%;font-weight:800;font-size:46px;line-height:.98;color:var(--mg-hero-ink)}
.mg-hero-stat span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-hero-soft)}
.mg-hero-stat.is-live b{color:var(--mg-live-ink);text-shadow:var(--mg-text-glow)}
.song-hero .rel-hero-meta{margin-top:10px}
/* ── Artists ── */
.artist-card .album-cover.artist-cover{box-shadow:0 0 0 1px var(--mg-accent-line),var(--r-shadow-cover)}
.artist-card:hover .album-cover.artist-cover{box-shadow:0 0 0 2px var(--accent),var(--r-shadow-cover-hi),var(--mg-glow)}
/* Artiest: "Seen live"-datums in koper */
.artist-show-year{color:var(--mg-live-ink)}
.artist-show-day{color:var(--mg-label)}
/* Songs-lijst */
.srow-meta{color:var(--mg-faint)}
.srow-head{color:var(--accent)}
/* ── Detail-hero: acties als ronde knoppen (AR1) ── */
.hero-round-actions{display:flex;gap:8px;align-items:center}
.hero-toolbar > .year-filter[data-filter-key="heroMoreOpen"]{display:none}
.rel-hero-icons .hero-round{
width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
border-radius:999px;background:var(--mg-hero-fill);border:1px solid var(--mg-hero-line);color:var(--accent-dark);
}
.rel-hero-icons .hero-round svg{width:17px;height:17px;fill:none;stroke:var(--accent-dark);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rel-hero-icons .hero-round:hover{background:var(--mg-hero-hover);border-color:var(--mg-accent-line)}
.rel-hero-icons .hero-round.danger svg{stroke:var(--danger)}
.rel-hero-icons .hero-round:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.hero-round-actions{display:none}
.hero-toolbar > .year-filter[data-filter-key="heroMoreOpen"]{display:block}
}
/* ── Release: wat er uit de hoes steekt (modules/sleeve.js) ──
Het object zit in een vak van 200/216 van de hoes, achter de hoes, en
steekt 36/216 rechts uit, zoals de plaat in het voorbeeld van de eigenaar
(was 64/216, 2026-10-01) — bij elk formaat even ver (de keuze van de
eigenaar). --cw is de hoesbreedte; de marge rechts maakt ruimte zodat de
titel er niet overheen valt. */
.rel-hero-cover.has-sleeve{--cw:216px;width:var(--cw);min-height:var(--cw);margin-right:calc(var(--cw) * .17)}
.rel-sleeve{position:absolute;left:24%;top:3.7%;width:92.6%;height:92.6%;z-index:0;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.rel-sleeve svg{width:100%;height:100%;display:block;overflow:visible}
.rel-hero-cover.has-sleeve .image-slot{z-index:1}
.sleeve-digital .rel-sleeve{filter:var(--mg-tab-filter)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.rel-detail .rel-hero-cover{width:180px;min-height:180px}
.rel-hero-cover.has-sleeve{--cw:180px}
}
/* ── Shows-map op een telefoon: full-bleed (S1) ──
De MapLibre-kaart vult alles tussen topbalk en tabbalk en scrolt niet mee;
weergave-/sorteer-/filterpillen en de regiochips zweven erboven. Alleen de
echte kaart (#gl-map-slot) — de SVG-terugval blijft in de paginaflow. */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body:has(.shows-page #gl-map-slot){overflow:hidden}
.shows-page:has(#gl-map-slot) .page-head{display:none}
.shows-page:has(#gl-map-slot) .filterbar{
position:fixed;z-index:32;left:12px;right:12px;top:calc(env(safe-area-inset-top, 0px) + var(--viewing-bar-h, 0px) + 66px);margin:0;
}
.shows-page:has(#gl-map-slot) .wm-regions{
position:fixed;z-index:32;left:12px;right:12px;top:calc(env(safe-area-inset-top, 0px) + var(--viewing-bar-h, 0px) + 112px);margin:0;flex-wrap:nowrap;overflow-x:auto;
}
.shows-page:has(#gl-map-slot) .wm-rchip{background:var(--mg-card-solid)}
.shows-page:has(#gl-map-slot) .fbtn,.shows-page:has(#gl-map-slot) .fb-menu-btn{background:var(--mg-card-solid)}
.shows-page #gl-map-slot.wm-gl-slot{
position:fixed;z-index:30;left:0;right:0;top:calc(env(safe-area-inset-top, 0px) + var(--viewing-bar-h, 0px) + 56px);
bottom:calc(76px + env(safe-area-inset-bottom, 0px));height:auto;min-height:0;border:0;border-radius:0;
}
.shows-page:has(#gl-map-slot) .wm-unplaced{display:none}
}
/* ── Plaats: kaart + drie tellers (P1, P2) ── */
.place-map-slot.wm-gl-slot{height:240px;min-height:0;margin-top:14px;border-radius:var(--r-radius)}
.place-stats{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 4px}
.place-stat{flex:1 1 120px;max-width:200px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:2px}
.place-stat b{font-stretch:75%;font-weight:800;font-size:34px;line-height:1;color:var(--ink)}
.place-stat span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label)}
.place-stat.is-live{border-color:var(--mg-live-card-line)}
.place-stat.is-live b{color:var(--mg-live-ink);text-shadow:var(--mg-text-glow)}
.place-stat.is-accent b{color:var(--accent)}
/* ── Notifications: ongelezen = ijsblauwe streep, tour alert = koper ── */
.notif-row.unread::before{box-shadow:var(--mg-glow)}
.notif-row.unread.notif-type-tour_date::before{background:var(--mg-live);box-shadow:var(--mg-live-glow)}
/* ── Connections: shows samen (C3) ── */
.conn-row-together{margin-left:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label);font-weight:500}
/* ── Services: gevolgde artiesten (SV1) ── */
.cs-followed{display:inline;margin:0;font-size:inherit}
.acct-tab-count.is-due{background:var(--mg-live-tint);color:var(--mg-live-soft);border-color:var(--mg-live-line)}
/* ── Account / Admin / Help Center: rail op desktop, lijst → eigen scherm op een telefoon ── */
.rail-back{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.profile-layout.is-list .profile-content{display:none}
.profile-layout.is-tab .profile-sidebar{display:none}
.rail-page.is-tab > .page-title,
.rail-page.is-tab > .page-sub{display:none}
/* Terug zit in de topbalk (en in .rail-back) */
.place-page > .back-link{display:none}
.profile-layout.is-tab{margin-top:0 !important}
.rail-back{display:inline-block;background:none;border:0;padding:0;margin:0 0 10px;cursor:pointer;
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
/* De lijst: kaarten met rijen van 48px, groepskoppen weer zichtbaar */
.profile-layout.is-list .profile-sidebar{
flex-direction:column;flex-wrap:nowrap;overflow:visible;margin:0;padding:6px;gap:0;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-radius);
}
.profile-layout.is-list .acct-rail-group{display:block;margin:10px 12px 4px}
.profile-layout.is-list .profile-rail-divider{display:block}
.profile-layout.is-list .profile-side-btn{
width:100%;min-height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;
font-size:15px;white-space:normal;border-radius:12px;background:none;color:var(--ink)
}
.profile-layout.is-list .profile-side-btn.active{background:none;color:var(--ink)}
.profile-layout.is-list .profile-side-btn::after{content:"›";margin-left:10px;color:var(--accent);font-size:18px;line-height:1}
.profile-layout.is-list .profile-side-btn .acct-tab-count{margin-left:auto}
}
/* ── Inloggen & co: gestapeld merk met tagline (L2) ── */
.auth-screen{background:transparent}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.auth-brand-mark{width:72px;height:72px;border-radius:18px;box-shadow:var(--mg-logo-shadow)}
.auth-wordmark{font-stretch:125%;font-weight:800;font-size:30px;letter-spacing:.05em;line-height:1.05;color:var(--ink)}
.auth-tagline{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label);max-width:100%}
.auth-tagline span{display:inline-block;white-space:nowrap}
.auth-card{background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (max-width:420px){.auth-wordmark{font-size:24px}}
/* ── + Add: de scanlijn als gloedlijn ── */
.barcode-scan-line{background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow)}
/* ── Release notes: versies als tijdlijn, de huidige met een ijsblauwe stip ── */
.release-note-v{font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--accent)}
.release-note-date{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label)}
.hc-row:first-of-type .release-note-v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:var(--mg-glow);margin-right:8px;vertical-align:1px}
/* ── Shows-tijdlijn: TODAY en alles wat nog komt in koper ── */
.tl-card{background:var(--mg-card-hi);border-radius:14px}
.tl-dot{box-shadow:0 0 0 2px var(--bg),var(--mg-glow)}
.tl-today-pill{background:var(--mg-live);color:var(--mg-on-live);box-shadow:var(--mg-live-glow)}
.tl-today-dot{background:var(--mg-live);box-shadow:0 0 0 2px var(--mg-live),var(--mg-live-glow)}
.tl-today-date{background:transparent;color:var(--mg-live-ink);border-color:var(--mg-live-line)}
.tl-row.upcoming .tl-card{background:linear-gradient(90deg,var(--mg-live-tint),var(--mg-card-hi) 60%);border-color:var(--mg-live-card-line)}
.tl-row.upcoming .tl-when-date{color:var(--mg-live-ink)}
.tl-row.upcoming .tl-artist{color:var(--ink)}
.tl-row.upcoming .tl-dot{background:var(--bg);border-color:var(--mg-live);box-shadow:0 0 0 2px var(--bg),var(--mg-live-glow)}
.tl-row.upcoming .tl-track,.tl-year.upcoming .tl-rule{border-left-color:var(--mg-live-line)}
.tl-year.upcoming .tl-year-num{color:var(--mg-live-ink)}
.tl-when-date{color:var(--ink-mid)}
.rel-hero-cover.has-sleeve .image-slot.has-image{background:var(--mg-card-solid)}
/* ── Wat uit de hoes steekt: de tekeningen (Midnight Glow, keuze "nieuwe
tekening") — plaat met groeven, lichtval en een gekleurd label; cd met
blauw-violette glans en blauwe naafring — dvd en dualdisc dezelfde.
Cassette, boek en digitaal zijn SVG (modules/sleeve.js). ── */
.sleeve-obj{position:absolute;inset:0}
.sleeve-obj svg{width:100%;height:100%;display:block;overflow:visible}
.sleeve-obj--vinyl{border-radius:50%;
background:
radial-gradient(circle,#0c0e12 0 2.2%,transparent 2.4%),
radial-gradient(circle,#e7b35a 0 15%,#c8883a 15.5% 17.5%,transparent 17.7%),
conic-gradient(from 30deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.16) 18deg,rgba(255,255,255,0) 42deg,rgba(255,255,255,0) 190deg,rgba(255,255,255,.1) 208deg,rgba(255,255,255,0) 232deg,rgba(255,255,255,0) 360deg),
radial-gradient(circle,transparent 0 18%,#0a0b0e 18% 21%,transparent 21%),
repeating-radial-gradient(circle,#101216 0 .8px,#1a1d23 .8px 1.7px),
#0c0e12;
box-shadow:inset 0 0 0 2px #050608,inset 0 0 0 3px rgba(255,255,255,.06)}
/* CD, DVD en DualDisc: één schijf (de eigenaar, 2026-09-30, naar een
voorbeeldfoto) — zilver met een blauw-violette regenboogglans in de
ijsblauwe tinten van de app, een doorzichtige naaf met een blauwe ring
eromheen, een gat in het midden en een dun blauw randje. */
.sleeve-obj--cd,.sleeve-obj--dvd,.sleeve-obj--dualdisc{border-radius:50%;
-webkit-mask:radial-gradient(circle,transparent 0 11.5%,#000 12%);mask:radial-gradient(circle,transparent 0 11.5%,#000 12%);
background:
radial-gradient(circle,transparent 0 12%,rgba(236,244,255,.95) 12.5% 14%,rgba(206,222,244,.8) 14% 29%,rgba(160,196,236,.9) 29% 30.5%,#3f86c9 31% 33%,#1f5fb8 33% 36.5%,#43b8ee 36.5% 37.5%,rgba(190,225,250,.6) 37.5% 38.5%,transparent 39%),
radial-gradient(circle,transparent 0 97%,rgba(31,95,184,.9) 97.5% 100%),
conic-gradient(from 0deg,#eef4ff,#d4e3ff 22deg,#9fc4ff 40deg,#b7a6ff 58deg,#e7e0ff 78deg,#f8faff 98deg,#c6ecff 124deg,#43b8ee 144deg,#7fdcff 160deg,#dff6ff 178deg,#f4f7ff 198deg,#d6cbff 220deg,#9d8cf5 238deg,#7fb8ff 256deg,#7fdcff 268deg,#e6f7ff 290deg,#b3cdff 314deg,#c9baff 336deg,#eef4ff 360deg)}
.sleeve-obj--cd::after,.sleeve-obj--dvd::after,.sleeve-obj--dualdisc::after{content:"";position:absolute;inset:0;border-radius:50%;
background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.55),transparent 42%);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 0 14px rgba(20,40,90,.22)}
.rel-sleeve{filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
/* ── Tracklist: nummer in een gloeiende cirkel, ruimere rijen (keuze B) ── */
.rel-tracklist-panel .track-row{align-items:center;padding:11px 6px;gap:14px;border-bottom-color:var(--mg-line-soft);border-radius:10px}
.rel-tracklist-panel .track-row .track-title{font-size:15px;font-weight:600}
.rel-tracklist-panel .track-no{width:auto;min-width:30px;height:30px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--accent);border-radius:999px;color:var(--accent);font-size:10.5px;box-shadow:var(--mg-glow)}
.rel-tracklist-panel .track-no:empty{border-color:transparent;box-shadow:none}
.rel-tracklist-panel .track-row.clickable:hover{background:var(--mg-accent-tint)}
.rel-tracklist-panel .track-playtime{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink-mid)}
.tl-format-chips .chip-artist[disabled]{cursor:default;opacity:1}
/* ==========================================================================
Midnight Glow — Release-pagina, nieuwe opbouw (2026-09-30, keuzes van de
eigenaar): desktop C = een vaste linkerkolom met hoes, titel, artiest,
jaar · type · editie en de knoppen; rechts tracklist, Liner notes en de
Release-/Sources-kaarten. Telefoon = alleen de hoofdzaken, de rest achter
"Release details ›" (eigen scherm), geen tabbalk, topbalk terug · More.
========================================================================== */
.rel-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.rel-card-badges .tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--mg-fill);color:var(--ink-mid);border:1px solid var(--mg-fill-line)}
.rel-details-gate{display:none}
.album-detail .rel-tracklist-panel{background:none;border:0;box-shadow:none;padding:4px 2px}
.album-detail .rel-note-panel{border:1.5px solid var(--accent);box-shadow:var(--mg-glow)}
/* Desktop: B (the owner, 2026-09-30 — replaces C, the fixed left column,
which didn't work out): the hero centred over the full width — cover with
what sticks out of it, title, artist, year · type, the round buttons —
and two columns under the glow line: tracklist left; Liner notes and the
Release / Discogs / Sources cards right. */
.album-detail .rel-hero-cols{flex-direction:column;align-items:center;gap:18px;text-align:center}
.album-detail .rel-hero-body{align-items:center;justify-content:flex-start;flex:none}
.album-detail .rel-hero-tools{align-self:center;align-items:center;min-width:0}
.album-detail .rel-hero-icons{justify-content:center;flex-wrap:wrap}
.album-detail .rel-hero-body .detail-title-block{font-size:clamp(40px,4.4vw,58px)}
.album-detail .rel-hero-cover.has-sleeve{--cw:240px}
.album-detail .rel-side > .rel-note-panel{order:-1}
/* No cover: the same centred hero, just without the cover (the owner,
2026-10-01 — reverted the left-aligned text of 2026-09-30). */
.album-detail .rel-hero--plain .rel-hero-inner{padding-top:56px}
/* Telefoon: eigen scherm, alleen de hoofdzaken */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Topbalk op een detailpagina: alleen terug en More */
/* (Search, avatar, the see-through bar and the glowing Back are shared with
the sub-screens — "A sub-screen's top bar" below.) */
.content-topbar.is-detail .topbar-page-label{display:none !important}
/* A featured event's page keeps search and the avatar on the right: the
crumb is hidden but still fills the row. */
.content-topbar.is-event .topbar-page-label{visibility:hidden}
.content-topbar.is-detail{justify-content:space-between}
.content-topbar.is-detail .mg-more-btn:not(.hidden){margin-left:auto;width:auto;height:auto;flex-direction:column;gap:1px;padding:2px 6px;background:none;border:0;color:var(--accent)}
.mg-more-label{display:none}
.content-topbar.is-detail .mg-more-label{display:block;font-size:11.5px;font-weight:700;line-height:1}
body.mg-detail #view.view-bleed{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
/* Een detailpagina begint direct onder de topbalk (die is nu doorzichtig) */
body.mg-detail .content-head{position:fixed;top:0;left:0;right:0;z-index:40}
body.mg-detail .content-topbar{pointer-events:none}
body.mg-detail .content-topbar > *{pointer-events:auto}
body.mg-detail .content-topbar{padding-top:calc(8px + env(safe-area-inset-top, 0px))}
.content-topbar.is-detail .mg-more-btn:not(.hidden){box-shadow:none}
/* Tags (met Favorite) zit onder More */
body.mg-detail .rel-hero-tools .hero-pill[data-action="toggleTagManage"]{display:none}
body.mg-detail .rel-hero-inner{padding-top:64px}
.album-detail{display:block}
.album-detail .rel-hero{position:relative;top:auto;height:auto;overflow:hidden;border-right:0}
.album-detail .rel-hero::after{left:0;right:0}
.album-detail .rel-hero-inner{padding:64px 20px 26px;display:block;height:auto}
.album-detail .rel-hero-cols{align-items:center;gap:14px}
.album-detail .rel-hero-cover,.album-detail .rel-hero-cover.has-sleeve{--cw:220px;width:220px;min-height:220px;align-self:center}
.album-detail .rel-hero-body{align-items:center;text-align:center}
.album-detail .rel-hero-body .detail-title-block{font-size:44px}
.album-detail .rel-hero-feat{display:none}
.album-detail .rel-hero-tools{height:0;min-width:0;overflow:visible;margin:0}
.album-detail .rel-body{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:16px 14px 20px}
.album-detail .rel-side{display:contents}
.album-detail .rel-tracklist-panel{order:1}
.album-detail .rel-note-panel{order:2}
.album-detail .rel-details-gate{order:3}
.album-detail .rel-side > .panel:not(.rel-note-panel):not(.rel-details-gate){display:none}
.rel-details-gate{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.rel-details-gate b{display:block;font-size:14.5px}
.rel-details-gate-sub{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.rel-details-gate-arrow{font-size:24px;color:var(--accent);line-height:1}
.rel-details-screen{padding-top:52px}
.rel-details-stack{display:flex;flex-direction:column;gap:14px;margin-top:16px}
/* Tags & favorite (uit More) als sheet */
.rel-hero:has(.tag-manage-panel){z-index:260}
.fade-up:has(.tag-manage-panel){animation:none}
.rel-hero .year-filter-panel.tag-manage-panel{
position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;max-width:none !important;transform:none !important;
border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);background:var(--mg-sheet-page);
padding:18px 16px calc(28px + env(safe-area-inset-bottom, 0px));box-shadow:0 0 0 100vmax var(--overlay-bg);z-index:260;
}
}
/* Desktop: de ronde knoppen tonen geen mobiele rij (Tags & favorite) */
.hero-more-row.mobile-only{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){.hero-more-row.mobile-only{display:flex}}
/* ── Release-pagina, feedback na de eerste test (2026-09-30) ── */
/* Geen wazige hoes meer achter de hero: de pagina-gloed is de achtergrond. */
.album-detail .rel-hero-bg{display:none}
/* Formaat-pillen rechts naast "Tracklist"; bij veel formaten lopen ze door
op de volgende regel. */
.rel-tracklist-panel .rel-panel-head{flex-wrap:wrap;align-items:center;row-gap:10px}
.tl-format-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-left:auto;margin-bottom:0 !important}
/* Tags onder jaar · type · editie */
.rel-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.album-detail .rel-hero-tags{justify-content:center}
/* ★ en slotje op het midden van de hoofdletters (de titel is nu smal en
uppercase; de oude lift was afgestemd op Space Grotesk). */
.rel-hero-body .detail-title-adorn{top:0}
.content-topbar.is-detail .mg-more-btn svg circle{r:1.9px}
/* ── Telefoon: Filters als sheet ── */
.cf-sheet-head{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.fade-up:has(.cf-panel){animation:none}
.year-filter-panel.cf-panel{
position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;max-width:none !important;min-width:0 !important;transform:none !important;
max-height:calc(var(--vh) * 82);overflow-y:auto;z-index:260;
border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);background:var(--mg-sheet-page);
padding:10px 16px calc(24px + env(safe-area-inset-bottom, 0px));box-shadow:0 0 0 100vmax var(--overlay-bg);
}
.cf-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-10px;z-index:1;
background:var(--mg-sheet-top);padding:14px 4px 10px;margin:0 0 4px;border-bottom:1px solid var(--mg-line-soft)}
.cf-sheet-head::before{content:"";position:absolute;top:2px;left:50%;margin-left:-24px}
.cf-sheet-title{font-stretch:125%;font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.cf-sheet-done{font:inherit;font-size:14px;font-weight:700;padding:8px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--mg-btn-bg);color:var(--mg-btn-ink)}
.year-filter-panel.cf-panel .cf-row,.year-filter-panel.cf-panel .cf-group-label{min-height:44px;font-size:15px}
.year-filter-panel.cf-panel .cf-scroll{max-height:none}
.shows-page:has(#gl-map-slot) .filterbar:has(.cf-panel){z-index:270}
}
/* ==========================================================================
Midnight Glow — tweede telefoontest (2026-09-30)
========================================================================== */
/* Een hoes zonder afbeelding dekt het object erachter af. */
.rel-hero-cover.has-sleeve .image-slot:not(.has-image){background:var(--mg-card-solid);border:1.5px dashed var(--mg-hero-line)}
/* Discogs en History als eigen kaart */
.rel-history-sum{font-size:13.5px;color:var(--ink-mid);margin:10px 0 6px}
.rel-discogs .meta-value{margin-top:10px}
/* List: compacte rij-regel "2019 · CD" (alleen telefoon) */
.list-meta{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* History staat op een telefoon als kaart in Release details */
.hero-more-row.desktop-only{display:none}
/* Hoofdpagina's: naam in de topbalk (geen logo), geen grote titel eronder,
topbalk in de kleur van de pagina. De vervaging zit op een ::before,
niet op de balk zelf — anders wordt de balk het kader van de zwevende +
(een backdrop-filter maakt een element het containing block van
position:fixed-kinderen). */
.content-topbar{-webkit-backdrop-filter:none;backdrop-filter:none;position:relative}
body.mg-main .content-topbar{background:transparent;border-bottom-color:transparent}
body.mg-main .content-topbar::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.mg-main .mg-top-logo{display:none}
body.mg-main .content-topbar .topbar-page-label{opacity:1;font-size:20px}
body.mg-main .page-head .page-title{display:none}
body.mg-main .page-head{margin-bottom:10px}
/* + zweeft rechtsonder, boven de tabbalk */
body.mg-main .content-topbar .btn-add{
position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom, 0px));z-index:58;
width:58px;height:58px;border-radius:50%;box-shadow:var(--mg-btn-shadow),0 10px 24px rgba(0,0,0,.35);
}
body.mg-main .content-topbar .btn-add::before{font-size:28px}
/* Het +-menu als sheet van onderen */
.add-menu{
position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;max-width:none !important;border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);
background:var(--mg-sheet-page);padding:18px 14px calc(24px + env(safe-area-inset-bottom, 0px));box-shadow:0 0 0 100vmax var(--overlay-bg);
}
.add-menu::before{content:"";display:block;margin:-8px auto 10px}
/* View / Sort / Tags & favorite als sheet, net als Filters */
.fade-up:has(.fb-menu){animation:none}
.year-filter-panel.fb-menu,
.year-filter-panel.tag-manage-panel{
position:fixed !important;left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;
width:auto !important;max-width:none !important;min-width:0 !important;transform:none !important;
max-height:calc(var(--vh) * 82);overflow-y:auto;z-index:260;
border-radius:26px 26px 0 0;border:0;border-top:1px solid var(--mg-menu-line);background:var(--mg-sheet-page);
padding:10px 16px calc(24px + env(safe-area-inset-bottom, 0px));box-shadow:0 0 0 100vmax var(--overlay-bg);
}
.cf-panel .cf-sheet-head,.fb-menu .cf-sheet-head,.tag-manage-panel .cf-sheet-head{display:flex}
.year-filter-panel.fb-menu .hero-more-row{min-height:48px;font-size:15.5px}
.year-filter-panel.tag-manage-panel .cf-row{min-height:46px;font-size:15px}
.shows-page:has(#gl-map-slot) .filterbar:has(.fb-menu){z-index:270}
/* List: compacte rij (keuze B) */
.list-row{gap:12px;padding:10px 4px}
.list-row .list-cover{width:52px;height:52px}
.list-row .format-badges,.list-row .list-year{display:none}
.list-meta{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mg-label);margin-top:2px}
.list-row .list-info{flex:1;min-width:0}
.list-row .list-title,.list-row .list-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .wantlist-bought-btn-list{padding:5px 10px;font-size:11.5px}
}
/* ── Derde telefoontest (2026-09-30) ── */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Minder ruimte tussen de naam in de topbalk en "234 releases" */
body.mg-main .main{padding-top:6px}
body.mg-main .page-head{margin-bottom:8px}
/* Detailpagina: dezelfde wazige achtergrond achter terug en More als op
een overzicht, zodat ze altijd leesbaar blijven boven de inhoud. */
body.mg-detail .content-topbar::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Edit: terug zit in de topbalk (die doet Cancel) */
.back-link[data-action="cancelAlbumEdit"],.back-link[data-action="cancelConcertEdit"]{display:none}
/* Sheets: geen overgang bij het slepen, wel bij loslaten (events.js) */
.user-menu-panel,.hero-more-panel,.cf-panel,.fb-menu,.tag-manage-panel,.add-menu{touch-action:pan-y}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Zolang een sheet open is: geen "omlaag trekken = herladen" van de
browser (Android Chrome), zodat omlaag vegen de sheet sluit. */
html:has(.user-menu.open), html:has(.hero-more-panel), html:has(.cf-panel), html:has(.fb-menu),
html:has(.tag-manage-panel), html:has(.add-menu){overscroll-behavior-y:none}
.user-menu-panel,.hero-more-panel,.cf-panel,.fb-menu,.tag-manage-panel,.add-menu{overscroll-behavior-y:contain}
/* Het streepje iets groter, zodat het een duidelijk tikdoel is */
.user-menu-sheet-grip{cursor:pointer}
}
/* Versie onderaan het gebruikersmenu — alleen in de telefoon-sheet */
.user-menu-version{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.user-menu-version:not(.hidden){display:block;width:100%;margin-top:6px;padding:12px 0 0;border:0;border-top:1px solid var(--mg-line-soft);background:none;
text-align:center;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-faint);cursor:pointer}
.user-menu-version:disabled{cursor:default;opacity:1}
}
/* ── Release-pagina, dichter bij het voorbeeld (2026-09-30) ── */
/* Titel, artiest en jaar · type compacter op elkaar; de jaarregel groter en
in gewone letters in plaats van kleine mono-kapitalen. */
.album-detail .rel-hero-body .detail-title-block{line-height:.92}
.album-detail .rel-hero-body .artist-link{margin-top:6px}
.album-detail .rel-hero-meta{margin-top:6px;font-family:'Archivo',sans-serif;font-size:15px;letter-spacing:.01em;text-transform:none;color:var(--mg-hero-soft)}
.album-detail .rel-hero-tags{margin-top:10px}
/* Speelduur zo groot als de titel ernaast */
.rel-tracklist-panel .track-playtime{font-family:'Archivo',sans-serif;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ink-mid)}
.rel-tracklist-panel .total-playtime .mono{font-size:14.5px}
/* Liner notes: de kop boven, buiten het oplichtende kader */
.album-detail .rel-note-panel{background:none;border:0;box-shadow:none;padding:0}
.album-detail .rel-note-panel .section-head{margin-bottom:8px}
.album-detail .rel-note-panel .my-note-text,
.album-detail .rel-note-panel .panel-add-link{
display:block;width:100%;box-sizing:border-box;margin:0;text-align:left;
border:1.5px solid var(--accent);border-radius:14px;padding:12px 14px;box-shadow:var(--mg-glow);background:var(--mg-card-hi)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.album-detail .rel-hero-inner{padding-bottom:18px}
.album-detail .rel-hero-cols{gap:12px}
.album-detail .rel-body{padding-top:10px}
}
.rel-history-body{margin-top:10px;border-top:1px solid var(--mg-line-soft);padding-top:8px}
.rel-history-body .settings-group-title{margin-top:4px}
/* ── Tags & favorite: grote Favorite-knop, tags als pillen (keuze B) ── */
.tm-fav{display:block;width:100%;box-sizing:border-box;margin:4px 0 12px;padding:10px 12px;border-radius:12px;cursor:pointer;
font:inherit;font-size:14px;font-weight:700;text-align:center;background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink-mid)}
.tm-fav.active{background:color-mix(in srgb, var(--mg-fav) 16%, transparent);border-color:color-mix(in srgb, var(--mg-fav) 50%, transparent);color:var(--mg-fav)}
.tm-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label);margin:0 2px 8px}
.tm-chips{display:flex;flex-wrap:wrap;gap:6px}
.tm-chip{font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;
background:transparent;border:1px solid var(--mg-fill-line);color:var(--ink-mid)}
.tm-chip.on{background:var(--mg-tag-tint);border-color:transparent;color:var(--mg-tag)}
.tm-chip:hover{border-color:var(--mg-accent-line)}
.tm-fav:focus-visible,.tm-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.tm-chip{font-size:14px;padding:9px 14px}
.tm-fav{font-size:15px;padding:12px}
}
/* History-kaart (uitgeklapt): "Added" en "Edits" als dezelfde gewone
subkop — niet de brede kapitalen van "HISTORY" erboven. */
.rel-history-body .hist-label{font-family:'Archivo',sans-serif;font-stretch:100%;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin:12px 0 4px;display:flex;align-items:center;gap:8px}
.rel-history-body .hist-label:first-child{margin-top:4px}
.rel-history-body .hist-count{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink-mid)}
.rel-history-body .hist-edits > div:last-child{border-bottom:0 !important}
/* Added en Edits gelijk: naam vet, datum in gewone letters */
.rel-history-body .hist-line{font-size:13px;color:var(--ink)}
.rel-history-body .hist-line strong{font-weight:700}
/* ==========================================================================
Midnight Glow — Show-pagina, nieuwe opbouw (2026-09-30, keuzes van de
eigenaar: https://claude.ai/artifact/NfFc3EMSDkTr4XR3yac4Uy). Met foto:
de foto vult de hero, de tekst erop. Zonder foto: alleen tekst. Boven de
titel de datum als koperen regel, eronder tour, plaats, tags en met wie.
Festivaldagen als pillen onder de gloedlijn. Setlist zonder kaart met
koperen cirkels, My memory als rij kleine foto's, Liner notes in een
koperen kader. Telefoon: Show-kaart en Sources achter "Show details ›".
Desktop: B — de hero over de hele breedte, twee kolommen eronder.
========================================================================== */
:root{--mg-hero-bleed:linear-gradient(180deg,rgba(243,246,251,0) 0%,rgba(243,246,251,.55) 50%,rgba(243,246,251,.97) 100%)}
:root[data-theme="dark"]{--mg-hero-bleed:linear-gradient(180deg,rgba(5,14,29,.1) 0%,rgba(5,14,29,.55) 45%,rgba(5,14,29,.97) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-hero-bleed:linear-gradient(180deg,rgba(5,14,29,.1) 0%,rgba(5,14,29,.55) 45%,rgba(5,14,29,.97) 100%)}}
/* Hero */
.sd-hero--photo{min-height:400px;display:flex;flex-direction:column}
.sd-hero--photo .rel-hero-inner{flex:1;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end}
.sd-hero.sd-hero--photo .rel-hero-bg::before{inset:0;filter:none;opacity:1;transform:none}
.sd-hero.sd-hero--photo .rel-hero-bg::after{background:var(--mg-hero-bleed)}
.sd-hero--plain .rel-hero-bg{display:none}
.sd-hero--plain .rel-hero-inner{padding-top:56px}
.show-detail .rel-hero-body{justify-content:flex-end}
.show-detail .rel-hero-body .detail-title-block{line-height:.92;font-size:clamp(40px,4.4vw,58px)}
.sd-dateline{font-stretch:75%;font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-live-ink);margin-bottom:6px}
.sd-dateline.is-approx{color:var(--mg-hero-soft)}
.sd-title-link{cursor:pointer;border-radius:6px}
.sd-title-link:hover .detail-title{color:var(--accent)}
.sd-title-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sd-tour{font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:var(--accent);margin-top:8px}
.show-detail .sd-place{margin-top:6px}
.show-detail .rel-hero-tags{margin-top:12px}
.sd-with{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:0;background:none;border:0;cursor:pointer;
font:inherit;font-size:13.5px;color:var(--mg-hero-soft);text-align:left;align-self:flex-start}
.sd-with:hover{color:var(--mg-hero-ink)}
.sd-with:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sd-with-stack{display:flex;flex:none}
.sd-with-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11.5px;border:2px solid var(--bg);margin-left:-8px}
.sd-with-av:first-child{margin-left:0}
.sd-with-pending{color:var(--mg-hero-faint)}
/* Festivaldagen: pillen onder de gloedlijn */
.show-detail > .sd-days{max-width:1180px;margin:0 auto;padding:18px 28px 0;box-sizing:border-box;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}
.show-detail > .sd-days::-webkit-scrollbar{display:none}
.show-detail > .sd-days .sd-day{flex:none;display:inline-flex;align-items:baseline;gap:7px;border-radius:999px;padding:7px 14px;min-height:0;background:var(--mg-fill);border:1px solid var(--mg-fill-line);color:var(--ink-mid)}
.show-detail > .sd-days .sd-day.is-active{background:var(--mg-live-tint);border-color:var(--mg-live-line);color:var(--mg-live-soft);box-shadow:var(--mg-live-glow)}
.show-detail > .sd-days .sd-day[disabled]:not(.is-active){opacity:.6}
/* Setlist: geen kaart, koperen cirkels, ruimere rijen, één kolom */
.show-detail .sd-panel--setlist{background:none;border:0;box-shadow:none;padding:4px 2px}
.show-detail .sd-setlist-cols{columns:auto;column-count:1}
.show-detail .sd-panel--setlist .setlist-row{align-items:center;padding:11px 6px;gap:14px;border-bottom:1px solid var(--mg-line-soft);border-radius:10px}
.show-detail .sd-panel--setlist .setlist-row > div:nth-child(2){font-size:15px !important}
.show-detail .sd-panel--setlist .track-no{width:auto;min-width:30px;height:30px;padding:0 6px;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;justify-content:center;
border:1.5px solid var(--mg-live);border-radius:999px;color:var(--mg-live-ink);font-size:10.5px;box-shadow:var(--mg-live-glow)}
.show-detail .sd-panel--setlist .track-no:empty{border-color:transparent;box-shadow:none}
.show-detail .sd-panel--setlist .setlist-row.clickable:hover{background:var(--mg-live-tint)}
/* My memory: kleine foto's, "+" erachter; zonder foto's één regel */
/* Doorlopend op een volgende regel, zodat de "+" altijd in beeld is. */
.show-detail .sd-panel--memory .memory-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible}
.show-detail .sd-panel--memory .photo-tile{width:auto;min-width:0}
.show-detail .sd-panel--memory .photo-tile .image-slot:not(.has-image){border:1.5px dashed var(--mg-accent-line);background:none}
.show-detail .sd-panel--memory .photo-tile .image-slot:not(.has-image) .slot-label{font-family:'Archivo',sans-serif;font-size:26px;color:var(--accent)}
.show-detail .sd-panel--memory .is-empty .memory-strip{display:block}
.show-detail .sd-panel--memory .is-empty .photo-tile{width:auto}
.show-detail .sd-panel--memory .is-empty .detail-photo{aspect-ratio:auto;height:auto;overflow:visible}
.show-detail .sd-panel--memory .is-empty .image-slot:not(.has-image){border:0;background:none;width:auto;height:auto;min-height:0;display:inline-block;cursor:pointer}
.show-detail .sd-panel--memory .is-empty .image-slot:not(.has-image) .slot-label{font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;color:var(--accent);padding:2px 0;text-align:left}
/* Liner notes: kop erboven, koperen kader (een show is live) */
.show-detail .sd-panel--note{background:none;border:0;box-shadow:none;padding:0}
.show-detail .sd-panel--note .section-head{margin-bottom:8px}
.show-detail .sd-panel--note .my-note-text,
.show-detail .sd-panel--note .panel-add-link{display:block;width:100%;box-sizing:border-box;margin:0;text-align:left;
border:1.5px solid var(--mg-live);border-radius:14px;padding:12px 14px;box-shadow:var(--mg-live-glow);background:var(--mg-card-hi)}
/* Show-kaart */
.sd-show-grid{margin-top:16px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.sd-hero--photo{min-height:360px}
.show-detail .rel-hero-inner{padding:64px 20px 20px}
.show-detail .rel-hero-body .detail-title-block{font-size:44px}
.show-detail > .sd-days{padding:14px 14px 0}
.show-detail .rel-body{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:16px 14px 20px}
.show-detail .sd-main,.show-detail .rel-side{display:contents}
.show-detail .sd-panel--companion{order:0}
.show-detail .sd-panel--lineup{order:1}
.show-detail .sd-panel--setlist{order:2}
.show-detail .sd-panel--memory{order:4}
.show-detail .sd-panel--note{order:3}
.show-detail .rel-details-gate{order:5}
.show-detail .sd-panel--setlistfm,.show-detail .sd-panel--links{display:none}
}
/* Release zonder hoes op een telefoon: alleen tekst, links */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Liner notes first on the right is desktop only — a phone keeps it
under the tracklist. */
.album-detail .rel-side > .rel-note-panel{order:2}
}
/* ==========================================================================
Midnight Glow — gloed, kleur en letters (2026-10-01, keuzes van de
eigenaar naar zijn voorbeeld: https://claude.ai/artifact/K2STZAf75wGMxEiknHDcj2).
Hele app: helderder koningsblauw als achtergrond (tokens bovenaan), hero-
titels op normale breedte en scherp, sectiekoppen groter op normale
breedte. Release/Show: rechte hoes met diepe schaduw achter hoes en
plaat, een lichtvlek erachter, de titel iets over de onderkant van de
hoes (diepte), artiest wit in gewone kapitalen, gloeiende nummercirkels,
de gloedlijn onderaan onder de tagline en de lijst dichter op de hero.
Licht: geen gloed, wel schaduw.
========================================================================== */
:root{
--mg-ring-glow:0 2px 6px rgba(10,127,184,.22); --mg-ring-fill:rgba(10,127,184,.07);
--mg-live-ring-glow:0 2px 6px rgba(201,106,43,.22); --mg-live-ring-fill:rgba(201,106,43,.07);
--mg-cover-deep:none;
--mg-disc-shadow:drop-shadow(0 16px 26px rgba(20,40,80,.3));
--mg-cover-spot:radial-gradient(closest-side,rgba(40,140,230,.22),rgba(40,140,230,0));
--mg-cover-fade:linear-gradient(180deg,rgba(255,255,255,0) 75%,rgba(255,255,255,.14) 100%);
--mg-title-shadow:none;
}
:root[data-theme="dark"]{
--mg-ring-glow:0 0 12px 1px rgba(127,220,255,.85),inset 0 0 9px rgba(127,220,255,.4); --mg-ring-fill:rgba(127,220,255,.12);
--mg-live-ring-glow:0 0 12px 1px rgba(240,161,94,.8),inset 0 0 9px rgba(240,161,94,.35); --mg-live-ring-fill:rgba(240,161,94,.12);
--mg-cover-deep:none;
--mg-disc-shadow:drop-shadow(0 18px 26px rgba(0,0,0,.6));
--mg-cover-spot:radial-gradient(closest-side at 46% 50%,rgba(120,195,255,.24),rgba(60,130,240,.12) 55%,rgba(60,130,240,0));
--mg-cover-fade:linear-gradient(180deg,rgba(150,200,255,0) 72%,rgba(150,200,255,.16) 100%);
--mg-title-shadow:0 2px 14px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--mg-ring-glow:0 0 12px 1px rgba(127,220,255,.85),inset 0 0 9px rgba(127,220,255,.4); --mg-ring-fill:rgba(127,220,255,.12);
--mg-live-ring-glow:0 0 12px 1px rgba(240,161,94,.8),inset 0 0 9px rgba(240,161,94,.35); --mg-live-ring-fill:rgba(240,161,94,.12);
--mg-cover-deep:none;
--mg-disc-shadow:drop-shadow(0 18px 26px rgba(0,0,0,.6));
--mg-cover-spot:radial-gradient(closest-side at 46% 50%,rgba(120,195,255,.24),rgba(60,130,240,.12) 55%,rgba(60,130,240,0));
--mg-cover-fade:linear-gradient(180deg,rgba(150,200,255,0) 72%,rgba(150,200,255,.16) 100%);
--mg-title-shadow:0 2px 14px rgba(0,0,0,.45);
}}
/* Hero-titels (alle detailpagina's): Archivo normale breedte, scherp */
.rel-hero-body .detail-title-block .detail-title{font-stretch:100%;text-shadow:var(--mg-title-shadow)}
.rel-hero-body .detail-title-block,
.album-detail .rel-hero-body .detail-title-block,
.show-detail .rel-hero-body .detail-title-block{font-size:clamp(32px,3.4vw,46px);line-height:1.02}
/* Sectiekoppen (hele app): groter, normale breedte */
.panel-head h2,.section-title,.dash .dash-title-lg,.dash-crate-title,.settings-group-title,
.srow-head,.conn-find-h,.add-page .panel > .choose-heading,.tour-tooltip-title,.ip-title,
.rel-tracklist-panel .panel-head h2,.rel-side-label,.rel-note-panel .section-title,.sd-panel .section-title{
font-stretch:100%;font-weight:800;letter-spacing:.01em}
.panel-head h2,.rel-tracklist-panel .panel-head h2{font-size:16px !important}
.section-title,.dash .dash-title-lg,.dash-crate-title,.settings-group-title,.srow-head,
.rel-side-label,.rel-note-panel .section-title,.sd-panel .section-title{font-size:16px}
/* Release: artiest wit, gewone kapitalen */
.album-detail .rel-hero-body .artist-link{color:var(--mg-hero-ink);font-stretch:100%;font-weight:500;letter-spacing:.02em;font-size:16px}
.album-detail .rel-hero-body .artist-link:hover{color:var(--accent)}
/* Hoes: recht, diepe schaduw achter hoes en plaat, lichtvlek erachter,
onderkant iets donkerder zodat de titel ervoor lijkt te staan */
.rel-hero-cover .image-slot{border-radius:0;box-shadow:var(--mg-cover-deep)}
.rel-hero-cover .image-slot img{border-radius:0}
.rel-sleeve{filter:var(--mg-disc-shadow)}
.album-detail .rel-hero-cover::before{content:"";position:absolute;left:50%;top:50%;width:175%;height:125%;transform:translate(-50%,-50%);
background:var(--mg-cover-spot);z-index:-1;pointer-events:none}
.album-detail .rel-hero-cover.has-sleeve::before{left:66%}
.album-detail .rel-hero-cover .image-slot.has-image::after{content:"";position:absolute;inset:0;background:var(--mg-cover-fade);pointer-events:none}
.album-detail .rel-hero-body{position:relative;z-index:2}
/* Nummercirkels: dikkere ring, sterke gloed, lichte vulling */
.rel-tracklist-panel .track-no{border-width:2px;box-shadow:var(--mg-ring-glow);background:var(--mg-ring-fill)}
.show-detail .sd-panel--setlist .track-no{border-width:2px;box-shadow:var(--mg-live-ring-glow);background:var(--mg-live-ring-fill)}
.rel-tracklist-panel .track-no:empty,.show-detail .sd-panel--setlist .track-no:empty{box-shadow:none;background:none}
/* Gloedlijn onderaan, onder de tagline (Release, Show) — niet meer tussen
hero en lijst, zodat de lijst doorloopt uit de hero */
.album-detail .rel-hero::after,.show-detail .rel-hero::after{display:none}
/* De lijst dichter op de hero */
.album-detail .rel-body,.show-detail .rel-body{padding-top:8px}
.show-detail > .sd-days{padding-top:4px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.rel-hero-body .detail-title-block,
.album-detail .rel-hero-body .detail-title-block,
.show-detail .rel-hero-body .detail-title-block{font-size:32px}
.album-detail .rel-hero-inner{padding-bottom:8px}
.show-detail .rel-hero-inner{padding-bottom:10px}
.album-detail .rel-body,.show-detail .rel-body{padding-top:0}
}
.album-detail .rel-hero--plain .rel-hero-body{margin-top:0}
/* ── Release-pagina, geijkt op het voorbeeld van de eigenaar (2026-10-01,
telefoon 390 px naast het voorbeeld gemeten): grotere hoes (~68% van de
breedte), kleine ruimte tot de titel, kleinere jaarregel, compacte
tracklist zonder lijnen met kleinere cirkels en gewone (niet vette)
titels, Liner notes dicht eronder in een sterk oplichtend kader. ── */
.album-detail .rel-tracklist-panel .track-row{padding:5px 2px;gap:14px;border-bottom:0}
.album-detail .rel-tracklist-panel .track-row .track-title{font-weight:500;font-size:17px}
.album-detail .rel-tracklist-panel .track-playtime{font-size:17px}
.album-detail .rel-tracklist-panel .track-no{min-width:30px;height:30px;font-size:11.5px}
.album-detail .rel-tracklist-panel .total-playtime{margin-top:6px}
.album-detail .rel-tracklist-panel .panel-head h2,.album-detail .rel-note-panel .section-title{font-size:19px !important;font-weight:700}
.album-detail .rel-hero-body .artist-link{font-size:18px}
.album-detail .rel-hero-meta{font-size:15px}
.album-detail .rel-note-panel .my-note-text{font-size:15px}
.album-detail .rel-note-panel .my-note-text,
.album-detail .rel-note-panel .panel-add-link{border-width:2px;box-shadow:var(--mg-note-glow)}
:root{--mg-note-glow:0 4px 14px rgba(10,127,184,.14)}
:root[data-theme="dark"]{--mg-note-glow:0 0 16px rgba(127,220,255,.45),inset 0 0 16px rgba(127,220,255,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-note-glow:0 0 16px rgba(127,220,255,.45),inset 0 0 16px rgba(127,220,255,.14)}}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.album-detail .rel-hero-inner{padding:58px 16px 0}
.album-detail .rel-hero-cols{gap:0}
.album-detail .rel-hero-cover{margin-bottom:24px}
.album-detail .rel-hero-cover,.album-detail .rel-hero-cover.has-sleeve{--cw:248px;width:248px;min-height:248px}
.album-detail .rel-hero-body .artist-link{margin-top:4px}
.album-detail .rel-hero-meta{margin-top:2px}
.album-detail .rel-body{gap:16px;padding:6px 16px 12px}
.album-detail .rel-tracklist-panel .panel-head{margin-bottom:4px}
.album-detail .rel-tracklist-panel .total-playtime{margin:2px 0 0;padding-top:4px}
.album-detail .rel-body{padding-top:12px}
.album-detail .rel-note-panel .section-head{margin:0 0 8px}
.album-detail .rel-tracklist-panel{margin-bottom:0}
.album-detail .rel-details-gate{padding:12px 16px}
}
/* Diepte onder de hoes (de eigenaar, 2026-10-01, met zijn voorbeeld): zachte
schaduw links- en rechtsonder naast de hoes en een lichtere plas vlak voor
de onderkant, zodat de hoes iets naar achter staat ten opzichte van de
titel. Alleen met een echte hoes. */
:root{--mg-cover-floor:radial-gradient(ellipse 15% 26% at 10% 42%,rgba(20,40,80,.28),rgba(20,40,80,0)),radial-gradient(ellipse 15% 26% at 90% 42%,rgba(20,40,80,.28),rgba(20,40,80,0)),radial-gradient(ellipse 36% 26% at 50% 54%,rgba(255,255,255,.85),rgba(255,255,255,0))}
:root[data-theme="dark"]{--mg-cover-floor:radial-gradient(ellipse 15% 26% at 10% 42%,rgba(0,4,14,.75),rgba(0,4,14,0)),radial-gradient(ellipse 15% 26% at 90% 42%,rgba(0,4,14,.75),rgba(0,4,14,0)),radial-gradient(ellipse 40% 24% at 50% 50%,rgba(170,215,255,.55),rgba(170,215,255,0))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-cover-floor:radial-gradient(ellipse 15% 26% at 10% 42%,rgba(0,4,14,.75),rgba(0,4,14,0)),radial-gradient(ellipse 15% 26% at 90% 42%,rgba(0,4,14,.75),rgba(0,4,14,0)),radial-gradient(ellipse 40% 24% at 50% 50%,rgba(170,215,255,.55),rgba(170,215,255,0))}}
.album-detail .rel-hero-cover:has(.image-slot.has-image)::after{content:"";position:absolute;left:-16%;width:132%;top:calc(var(--cw, 216px) - 45px);height:100px;
background:var(--mg-cover-floor);filter:blur(10px);pointer-events:none;z-index:0}
/* ── Release-pagina, verfijnd naar de tekening van de eigenaar (2026-10-01) ──
Licht: een halo strak om hoes en plaat (boven, links, rechts) en een
smalle lichtrand vlak onder de hoes. Schaduw: dunne wiggen die vanaf de
onderhoeken schuin naar achter lopen, niet om de hoek heen. */
:root{--mg-cover-halo:rgba(40,140,230,.16);
--mg-cover-floor:radial-gradient(ellipse 7% 9% at 11% 40%,rgba(20,40,80,.35),rgba(20,40,80,0)),radial-gradient(ellipse 7% 9% at 89% 40%,rgba(20,40,80,.35),rgba(20,40,80,0)),radial-gradient(ellipse 30% 13% at 50% 60%,rgba(255,255,255,.9),rgba(255,255,255,0));
--mg-dot-glow:none}
:root[data-theme="dark"]{--mg-cover-halo:rgba(100,175,255,.55);
--mg-cover-floor:radial-gradient(ellipse 7% 9% at 11% 40%,rgba(0,4,14,.9),rgba(0,4,14,0)),radial-gradient(ellipse 7% 9% at 89% 40%,rgba(0,4,14,.9),rgba(0,4,14,0)),radial-gradient(ellipse 30% 13% at 50% 60%,rgba(170,215,255,.55),rgba(170,215,255,0));
--mg-dot-glow:drop-shadow(0 0 3px rgba(127,220,255,.95)) drop-shadow(0 0 7px rgba(127,220,255,.6))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-cover-halo:rgba(100,175,255,.55);
--mg-cover-floor:radial-gradient(ellipse 7% 9% at 11% 40%,rgba(0,4,14,.9),rgba(0,4,14,0)),radial-gradient(ellipse 7% 9% at 89% 40%,rgba(0,4,14,.9),rgba(0,4,14,0)),radial-gradient(ellipse 30% 13% at 50% 60%,rgba(170,215,255,.55),rgba(170,215,255,0));
--mg-dot-glow:drop-shadow(0 0 3px rgba(127,220,255,.95)) drop-shadow(0 0 7px rgba(127,220,255,.6))}}
.album-detail .rel-hero-cover::before,
.album-detail .rel-hero-cover.has-sleeve::before{left:-9%;top:-9%;width:118%;height:118%;transform:none;border-radius:28px;
background:var(--mg-cover-halo);filter:blur(22px)}
.album-detail .rel-hero-cover.has-sleeve::before{width:135%}
.album-detail .rel-hero-cover:has(.image-slot.has-image)::after{left:-22%;width:144%;top:calc(var(--cw, 216px) - 40px);height:80px;filter:blur(5px)}
/* Speelduur per track wit; het totaal als optelsom: streep erboven, geen
label (alleen voor schermlezers). */
.mg-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.album-detail .rel-tracklist-panel .track-playtime{color:var(--ink)}
.album-detail .rel-tracklist-panel .total-playtime{display:flex;justify-content:flex-end;padding-right:2px}
.album-detail .rel-tracklist-panel .total-playtime .mono{margin:0;padding:7px 0 0 18px;border-top:1.5px solid var(--ink-soft);
font-family:'Archivo',sans-serif;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
/* Topbalk op een detailpagina: pijl met steel in een gloeiende ring,
gloeiende puntjes boven een witte "More" (zoals het voorbeeld). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.content-topbar.is-detail .mg-top-back svg{width:20px;height:20px;stroke-width:2.2}
.content-topbar.is-detail .mg-more-btn svg{filter:var(--mg-dot-glow)}
.content-topbar.is-detail .mg-more-label{color:var(--ink)}
}
/* ── Licht en schaduw rond de hoes, opnieuw (de eigenaar, 2026-10-01: de
halo was te veel, de schaduw waren ovalen). Gemeten in zijn voorbeeld:
het licht is maar een paar procent sterker, boven het midden en links,
rechts vrijwel niets — dus weer de zachte lichtvlek van eerder, iets
naar linksboven. De schaduw is nu een getekende wig (SVG): hij begint in
de onderhoek en loopt naar buiten en iets naar achter, van donker naar
niets; eronder een smalle lichtband. ── */
:root{--mg-cover-floor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20144%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%204%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22l%22%20x1%3D%2222.5%22%20y1%3D%220%22%20x2%3D%224%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23142850%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23142850%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%22121.5%22%20y1%3D%220%22%20x2%3D%22140%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23142850%22%20stop-opacity%3D%22.35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23142850%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%2230%22%20x2%3D%220%22%20y2%3D%2290%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22144%22%20height%3D%2290%22%20fill%3D%22url%28%23v%29%22%2F%3E%3C%2Fmask%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2272%22%20cy%3D%2294%22%20r%3D%2258%22%20gradientTransform%3D%22translate%2872%2094%29%20scale%281%20.34%29%20translate%28-72%20-94%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%22.6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2212%22%20y%3D%2288%22%20width%3D%22120%22%20height%3D%2234%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20filter%3D%22url%28%23b%29%22%20mask%3D%22url%28%23m%29%22%3E%3Cpath%20d%3D%22M22.5%2090%20L22.5%2030%20L8%2030%20L3%2052%20Z%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cpath%20d%3D%22M121.5%2090%20L121.5%2030%20L136%2030%20L141%2052%20Z%22%20fill%3D%22url%28%23r%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
:root[data-theme="dark"]{--mg-cover-floor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20144%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%204%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22l%22%20x1%3D%2222.5%22%20y1%3D%220%22%20x2%3D%224%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%22121.5%22%20y1%3D%220%22%20x2%3D%22140%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%2230%22%20x2%3D%220%22%20y2%3D%2290%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22144%22%20height%3D%2290%22%20fill%3D%22url%28%23v%29%22%2F%3E%3C%2Fmask%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2272%22%20cy%3D%2294%22%20r%3D%2258%22%20gradientTransform%3D%22translate%2872%2094%29%20scale%281%20.34%29%20translate%28-72%20-94%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23aad7ff%22%20stop-opacity%3D%22.2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aad7ff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2212%22%20y%3D%2288%22%20width%3D%22120%22%20height%3D%2234%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20filter%3D%22url%28%23b%29%22%20mask%3D%22url%28%23m%29%22%3E%3Cpath%20d%3D%22M22.5%2090%20L22.5%2030%20L8%2030%20L3%2052%20Z%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cpath%20d%3D%22M121.5%2090%20L121.5%2030%20L136%2030%20L141%2052%20Z%22%20fill%3D%22url%28%23r%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-cover-floor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20144%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-30%25%22%20y%3D%22-30%25%22%20width%3D%22160%25%22%20height%3D%22160%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222%204%22%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%22l%22%20x1%3D%2222.5%22%20y1%3D%220%22%20x2%3D%224%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22r%22%20x1%3D%22121.5%22%20y1%3D%220%22%20x2%3D%22140%22%20y2%3D%220%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%22.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2300040e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22v%22%20x1%3D%220%22%20y1%3D%2230%22%20x2%3D%220%22%20y2%3D%2290%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%221%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%22144%22%20height%3D%2290%22%20fill%3D%22url%28%23v%29%22%2F%3E%3C%2Fmask%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2272%22%20cy%3D%2294%22%20r%3D%2258%22%20gradientTransform%3D%22translate%2872%2094%29%20scale%281%20.34%29%20translate%28-72%20-94%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23aad7ff%22%20stop-opacity%3D%22.2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23aad7ff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%2212%22%20y%3D%2288%22%20width%3D%22120%22%20height%3D%2234%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20filter%3D%22url%28%23b%29%22%20mask%3D%22url%28%23m%29%22%3E%3Cpath%20d%3D%22M22.5%2090%20L22.5%2030%20L8%2030%20L3%2052%20Z%22%20fill%3D%22url%28%23l%29%22%2F%3E%3Cpath%20d%3D%22M121.5%2090%20L121.5%2030%20L136%2030%20L141%2052%20Z%22%20fill%3D%22url%28%23r%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}}
.album-detail .rel-hero-cover::before,
.album-detail .rel-hero-cover.has-sleeve::before{left:46%;top:44%;width:190%;height:170%;transform:translate(-50%,-50%);border-radius:0;
background:var(--mg-cover-spot);filter:none}
/* Schaduw naast de onderkant van hoes en plaat, omhoog naar achter ("\" links,
"/" rechts, gemeten in het oorspronkelijke voorbeeld), achter de hoes en
de plaat; lichtband eronder. */
.album-detail .rel-hero-cover:has(.image-slot.has-image)::after{background:var(--mg-cover-floor) center/100% 100% no-repeat;filter:none;
top:calc(var(--cw, 216px) - 90px);height:130px;z-index:-1}
/* Detail-topbalk: de vervaging achter terug en More loopt geleidelijk uit
in plaats van met een rechte onderrand te stoppen — die rand stond als
een lijn boven de hoes (de eigenaar, 2026-10-01). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body.mg-detail .content-topbar::before{bottom:-18px;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
/* …and only once the page scrolls: at rest it smeared the cover's top edge. */
body.mg-detail:not(.mg-scrolled) .content-topbar::before{-webkit-backdrop-filter:none;backdrop-filter:none}
body.mg-detail:not(.mg-scrolled) .content-topbar.is-detail .mg-top-back{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ── More-menu als ronde knoppen (keuze D van de eigenaar, 2026-10-01) ──
Telefoon: de sheet in het blauw van de pagina met een gloedlijn op de
bovenrand en een gloeiende greep; elke actie een gloeiende ronde knop met
het label eronder, drie naast elkaar; Remove als losse rode knop onder de
rij. Zelfde rijen en data-actions als voorheen, alleen CSS. */
/* Every sheet's background — the page's own glow (the owner's pick,
mockup 2026-10-05: the old soft gradient read as flat blue, light was
plain white): a light spot at the top, a hint of violet and ice blue at
the sides. Phone sheets all use this one token. */
:root{--mg-sheet-page:radial-gradient(70% 40% at 50% 0%,rgba(31,140,230,.20) 0%,rgba(31,140,230,0) 70%),linear-gradient(180deg,#dcebfc 0%,#eef4fb 45%,#f6f9fd 100%)}
:root[data-theme="dark"]{--mg-sheet-page:radial-gradient(70% 36% at 50% 0%,rgba(56,130,196,.28) 0%,rgba(56,130,196,0) 70%),radial-gradient(55% 35% at 96% 72%,rgba(127,220,255,.08) 0%,rgba(127,220,255,0) 70%),radial-gradient(45% 30% at 6% 60%,rgba(90,110,200,.10) 0%,rgba(90,110,200,0) 70%),linear-gradient(180deg,#0c1e3a 0%,#08152a 50%,#050e1d 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-sheet-page:radial-gradient(70% 36% at 50% 0%,rgba(56,130,196,.28) 0%,rgba(56,130,196,0) 70%),radial-gradient(55% 35% at 96% 72%,rgba(127,220,255,.08) 0%,rgba(127,220,255,0) 70%),radial-gradient(45% 30% at 6% 60%,rgba(90,110,200,.10) 0%,rgba(90,110,200,0) 70%),linear-gradient(180deg,#0c1e3a 0%,#08152a 50%,#050e1d 100%)}}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.hero-more-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;
background:var(--mg-sheet-page);border-top:0;padding:30px 16px calc(26px + env(safe-area-inset-bottom, 0px))}
.hero-more-panel .hero-more-divider{display:none}
.hero-more-panel .hero-more-row{flex-direction:column;justify-content:flex-start;gap:8px;min-height:0;padding:4px 2px;
font-size:13px;line-height:1.25;text-align:center;white-space:normal;background:none;color:var(--ink)}
.hero-more-panel .hero-more-row:hover,.hero-more-panel .hero-more-row:focus-visible{background:none}
.hero-more-panel .hero-more-row:focus-visible svg{outline:2px solid var(--accent);outline-offset:3px}
.hero-more-panel .hero-more-row svg{box-sizing:border-box;width:56px;height:56px;padding:16px;border-radius:50%;
border:2px solid var(--accent);color:var(--accent);background:var(--mg-ring-fill);box-shadow:var(--mg-ring-glow);stroke-width:1.8}
.hero-more-panel .hero-more-sub{display:block;font-size:11px;color:var(--ink-soft);margin-top:-4px}
/* Private aan: gouden ring */
.hero-more-panel .hero-more-row.priv{color:var(--ink);font-weight:500}
.hero-more-panel .hero-more-row.priv svg{border-color:var(--mg-fav);color:var(--mg-fav);background:color-mix(in srgb, var(--mg-fav) 14%, transparent);
box-shadow:0 0 12px 1px color-mix(in srgb, var(--mg-fav) 70%, transparent)}
/* Remove: losse rode knop over de hele breedte */
.hero-more-panel .hero-more-row.danger{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:10px;min-height:46px;margin-top:4px;
border:1.6px solid color-mix(in srgb, var(--danger) 60%, transparent);border-radius:999px;color:var(--danger);font-size:15px;font-weight:600}
.hero-more-panel .hero-more-row.danger svg{width:18px;height:18px;padding:0;border:0;background:none;box-shadow:none;color:var(--danger)}
}
/* Formaat-keuzelijst naast "Tracklist" (keuze T3): oogt als de formaat-pil */
.tl-format-chips .app-select.tl-format-select{display:inline-block}
.tl-format-select .app-select-btn{width:auto;gap:8px;padding:5px 12px 5px 14px;border-radius:999px;font-size:13px;font-weight:700;
background:var(--mg-accent-tint);border:1px solid var(--mg-accent-line);color:var(--accent-dark);box-shadow:var(--mg-glow)}
.tl-format-select .app-select-chev{border-color:var(--accent-dark)}
.tl-format-select .app-select-panel{left:auto;right:0}
/* Tracklist-editor: een schijf-marker waarvan het formaat niet meer in het
Format-veld staat (keuze M3) — koperen waarschuwing, Change to en ×. */
.track-edit-heading-row.is-stale .form-input-static{border-color:var(--mg-live-line);background:var(--mg-live-tint);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.marker-stale-note{font-size:11.5px;font-weight:600;color:var(--mg-live-ink)}
.track-edit-heading-row.is-stale .track-edit-actions{flex-wrap:wrap}
/* Private aan (keuze P3): "Tap to make visible" boven de knop, gedimd, los
van de flow zodat de ring in één lijn blijft met de andere knoppen. */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.hero-more-panel{padding-top:40px}
.hero-more-panel .hero-more-row{position:relative}
.hero-more-panel .hero-more-sub{position:absolute;left:0;right:0;bottom:calc(100% - 2px);margin:0;font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.hero-more-panel .hero-more-sub::first-letter{text-transform:uppercase}
.hero-more-panel .hero-more-row.priv .hero-more-sub::before{content:"Tap to "}
}
/* Totaal onder de tracklist (keuze PT2b): alleen het getal, vet, direct
onder de laatste speelduur — geen streep, geen woord. */
.album-detail .rel-tracklist-panel .total-playtime{margin-top:0;padding-top:0}
.album-detail .rel-tracklist-panel .total-playtime .mono{border-top:0;padding:2px 0 0}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.album-detail .rel-tracklist-panel .total-playtime{margin:0;padding-top:0}
}
/* ── Tags & favorite in de stijl van het More-menu (keuze C, 2026-10-01) ──
Telefoon: zelfde blauwe sheet met gloedlijn en greep; Favorite als
gloeiende ronde knop (goud als hij aan staat) met het label ernaast;
tags lichten ijsblauw op; "+ New tag" opent een invulveld met Add. */
.tm-new-btn{margin-top:12px;font:inherit;font-size:13px;font-weight:600;padding:6px 13px;border-radius:999px;cursor:pointer;
background:none;border:1.5px dashed var(--mg-accent-line);color:var(--accent)}
.tm-new{display:flex;gap:8px;margin-top:12px;align-items:center}
.tm-new .form-input{flex:1;min-width:0}
.tm-new .submit-btn{width:auto;padding:8px 16px;border-radius:999px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.tag-manage-panel{background:var(--mg-sheet-page);border-top:0}
.tag-manage-panel .cf-sheet-head{background:transparent;border-bottom:0}
.tm-fav{display:flex;align-items:center;gap:14px;width:auto;margin:6px 0 14px;padding:0;border:0;background:none;text-align:left;font-size:15.5px;color:var(--ink)}
.tm-fav.active{background:none;color:var(--ink)}
.tm-fav span[aria-hidden]{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;font-size:22px;
border:2px solid var(--accent);color:var(--accent);background:var(--mg-ring-fill);box-shadow:var(--mg-ring-glow)}
.tm-fav.active span[aria-hidden]{border-color:var(--mg-fav);color:var(--mg-fav);background:color-mix(in srgb, var(--mg-fav) 14%, transparent);
box-shadow:0 0 12px 1px color-mix(in srgb, var(--mg-fav) 70%, transparent)}
.tm-chip{border-color:var(--mg-accent-line)}
.tm-chip.on{background:var(--mg-accent-tint);border-color:var(--accent);color:var(--accent-dark);box-shadow:var(--mg-glow)}
}
.tm-fav-text small{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.tm-fav-text{display:flex;flex-direction:column;font-weight:700}
.tm-fav-text small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
}
/* Keuzelijsten als sheet (formaat-keuze, View, Sort) in dezelfde stijl als
Tags & favorite en More: blauw met gloedlijn en greep, de gekozen rij
licht ijsblauw op (de eigenaar, 2026-10-01). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.fb-menu:not(.sheet){background:var(--mg-sheet-page);border-top:0;padding-top:26px}
.year-filter-panel.fb-menu:not(.sheet)::before{content:"";position:absolute;top:10px;left:50%;margin-left:-24px}
/* One grip only: the sheet's glowing one above — the head's own grey grip
(.cf-sheet-head::before, from the Filters sheet) drew a second one under it. */
.year-filter-panel.fb-menu:not(.sheet) .cf-sheet-head::before{display:none}
.year-filter-panel.fb-menu:not(.sheet) .app-select-row,
.year-filter-panel.fb-menu:not(.sheet) .hero-more-row{min-height:48px;font-size:15.5px;border-radius:12px;margin:2px 0;border:1px solid transparent}
.year-filter-panel.fb-menu:not(.sheet) .app-select-row[aria-selected="true"],
.year-filter-panel.fb-menu:not(.sheet) .hero-more-row.is-current{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark);box-shadow:var(--mg-glow)}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.tag-manage-panel .year-filter-panel-scroll{background:none;border:0;box-shadow:none;padding:0}
.hero-more-panel .hero-more-sub{left:-24px;right:-24px;text-align:center}
}
/* ── Tekens bij de titel (keuze S1, 2026-10-01) ──
Slot: dezelfde gouden gloeiende ring als Private in het More-menu. Ster:
vol, met dezelfde gouden gloed. Tags: paars gloeirandje. In licht geen
gloed (alleen de ring en de rand). Alle detailpagina's. */
:root{--mg-fav-glow:none;--mg-lock-glow:none;--mg-tag-glow:none;--mg-tag-ring:rgba(107,79,196,.45)}
:root[data-theme="dark"]{--mg-fav-glow:drop-shadow(0 0 5px rgba(224,168,80,.85));--mg-lock-glow:0 0 10px 1px rgba(224,168,80,.65);--mg-tag-glow:0 0 9px rgba(167,139,250,.55),inset 0 0 6px rgba(167,139,250,.18);--mg-tag-ring:rgba(190,165,255,.65)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mg-fav-glow:drop-shadow(0 0 5px rgba(224,168,80,.85));--mg-lock-glow:0 0 10px 1px rgba(224,168,80,.65);--mg-tag-glow:0 0 9px rgba(167,139,250,.55),inset 0 0 6px rgba(167,139,250,.18);--mg-tag-ring:rgba(190,165,255,.65)}}
.rel-hero-body .hero-private-mark{width:28px;height:28px;background:color-mix(in srgb, var(--mg-fav) 14%, transparent);border:2px solid var(--mg-fav);box-sizing:border-box;
box-shadow:var(--mg-lock-glow)}
.rel-hero-body .hero-private-mark svg{width:13px;height:13px;stroke:var(--mg-fav);stroke-width:2}
.rel-hero-body .hero-fav-mark svg{fill:var(--mg-fav);stroke:var(--mg-fav);filter:var(--mg-fav-glow)}
.rel-hero-tags .chip-tag{border:1px solid var(--mg-tag-ring);box-shadow:var(--mg-tag-glow)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Exact gecentreerd op de ring, met wat lucht ertussen (de eigenaar, 2026-10-01). */
.year-filter-panel.hero-more-panel{padding-top:48px}
.hero-more-panel .hero-more-sub{left:50%;right:auto;width:max-content;transform:translateX(-50%);bottom:calc(100% + 8px);text-align:center}
}
/* More-menu (telefoon): eerst Private, dan Edit (of Suggest an edit), dan
Tags & favorite, daarna de rest van de pagina, Remove onderaan. En "Tap
to make visible" weer onder de Private-knop — boven de knop viel het weg
tussen de vele knoppen van een show (de eigenaar, 2026-10-01). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.hero-more-panel .hero-more-row{order:4}
.hero-more-panel .hero-more-row[data-action="togglePrivate"]{order:1}
.hero-more-panel .hero-more-row[data-action^="edit"],
.hero-more-panel .hero-more-row[data-action="openSuggestEdit"]{order:2}
.hero-more-panel .hero-more-row[data-action="toggleTagManage"]{order:3}
.hero-more-panel .hero-more-row.danger{order:9}
.year-filter-panel.hero-more-panel{padding-top:30px}
.hero-more-panel .hero-more-sub{position:static;transform:none;width:auto;margin:-4px 0 0;bottom:auto;left:auto;right:auto}
}
/* Tags & favorite: ruimte voor de gloed van de Favorite-knop (werd
afgesneden door de schuifcontainer), het TAGS-label links. */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.tag-manage-panel .year-filter-panel-scroll{padding:10px 8px 8px;margin:-10px -8px 0;overflow-x:visible}
.tag-manage-panel .tm-label{text-align:left}
}
/* Release / Show details (telefoon): alle kaarten gelijk — titel, 16 px,
inhoud; geen lijnen onder de titel of onderaan, geen lege regel (de
eigenaar, 2026-10-01: de Release-kaart had wel lijnen, Discogs niet). */
.rel-details-stack .panel{padding:16px 18px}
.rel-details-stack .meta-grid{grid-template-columns:1fr 1fr;gap:16px 18px;border:none;padding:0;margin:16px 0 0}
.rel-details-stack .meta-wide{grid-column:1 / -1}
.rel-details-stack .meta-value.is-empty{font-weight:400;color:var(--ink-soft)}
.rel-details-stack .rel-discogs .meta-value,.rel-details-stack .rel-history-sum{margin-top:16px}
.rel-details-stack .section-head{margin:0}
.rel-details-stack .sd-show-grid{margin-top:16px}
.rel-details-stack .sources-note{margin-top:12px}
/* ── Release / Show details als de tracklist (keuze B, 2026-10-01) ──
Bovenin een kleine hoes (of showfoto) met de titel; daaronder geen
kaarten maar secties met een kop als "Tracklist" en rijen label links /
waarde rechts; onderaan tagline en gloedlijn. */
.rel-details-screen{padding-top:58px}
.rel-details-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.rel-details-cover{width:76px;height:76px;flex:none;box-shadow:0 10px 20px rgba(0,0,0,.45);overflow:hidden}
.rel-details-cover .image-slot,.rel-details-cover img{width:100%;height:100%;border:0;border-radius:0;object-fit:cover;display:block}
.rel-details-cover .image-slot img{width:100%;height:100%;object-fit:cover}
.rel-details-title{margin:0;font-stretch:100%;font-weight:800;font-size:24px;line-height:1.05;text-transform:uppercase;letter-spacing:0;color:var(--ink)}
.rel-details-sub{font-size:16px;font-weight:500;color:var(--ink);margin-top:2px}
.rel-details-date{font-stretch:75%;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-live-ink);margin-bottom:2px}
.rel-details-stack{gap:22px !important}
.rel-details-stack .panel{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;border-radius:0}
.rel-details-stack .rel-side-label,
.rel-details-stack .section-title{font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:19px;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.rel-details-stack .meta-grid{display:block;margin-top:6px}
.rel-details-stack .meta-grid > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--mg-line-soft)}
.rel-details-stack .meta-grid > div:last-child{border-bottom:0}
.rel-details-stack .meta-label{font-family:'Archivo',sans-serif;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-mid);flex:none}
.rel-details-stack .meta-value{font-size:15px;font-weight:600;text-align:right;min-width:0}
.rel-details-stack .meta-value.mono{font-family:'Archivo',sans-serif;font-variant-numeric:tabular-nums}
.rel-details-stack .rel-discogs .meta-value,.rel-details-stack .rel-history-sum{margin-top:8px;text-align:left}
.rel-details-stack .rel-discogs a,.rel-details-stack .sd-ext-link{font-size:15px}
/* The Links card (item 136): one line per linked site, close together. */
.rel-links .meta-value + .meta-value,.rel-details-stack .rel-links .meta-value + .meta-value{margin-top:6px}
/* ── Ronde van 2026-10-01, middag (de eigenaar) ── */
.rel-details-head{margin-bottom:18px}
/* Show zonder foto: gecentreerd, zoals een release zonder hoes. */
.sd-hero--plain .rel-hero-cols{flex-direction:column;align-items:center;text-align:center}
.sd-hero--plain .rel-hero-body{align-items:center;text-align:center}
.sd-hero--plain .rel-hero-tags{justify-content:center}
.sd-hero--plain .sd-with{align-self:center}
.sd-hero--plain .rel-hero-tools{align-self:center}
/* (a) Nummercirkels rustiger, in de stijl van de formaat-pil: dunne rand,
lichte vulling, zachte gloed (setlist in koper). */
.rel-tracklist-panel .track-no{border-width:1px;border-color:var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent-dark);box-shadow:var(--mg-glow)}
.show-detail .sd-panel--setlist .track-no{border-width:1px;border-color:var(--mg-live-line);background:var(--mg-live-tint);color:var(--mg-live-soft);box-shadow:var(--mg-glow)}
.rel-tracklist-panel .track-no:empty,.show-detail .sd-panel--setlist .track-no:empty{border-color:transparent;background:none;box-shadow:none}
/* (c) Koppen in de tracklist/setlist: geen eigen achtergrond, wel
prominenter — tekst in de kleur van de pagina, iets groter, met ruimte. */
.rel-tracklist-panel .track-heading,
.show-detail .sd-panel--setlist .track-heading{background:none;border:0;padding:16px 2px 4px;margin:0;
font-family:'Archivo',sans-serif;font-stretch:100%;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.rel-tracklist-panel .track-heading:first-child,
.show-detail .sd-panel--setlist .track-heading:first-child{padding-top:4px}
/* (b) "Tap to make visible" toch weer boven de Private-knop, gecentreerd
met lucht ertussen. */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.hero-more-panel{padding-top:48px}
.hero-more-panel .hero-more-sub{position:absolute;left:50%;right:auto;width:max-content;transform:translateX(-50%);bottom:calc(100% + 8px);margin:0;text-align:center}
}
/* ── Ronde 2026-10-01, eind van de middag (de eigenaar) ── */
/* "Add cover" boven de titel bij een release zonder hoes (keuze C): een
kleine gestippelde pil; tik (of sleep een afbeelding erop) = kiezen. */
.rel-add-cover{display:flex;justify-content:center;margin-bottom:14px}
.rel-add-cover .image-slot{position:relative;width:auto;height:auto;min-height:0;aspect-ratio:auto;display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:999px;border:1.5px dashed var(--mg-accent-line);background:none;cursor:pointer;box-shadow:none}
.rel-add-cover .image-slot::before{content:"";width:16px;height:16px;flex:none;background:var(--accent);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M21 16l-5-5-9 9'/%3E%3C/svg%3E") center/contain no-repeat}
.rel-add-cover .image-slot .slot-label{font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:var(--accent);padding:0;white-space:nowrap}
.rel-add-cover .image-slot:hover{border-color:var(--accent);box-shadow:var(--mg-glow)}
.album-detail .rel-hero--plain .rel-hero-inner{padding-top:70px}
/* (1) De tagline onder de gloedlijn in plaats van erboven. */
/* (2) Geen tabbalk-ruimte onder een detailpagina (ook niet onder Release /
Show details). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body.mg-detail #view{padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}
/* ==========================================================================
Midnight Glow — Releases-overzicht (de eigenaar, mockup 2026-10-02)
========================================================================== */
/* Hoezen recht met diepe schaduw, zoals de releasepagina (raster en lijst). */
.cover-grid .album-cover{border-radius:0;box-shadow:0 14px 26px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35)}
.cover-grid .album-card:hover .album-cover{box-shadow:0 22px 40px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.4)}
.list-albums:not(.artist-list) .list-row .list-cover,.list-albums:not(.artist-list) .list-row .list-cover .image-slot{border-radius:0}
.list-albums:not(.artist-list) .list-row .list-cover{box-shadow:0 6px 12px rgba(0,0,0,.35);overflow:hidden}
:root:not([data-theme="dark"]) .cover-grid .album-cover{box-shadow:0 12px 24px rgba(20,40,80,.28),0 3px 8px rgba(20,40,80,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cover-grid .album-cover{box-shadow:0 14px 26px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.35)}}
/* Zonder hoes: een muzieknootje in de kleur van "Add cover" (--accent). */
/* Met een dunne lichtblauwe rand en een zachte gloed naar binnen (de
eigenaar, mockup 2026-10-02). */
.coverless-art{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;background:var(--mg-card-solid);
border:1px solid var(--mg-accent-line);box-shadow:inset 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);box-sizing:border-box;overflow:hidden}
.list-cover .coverless-art{height:100%}
.coverless-note{color:var(--accent);font-size:44px;line-height:1}
.list-cover .coverless-note{font-size:20px}
/* Gloedlijn en tagline onderaan het overzicht, precies zoals de releasepagina:
de gloedlijn boven, de tagline eronder op één regel (de eigenaar, 2026-10-02). */
/* View- en Sort-sheet op de telefoon: geen kopbalk en geen Done — een keuze
sluit het al, en vegen of de greep ook. */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.year-filter-panel.fb-menu .cf-sheet-head{background:transparent;border-bottom:0;position:static;padding:4px 4px 8px}
.year-filter-panel.fb-menu .cf-sheet-done{display:none}
}
/* Privé: het slotje achter de titel zonder cirkel eromheen; de slotjes bij
de privé-secties (Liner notes, My memory, Who did you go with) goud. */
.hero-private-mark,.rel-hero-body .hero-private-mark{width:auto;height:auto;background:none;border:0;border-radius:0;box-shadow:none;margin-left:6px}
.hero-private-mark svg,.rel-hero-body .hero-private-mark svg{width:20px;height:20px;stroke:var(--mg-fav);stroke-width:2.2;filter:var(--mg-fav-glow)}
.personal-section-tag,.rel-note-panel .personal-section-tag,.sd-panel .personal-section-tag{color:var(--mg-fav)}
/* ── Releases-overzicht, vervolg (de eigenaar, mockup 2026-10-02) ── */
/* Jaar · formaat onder de artiest; de hoes blijft schoon (geen verloop, geen tekst erop). */
.collection-page .cover-grid .album-cover::after{display:none}
.album-meta{font-size:12.5px;color:var(--ink-soft);margin-top:1px}
/* Favoriet: een gloeiend ★ achter de titel, geen ster op elke kaart. */
.album-title .hero-fav-mark,.list-title .hero-fav-mark,.artist-card-n .hero-fav-mark,.tl-artist .hero-fav-mark,.mini-concert-artist .hero-fav-mark,.map-sheet-title .hero-fav-mark{width:15px;height:15px;margin-left:5px;vertical-align:-1px;display:inline-flex}
.album-title .hero-fav-mark svg,.list-title .hero-fav-mark svg,.artist-card-n .hero-fav-mark svg,.tl-artist .hero-fav-mark svg,.mini-concert-artist .hero-fav-mark svg,.map-sheet-title .hero-fav-mark svg{width:14px;height:14px;fill:var(--mg-fav);stroke:var(--mg-fav);filter:var(--mg-fav-glow)}
/* "2 of 6 releases · ✕ Clear" — Clear all staat in de aantal-regel. */
.page-sub-sep{color:var(--ink-soft)}
.page-sub-clear{font:inherit;font-weight:700;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
/* Knoppen van de filterbalk dragen hun icoon; op desktop blijft het pil met tekst. */
.fb-btn-ic{display:none}
.fb-dot{display:none}
.count-pill{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Telefoon: alleen drie ronde icoonknoppen (View, Sort, Filters); een stip op
Filters als er een filter aan staat. Het menu opent onderaan. */
.filterbar .fb-icon{display:none}
.filterbar .fb-menu-btn,.filterbar .cf-toggle{position:relative;width:42px;height:42px;padding:0;border-radius:50%;display:inline-grid;place-items:center;
border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent);box-shadow:var(--mg-glow)}
.filterbar .fb-btn-ic{display:block;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.filterbar .fb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filterbar .fbtn.cf-toggle.is-active{padding:0}
.filterbar .fb-dot{display:block;position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--mg-live);box-shadow:var(--mg-live-glow)}
.filterbar{gap:10px;flex-wrap:nowrap}
/* Filters-sheet: geen kopbalk en geen Done (vegen of de greep sluit het);
alle waarden direct als pillen. */
.year-filter-panel.cf-panel{background:var(--mg-sheet-page);border-top:0;padding-top:26px}
.year-filter-panel.cf-panel::before{content:"";position:absolute;top:10px;left:50%;margin-left:-24px}
.year-filter-panel.cf-panel .cf-sheet-head{background:transparent;border-bottom:0;position:static;padding:4px 4px 6px}
.year-filter-panel.cf-panel .cf-sheet-head::before,.year-filter-panel.cf-panel .cf-sheet-done{display:none}
.cf-body.cf-pills-body{padding:0 2px 4px;border:0;background:none;box-shadow:none;max-height:none}
/* Pillen precies zoals de tags in Tags & favorite (.tm-chip, .tm-label). */
.cf-pills-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label);margin:16px 2px 8px}
.cf-pills{display:flex;flex-wrap:wrap;gap:6px}
.cf-pill{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px;cursor:pointer;background:transparent;border:1px solid var(--mg-accent-line);color:var(--ink-mid)}
.cf-pill.inc{background:var(--mg-accent-tint);border-color:var(--accent);color:var(--accent-dark);box-shadow:var(--mg-glow)}
.cf-pill.exc{border-color:color-mix(in srgb, var(--danger) 60%, transparent);color:var(--danger);text-decoration:line-through}
.cf-pill-more{border-style:dashed;color:var(--accent)}
/* Het aantal als pil aan het eind van de balk; gefilterd blauw met ✕. */
/* Zonder filter dezelfde lichtblauwe pil als met filter (de eigenaar,
2026-10-02); met filter komt er alleen "/ 236 ✕" en de gloed bij. */
.filterbar .count-pill{margin-left:auto;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font:inherit;font-size:13px;color:var(--ink-mid);
padding:6px 13px;border-radius:999px;border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint)}
.filterbar .count-pill b{font-size:17px;font-weight:800;color:var(--ink)}
.filterbar .count-pill.is-filtering{cursor:pointer;border-color:var(--mg-accent-line);background:var(--mg-accent-tint);box-shadow:var(--mg-glow)}
.filterbar .count-pill-x{color:var(--accent);font-weight:800;margin-left:2px}
/* De paginanaam staat al in de topbalk en het aantal in de pil — de kop zelf is leeg. */
.collection-page .page-head{display:none}
.cf-pills-legend{font-size:12.5px;color:var(--ink-soft);margin:16px 2px 0}
}
/* Een pil blijft even hoog als hij aan of uit gaat: ✓ en ✕ komen uit een
ander lettertype dan + en hebben een grotere regelhoogte (de eigenaar,
2026-10-02 — filter-pillen en de tags in Tags & favorite). Het tekentje
krijgt een vaste maat, de pil een vaste regelhoogte. */
.cf-pill,.tm-chip{line-height:1.25}
.cf-pill > span[aria-hidden],.tm-chip > span[aria-hidden]{display:inline-block;width:1em;height:1em;line-height:1;text-align:center;vertical-align:-.1em;overflow:hidden}
/* Release details zonder hoes: het kleine vak met het nootje, zoals in het overzicht. */
.rel-details-cover .coverless-art{height:100%;aspect-ratio:auto}
.rel-details-cover .coverless-note{font-size:30px}
/* ==========================================================================
Midnight Glow — showpagina gelijk aan de releasepagina (de eigenaar,
mockup 2026-10-02). Koper blijft voor de datum en de dag-pillen.
========================================================================== */
/* Setlist zoals de tracklist: geen lijnen, gewone letters, blauwe cirkels. */
.show-detail .sd-panel--setlist .setlist-row{padding:5px 2px;gap:14px;border-bottom:0}
.show-detail .sd-panel--setlist .setlist-row > div:nth-child(2){font-weight:500 !important;font-size:17px !important}
.show-detail .sd-panel--setlist .track-no{min-width:30px;height:30px;font-size:11.5px;border-width:1px;border-color:var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent-dark);box-shadow:var(--mg-glow)}
.show-detail .sd-panel--setlist .track-no:empty{border-color:transparent;background:none;box-shadow:none}
.show-detail .sd-panel--setlist .setlist-row.clickable:hover{background:var(--mg-accent-tint)}
.show-detail .sd-panel--setlist .section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* Line-up zonder kaart; initialen in een blauwe cirkel; labels als pil. */
.show-detail .sd-panel--lineup{background:none;border:0;box-shadow:none;padding:0}
.show-detail .sd-lu-row + .sd-lu-row{border-top:1px solid var(--mg-line-soft)}
.show-detail .sd-lu-disc .yr-disc-ini{background:var(--mg-accent-tint) !important;border:2px solid var(--accent);color:var(--accent);box-shadow:var(--mg-glow);box-sizing:border-box}
.show-detail .sd-lu-badge{font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;padding:3px 10px}
/* My memory: kopje erboven, foto's zonder kaart — zoals Liner notes. */
.show-detail .sd-panel--memory{background:none;border:0;box-shadow:none;padding:0}
.show-detail .sd-panel--memory .section-head{margin-bottom:8px}
/* Tour onder de titel: ijsblauw, gewone kapitalen (zoals de artiest bij een release). */
.sd-tour{font-stretch:100%;font-weight:500;letter-spacing:.02em;font-size:16px}
/* Liner notes en de gloedlijn onderaan blauw, zoals de releasepagina. */
.show-detail .sd-panel--note .my-note-text,
.show-detail .sd-panel--note .panel-add-link{border-color:var(--accent);box-shadow:var(--mg-glow)}
/* Release en Show details: het kleine vak altijd met een blauw gloeiend randje
— ook een hoes of foto, niet alleen het nootje of ticket. */
.rel-details-cover{border:1px solid var(--mg-accent-line);box-shadow:inset 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent),0 10px 20px rgba(0,0,0,.45);box-sizing:border-box}
.rel-details-cover .coverless-art{border:0;box-shadow:none}
.coverless-art--ticket{color:var(--accent)}
.coverless-art--ticket svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rel-details-screen .rel-details-date{margin-top:2px}
.show-detail .sd-panel--setlist .section-head{padding-right:0}
.show-detail .sd-panel--setlist .section-head .tl-format-chips{margin-left:auto}
.show-detail .sd-panel--lineup{padding-top:14px}
/* Show details: een tour per act als rij — "Tour · act". */
.meta-label-sub{font-family:'Archivo',sans-serif;letter-spacing:0;text-transform:none}
/* ── Went with, Line-up en Event grouping als sheet (de eigenaar, 2026-10-02) ──
Een modal met .sheet-modal is op de telefoon een blad van onder in de stijl
van Tags & favorite: gloedlijn, greep (tik of veeg omlaag sluit), titel in
kapitalen, pillen als de tags. Op de desktop blijft het een modal. */
.tm-chip.pending{border-style:dashed;color:var(--ink-soft)}
.pick-row{display:flex;align-items:center;gap:12px;padding:8px 2px}
.pick-ring{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;box-sizing:border-box;
border:2px solid var(--accent);color:var(--accent);background:var(--mg-accent-tint);box-shadow:var(--mg-glow);font-weight:800}
.pick-name{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-more{margin-top:10px;font-weight:700}
.lineup-pick-pills{display:flex;gap:6px;flex-wrap:wrap}
.lineup-pick-pills .tm-chip{font-size:12.5px;padding:6px 10px}
.lineup-pick-name{font-size:15px;font-weight:500}
.sheet-legend{font-size:12.5px;color:var(--ink-soft);padding-top:12px}
.meta-label-sub{display:inline;margin:0;font-size:inherit;color:var(--ink-soft)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.modal-overlay.sheet-modal{align-items:flex-end;padding:0}
.sheet-modal .modal-frame{max-width:none}
.sheet-modal .modal{border-radius:26px 26px 0 0;border:0;background:var(--mg-sheet-page);box-shadow:none;
padding:30px 16px calc(24px + env(safe-area-inset-bottom, 0px));max-height:calc(var(--vh) * 88);touch-action:pan-y;overscroll-behavior-y:contain}
.sheet-modal .modal::before{content:"";position:absolute;top:10px;left:50%;margin-left:-24px}
.sheet-modal .modal-close{display:none}
.modal-overlay.sheet-modal .modal h2.sheet-title{font-family:inherit;font-stretch:125%;font-weight:800;font-size:16px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.sheet-modal .modal-fade,.sheet-modal .vscroll-nav{display:none}
.sheet-modal--tall .modal{min-height:calc(var(--vh) * 80);display:flex;flex-direction:column}
.sheet-modal .sheet-actions{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom, 0px));margin-top:auto !important;
padding:14px 0 calc(24px + env(safe-area-inset-bottom, 0px));margin-bottom:calc(-24px - env(safe-area-inset-bottom, 0px));background:var(--mg-sheet-page)}
.sheet-modal .lineup-pick-row + .lineup-pick-row{border-top-color:var(--mg-line-soft)}
.sheet-modal .cf-row{min-height:46px;font-size:14.5px;border-radius:12px;border:1px solid var(--mg-line-soft);margin-bottom:6px;padding:10px 12px}
.sheet-modal .cf-row.inc{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);box-shadow:var(--mg-glow)}
html:has(.sheet-modal){overscroll-behavior-y:none}
}
/* ── Mensen zonder account (de eigenaar, 2026-10-02) ── stippelrand om de
initiaal; op Connections een eigen sectie en de vraag "Is this …?". */
.pick-ring.dashed{border-style:dashed;box-shadow:none}
.pick-name small{display:block;font-size:12px;color:var(--ink-soft)}
.conn-people{margin-top:16px}
.conn-people .section-title{display:flex;align-items:center;gap:8px}
.conn-person .icon-btn{width:30px;height:30px;font-size:18px}
.conn-person-link{font-weight:700;font-size:13px;white-space:nowrap}
.conn-person-hint{margin:0 0 14px;padding:12px 14px;border:1px solid var(--mg-accent-line);border-radius:14px;background:var(--mg-accent-tint);box-shadow:var(--mg-glow);font-size:14px}
.conn-person-hint-actions{display:flex;gap:16px;margin-top:8px}
.conn-person-hint-actions .link-btn{font-weight:700}
.conn-person-hint-actions .link-btn.muted{color:var(--ink-soft)}
/* Went with: Find people boven + Someone else, elk met een regel uitleg. */
.sheet-modal .pick-more{margin-top:14px}
.sheet-modal .pick-more .link-btn{font-weight:700}
.sheet-modal .pick-more .tm-new-btn{margin-top:0}
.sheet-modal .pick-more .sheet-legend{padding-top:4px}
.conn-person-hints{margin-top:16px}
.conn-person-hints + .conn-people{margin-top:0}
.conn-person-hint-wait{color:var(--ink-soft);font-size:13px}
.sidebar .user-menu-item-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--mg-fav);margin-left:auto}
/* ── Shows-overzicht in Midnight Glow (de eigenaar, mockups 2026-10-02) ──
Koperen jaartallen en datums, een koperen gloedlijn met het aantal shows
per jaar, één Today-pil; geen kaart per show (op de telefoon), de tour
als tweede regel; koperen pinnen op de kaart. Lijn en stippen blijven ijsblauw. */
.tl-year .tl-year-num,.tl-year.upcoming .tl-year-num{color:var(--mg-live)}
.tl-when-date,.tl-row.upcoming .tl-when-date{color:var(--mg-live-ink)}
.mini-concert-date{color:var(--mg-live-ink)}
.tl-year .tl-rule{display:flex;align-items:center;gap:10px}
.tl-year .tl-rule::after{display:none}
.tl-rule-line{flex:1;height:2px;background:linear-gradient(90deg,var(--mg-live),color-mix(in srgb, var(--mg-live) 35%, #fff) 40%,transparent);
box-shadow:0 0 8px color-mix(in srgb, var(--mg-live) 55%, transparent)}
.tl-year-count{font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.tl-today-pill{text-transform:uppercase}
.tl-tour{font-size:13px;color:var(--accent);margin-top:3px}
.tl-acts{font-size:13px;color:var(--ink-soft);margin-top:3px}
.wm-pin circle{fill:var(--mg-live);stroke:#0c1d3e}
.wm-pin text{fill:#1a0d00}
.map-sheet-count{font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.map-sheet-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--mg-line-soft);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.map-sheet-date{flex:none;width:104px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mg-live-ink)}
.map-sheet-title{flex:1;min-width:0;font-weight:800;text-transform:uppercase;font-stretch:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-sheet-go{color:var(--accent);font-size:18px}
.map-sheet-more{margin-top:12px;font-weight:700}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.shows-page .page-head{display:none}
.shows-page .tl-card,.shows-page .tl-row.upcoming .tl-card{background:none;border:0;border-bottom:1px solid var(--mg-line-soft);border-radius:0;box-shadow:none;padding:2px 0 14px}
.shows-page .tl-row.approx .tl-card{border-bottom-style:dashed}
.shows-page .tl-card:hover{background:none}
}
/* ── Vervolg Shows (de eigenaar, 2026-10-02) ──
Dag en maand op de tijdlijn wit (jaartallen blijven koper). */
.tl-when-date,.tl-row.upcoming .tl-when-date{color:var(--ink)}
/* De vriendjes in de hero ("with Sam and Noor"): een ijsblauwe rand met gloed. */
.sd-with-av{border-color:var(--accent);box-shadow:var(--mg-glow)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Verwijderen / ontkoppelen: een blad van onder zoals de andere menu's;
de rode knop als rode omlijnde pil, Cancel eronder. */
.sheet-modal .modal.delete-modal{max-width:none;padding-top:30px}
.sheet-modal .delete-modal .modal-p{color:var(--ink-mid);font-size:14px;line-height:1.5}
.sheet-modal .delete-modal .modal-actions{flex-direction:column-reverse;gap:10px;margin-top:16px}
.sheet-modal .delete-modal .btn-danger{background:transparent;border:1px solid color-mix(in srgb, var(--danger) 65%, transparent);color:var(--danger);padding:13px;font-size:15px}
.sheet-modal .delete-modal .btn-danger:disabled{opacity:.45}
.sheet-modal .delete-modal .btn-cancel{border:0;color:var(--ink-mid);padding:10px;font-size:14.5px}
/* Map: View en de regio-knoppen in dezelfde gloeiende stijl als elders, op
een dichte ondergrond zodat ze boven de kaart leesbaar blijven. */
.shows-page:has(#gl-map-slot) .fb-menu-btn,.shows-page:has(#gl-map-slot) .fbtn,
.shows-page:has(#gl-map-slot) .wm-rchip{background:linear-gradient(var(--mg-accent-tint),var(--mg-accent-tint)),var(--mg-card-solid);border-color:var(--mg-accent-line);color:var(--accent);box-shadow:var(--mg-glow)}
.shows-page:has(#gl-map-slot) .wm-rchip.active{color:var(--accent-dark);border-color:var(--accent)}
/* De regio-knoppen linksonder op de kaart, onder elkaar: van onder naar boven
Fit to my shows, World, Europe. */
.shows-page:has(#gl-map-slot) .wm-regions{top:auto;right:auto;bottom:calc(76px + env(safe-area-inset-bottom, 0px) + 14px);
flex-direction:column-reverse;align-items:flex-start;gap:8px;overflow:visible}
}
/* Acts onder een show: waarvoor je kwam wit, wat je ook zag grijs; de
datum van een festivaldag ervoor in grijs (de eigenaar, 2026-10-02). */
.tl-acts,.tl-day{font-size:13px;color:var(--ink-soft);margin-top:3px}
.tl-act.came{color:var(--ink);font-weight:600}
.tl-day .tl-day-date{font-family:inherit;font-size:13px;color:var(--ink-soft)}
/* ── Songs in Midnight Glow (de eigenaar, mockup 2026-10-03) ──
Lijst zonder kaart, alleen een koperen letter boven elk blok; de
aantal-pil in de balk; de songpagina zoals de releasepagina: artiest wit
in gewone kapitalen, koppen zoals elders, secties zonder kaart, de
gloedlijn en tagline onderaan. */
.srow-head{background:none;border-radius:0;color:var(--mg-live);font-size:20px;padding:0 2px;margin:18px 0 2px}
.srow-head::after{display:none}
.srow-title .hero-fav-mark{width:15px;height:15px;margin-left:5px;vertical-align:-1px;display:inline-flex}
.srow-title .hero-fav-mark svg{width:14px;height:14px;fill:var(--mg-fav);stroke:var(--mg-fav);filter:var(--mg-fav-glow)}
.song-detail .rel-hero::after{display:none}
.song-detail .rel-hero-body .artist-link{color:var(--mg-hero-ink);font-stretch:100%;font-weight:500;letter-spacing:.02em;font-size:18px;margin-top:6px}
.song-detail .rel-hero-body .artist-link:hover{color:var(--accent)}
.song-detail .panel-head h2,.song-detail .rel-note-panel .section-title,.artist-detail .rel-side-label,.artist-detail .rel-note-panel .section-title{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:19px !important;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.song-detail .song-panel-note{font-family:'Archivo',sans-serif;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.song-detail .rel-note-panel,.artist-detail .rel-note-panel{background:none;border:0;box-shadow:none;padding:0}
.song-detail .rel-note-panel .section-head,.artist-detail .rel-note-panel .section-head{margin-bottom:8px}
.song-detail .rel-note-panel .my-note-text,.song-detail .rel-note-panel .panel-add-link,.artist-detail .rel-note-panel .my-note-text,.artist-detail .rel-note-panel .panel-add-link{display:block;width:100%;box-sizing:border-box;margin:0;text-align:left;
border:2px solid var(--accent);border-radius:14px;padding:12px 14px;box-shadow:var(--mg-note-glow);background:var(--mg-card-hi)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.songs-page .page-head{display:none}
.songs-page .song-list-card.panel{background:none;border:0;box-shadow:none;padding:0 0 8px}
.song-detail .rel-body .panel{background:none;border:0;box-shadow:none;padding:0}
}
/* ── Songpagina, kop zoals de releasepagina (de eigenaar, mockup 2026-10-03) ──
Telefoon: alles gecentreerd; één release = één grote hoes in het midden met
een lichtblauwe gloeiende rand; meer releases = dezelfde grote hoes met een
stapel erachter die doordraait (syncSongFan() blijft sturen, alleen de
standen en de boog zijn hier anders). Drie even grote getallen. */
.song-hero-stats .mg-hero-stat span{font-family:'Archivo',sans-serif;letter-spacing:0;text-transform:none;font-size:12.5px}
.song-hero-stats .mg-hero-stat.is-none b{color:var(--mg-hero-soft)}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks): the song page's hero: centred, the big cover or the turning stack, three numbers between lines. */
.song-detail .rel-hero-cols{flex-direction:column;align-items:center;text-align:center;gap:14px}
.song-detail .rel-hero-body{width:100%}
.song-detail .rel-hero-body .detail-title-block{justify-content:center}
.song-detail .rel-hero-tags{justify-content:center}
.song-detail .song-hero-cover{align-self:center;width:220px;height:220px;min-height:220px;flex:none;margin:0}
.song-detail .song-hero-cover .image-slot{width:220px;height:220px;border:1.5px solid var(--mg-accent-line);
box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent),0 10px 24px rgba(0,0,0,.45)}
.song-detail .song-hero-fan{align-self:center;width:300px;height:244px}
.song-detail .song-hero-fan .song-fan-cover{width:220px;height:220px;top:6px;bottom:auto}
.song-detail .song-hero-fan .song-fan-cover .image-slot{border:1px solid var(--mg-accent-line);border-radius:0}
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover{transform:translate(32%,6%) rotate(10deg) scale(.86);opacity:0;z-index:0}
.song-detail .song-hero-fan.js-fan .song-fan-cover,
.song-detail .song-hero-fan .song-fan-cover.ff-park{transform:translate(34%,6%) rotate(11deg) scale(.86);opacity:0;z-index:0}
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover:nth-child(1),
.song-detail .song-hero-fan .song-fan-cover.ff-front{transform:translate(18%,0) rotate(0) scale(1);opacity:1;z-index:3}
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover:nth-child(2),
.song-detail .song-hero-fan .song-fan-cover.ff-mid{transform:translate(27%,3%) rotate(6deg) scale(.93);opacity:.85;z-index:2}
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover:nth-child(3),
.song-detail .song-hero-fan .song-fan-cover.ff-back{transform:translate(34%,6%) rotate(11deg) scale(.86);opacity:.6;z-index:1}
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover:nth-child(1) .image-slot,
.song-detail .song-hero-fan .song-fan-cover.ff-front .image-slot{border-width:1.5px;
box-shadow:0 0 22px color-mix(in srgb, var(--accent) 45%, transparent),0 10px 24px rgba(0,0,0,.45)}
.song-detail .song-hero-fan .song-fan-cover.ff-sending{animation-name:songStackArc}
.song-detail .song-hero-fan.is-pair .song-fan-cover.ff-sending{animation-name:songStackArcPair}
/* Drie getallen even groot naast elkaar, met een dunne lijn erboven en eronder. */
.song-detail .song-hero-stats,.artist-detail .song-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:14px;padding:12px 0;
border-top:1px solid var(--mg-line-soft);border-bottom:1px solid var(--mg-line-soft)}
.song-detail .song-hero-stats .mg-hero-stat,.artist-detail .song-hero-stats .mg-hero-stat{align-items:center}
.song-detail .song-hero-stats .mg-hero-stat b,.artist-detail .song-hero-stats .mg-hero-stat b{font-size:34px}
@keyframes songStackArc{
0% {transform:translate(18%,0) rotate(0) scale(1);z-index:9;opacity:1}
38% {transform:translate(14%,-34%) rotate(-5deg) scale(1.03);z-index:9;opacity:1}
60% {transform:translate(40%,-14%) rotate(8deg) scale(.9);z-index:0;opacity:.8}
100% {transform:translate(34%,6%) rotate(11deg) scale(.86);z-index:0;opacity:0}
}
@keyframes songStackArcPair{
0% {transform:translate(18%,0) rotate(0) scale(1);z-index:9;opacity:1}
38% {transform:translate(14%,-34%) rotate(-5deg) scale(1.03);z-index:9;opacity:1}
60% {transform:translate(40%,-14%) rotate(8deg) scale(.9);z-index:0;opacity:.8}
100% {transform:translate(34%,6%) rotate(11deg) scale(.86);z-index:0;opacity:.6}
}
/* Songpagina: "Never heard live." als gewone regel tekst direct onder de kop,
niet als groot leeg vak (de eigenaar, 2026-10-03). */
.song-detail .rel-body .empty-state{padding:2px 0 0;margin:0;text-align:left;font-size:14px;color:var(--ink-soft);background:none;border:0;min-height:0}
/* Heard live: de jaartallen koper, zoals op de Shows-tijdlijn (de eigenaar, 2026-10-03). */
.song-detail .song-live-year{color:var(--mg-live)}
/* ── Zoekmenu en avatar in Midnight Glow (de eigenaar, 2026-10-03) ──
Het menu als de bladen: lichtblauwe rand en gloedlijn bovenaan, koppen als
in Filters, hoezen en het nootje zoals in het overzicht, een artiest zonder
foto als initiaal in een blauwe cirkel, de datum van een show in koper. */
.gsearch-panel{background:var(--mg-sheet-page);border:1px solid var(--mg-accent-line);border-radius:18px;box-shadow:var(--mg-glow),0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.gsearch-panel::after{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow);pointer-events:none}
.gsearch-group-label{font-size:9.5px;letter-spacing:.16em;color:var(--mg-label);padding:14px 16px 6px}
.gsearch-row{padding:8px 16px;gap:12px}
.gsearch-row:hover{background:var(--mg-accent-tint)}
.gsearch-row-title{font-size:14.5px}
.gsearch-row-sub{font-size:12.5px}
.gsearch-thumb{width:40px;height:40px}
.gsearch-thumb .image-slot{border:1px solid var(--mg-accent-line);border-radius:4px}
.gsearch-thumb .coverless-art{height:100%;aspect-ratio:auto}
.gsearch-thumb .coverless-note{font-size:18px}
.gsearch-thumb.artist-cover .image-slot{border-radius:50%}
.gsearch-ini{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;box-sizing:border-box;border:2px solid var(--accent);color:var(--accent);background:var(--mg-accent-tint);box-shadow:var(--mg-glow);font-weight:800;font-size:15px}
.gsearch-date{color:var(--mg-live-ink);font-weight:600}
.gsearch-more{font-size:13.5px;font-weight:700;padding:6px 16px 12px}
/* De profielfoto rechtsboven: een ijsblauwe rand met gloed, zoals de zoekknop ernaast. */
/* The avatar's light rim — the top bar's and the avatar menu's, one rule
(the owner, 2026-10-05). */
.mg-top-avatar .conn-av,.user-menu-sheet-avatar .conn-av{box-sizing:border-box;border:1.5px solid var(--accent);box-shadow:var(--mg-glow)}
/* Song zonder hoes: geen donker vlak achter de kop — de pagina loopt door,
zoals bij een show zonder foto (de eigenaar, 2026-10-03). */
.song-hero--plain .rel-hero-bg{display:none}
.song-hero--plain .rel-hero-inner{padding-top:56px}
/* ── Artists in Midnight Glow (de eigenaar, mockup 2026-10-03) ──
Overzicht: een artiest zonder foto als initiaal in een blauwe cirkel, ★
achter de naam, de aantal-pil, "+ Add an artist" als pil. Artiestpagina:
de foto groot in het midden (of "Add photo" boven de naam), drie getallen
zoals de songpagina, tags onderaan de kop, secties zonder kaart, jaartallen
koper, gloedlijn en tagline onderaan. */
.artist-ini{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;box-sizing:border-box;border:2px solid var(--accent);
color:var(--accent);background:var(--mg-accent-tint);box-shadow:var(--mg-glow);font-weight:800;font-size:clamp(16px,9vw,40px)}
.list-cover .artist-ini{font-size:18px}
.want-add-row .tm-new-btn{margin-top:0}
.artist-hero--plain .rel-hero-bg,.artist-hero--plain .artist-hero-light{display:none}
.artist-detail .rel-hero::after{display:none}
.artist-detail .artist-show-year{color:var(--mg-live)}
.artist-detail .rel-hero-body .rel-add-cover{margin-bottom:12px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.artists-page .page-head{display:none}
.artist-detail .rel-hero-cols{flex-direction:column;align-items:center;text-align:center;gap:14px}
.artist-detail .rel-hero-body{width:100%;align-items:center;text-align:center}
.artist-detail .rel-hero-body .detail-title-block{justify-content:center}
.artist-detail .rel-hero-tags,.artist-detail .artist-hero-rel{justify-content:center}
.artist-detail .artist-hero-photo{width:200px;height:200px;align-self:center;
box-shadow:0 0 0 2px var(--accent),0 0 26px color-mix(in srgb, var(--accent) 45%, transparent),0 10px 24px rgba(0,0,0,.45)}
.artist-hero--plain .rel-hero-inner{padding-top:56px}
.artist-detail .rel-body .panel{background:none;border:0;box-shadow:none;padding:0}
}
.artist-detail .song-hero-stats{width:100%;box-sizing:border-box}
.artist-relcard-m.album-meta{font-family:'Archivo',sans-serif;letter-spacing:0;text-transform:none}
/* Artists-overzicht (de eigenaar, mockup 'Artiestcirkels' 2026-10-03): geen
rand meer — een foto en een initiaal krijgen allebei alleen een zachte
schaduw, de initiaal een iets lichter gekleurde cirkel. */
.artists-page .artist-ini{border:0;background:color-mix(in srgb, var(--accent) 12%, transparent);box-shadow:0 8px 18px rgba(0,0,0,.35)}
.artists-page .artist-card .album-cover.artist-cover{box-shadow:none}
.artists-page .artist-card .album-cover.artist-cover:has(.image-slot.has-image),
.artists-page .artist-list .list-cover.artist-cover:has(.image-slot.has-image){border-radius:999px;box-shadow:0 8px 18px rgba(0,0,0,.45)}
/* Artiestpagina: Also known as / Members / Member of elk op een eigen regel,
de namen wit (de eigenaar, 2026-10-03). */
.artist-hero-rel{flex-direction:column}
.artist-hero-rel-line + .artist-hero-rel-line{margin-top:3px}
.artist-hero-name{color:var(--mg-hero-ink);font-weight:600}
/* ── Hoezen overal gelijk (de eigenaar, mockup "Hoezen overal" 2026-10-03) ──
Geen rand, rechte hoeken (de Versions-miniaturen licht afgerond), een
zachte schaduw eronder; zonder hoes het nootje, ook zonder rand; "Add
cover" op de releasepagina en in Edit release. */
.coverless-art{border:0;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.cover-grid .album-cover,.collection-page .cover-grid .album-cover{border-radius:0;border:0}
.rel-details-cover{border:0;box-shadow:0 10px 20px rgba(0,0,0,.45)}
.detail-cover.release-cover .image-slot{border-radius:0;border:0}
.rel-add-cover--edit{justify-content:flex-start;margin:4px 0 14px}
.song-detail .song-hero-cover .image-slot,
.song-detail .song-hero-fan .song-fan-cover .image-slot,
.song-detail .song-hero-fan:not(.js-fan) .song-fan-cover:nth-child(1) .image-slot,
.song-detail .song-hero-fan .song-fan-cover.ff-front .image-slot{border:0 !important;border-radius:0 !important;box-shadow:0 10px 24px rgba(0,0,0,.45) !important}
.song-detail .song-version-cover .image-slot,.song-detail .song-version-cover .coverless-art{border-radius:4px}
.song-version-cover .coverless-art{width:38px;height:38px;aspect-ratio:auto}
.song-version-cover .coverless-note{font-size:16px}
.artist-relcard .album-cover .image-slot,.artist-relcard .album-cover .coverless-art{border-radius:0}
.gsearch-thumb .image-slot{border:0;border-radius:0;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.artists-page .artist-list .list-cover.artist-cover{box-shadow:none}
/* Songpagina, Versions: geen kaartje meer om een versie — een gewone rij,
alleen een dunne lijn tussen twee versies (de eigenaar, 2026-10-03). */
.song-detail .song-version-row{margin:0;padding:10px 0;border-top:0;border-radius:0;background:none}
.song-detail .song-version-row + .song-version-row{border-top:1px solid var(--mg-line-soft)}
.song-detail .song-version-row:hover{background:none}
/* Artiestpagina: de foto in de kop zonder ijsblauwe cirkel, alleen een
zachte schaduw — zoals op het overzicht (de eigenaar, 2026-10-03). */
.artist-detail .artist-hero-photo{box-shadow:0 10px 24px rgba(0,0,0,.45) !important}
.map-sheet-head{margin:12px 0 2px}
/* Wishlist-item: "Mark as bought" op de pagina zelf, in de stijl van "Add
cover" (de eigenaar, 2026-10-03). */
.rel-bought{display:flex;justify-content:center;margin-top:14px}
.rel-bought-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:var(--accent);cursor:pointer;
background:var(--mg-accent-tint);border:1.5px dashed var(--mg-accent-line);border-radius:999px;padding:8px 16px}
.rel-bought-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rel-bought-btn:hover{border-color:var(--accent);box-shadow:var(--mg-glow)}
/* Want to see live: het toevoegveld en Add zoals "+ New tag" (een pil-veld
en een pil-knop); de knop rekt niet mee als er een hint onder het veld
verschijnt. */
.want-add-row{align-items:flex-start}
.want-add-row .form-input{border-radius:999px;border-color:var(--mg-accent-line);background:var(--mg-card-solid);padding-left:16px}
.want-add-row .form-input:focus{border-color:var(--accent);box-shadow:var(--mg-glow)}
.want-add-row .want-add-btn{flex:none;width:auto;padding:9px 18px;border-radius:999px}
/* Het lijstje met suggesties onder een artiest-, plaats- of landveld: in de
stijl van het zoekmenu en de bladen. */
.place-suggest-panel{background:var(--mg-sheet-page) !important;border:1px solid var(--mg-accent-line);border-radius:14px;
box-shadow:var(--mg-glow),0 14px 32px rgba(0,0,0,.4);padding:6px}
.place-suggest-panel .app-select-group{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label);padding:10px 10px 4px}
.place-suggest-panel .place-suggest-row{border-radius:10px}
.place-suggest-panel .place-suggest-row.is-active,.place-suggest-panel .place-suggest-row:hover{background:var(--mg-accent-tint)}
/* Want to see live, toevoegveld (de eigenaar, 2026-10-03): de achtergrond
van de pagina, een × in het veld, geen naam-hint eronder (de melding na
het toevoegen zegt het al). */
.want-add-row .form-input{background:transparent;padding-right:40px}
.want-add-field{position:relative;flex:1;min-width:0}
.want-add-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:none;
color:var(--ink-soft);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.want-add-clear:hover{color:var(--accent)}
.want-add-row .artist-hint-slot{display:none}
/* Placeholder in het Want to see live-veld: kort, en gedempt zoals in het
zoekveld bovenaan (de eigenaar, 2026-10-03; alle placeholders: TODO 180). */
.want-add-row .form-input::placeholder{color:var(--mg-faint);opacity:1}
/* ── Dashboard in Midnight Glow (de eigenaar, mockups 2026-10-03) ──
Balk: het logo met CRATE & ENCORE (tik = groot). Kop: "Welcome back, …",
de drie regels groot en gecentreerd, de twee links als pil. Panelen: het
kopje boven, de inhoud in een kaart, "View all ›" in gewone letters, lege
panelen weg. Recent shows met koperen jaar en dag; ranglijsten met
nummercirkels zoals de tracklist; hoezen zoals overal; tagline onderaan. */
.dash-hero-welcome{font-size:17px;font-weight:600;color:var(--mg-hero-ink, var(--ink));margin-bottom:10px}
.dash-panel-head h2{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:19px !important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0}
.dash-panel-head .view-all{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent)}
.dash-recent-date{display:flex;flex-direction:column;align-items:center;width:54px;flex:none}
.dash-recent-year{font-weight:800;font-size:20px;line-height:1;color:var(--mg-live)}
.dash-recent-day{font-size:10px;letter-spacing:.1em;color:var(--ink-soft);margin-top:3px}
.dash-rank-ring{flex:none;min-width:30px;height:30px;padding:0 6px;box-sizing:border-box;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
font-family:'IBM Plex Mono',monospace;font-size:11.5px;border:2px solid var(--accent);color:var(--accent-dark);background:var(--mg-ring-fill);box-shadow:var(--mg-ring-glow)}
.dash-crate-tile .image-slot,.dash-crate-tile .coverless-art,.dash-fav-grid .image-slot,.dash-fav-grid .coverless-art{border-radius:0;border:0}
.dash-crate-tile .coverless-art{height:100%;aspect-ratio:auto}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks): the welcome in the middle without a frame, panels without a card. */
body.mg-main.mg-dash .mg-top-logo{display:block;cursor:zoom-in}
.dash-hero{background:none;border:0;box-shadow:none}
.dash-hero{padding:0}
.dash-hero-inner{justify-content:center;justify-items:center;text-align:center;padding:14px 0 4px}
.dash-hero-stats .dash-hero-line{font-size:30px}
.dash-hero-actions{justify-content:center}
.dash-hero-actions a{border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent);border-radius:999px;padding:8px 14px;font-weight:700;font-size:13.5px;box-shadow:var(--mg-glow);text-decoration:none}
.dash .dash-panel{background:none;border:0;box-shadow:none;padding:0}
.dash-panel-head{margin-bottom:10px !important}
.dash .dash-card{background:var(--mg-card-hi);border:1px solid var(--mg-line-soft);border-radius:16px;padding:12px 14px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* "CRATE & ENCORE" past naast het logo, zoek en avatar. */
body.mg-dash .content-topbar .topbar-page-label{font-size:16px;font-stretch:110%;white-space:nowrap;overflow:visible}
}
.dash-crate-title{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:19px !important;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0}
.dash-crate-head .view-all,.dash-crate .view-all{font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--accent);margin-left:auto}
/* Dashboard, vervolg: kop en "View all" op één regel, de tagline op één
regel, artiesten zonder foto in de ranglijsten als initiaal (zoals het
Artists-overzicht). */
.dash-panel-head,.dash-crate .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:nowrap}
.dash-panel-head .view-all,.dash-crate .view-all{white-space:nowrap;flex:none}
.dash-rank .artist-ini{border:0;background:color-mix(in srgb, var(--accent) 12%, transparent);box-shadow:0 6px 14px rgba(0,0,0,.35);font-size:12px}
.dash-rank-row.first .artist-ini{font-size:20px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.dash-panel-head h2,.dash-crate-title{font-size:16px !important;white-space:nowrap}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.dash-panel-head h2,.dash-crate-title{font-size:15px !important;font-stretch:110%;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks). */
/* Dashboard zonder kaarten: alleen het kopje met de inhoud eronder (de eigenaar, 2026-10-03). */
.dash .dash-card{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks). */
.dash-crate .section-head::after{display:none}
.dash .panel-grid,.dash .dash-row-split{align-items:start;grid-auto-rows:auto}
.dash .panel-grid > .panel,.dash .dash-row-split > .panel{height:auto;min-height:0}
/* One column: a short list (two countries) no longer keeps the height it
needs to line up with a card beside it on a wide screen (the owner, 2026-10-04). */
.dash .bar-list{min-height:0;padding-bottom:10px}
/* Dashboard-ranglijsten: dezelfde rustige nummercirkels als de tracklist —
een dunne lijn, geen sterke gloed (de eigenaar, 2026-10-03). */
.dash-rank-ring{border-width:1px;border-color:var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent-dark);box-shadow:var(--mg-glow)}
/* Dashboard: de hoezen echt recht — de afronding zat op het vak eromheen
(Through the crate en een release bij Favorites); de groet in koper
(de eigenaar, 2026-10-03). */
.dash-crate-tile,.dash-fav-item.release .dash-fav-tile{border-radius:0}
.dash-hero-welcome{color:var(--mg-live)}
.dash-crate-track,.dash-crate .nav-wrap{border-radius:0}
/* Dashboard: de gloedlijn boven de tagline stak 8px buiten de pagina, waardoor
Safari de pagina iets uitzoomde en de tabbalk bij scrollen verzakte (de
eigenaar, 2026-10-03). Afknippen zoals op de andere pagina's. "Welcome
back" iets groter. */
.dash{overflow-x:clip}
.dash-hero-welcome{font-size:20px}
/* ── Add release / Add show in Midnight Glow (de eigenaar, mockup 2026-10-03) ──
Begin met twee ronde knoppen (Scan · Paste link), Type als pillen, de gevonden-melding met hoesje direct onder Artist, de show-
kaart als op de show-pagina, Private als schakelaar, ingevulde velden
met een ijsblauwe streep links. Op de telefoon: geen kaart, geen tabbalk,
Cancel/Add in een vaste balk onderaan. */
.add-page .meta-label{font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-mid, var(--ink-soft))}
.add-page .req-star,.add-page .form-required-legend{display:none}
.add-page .req-group-note{font-weight:400;color:var(--ink-soft)}
.add-status-tabs{display:flex;gap:22px;border-bottom:1px solid var(--mg-line-soft, var(--line));margin:0 0 18px}
.add-status-tabs button{background:none;border:0;padding:6px 0 9px;font:inherit;font-size:16px;font-weight:700;color:var(--mg-faint, var(--ink-soft));cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.add-status-tabs button.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.add-status-tabs button:disabled:not(.active){opacity:.45;cursor:not-allowed}
.add-status-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.album-import-panel.add-start{background:none;border:0;padding:4px 0 0;margin-bottom:22px}
.add-start-btns{display:flex;justify-content:center;gap:32px}
.add-start-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.add-start-ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--accent);color:var(--accent);background:var(--mg-accent-tint, transparent);box-shadow:var(--mg-glow)}
.add-start-ring svg{width:23px !important;height:23px !important;margin:0 !important;vertical-align:0 !important;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.add-start-btn.on .add-start-ring{background:var(--accent);color:var(--mg-on-accent, #06213d)}
.add-start-btn:focus-visible .add-start-ring{outline:2px solid var(--accent);outline-offset:3px}
.add-start-paste{margin-top:16px}
.add-start .import-type-along{justify-content:center;border-top:0;padding-top:0;margin-top:14px}
.choice-pills{display:flex;flex-wrap:wrap;gap:8px}
.choice-pill{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));color:var(--ink-mid, var(--ink-soft));border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.choice-pill.on{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark, var(--accent));box-shadow:var(--mg-glow)}
/* Same weight on and off: a bolder chosen pill grew and pushed the row onto
an extra line (the owner, 2026-10-03). */
.choice-pill:focus-visible,.choice-pill button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill-step{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--accent-dark, var(--accent));font:inherit;font-size:17px;line-height:1;cursor:pointer}
.pill-step:disabled{opacity:.35;cursor:default}
.pill-count{min-width:16px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink)}
.choice-pills-note{margin-top:7px;font-size:12.5px;color:var(--ink-soft)}
/* Ingevuld vanuit een bron: een ijsblauwe streep links in het veld. */
.import-flag{display:none}
.field-flagwrap:has(.import-flag) > .form-input,
.field-flagwrap:has(.import-flag) > :first-child .form-input,
.field-flagwrap:has(.import-flag) > :first-child .app-select-btn{box-shadow:inset 3px 0 0 var(--accent)}
.meta-label:has(.import-flag) + .choice-pills,
.meta-label:has(.import-flag) + .appsel,
.span-2:has(> .import-flag) > :first-child{box-shadow:inset 3px 0 0 var(--accent);padding-left:10px;border-radius:2px}
/* "New artist" als één rustige regel. */
.add-page .festival-hint-new{background:none;border:0;padding:0;margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
/* De gevonden-melding van een release: hoesje, titel, regel, "Show ›". */
.match-hint.match-hint-cover{width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;flex-wrap:nowrap;gap:12px;margin:10px 0 4px;padding:10px 12px;border-radius:12px;
background:var(--mg-accent-tint, var(--suggest-bg));border:1px solid var(--mg-accent-line, var(--suggest-border))}
.match-hint-thumb{flex:none;width:48px;height:48px;object-fit:cover;background:var(--mg-fill, var(--bg-alt));box-shadow:0 6px 14px rgba(0,0,0,.35)}
.match-hint-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.match-hint-body strong{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-hint-meta{font-size:12.5px;color:var(--ink-mid, var(--ink-soft))}
.match-hint-cover .match-hint-basis{font-size:11.5px}
.match-hint-go{flex:none;font-weight:700;font-size:13px;color:var(--accent-dark, var(--accent))}
.match-hint-cover:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Gevonden op Setlist.fm, als op de show-pagina. */
.match-card.show-found{border-radius:14px;padding:14px;background:var(--mg-card-hi, var(--suggest-bg));border-color:var(--mg-accent-line, var(--suggest-border))}
.show-found-main + .show-found-main{border-top:1px solid var(--mg-line-soft, var(--line));margin-top:12px;padding-top:12px}
.show-found-kicker{font-size:12px;color:var(--ink-soft)}
.show-found-date{margin-top:4px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-live, var(--accent))}
.show-found-artist{font-weight:800;font-size:18px;color:var(--ink);margin-top:2px}
.show-found-tour{font-size:13.5px;color:var(--accent-dark, var(--accent))}
.match-card.show-found .show-found-use{display:block;width:100%;margin-top:12px;padding:11px 16px;font-size:14px}
.show-found-done{margin-top:12px}
.show-found-link{text-align:center;margin-top:8px}
.show-found-link .barcode-result-discogs-link{font-size:13px}
.match-card.show-found .match-card-others{border-top:1px solid var(--mg-line-soft, var(--line));margin-top:14px;padding-top:10px}
.show-found-others-label{font-size:12.5px;color:var(--ink-mid, var(--ink-soft));margin-bottom:2px}
.match-card.show-found .match-card-other{padding:8px 0;flex-wrap:nowrap}
.match-card.show-found .match-card-other + .match-card-other{border-top:1px solid var(--mg-line-soft, var(--line))}
.show-found-other-name{display:flex;flex-direction:column;min-width:0}
.show-found-other-name strong{font-size:14.5px}
.show-found-add{padding:6px 12px;font-size:13px;white-space:nowrap;border-radius:999px}
/* Kies je persing: hoes recht met schaduw, hele rij tikbaar. */
.match-picker-intro{font-size:13px;color:var(--ink-soft);margin:0 0 12px}
.add-page .barcode-result-cover{border-radius:0;width:72px;height:72px;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.add-page .barcode-result-title{font-size:14.5px}
.add-page .barcode-result-meta{font-size:12.5px}
.barcode-result-main{align-items:flex-start}
.barcode-result-go{align-self:center;flex:none;font-size:22px;color:var(--accent);line-height:1}
.barcode-result-owners:empty{display:none}
.barcode-result-footer:has(.barcode-result-owners:empty){justify-content:flex-end}
/* Private als schakelaar. */
.private-switch{display:flex;align-items:center;gap:12px;cursor:pointer;position:relative}
.private-switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.private-switch-text{display:flex;flex-direction:column;line-height:1.3}
.private-switch-text b{font-size:15px;color:var(--ink)}
.private-switch-text small{font-size:12.5px;color:var(--ink-soft)}
/* Het + menu: ronde gloeiende iconen. */
.add-menu .choose-option-icon{border-radius:50%;width:40px;height:40px;border:1.5px solid var(--accent);color:var(--accent);background:var(--mg-accent-tint, var(--bg-alt));box-shadow:var(--mg-glow)}
.add-actions-bar .form-missing{margin:10px 0 8px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Alleen de ronde terugknop; geen "RELEASES / Add a release" in de balk. */
body.mg-sub .content-topbar .topbar-page-label{visibility:hidden}
/* Sub-screens (Add, the account pages): see-through, only Back and the title (the owner, 2026-10-03/04). */
/* A sub-screen's top bar, and a detail page's (TODO.md item 182): see-
through, no search or avatar, Back glowing. */
body.mg-sub .content-topbar,.content-topbar.is-detail{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body.mg-sub .content-topbar .mg-search-btn,body.mg-sub .content-topbar .mg-top-avatar,body.mg-sub .content-topbar .search-wrap,
.content-topbar.is-detail .mg-search-btn,.content-topbar.is-detail .mg-top-avatar,.content-topbar.is-detail .search-wrap{display:none !important}
body.mg-sub .content-topbar .mg-top-back:not(.hidden),.content-topbar.is-detail .mg-top-back:not(.hidden){border-width:2px;box-shadow:var(--mg-ring-glow);background:var(--mg-ring-fill);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.add-page > .back-link{display:none}
/* Geen kaart: de groepen staan los, met een dunne lijn ertussen. */
.add-page > .panel{background:none;border:0;box-shadow:none;padding:0;margin-top:6px !important;border-radius:0}
.add-page .panel > h2,.add-page .panel > .choose-heading{font-stretch:100%;font-weight:800;font-size:28px;letter-spacing:.01em;text-transform:uppercase;line-height:1.05;margin:4px 0 16px}
.add-page .form-section{border-top:1px solid var(--mg-line-soft, var(--line))}
/* Vaste balk onderaan met Still needed, Cancel en Add; geen tabbalk. */
body.mg-add .main,body.mg-add #view{padding-bottom:0}
.add-actions-bar{position:sticky;bottom:0;z-index:40;margin:18px -16px 0;padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
background:var(--mg-tabbar);border-top:1px solid var(--chrome-line, var(--line));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.add-actions-bar .form-missing{background:none;padding:0;margin:0 0 8px;font-size:12.5px}
.add-actions-bar .action-row{margin-top:0 !important}
}
/* Placeholders (TODO.md item 180): one muted colour everywhere, the header
search's --mg-faint, instead of the old warm grey (the owner, 2026-10-03). */
::placeholder{color:var(--mg-faint);opacity:1}
/* ── Add, vervolg (de eigenaar, mockup 2026-10-03) ──
De scanner: een blad van onder met gloeiende hoeken, en altijd een
typveld — ook de weg verder als de camera niet start. */
.format-stepper{flex:none;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--mg-line-soft, var(--line));border-radius:999px;padding:2px 4px}
.scan-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.scan-sheet-head h2{margin:0}
.scan-sheet-close{display:none}
.barcode-scanner{border:0;box-shadow:0 0 0 1px var(--mg-accent-line, var(--line))}
.barcode-corner{border-color:var(--accent);filter:drop-shadow(0 0 6px var(--accent))}
.barcode-scan-caption{font-family:'Archivo',sans-serif;text-transform:none;letter-spacing:0;font-size:12.5px}
.barcode-scan-error{font-size:13.5px;color:var(--danger);text-align:center;max-width:320px;margin:12px 0 0}
.barcode-type{margin-top:16px}
.barcode-type .meta-label{font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.scan-sheet-close{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--mg-line-soft, var(--line));background:none;color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.sheet-modal .scan-sheet-head h2.sheet-title{margin:0}
.sheet-modal .barcode-scanner{max-width:none;aspect-ratio:4/3;border-radius:18px}
}
.barcode-scanner.failed .barcode-scan-line,.barcode-scanner.failed .barcode-scan-caption{display:none}
.paste-sheet-note{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Typing in a field with suggestions: room below it to scroll it up under
the top bar (events.js, focusin), and the Add bar back in the flow so
it doesn't sit on the list above the keyboard (the owner, 2026-10-03). */
body.kb-open .add-page:has(.place-suggest-wrap input:focus) > .panel{padding-bottom:55vh !important}
/* Keyboard up: the bar steps aside; keyboard down: back at the bottom —
keying it to the keyboard, not to a focused field, which kept it in
the middle of the page once the keyboard was closed (the owner). */
body.kb-open .add-actions-bar{display:none}
/* The searchable menu (Country): at the top of what's visible above the
keyboard, not a sheet at the bottom the keyboard covers (the owner,
2026-10-03) — the "menus as a sheet" rule above had taken it over. */
.year-filter-panel.fb-menu.app-select-panel.sheet{
top:calc(var(--vv-top, 0px) + 8px) !important;bottom:auto !important;height:calc(var(--vv-h, 100dvh) - 16px);max-height:none;
left:8px !important;right:8px !important;border-radius:20px;border:1px solid var(--mg-menu-line);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px}
.app-select-panel.sheet .app-select-search{flex:none}
.app-select-panel.sheet .app-select-rows{overflow-y:auto}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Where scrollSuggestFieldUp() (events.js) puts a field: under the top bar. */
.place-suggest-wrap input{scroll-margin-top:72px}
}
/* ── Format als kaartjes (de eigenaar, keuze B, mockup 2026-10-03) ──
Per formaat een kaartje met het object, de naam (maat in ijsblauw), het
aantal in woorden en ×n in koper; "+ Add format" gestippeld. Een blad
van onder: de lijst om toe te voegen, of de maat en het aantal. */
.format-cards{display:flex;flex-direction:column;gap:8px}
.format-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
background:var(--mg-card-hi, var(--card));border:1px solid var(--mg-line-soft, var(--line));border-radius:14px;padding:9px 12px}
.format-card:focus-visible,.format-card-add:focus-visible,.format-pick-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.format-card-obj{flex:none;width:34px;height:34px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.format-card-obj svg{width:100%;height:100%;display:block}
.format-card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.format-card-name{font-weight:700;font-size:15.5px}
.format-card-size{color:var(--accent-dark, var(--accent));font-weight:600}
.format-card-sub{font-size:12.5px;color:var(--ink-soft)}
.format-card-count{flex:none;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:16px;color:var(--mg-live, var(--accent))}
.format-card-go{flex:none;color:var(--ink-soft);font-size:20px;line-height:1}
.format-card-add{width:100%;font:inherit;font-weight:700;color:var(--accent-dark, var(--accent));background:none;cursor:pointer;
border:1.5px dashed var(--mg-accent-line, var(--line));border-radius:14px;padding:12px}
.meta-label:has(.import-flag) + .format-cards .format-card{box-shadow:inset 3px 0 0 var(--accent)}
.format-sheet .sheet-title{display:flex;align-items:center;gap:10px}
.format-sheet-obj{width:26px;height:26px;display:inline-block}
.format-sheet-obj svg{width:100%;height:100%;display:block}
.format-pick-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid var(--mg-line-soft, var(--line));background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.format-pick-row:last-of-type{border-bottom:0}
.format-pick-row:disabled{opacity:.45;cursor:default}
.format-pick-row .format-card-obj{width:28px;height:28px}
.format-pick-name{flex:1;font-size:16px;font-weight:600}
.format-pick-note{font-size:12.5px;color:var(--ink-soft)}
.format-sheet-note{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.format-sheet-sect{padding:6px 0 14px}
.format-sheet-sect + .format-sheet-sect{border-top:1px solid var(--mg-line-soft, var(--line));padding-top:14px}
.format-sheet-label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.format-sheet-count{display:flex;align-items:center;justify-content:space-between;gap:12px}
.format-sheet-count .format-sheet-label{margin:0}
.format-stepper.big{gap:14px;padding:4px 8px}
.format-stepper.big .pill-step{width:38px;height:38px;font-size:22px}
.format-stepper.big .pill-count{font-size:19px;min-width:24px}
.format-sheet .choice-pill{padding:8px 15px}
.format-sheet-done{display:block;width:100%;margin-top:6px}
.format-sheet-remove{display:block;width:100%;margin-top:10px;background:none;border:0;font:inherit;font-weight:600;font-size:14px;color:var(--danger);cursor:pointer;padding:8px}
/* Featuring and Acts: the same tinted field as the others (the owner, 2026-10-03). */
.add-page .name-list-box{background:var(--mg-fill, var(--card));border-color:var(--mg-fill-line, var(--line))}
.choice-pill:disabled{opacity:.38;cursor:default;box-shadow:none;text-decoration:line-through}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* The Add pages' title in the top bar, next to Back (the owner, 2026-10-03):
only the page's own name, the in-page heading goes. */
body.mg-sub .content-topbar .topbar-page-label{visibility:visible}
body.mg-sub .topbar-page-label .crumb-parent,body.mg-sub .topbar-page-label .crumb-sep{display:none}
body.mg-sub .topbar-page-label .crumb-name{font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mg-sub .content-topbar{justify-content:flex-start;gap:14px;position:relative}
/* The title centred on the screen, clear of Back (the owner, 2026-10-04). */
body.mg-sub .content-topbar .topbar-page-label{position:absolute;left:64px;right:64px;max-width:none;justify-content:center;text-align:center;pointer-events:none}
body.mg-sub .topbar-page-label .crumb-name{display:block}
.add-page .panel > h2.choose-heading{display:none}
}
/* ── Het datumblad (de eigenaar, keuze B, mockup 2026-10-03) ──
Eén veld met de datum in woorden ("March 2001 approx."); een tik opent
een blad: Exact · Month · Year (· Between bij een show), jaren per
decennium, maanden en dagen om te tikken — geen toetsenbord. */
.date-field{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;font:inherit}
.date-field.is-empty .date-field-text{color:var(--mg-faint)}
.date-field-approx{font-size:12px;color:var(--ink-soft);margin-left:4px}
.date-field-go{flex:none;color:var(--accent);font-size:20px;line-height:1}
.date-sheet-modes{margin:2px 0 6px}
.date-sheet-label{font-size:13px;color:var(--ink-soft);margin:14px 2px 8px}
.date-sheet-decade{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 8px}
.date-sheet-decade b{font-size:15px}
.date-sheet-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--mg-line-soft, var(--line));background:none;color:var(--accent);font-size:20px;line-height:1;cursor:pointer}
.date-sheet-nav:disabled{opacity:.3;cursor:default}
.date-sheet-grid{display:grid;gap:6px}
.date-sheet-grid .choice-pill{justify-content:center;padding:8px 0;font-size:14px}
.date-sheet-grid.years{grid-template-columns:repeat(5,1fr)}
.date-sheet-grid.months{grid-template-columns:repeat(6,1fr)}
.date-sheet-grid.months .choice-pill{font-size:13px}
.date-sheet-grid.days{grid-template-columns:repeat(7,1fr)}
.date-sheet-grid.days .choice-pill{padding:7px 0;font-size:13.5px}
.date-sheet-grid .choice-pill:disabled{text-decoration:none;opacity:.25}
.date-sheet-range{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.date-sheet-end{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 12px;border-radius:12px;border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));font:inherit;font-size:17px;font-weight:700;color:var(--ink);cursor:pointer}
.date-sheet-end small{font-size:11.5px;font-weight:500;color:var(--ink-soft)}
.date-sheet-end.on{border-color:var(--accent);box-shadow:var(--mg-glow)}
.date-sheet-done{display:block;width:100%;margin-top:18px}
.date-sheet .date-sheet-clear{color:var(--ink-soft)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.sheet-modal .modal.date-sheet{max-height:calc(var(--vh, 1vh) * 92);overflow-y:auto}
}
/* The top bar's search (the owner, 2026-10-04): the search button glows
while the bar is open, the field glows while you're in it, and the × is
always there — with nothing typed it closes the bar (events.js). */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.content-topbar.search-open .mg-search-btn{border-color:var(--accent);box-shadow:var(--mg-glow)}
.content-topbar .search-input:focus{border-color:var(--accent);box-shadow:var(--mg-glow);outline:none}
.content-topbar.search-open .search-clear{display:block}
}
/* ── Featuring en Acts als kaartjes (de eigenaar, keuze B, mockup 2026-10-03) ──
Zoals Format: een kaartje per naam met de initiaal; een act zegt ook zijn
rol, podium en tour (ijsblauw). Het toevoegblad staat direct boven het
toetsenbord (--kb-offset), de suggesties erboven. */
.name-cards{display:flex;flex-direction:column;gap:8px}
.name-card-row{display:flex;align-items:center;gap:6px}
.name-card-row .name-card{flex:1;min-width:0}
.name-card-ini{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent-dark, var(--accent));background:var(--mg-accent-tint);border:1px solid var(--mg-accent-line)}
.name-card-ini.warn{border-color:var(--mg-fav, #e0a850);color:var(--mg-fav, #e0a850)}
.name-card-body{flex:1;min-width:0;display:flex;flex-direction:column}
.name-card-name{font-weight:700;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-card-sub{font-size:12.5px;color:var(--ink-soft)}
.name-card-tour{color:var(--accent-dark, var(--accent))}
.name-sheet-title{display:flex;align-items:center;gap:10px}
.name-sheet-added{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.name-sheet-chip{font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--mg-accent-tint);color:var(--accent-dark, var(--accent))}
.name-sheet-field .name-add-input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--mg-fill, var(--card));border:1px solid var(--accent);border-radius:12px;padding:11px 13px;box-shadow:var(--mg-glow);outline:none}
.name-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.name-sheet-foot .link-hint{margin:0;font-weight:700}
.name-sheet .act-tour-input,.name-sheet .act-stage-input{width:100%;box-sizing:border-box}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.modal-overlay.sheet-modal.name-add-sheet{padding-bottom:var(--kb-offset, 0px)}
/* Suggestions above the field: the field sits on the keyboard. */
.name-add-sheet .place-suggest-panel{top:auto;bottom:calc(100% + 6px);max-height:min(300px, calc(var(--vv-h, 100vh) - 200px))}
.name-add-sheet .modal{overflow:visible}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Add pages: see-through at rest; once scrolled, a soft fade behind the
title so the page doesn't run through it (Add and the account pages, 2026-10-04). */
body.mg-sub.mg-scrolled .content-topbar{background:linear-gradient(180deg,var(--mg-tabbar) 62%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
/* Song page: Versions and Where it turns up together in the main column
(the owner, 2026-10-04: Where it turns up between Versions and Heard live). */
.song-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.song-main:empty{display:none}
/* The top bar's search suggestions in Midnight Glow (the owner, 2026-10-04):
the inner scroll layer still painted the old flat card colour over the
panel's gradient — see-through now, the panel as the sheets and menus
(gradient, glow line, blur), as wide as the search field. */
.gsearch-panel .year-filter-panel-scroll{background:transparent;border:0;border-radius:0;box-shadow:none}
/* The page's own glow behind the suggestions, not one flat blue (the owner, 2026-10-04). */
.gsearch-panel{background:var(--mg-bg-glow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.content-topbar .gsearch-panel{left:0;right:0;width:auto;max-width:none}
}
.field-flagwrap:has(.import-flag) > .artist-card{box-shadow:inset 3px 0 0 var(--accent)}
.sheet-modal .rel-history-body{margin-top:0;border-top:0;padding-top:0}
/* History: room under "Added" like under "Edits", and between the two. */
.rel-history-body .hist-label + .hist-line{padding-top:8px;margin-bottom:22px !important}
/* ==========================================================================
Bottom sheets — ONE look for all of them (the owner, 2026-10-04)
Every sheet that opens from the bottom on a phone gets the same glowing
grip and the same glow line along its top edge, from these two rules
only; the per-sheet rules above just place the grip. A NEW bottom sheet:
render it with sheetModalHTML() (utils.js) — the .sheet-modal pop-up
gets the look, swipe-down / grip / tap-beside closing (events.js
SHEET_PANELS) and the phone's Back closing (navigation.js SHEET_LAYERS)
for free. Only a sheet that can't be a .sheet-modal goes in these lists.
========================================================================== */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.sheet-modal .modal::before,
.year-filter-panel.hero-more-panel::before,
.year-filter-panel.fb-menu:not(.sheet)::before,
.year-filter-panel.cf-panel::before,
.cf-sheet-head::before,
.add-menu::before,
.user-menu-sheet-grip{width:48px;height:5px;border-radius:5px;background:var(--accent);box-shadow:var(--mg-glow);opacity:.85}
.sheet-modal .modal::after,
.year-filter-panel.hero-more-panel::after,
.year-filter-panel.fb-menu:not(.sheet)::after,
.year-filter-panel.cf-panel::after,
.year-filter-panel.tag-manage-panel::after,
.add-menu::after,
.sidebar .user-menu-panel::after{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow);pointer-events:none}
}
/* The tagline under every page — one look (the owner, 2026-10-04): it was
written again for each page as Midnight Glow reached it (six copies of
the glow line), all ending up the same. Markup: pageTaglineHTML(). */
.mg-page-tagline{display:block;text-align:center;font-stretch:100%;font-weight:500;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mg-label);padding:0 16px 6px}
.mg-page-tagline::before{content:"";display:block;height:2px;margin:22px -16px 16px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow)}
.mg-page-tagline span{display:inline}
/* ==========================================================================
Account pages in Midnight Glow (the owner's picks, mockup 2026-10-04)
Everything behind the avatar menu but Admin (body.mg-acct): the title
sits in the top bar (mg-sub), no second title, no tab bar, no cards —
a section heading with its content and a thin line between sections.
========================================================================== */
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks): the title in the top bar, no cards. */
body.mg-acct #view .page-title,
body.mg-acct #view .rail-back,
body.mg-acct #view .acct-head h2{display:none}
body.mg-acct #view .page-sub,body.mg-acct #view .acct-head-sub{margin-top:4px;color:var(--ink-soft)}
body.mg-acct #view .panel{background:none;border:0;box-shadow:none;border-radius:0;padding:16px 0;margin:0}
body.mg-acct #view .panel + .panel,
body.mg-acct #view .settings-stack > * + *{border-top:1px solid var(--mg-line-soft, var(--line))}
body.mg-acct #view .settings-stack{gap:0}
body.mg-acct #view .settings-group-title,
body.mg-acct #view .panel .section-title,
body.mg-acct #view .panel > h2,
body.mg-acct #view .panel > h3{font-family:'Archivo',sans-serif;font-stretch:110%;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
body.mg-acct .main,body.mg-acct #view{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
/* The Account and Help Center lists: rows like the avatar menu — an icon,
the name, a count, › (the owner, 2026-10-04). Icons on a phone only. */
.acct-tab-icon{display:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body.mg-acct .rail-page.is-list .profile-sidebar{display:flex;flex-direction:column;background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:4px 0 0;gap:0;overflow:visible}
body.mg-acct .rail-page.is-list .acct-rail-group{display:none}
body.mg-acct .rail-page.is-list .profile-side-btn{display:flex;align-items:center;gap:14px;width:100%;padding:11px 2px;margin:0;border:0;border-bottom:1px solid var(--mg-line-soft, var(--line));border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:15.5px;font-weight:600;text-align:left}
body.mg-acct .rail-page.is-list .profile-side-btn:last-child{border-bottom:0}
body.mg-acct .rail-page.is-list .profile-side-btn::after{content:"\203A";margin-left:8px;color:var(--accent);font-size:20px;line-height:1}
body.mg-acct .rail-page.is-list .acct-tab-label{flex:1;min-width:0}
body.mg-acct .rail-page.is-list .acct-tab-count{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);background:none;border:0;padding:0}
body.mg-acct .acct-tab-icon{display:grid}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Updates and Replay the tour: rows like the rest, not centred capitals. */
body.mg-acct .rail-page.is-list .profile-rail-divider{display:block;border:0;height:14px;margin:0}
body.mg-acct .rail-page.is-list .profile-side-btn{text-align:left !important}
body.mg-acct .rail-page.is-list .acct-tab-label.is-caps{text-transform:none;letter-spacing:0;font-weight:600}
body.mg-acct .rail-page.is-list .tour-arrow{display:none}
}
/* settingSwitchHTML(): an on/off setting as a switch, with its state in
words beside it (the owner, 2026-10-04). Private on Add (a checkbox, not
a button) shares the track's rules (TODO.md item 182). */
.setting-switch{display:inline-flex;align-items:center;gap:10px;flex:none;background:none;border:0;padding:4px 0;font:inherit;color:var(--ink-soft);cursor:pointer}
.setting-switch:disabled{opacity:.45;cursor:default}
.setting-switch-text{font-size:13px}
.setting-switch.is-on .setting-switch-text{color:var(--accent-dark, var(--accent));font-weight:600}
.setting-switch-track,.private-switch-track{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--mg-fill, var(--bg-alt));border:1px solid var(--mg-line-soft, var(--line));transition:background .15s}
.setting-switch-track::after,.private-switch-track::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--mg-faint, var(--ink-soft));transition:transform .15s,background .15s}
.setting-switch.is-on .setting-switch-track,.private-switch input:checked + .private-switch-track{background:var(--mg-accent-tint);border-color:var(--accent);box-shadow:var(--mg-glow)}
.setting-switch.is-on .setting-switch-track::after,.private-switch input:checked + .private-switch-track::after{transform:translateX(18px);background:var(--accent)}
.setting-switch:focus-visible .setting-switch-track,.private-switch input:focus-visible + .private-switch-track{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.setting-switch-track,.setting-switch-track::after,.private-switch-track,.private-switch-track::after{transition:none}}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks). */
/* The account pages' remaining choices (three or more, or two that
aren't on/off — Grid | List): pills, like the Add pages' Type. */
.acct-part-sheet .segmented,
body.mg-acct #view .segmented{display:flex;flex-wrap:wrap;gap:8px;background:none;border:0;padding:0;box-shadow:none;width:auto !important}
.acct-part-sheet .segmented > button,
body.mg-acct #view .segmented > button{flex:none !important;padding:7px 14px;font:inherit;font-size:14px;box-shadow:none}
/* Rows that open a sheet (My account's parts; Views & filters' pages;
Services) — the same row as the Account list (the owner, 2026-10-04). */
.acct-rows{display:flex;flex-direction:column}
.acct-row{display:flex;align-items:center;gap:14px;width:100%;padding:11px 2px;border:0;border-bottom:1px solid var(--mg-line-soft, var(--line));background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.acct-row:last-child{border-bottom:0}
.acct-row::after{content:"\203A";margin-left:auto;color:var(--accent);font-size:20px;line-height:1}
.acct-row-body{flex:1;min-width:0;display:flex;flex-direction:column}
.acct-row-label{font-size:15.5px;font-weight:600}
.acct-row-sub,.list-edit-sub{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-row-sub.is-on{color:var(--accent-dark, var(--accent))}
.acct-row.is-danger .acct-row-label{color:var(--danger)}
.acct-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The round row icon — the account / Help Center / Admin lists and every .acct-row (one rule, TODO.md item 182; shown on a phone only in the lists, see .acct-tab-icon above). */
.acct-row .acct-tab-icon{display:grid}
.acct-row .acct-tab-icon,body.mg-acct .acct-tab-icon{place-items:center;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--mg-accent-line);color:var(--accent);background:var(--mg-accent-tint)}
.acct-row .acct-tab-icon svg,body.mg-acct .acct-tab-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.acct-part-sheet .settings-group-title{font-size:13px;margin-top:14px}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks). */
/* Notifications (the owner, 2026-10-04): Push on top, the list without a
card, an unread one marked by a glowing dot only. */
body.mg-acct .notif-layout{display:flex;flex-direction:column;gap:0}
body.mg-acct .notif-col-side{order:-1}
body.mg-acct .notif-pills{order:0;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px}
body.mg-acct .notif-col-main{order:1}
body.mg-acct .notif-pill{padding:6px 13px;font-size:13.5px;box-shadow:none}
body.mg-acct .notif-list-actions{justify-content:flex-end;gap:16px;font-size:13px;margin-bottom:4px}
body.mg-acct .notif-row{background:none !important;border:0 !important;border-bottom:1px solid var(--mg-line-soft, var(--line)) !important;border-radius:0 !important;box-shadow:none !important;padding:12px 0 !important;gap:12px}
body.mg-acct .notif-row:last-child{border-bottom:0 !important}
body.mg-acct .notif-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent);box-shadow:var(--mg-glow)}
body.mg-acct .notif-dot.read{background:transparent;box-shadow:none}
body.mg-acct .notif-row:not(.unread) .notif-row-title{color:var(--ink-mid, var(--ink-soft));font-weight:500}
body.mg-acct .notif-time{font-family:'Archivo',sans-serif;font-size:12px}
body.mg-acct .notif-col-side .panel{padding-top:8px}
body.mg-acct .notif-row.unread::before{display:none}
body.mg-acct .notif-col-side .filter-row{flex-direction:row !important;align-items:center !important;justify-content:space-between;gap:14px !important}
/* Connections: the Sharing & discovery row and its own screen. */
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks). */
body.mg-acct .conn-sharing-row{display:flex;margin:6px 0 4px;border-bottom:1px solid var(--mg-line-soft, var(--line))}
body.mg-acct .conn-page:not(.conn-sharing-screen) .conn-col-side{display:none}
body.mg-acct .conn-sharing-screen .section-head{display:none}
.cs-row-icon{font-weight:800;font-size:14px}
/* A service's card, an account part or a page's defaults inside a sheet:
no card of its own — the sheet is the surface. */
.acct-part-sheet .panel{background:none;border:0;box-shadow:none;padding:0;margin:0}
.acct-part-sheet .cs-stats{margin-top:14px}
/* Release notes: the version in copper, its lines grouped under Added /
Changed / Fixed (the owner, 2026-10-04). */
.rn-group + .rn-group{margin-top:10px}
.rn-kind{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid var(--mg-accent-line, var(--line));background:var(--mg-accent-tint, var(--bg-alt));color:var(--accent-dark, var(--accent))}
.rn-kind--fixed{border-color:var(--mg-live-line, var(--line));background:var(--mg-live-tint, var(--bg-alt));color:var(--mg-live-ink, var(--ink))}
.rn-group ul{margin:6px 0 0;padding-left:18px}
.rn-group li{margin:4px 0;line-height:1.45}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body.mg-acct .release-note-v{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:0;color:var(--mg-live, var(--accent))}
body.mg-acct .release-note-date{font-family:'Archivo',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-left:6px}
/* Feedback: the kind as pills, like Type on the Add pages. */
.acct-part-sheet .year-chip,
body.mg-acct #view .year-chip{padding:7px 15px;font:inherit;font-size:14px;letter-spacing:0;text-transform:none;box-shadow:none}
/* An empty page: a quiet icon and the sentence, no card. */
body.mg-acct #view .acct-panel-empty,
body.mg-acct #view .empty-state,
body.mg-acct #view .conn-empty,
body.mg-acct #view .notif-empty{background:none;border:0;box-shadow:none;text-align:center;color:var(--ink-soft);padding:36px 20px 20px}
body.mg-acct #view .acct-panel-empty::before,
body.mg-acct #view .empty-state::before,
body.mg-acct #view .notif-empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;border:1.5px solid var(--mg-accent-line);background:var(--mg-accent-tint);box-shadow:var(--mg-glow);opacity:.8}
}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* A pre-selected filter left out: struck through, like the Filters sheet. */
.acct-part-sheet .year-chip.excluded{color:var(--ink-soft);text-decoration:line-through;background:none}
}
/* The tour in Midnight Glow (the owner, 2026-10-04): the card as the
sheets — a gradient, the glow line on top, a glowing outline — the
highlight glowing, Next as a pill. */
.tour-tooltip{background:var(--mg-sheet, var(--card));border:1px solid var(--mg-accent-line, var(--line));border-radius:18px;padding:18px 18px 14px;box-shadow:var(--mg-glow),0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.tour-tooltip::before{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow)}
.tour-tooltip-title{font-stretch:110%;font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.tour-tooltip-text{font-size:14px;line-height:1.5;color:var(--ink-mid, var(--ink-soft))}
.tour-tooltip-footer{margin-top:16px}
.tour-step-count{font-family:'Archivo',sans-serif;font-size:12.5px;color:var(--mg-live, var(--ink-soft));font-weight:700}
.tour-tooltip-actions{align-items:center;gap:14px}
.tour-tooltip-actions button{font-size:13.5px}
.tour-tooltip-actions .tour-next{background:var(--mg-btn-bg, var(--accent));color:var(--mg-btn-ink, #fff);border-radius:999px;padding:8px 16px;box-shadow:var(--mg-btn-shadow, none)}
.tour-highlight{border-radius:14px;box-shadow:0 0 0 2px var(--accent),0 0 18px 2px rgba(79,195,247,.6),0 0 0 9999px rgba(3,8,20,.62)}
/* Account pages, follow-up (the owner's review, 2026-10-04). */
.tour-alert-toggle{justify-content:space-between;gap:12px}
.trash-actions{display:flex;align-items:center;gap:8px;flex:none}
.trash-restore{padding:6px 14px;font-size:13px;border-radius:999px}
.trash-delete{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb, var(--danger) 55%, transparent);background:none;color:var(--danger);cursor:pointer;flex:none}
/* A small bare icon in a button or label (one rule, TODO.md item 182). */
.trash-delete svg,.admin-fb-type svg,.admin-2fa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trash-delete:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks): the avatar menu's gradient and the account pages' fixes. */
/* The avatar menu: the sheets' gradient, not one flat colour. */
.sidebar .user-menu-panel{background:var(--mg-sheet-page)}
/* Notifications: the list as wide as the page however short it is, and
Clear all at the right edge (flex start shrank it to its content). */
body.mg-acct .notif-layout{align-items:stretch}
body.mg-acct .notif-list{width:100%}
body.mg-acct .notif-list-actions .notif-list-actions-gap{flex:1}
/* Your connections: the heading on one line, Add new connection under it. */
body.mg-acct .conn-head{flex-direction:column;align-items:flex-start;gap:10px}
body.mg-acct .conn-head .section-title{white-space:nowrap}
/* Private / Visible / Default under a connection: pills, no box around them. */
body.mg-acct .pill-group{background:none;border:0;padding:0;gap:8px;flex-wrap:wrap}
body.mg-acct .pill-group button{border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));font-size:13px;padding:6px 13px}
/* Help Center: Updates and Replay the tour clearly apart from the articles. */
body.mg-acct .rail-page.is-list .profile-rail-divider{height:0;margin:14px 0 10px;border:0;border-top:1px solid var(--mg-accent-line)}
/* Trash: the 60-days sentence is already under the title. */
body.mg-acct .trash-keep-note{display:none}
/* Viewing someone's collection: the Switch menu on the sheets' own page
background, not see-through (the owner, 2026-10-04). */
.viewing-bar .view-switch-menu{background:var(--mg-sheet-page);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* Notifications: no "2 unread · 47 total" line (the owner, 2026-10-04) —
the pills carry the counts, an unread one its glowing dot. */
body.mg-acct .notif-lede{display:none}
/* Viewing someone's collection: the bar above the top bar, not over a
detail page's hero (the owner, 2026-10-04). On a detail page the head is
fixed, so the page moves down by the bar's height (--viewing-bar-h,
measured in render.js) and the bar takes the notch's inset. */
.content-head{display:flex;flex-direction:column}
.content-head .header-stack{order:-1}
html.viewing-as body.mg-detail #view{margin-top:var(--viewing-bar-h, 0px)}
html.viewing-as body.mg-detail .viewing-bar:not(.hidden){padding-top:env(safe-area-inset-top, 0px)}
html.viewing-as body.mg-detail .content-topbar{padding-top:8px}
/* A page the viewed account doesn't share: its name is already in the
top bar, so no second title above "X isn't sharing …" (the owner, 2026-10-04). */
body.mg-main .view-locked .page-title{display:none}
/* Your connections / People without an account: the lock before the count. */
body.mg-acct .conn-page .section-title{display:flex;align-items:center;gap:8px}
body.mg-acct .conn-page .section-title .personal-section-tag{display:inline-flex;margin:0}
/* Help Center: no thin line under the last article above the glow line. */
body.mg-acct .rail-page.is-list .profile-side-btn:has(+ .profile-rail-divider){border-bottom:0}
}
/* ── Sign-in screens in Midnight Glow (the owner's picks, 2026-10-04) ──
One set of pieces for every screen (auth.js authScreenHTML / authFieldHTML
/ authCodeHTML / authMsgHTML): the field's name above it as on the Add
pages, an eye in a password field, the password rule as five checks,
six cells for a code, messages as a line with an icon, the links plain
ice blue, "Step N of 4" while making an account. On a phone the form sits
on the page under a glow line, no card. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.auth-brand--small{flex-direction:row;gap:10px}
.auth-brand--small .auth-brand-mark{width:34px;height:34px;border-radius:9px}
.auth-brand--small .auth-wordmark{font-size:16px;letter-spacing:.06em}
.auth-card h1{font-family:'Archivo',sans-serif;font-weight:800;font-size:25px;line-height:1.1;margin:0 0 10px}
.auth-card p{font-size:14px;line-height:1.45;color:var(--ink-mid, var(--ink-soft));margin:0 0 4px}
.auth-steps{display:flex;align-items:center;gap:7px;margin:0 0 12px}
.auth-step{width:7px;height:7px;border-radius:4px;background:var(--mg-line-soft, var(--line))}
.auth-step.is-done{background:var(--accent)}
.auth-step.is-current{width:18px;background:var(--accent);box-shadow:var(--mg-glow)}
.auth-steps-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label, var(--ink-soft));margin-left:4px}
.auth-field{margin-top:14px}
.auth-field .meta-label{display:block;margin-bottom:6px;font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-mid, var(--ink-soft))}
.auth-optional{font-weight:500;color:var(--ink-soft)}
.auth-field .form-input{width:100%;font-size:16px}
.auth-pw{position:relative}
.auth-pw .form-input{padding-right:46px}
.auth-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;background:none;color:var(--ink-soft);cursor:pointer;border-radius:50%}
.auth-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-eye[aria-pressed="true"]{color:var(--accent)}
.auth-hint{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.pw-checks{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:10px;font-size:12.5px}
.pw-check{display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.pw-check-mark{width:15px;height:15px;border-radius:50%;border:1px solid var(--mg-line-soft, var(--line));display:grid;place-items:center;font-size:9px;flex:none}
.pw-check.is-ok{color:var(--accent)}
.pw-check.is-ok .pw-check-mark{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);box-shadow:var(--mg-glow)}
.code-cells{position:relative;margin-top:16px}
.code-cells-row{display:flex;gap:8px;justify-content:center;pointer-events:none}
.code-cell{width:44px;height:54px;border-radius:12px;border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:23px;color:var(--ink)}
.code-cells:focus-within .code-cell.is-next{border-color:var(--mg-accent-line);box-shadow:var(--mg-glow)}
.code-cells .code-cells-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px}
.code-cells.is-text .code-cells-row{display:none}
.code-cells.is-text .code-cells-input{position:static;opacity:1;height:auto;text-align:center;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;font-size:18px}
.auth-card .submit-btn{margin-top:20px}
.auth-msg{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4;margin:6px 0 2px}
.auth-msg-icon{width:17px;height:17px;flex:none;margin-top:1px}
.auth-msg-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.auth-msg--error{color:var(--danger)}
.auth-msg--success{color:var(--accent)}
.auth-msg--note{color:var(--ink-soft);justify-content:center;text-align:left;margin-top:14px;font-size:13px}
.auth-links{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.auth-links .link-btn{text-decoration:none;font-size:14.5px;font-weight:700;color:var(--accent)}
.auth-or{display:flex;align-items:center;gap:10px;margin:22px 0 12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--mg-line-soft, var(--line))}
.auth-alt-btn{display:block;width:100%;padding:11px 18px;font-size:14px;font-weight:700}
.auth-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:14px;color:var(--ink)}
.auth-wait{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-top:10px}
.auth-wait p{margin:0}
.auth-wait-ring{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--mg-accent-line, var(--accent));background:var(--mg-accent-tint);box-shadow:var(--mg-glow);display:grid;place-items:center;color:var(--accent)}
.auth-wait-ring svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-line{font-size:12.5px;color:var(--ink-soft);text-align:center}
.install-line-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.install-line-icon{width:16px;height:16px;display:inline-grid}
.install-line-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-line .link-btn{text-decoration:none;font-weight:700;font-size:12.5px}
/* The language choice under every sign-in screen (TODO.md item 134): quiet,
the one in use in the ink colour, the others as links. */
.auth-lang{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.auth-lang .link-btn{text-decoration:none;font-weight:600;font-size:12.5px;color:var(--accent)}
.auth-lang .link-btn.is-current{color:var(--ink);cursor:default}
.install-line-more{margin-top:10px;text-align:left;line-height:1.5}
.install-line-more .ip-btn{margin-left:6px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.auth-screen:has(.auth-brand--small){justify-content:flex-start;padding-top:calc(26px + env(safe-area-inset-top, 0px))}
.auth-stack{max-width:none;gap:30px}
.auth-card{position:relative;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:26px 8px 0}
.auth-card::before{content:"";position:absolute;left:10px;right:10px;top:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow)}
}
/* ── Edit release / Edit show in Midnight Glow (the owner's picks,
2026-10-04) — built as an .add-page, so the Add pages' look (no card,
plain field names, the bar at the bottom) comes along; below only what's
the Edit screens' own: the link rows, the list rows with their grip and
sheet, the cover's round buttons. ── */
.edit-tabs{margin-top:4px}
.link-rows{margin:0 0 6px;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.link-row.has-end::after{content:none}
.link-row-end{margin-left:auto;color:var(--accent);font-size:13.5px;font-weight:700;white-space:nowrap}
.link-row-end::after{content:" \203A";font-size:16px}
.link-rows-note{margin:0 0 10px}
.link-sheet-head{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
.link-sheet-head .acct-tab-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--mg-accent-line);color:var(--accent);background:var(--mg-accent-tint)}
.link-sheet-head .acct-tab-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.link-sheet-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px}
.link-sheet-sub{font-size:12.5px;color:var(--accent-dark, var(--accent))}
.link-sheet .acct-row{text-decoration:none}
.acct-row.is-danger .acct-tab-icon{color:var(--danger);border-color:var(--danger);background:none}
/* Tracklist / setlist rows. */
.list-editor{margin:4px 0 0}
.list-editor .editor-group{gap:0;border:0;border-radius:0;padding:0;margin:0;background:none;box-shadow:none}
.list-edit-wrap{display:flex;align-items:stretch;gap:6px}
.list-grip{flex:none;display:flex;align-items:center;justify-content:center;width:22px;color:var(--ink-soft);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.list-grip svg{width:11px;height:16px;fill:currentColor}
.list-edit-wrap.dragging{opacity:.45}
.list-edit-row{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 2px;border:0;border-bottom:1px solid var(--mg-line-soft, var(--line));background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.list-edit-row::after{content:"\203A";color:var(--accent);font-size:19px;line-height:1;margin-left:2px}
.list-edit-no{flex:none;min-width:24px;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-soft)}
.list-edit-no s{opacity:.6;margin-right:3px}
.list-edit-main{flex:1;min-width:0;display:flex;flex-direction:column}
.list-edit-title{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-edit-title.is-empty{color:var(--mg-faint, var(--ink-soft));font-weight:500}
.list-edit-len{flex:none;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-mid, var(--ink-soft))}
.list-edit-row--heading .list-edit-title{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label, var(--ink-soft))}
.list-edit-row--subheading .list-edit-title{font-style:italic;font-weight:500;color:var(--ink-mid, var(--ink-soft))}
.list-edit-row.renumber-drop{opacity:.45;text-decoration:line-through}
.list-edit-marker{flex:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:16px 2px 6px}
.list-edit-wrap.is-fixed .list-edit-marker{padding-left:28px}
.list-edit-marker-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-right:auto}
.list-edit-marker .link-btn{text-decoration:none;font-weight:700;font-size:13.5px}
.list-edit-marker .link-btn.danger{color:var(--danger)}
.list-edit-marker.is-stale .list-edit-marker-title{color:var(--ink-soft)}
.list-add-main{display:block;width:100%;margin-top:14px}
.list-add-more{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;margin:12px 0 4px}
.list-add-more .link-btn{text-decoration:none;font-weight:700;font-size:13.5px}
.list-paste{margin:12px 0 4px}
.list-item-sheet .list-sheet-fields{display:flex;flex-direction:column;gap:10px}
.list-sheet-field .meta-label{display:block;margin-bottom:6px;font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-mid, var(--ink-soft))}
.list-sheet-field .form-input{width:100%;font-size:16px}
.list-sheet-grid{display:grid;grid-template-columns:76px 1fr;gap:10px}
.list-sheet-grid--end{grid-template-columns:1fr 90px}
.list-sheet-moves{display:flex;gap:8px;margin:16px 0 12px}
.list-sheet-moves .btn-outline{flex:1;padding:10px 12px;font-size:13.5px;font-weight:700}
.list-sheet-moves .list-sheet-delete{flex:none;width:46px;padding:0;display:grid;place-items:center;color:var(--danger)}
.list-sheet-delete svg,.admin-icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.list-item-sheet .submit-btn{width:100%}
/* The cover: round Replace and Delete under it. */
.edit-cover{max-width:320px;margin:0 auto}
.edit-cover-actions{display:flex;justify-content:center;gap:36px;margin-top:18px}
.round-action{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.round-action svg{box-sizing:border-box;width:56px;height:56px;padding:16px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);background:var(--mg-accent-tint);box-shadow:var(--mg-glow);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.round-action--danger svg{border-color:var(--danger);color:var(--danger);background:none;box-shadow:none}
/* A festival hint as a line with an icon, no box (also on Add). */
.add-page .festival-hint{position:relative;display:block;background:none;border:0;border-radius:0;padding:0 0 0 23px;margin:8px 0 2px;font-size:13px;line-height:1.45;color:var(--ink-mid, var(--ink-soft))}
.add-page .festival-hint::before{content:"";position:absolute;left:0;top:2px;box-sizing:border-box;width:15px;height:15px;border-radius:50%;border:1.5px solid currentColor;background:radial-gradient(circle,currentColor 0 2.5px,transparent 3px);opacity:.9}
.add-page .festival-hint-join{color:var(--accent-dark, var(--accent))}
.add-page .festival-hint-near{color:var(--warn-ink)}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body.mg-edit .main,body.mg-edit #view{padding-bottom:0}
/* The bar always at the bottom of the screen — sticky only reaches it on
a page longer than the screen, and Cover is short (the owner, 2026-10-05). */
body.mg-edit .edit-page .add-actions-bar{position:fixed;left:0;right:0;bottom:0;margin:0}
body.mg-edit .edit-page > .panel{padding-bottom:150px}
}
/* ── The import review as a tall sheet (Midnight Glow, the owner's picks
2026-10-05): switches for what, pills for how, one sentence for what
Save does, the rows that change (old → new) with the rest folded, the
list as one row, Cancel / Save in a bar at the bottom of the sheet. ── */
.reimport-sheet .reimport-subtitle{font-size:13px;color:var(--ink-soft);margin:-4px 0 10px}
.reimport-switches{display:flex;flex-direction:column}
.reimport-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.reimport-switch-row strong{font-size:15px}
.reimport-how{margin-top:14px}
.reimport-how-caption{font-size:12.5px;color:var(--ink-soft);margin-top:7px}
.reimport-summary{margin-top:14px;font-size:15px;color:var(--ink-mid, var(--ink-soft))}
.reimport-summary.is-change{color:var(--accent-dark, var(--accent));font-weight:600}
.reimport-sheet .reimport-section-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label, var(--ink-soft));margin:20px 0 4px}
.reimport-row{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--mg-line-soft, var(--line));background:none;font:inherit;color:var(--ink);text-align:left}
.reimport-row-name{flex:1;min-width:0}
.reimport-row .reimport-k{font-size:14.5px;font-weight:600;color:var(--ink)}
.reimport-row .reimport-sub{font-size:12px;color:var(--ink-soft)}
.reimport-row-value{text-align:right;font-size:14px;max-width:60%;overflow-wrap:anywhere}
.reimport-row-value .reimport-cover{width:34px;height:34px;vertical-align:middle;object-fit:cover}
.reimport-old{color:var(--ink-soft)}
.reimport-arrow{color:var(--ink-soft)}
.reimport-new{font-weight:700;color:var(--accent-dark, var(--accent))}
.reimport-row .reimport-tag{flex:none;align-self:center}
.reimport-unchanged-toggle{justify-content:space-between;align-items:center;color:var(--accent);font-weight:700;font-size:14px;cursor:pointer}
.reimport-unchanged-toggle span{font-size:18px;line-height:1}
.reimport-sheet .reimport-empty{font-size:13px;color:var(--ink-soft);padding:8px 0}
.reimport-which{display:inline-block;margin-top:10px;text-decoration:none;font-weight:700;font-size:13.5px}
.reimport-list{margin-top:6px}
.reimport-list-heading{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label, var(--ink-soft));padding:10px 0 4px}
.reimport-list-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;color:var(--ink-mid, var(--ink-soft));border-bottom:1px solid var(--mg-line-soft, var(--line))}
.reimport-dot{width:7px;height:7px;border-radius:50%;flex:none}
.reimport-list-row.is-new{color:var(--ink);font-weight:700}
.reimport-list-row.is-new .reimport-dot{background:var(--accent);box-shadow:var(--mg-glow)}
.reimport-list-row.is-removed .reimport-dot{background:var(--danger)}
.reimport-list-title{flex:1;min-width:0}
.reimport-list-new{color:var(--accent);font-size:12px;font-weight:700}
.reimport-notpart{font-size:12px;color:var(--ink-soft);margin:14px 0 4px}
.reimport-bar{display:flex;gap:10px;margin-top:16px}
/* ==========================================================================
Admin in Midnight Glow (the owner's picks, mockup 2026-10-05; markup in
admin-phone.js). On a phone Admin is one of the account pages (mg-acct):
Back and the name in the top bar, no tab bar, no cards. The rail on a
wider screen keeps its look; only its groups are new.
========================================================================== */
.admin-tab-sub,.admin-waiting{display:none}
.admin-page .acct-rail-group:first-child{padding-top:3px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* The list: one copper line instead of the tiles, three groups, a row
with the icon, name and the tab's one-line explanation, the count
copper when it waits on you. */
body.mg-acct .admin-page > .page-sub{display:none}
body.mg-acct .admin-page .acct-head{display:none}
.admin-waiting{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:700;font-size:14.5px;color:var(--ink-soft)}
.admin-waiting.is-due{color:var(--mg-live-ink, var(--warn-ink))}
.admin-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mg-live, var(--warn-ink));box-shadow:var(--mg-live-glow, none)}
body.mg-acct .admin-page.is-list .profile-layout{margin-top:6px !important}
body.mg-acct .admin-page.is-list .acct-rail-group{display:block;margin:16px 2px 2px;padding:0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label)}
body.mg-acct .admin-page.is-list .profile-side-btn{border-bottom:1px solid var(--mg-line-soft, var(--line)) !important}
body.mg-acct .admin-page.is-list .acct-tab-label{white-space:normal}
body.mg-acct .admin-page.is-list .admin-tab-sub{display:block;white-space:normal;font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-top:1px;line-height:1.35}
body.mg-acct .admin-page.is-list .acct-tab-count.is-due{color:var(--mg-live-ink, var(--warn-ink));font-weight:600}
/* Shared pieces */
.admin-row-sub{display:block;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.admin-row-count{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);flex:none}
.admin-row-count.is-due{color:var(--mg-live-ink, var(--warn-ink));font-weight:600}
.admin-ini{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);background:var(--mg-accent-tint);color:var(--accent);font-weight:800;font-size:13px;letter-spacing:.02em}
.admin-ini.is-big{width:72px;height:72px;font-size:22px;margin:0 auto;box-shadow:var(--mg-glow)}
.admin-chip{display:inline-block;vertical-align:2px;margin-left:4px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent)}
.admin-chip.is-grey{background:none;border-color:var(--mg-line-soft, var(--line));color:var(--ink-soft)}
.admin-quiet{color:var(--ink-soft);font-size:14px;padding:22px 2px;text-align:center}
.admin-empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--ink-soft);font-size:14.5px;padding:56px 24px 20px}
.admin-empty-ring{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent);box-shadow:var(--mg-glow)}
.admin-empty-ring svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.admin-group-title{margin-top:22px !important}
.admin-search{margin:6px 0 10px}
.admin-search .search-field{display:block;max-width:none}
/* Pills with a count, and a round icon button beside them. */
.admin-filter-bar{display:flex;align-items:center;gap:10px;margin:6px 0 8px}
.admin-pills{display:flex;flex-wrap:nowrap;gap:7px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.admin-pills::-webkit-scrollbar{display:none}
.admin-page .fb-hint{font-family:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;background:none;padding:0}
.admin-pill{padding:6px 13px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.admin-pill-n{font-family:'IBM Plex Mono',monospace;font-size:11px;margin-left:6px;opacity:.8}
.admin-icon-btn{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));color:var(--accent);cursor:pointer}
.admin-icon-btn.is-on{border-color:var(--mg-accent-line);background:var(--mg-accent-tint);box-shadow:var(--mg-glow)}
.admin-filter-note{font-size:12.5px;color:var(--ink-soft);margin:0 0 6px}
/* Pending approvals: the person, then Approve (filled) and Reject. */
.admin-pending{padding:12px 0;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.admin-pending:last-child{border-bottom:0}
.admin-pending-head{display:flex;align-items:center;gap:12px}
.admin-pending-actions{display:flex;gap:10px;margin-top:12px}
.admin-pending-actions > *{flex:1;width:auto;padding:10px 14px;border-radius:999px}
/* Feedback */
.admin-fb-icon.is-bug{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 45%, transparent);background:color-mix(in srgb, var(--danger) 10%, transparent)}
.admin-fb-icon.is-idea{color:var(--mg-live-ink, var(--warn-ink));border-color:var(--mg-live-line, var(--line));background:var(--mg-live-tint, var(--bg-alt))}
.admin-fb-status{flex:none;font-size:12px;font-weight:700;color:var(--ink-soft)}
.admin-fb-status.is-new{color:var(--mg-live-ink, var(--warn-ink))}
.admin-fb-status.is-in_progress{color:var(--accent)}
.admin-fb-status.is-resolved{color:var(--success)}
.admin-fb-thread{padding-top:4px}
.admin-fb-type{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.admin-fb-type.is-bug{color:var(--danger)}
.admin-fb-type.is-idea{color:var(--mg-live-ink, var(--warn-ink))}
.admin-fb-flag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:1px 7px;border-radius:999px;border:1px solid var(--mg-line-soft, var(--line));color:var(--ink-soft)}
.admin-fb-subject{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;line-height:1.2;margin:4px 0 2px;color:var(--ink);text-transform:none;letter-spacing:0}
.admin-fb-thread .fb-status-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:14px 0 4px;padding-bottom:14px;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.admin-fb-thread .fb-status-row-label{display:none}
.admin-fb-thread .status-chip{padding:6px 13px;font-size:13px}
.admin-fb-thread .fb-status-hint{font-size:12px;color:var(--mg-live-ink, var(--warn-ink))}
.admin-fb-thread .fb-thread{margin:14px 0 0;max-width:none}
.admin-fb-thread .fb-bubble{border-radius:14px;padding:9px 12px}
.admin-fb-thread .fb-bubble.them{background:var(--mg-fill, var(--bg-alt));border-color:var(--mg-line-soft, var(--line))}
.admin-fb-thread .fb-bubble.us{background:var(--mg-accent-tint);border-color:var(--mg-accent-line)}
.admin-fb-thread .fb-bubble-body{font-size:14px}
/* The reply: in a bar at the bottom of the screen, like Add's Cancel/Add. */
.admin-fb-thread.has-composer{padding-bottom:110px}
.admin-fb-composer{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:var(--mg-tabbar);border-top:1px solid var(--chrome-line, var(--line));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.admin-fb-composer .fb-composer{display:flex;gap:10px;align-items:flex-end;margin:0}
.admin-fb-composer textarea{flex:1;min-height:44px;resize:none;border-radius:14px}
.admin-fb-composer .submit-btn{border-radius:999px}
body.kb-open .admin-fb-composer{position:static}
/* ⋯ in the top bar (Lock / Archive / Delete). */
body.mg-sub .content-topbar .mg-more-btn:not(.hidden){position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;width:auto;height:auto;padding:2px 6px;background:none;border:0;color:var(--accent)}
body.mg-sub .content-topbar .mg-more-btn svg,.content-topbar.is-detail .mg-more-btn svg{fill:var(--accent);width:30px;height:18px}
/* A user's screen */
.admin-user-hero{text-align:center;padding:10px 0 14px}
.admin-user-name{font-weight:800;font-size:20px;margin-top:10px;color:var(--ink)}
.admin-remove{display:block;margin:22px auto 6px;background:none;border:0;font:inherit;font-weight:700;font-size:15px;color:var(--danger);cursor:pointer}
.admin-2fa{color:var(--success);display:grid;place-items:center;flex:none}
/* Updates */
.admin-add-dashed{display:block;width:100%;margin:8px 0 6px;padding:12px;border-radius:12px;border:1.5px dashed var(--mg-accent-line);background:none;color:var(--accent);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.acct-row .update-badge,.acct-row-sub .update-badge{vertical-align:1px}
/* Data integrity: a check's own screen holds its rows */
.admin-check-screen .filter-row,.admin-check-screen .ck-group{border-color:var(--mg-line-soft, var(--line))}
/* Places: the views as words with a line under them; cities as rows. */
body.mg-acct .admin-page .places-views{display:flex !important;flex-wrap:nowrap !important;gap:20px !important;border-bottom:1px solid var(--mg-line-soft, var(--line)) !important;margin:4px 0 6px}
body.mg-acct .admin-page .places-views > button{border:0 !important;background:none !important;box-shadow:none !important;border-radius:0 !important;padding:6px 0 9px !important;font-weight:700;font-size:14.5px;color:var(--ink-soft) !important;white-space:nowrap}
body.mg-acct .admin-page .places-views > button.active{color:var(--ink) !important;box-shadow:inset 0 -2px 0 var(--accent) !important}
.admin-page .places-list{background:none;border:0;padding:0}
.admin-page .places-country{padding:16px 2px 2px;font-size:10.5px;letter-spacing:.16em;color:var(--mg-label)}
.admin-page .places-city{width:100%;padding:12px 2px;border-radius:0;border-bottom:1px solid var(--mg-line-soft, var(--line));font-size:15px;font-weight:600}
.admin-page .places-city::after{content:"\203A";margin-left:8px;color:var(--accent);font-size:20px;line-height:1}
.admin-page .places-city > span:first-child{flex:1;min-width:0}
.admin-page .places-city .mono{font-weight:400;color:var(--ink-soft)}
.admin-page .places-editor{background:none;border:0;padding:0}
.admin-page .places-editor .back-link{display:none}
/* Audit log: per day under a copper date */
.admin-day{font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mg-live, var(--accent));margin:18px 0 2px}
.admin-audit-row,.admin-sheet-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.admin-sheet-row:last-child{border-bottom:0}
.admin-audit-row .acct-tab-icon{width:32px;height:32px}
.admin-audit-row .acct-tab-icon svg{width:15px;height:15px}
.admin-audit-label{font-size:14px;font-weight:600;color:var(--ink)}
.admin-time{flex:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft)}
.admin-more-link{display:inline-block;margin:16px 0 4px;font-weight:700}
/* Usage: the period once, big numbers without a frame, a row per part. */
.admin-period{display:flex;justify-content:center;margin:6px 0 14px}
.admin-period .admin-pills{flex:none;justify-content:center}
.admin-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;text-align:center;margin:4px 0 16px}
.admin-nums b{display:block;font-weight:800;font-size:34px;line-height:1;color:var(--ink)}
.admin-nums span{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label)}
.admin-usage-part .panel{padding-top:0 !important}
.admin-usage-part .panel-head h2{display:none}
.admin-usage-part .panel-head .segmented{display:none !important}
.admin-page .uc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;text-align:center}
.admin-page .uc-stats:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-page .uc-stats .stat-card{background:none !important;border:0 !important;box-shadow:none !important;padding:4px 0 !important}
.admin-page .uc-stats .stat-card::before,.admin-page .uc-stats .stat-card::after{display:none}
.admin-page .uc-stats .stat-value{font-weight:800;font-size:34px;line-height:1}
.admin-page .uc-stats .stat-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label);margin-top:6px}
/* System health: a glowing dot and a word, a row per service. */
.admin-page .uc-pill{background:none !important;padding:0;gap:7px;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:0;text-transform:none}
.admin-page .uc-pill-glyph{display:none}
.admin-page .uc-pill::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:currentColor;box-shadow:0 0 8px currentColor}
.admin-page .uc-pill.is-idle{color:var(--ink-soft)}
.admin-page .uc-pill.is-idle::before{box-shadow:none;opacity:.7}
.admin-page .uc-pill.is-warn{color:var(--mg-live-ink, var(--warn-ink))}
.admin-api{padding:12px 0;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.admin-api:last-child{border-bottom:0}
.admin-api-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-api-count{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
.admin-api-count > span{flex:none;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-mid, var(--ink-soft))}
.admin-api-count .uc-meter{flex:1;margin:0;height:6px;background:var(--mg-fill, var(--bg-alt))}
.admin-api-count .uc-meter.is-ok > div{box-shadow:var(--mg-glow)}
.admin-page .uc-two{display:block}
/* Sheets */
.admin-sheet .au-group-t{display:none}
.admin-sheet .au-group{border:0;padding:0;margin:0}
.admin-sheet .au-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.admin-field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-mid, var(--ink-soft));margin:14px 0 6px}
.admin-sheet .update-type-picker{display:flex;flex-wrap:wrap;gap:8px}
.admin-sheet-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.admin-sheet-actions .submit-btn{width:auto;flex:1;border-radius:999px}
.admin-sheet-actions .btn-outline{border-radius:999px;padding:10px 18px}
.admin-sheet .acct-row:disabled{opacity:.45;cursor:default}
}
/* ==========================================================================
The avatar menu as a sheet (the owner's picks, mockup 2026-10-05,
https://claude.ai/artifact/5kVPSAnEfmoEQnBoNt4a1a): the avatar with the
top bar's rim, "Your account ›" under the name (it replaces the Account
row), icons in a circle like the Account list, ice-blue lines between the
groups, the unread count as a copper number, the page you're on marked,
Log out as an outlined button.
========================================================================== */
/* Phone and desktop alike since 2026-10-05 (the owner's desktop picks): the avatar menu. */
.user-menu-sheet-link{display:block;align-self:flex-start;background:none;border:0;padding:2px 0;font:inherit;font-size:13.5px;font-weight:700;color:var(--accent-dark, var(--accent));cursor:pointer}
.user-menu-sheet-link.active{text-shadow:var(--mg-text-glow, none)}
.user-menu-sheet-head{border-bottom-color:var(--mg-accent-line)}
.sidebar #open-profile{display:none}
/* With Account gone, the line above Admin / Help Center left Help Center
alone under a line for anyone who isn't an admin (the owner, 2026-10-05). */
.sidebar .user-menu-divider-app{display:none}
.sidebar .user-menu-item{min-height:52px;padding:0 10px;font-weight:500}
.sidebar .user-menu-item > svg{box-sizing:border-box;width:38px;height:38px;padding:9px;border-radius:50%;border:1.5px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent);flex:none}
.sidebar .user-menu-item.active{background:var(--mg-accent-tint);color:var(--accent-dark, var(--accent));font-weight:700}
.sidebar .user-menu-divider{background:var(--mg-accent-line);margin:6px 4px}
.sidebar .user-menu-item-count{background:none;color:var(--mg-live-ink, var(--warn-ink));font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;min-width:0;padding:0}
.sidebar .user-menu-item.is-danger{justify-content:center;min-height:46px;margin:10px 4px 0;border:1px solid color-mix(in srgb, var(--danger) 55%, transparent);border-radius:999px;font-weight:700}
.sidebar .user-menu-item.is-danger > svg{display:none}
/* ==========================================================================
The last pop-ups in Midnight Glow (the owner's picks, mockup 2026-10-05,
https://claude.ai/artifact/4wfxXn9Am7RaaXZTKBygiK): sheets from the
bottom (sheetModalHTML) with plain field names and Cancel at the bottom;
Import and the admin's Edit as their own screen (screenModalHTML); a big
photo fills the screen; toasts and the viewing bar restyled.
========================================================================== */
/* Cancel and the main button at the bottom of a sheet. */
.sheet-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.sheet-buttons .btn-cancel{flex:none;width:auto;padding:10px 20px}
.sheet-buttons .submit-btn{flex:none;width:auto;padding:10px 22px}
.sheet-buttons .btn-text-danger{margin-right:auto}
.sheet-cancel{display:block;margin:12px auto 0;width:auto;padding:10px 22px}
.sheet-field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-mid, var(--ink-soft));margin:12px 0 6px}
/* Manage aliases: a row per name with a tick; the ★ is the shown name. */
.alias-rows{display:flex;flex-direction:column;margin-top:10px}
.alias-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.alias-row:last-child{border-bottom:0}
.alias-row-name{flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:15px;font-weight:600}
.alias-row-name input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.alias-row-name > span{display:flex;flex-direction:column;gap:2px}
.alias-shown{font-size:12.5px;font-weight:600;color:var(--accent-dark, var(--accent))}
.alias-star{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;color:var(--ink-soft);cursor:pointer;opacity:.5}
.alias-row.on .alias-star{opacity:1}
.alias-star.is-on{color:var(--mg-fav, var(--accent));text-shadow:var(--mg-fav-glow, none)}
.alias-star input{position:absolute;opacity:0;pointer-events:none}
.alias-add-row .btn-outline{flex:none}
/* Which days did you go to?: Yes · No as pills. */
.confirm-day .choice-pills{flex:none}
/* Add "…": rows with round icons like the + menu. */
.link-choice-row::after{content:none}
/* A found show / release on Add: plain field names. */
.match-detail-sheet .meta-label{font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-mid, var(--ink-soft))}
.find-link-paste-label{display:block;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-mid, var(--ink-soft))}
/* Import: a row per item. */
.sync-rows{display:flex;flex-direction:column;margin-top:12px}
.sync-row{padding:10px 0;border-bottom:1px solid var(--mg-line-soft, var(--line))}
.sync-row:last-child{border-bottom:0}
.sync-row.invalid,.sync-row.is-exact{opacity:.6}
.sync-row-main{display:flex;align-items:center;gap:12px;cursor:pointer}
.sync-row-main input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex:none}
.sync-row-cover{width:46px;height:46px;flex:none;background:var(--mg-fill, var(--bg-alt));box-shadow:var(--mg-cover-floor, none);overflow:hidden}
.sync-row-cover img{width:100%;height:100%;object-fit:cover;display:block}
.sync-row-date{flex:none;width:76px;font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-live, var(--accent))}
.sync-row-body{flex:1;min-width:0;display:flex;flex-direction:column}
.sync-row-title{font-size:15px;font-weight:600;color:var(--ink)}
.sync-row-sub{font-size:12.5px;color:var(--ink-soft)}
.sync-row-choice{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:8px 0 0 58px}
.sync-note{font-size:12px;color:var(--ink-soft);margin-top:12px}
.sync-row .dup-badge{font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;background:none;border:0;padding:0;margin-left:8px;color:var(--mg-live-ink, var(--warn-ink))}
/* A pop-up that's its own screen (screenModalHTML). */
.screen-modal-back{display:none}
.screen-modal-top{display:flex;align-items:center;gap:12px}
.screen-modal-bar{margin-top:14px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.modal-overlay.screen-modal{padding:0;align-items:stretch;background:var(--bg)}
.modal-overlay.screen-modal::before{content:"";position:fixed;inset:0;background:var(--mg-bg-glow);pointer-events:none}
.screen-modal .modal-frame{max-width:none;width:100%;height:100%}
.screen-modal .modal{position:relative;display:flex;flex-direction:column;height:calc(var(--vh) * 100);max-height:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.screen-modal .modal-close,.screen-modal .modal-fade,.screen-modal .vscroll-nav{display:none}
.screen-modal-top{flex:none;position:relative;padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 8px}
.screen-modal-back{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);background:var(--mg-ring-fill, transparent);box-shadow:var(--mg-ring-glow, var(--mg-glow));color:var(--accent);cursor:pointer}
.screen-modal-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modal-overlay.screen-modal .modal h2.screen-modal-title{position:absolute;left:64px;right:64px;margin:0;text-align:center;font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:19px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-modal-body{flex:1;overflow-y:auto;padding:6px 16px 20px;overscroll-behavior-y:contain}
.screen-modal-bar{flex:none;margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));background:var(--mg-tabbar);border-top:1px solid var(--chrome-line, var(--line));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.screen-modal-bar .form-missing{background:none;padding:0;margin:0 0 8px;font-size:12.5px}
.screen-modal-bar .sheet-buttons{margin-top:0}
.screen-modal-bar .sheet-buttons .submit-btn{flex:1}
.admin-edit-page{padding:0;max-width:none}
/* A big photo: the whole screen, on dark. */
.modal-overlay.lightbox-overlay{padding:0;background:#03060e}
.lightbox-overlay .lightbox-modal{max-width:none;width:100%;height:calc(var(--vh) * 100);margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;justify-content:center;padding:0 0 calc(18px + env(safe-area-inset-bottom, 0px))}
.lightbox-overlay .modal-close{position:absolute;top:calc(14px + env(safe-area-inset-top, 0px));right:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(3,6,14,.5);color:#fff;font-size:22px;display:grid;place-items:center}
.lightbox-overlay .lightbox-stage{background:none;border-radius:0;flex:1;display:flex;align-items:center}
.lightbox-overlay .lightbox-stage img{max-height:calc(var(--vh) * 76)}
.lightbox-overlay .lightbox-counter{position:absolute;top:calc(24px + env(safe-area-inset-top, 0px));left:16px;color:#ccd}
.lightbox-overlay .lightbox-shared-badge{text-align:center;color:#aab5c8;background:none}
.lightbox-overlay .modal-actions{padding:6px 16px 0;justify-content:center !important;gap:22px}
.lightbox-overlay .modal-actions .btn-outline{color:#7fdcff;border-color:rgba(127,220,255,.5);background:none}
/* The viewing bar: one copper line with two pills. */
.viewing-bar-inner:not(.viewing-bar-inner--full){flex-wrap:nowrap;gap:8px}
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-eye{display:none}
/* Plain text, not flex: a flex gap put a space before "'s" (the owner,
2026-10-05: "Viewing Test 's collection"). */
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-who{display:block;font-weight:700;font-size:13.5px;color:var(--mg-live-ink, var(--warn-ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-who::before{content:"";display:inline-block;vertical-align:1px;margin-right:8px;width:9px;height:9px;border-radius:50%;background:var(--mg-live, var(--warn-ink));box-shadow:var(--mg-live-glow, none)}
.viewing-bar-who strong{font-weight:800}
.viewing-bar-switch,.viewing-bar-exit{font-family:'Archivo',sans-serif !important;font-size:12.5px !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:none !important;border-radius:999px !important;padding:5px 12px !important;border:1px solid var(--mg-line-soft, var(--line)) !important;background:var(--mg-fill, var(--card)) !important;color:var(--ink) !important}
.viewing-bar-exit{color:var(--mg-live-ink, var(--warn-ink)) !important;border-color:var(--mg-live-line, var(--line)) !important}
.viewing-bar-exit-more{display:none}
.viewing-bar-inner:not(.viewing-bar-inner--full) > *{order:0 !important}
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-who{flex:1}
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-switch-wrap{margin-left:auto}
}
/* Toasts: a rounded pill on the sheets' background with an ice-blue line;
an error with a red line and an icon. */
#toast{background:var(--mg-sheet-page, #101828) !important;color:var(--ink) !important;border:1px solid var(--mg-accent-line, transparent);border-radius:999px !important;box-shadow:var(--mg-glow),0 8px 24px rgba(0,0,0,.35) !important;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);text-align:left}
#toast::before{content:"\2713";color:var(--accent);font-weight:800}
#toast.is-error{border-color:color-mix(in srgb, var(--danger) 60%, transparent);box-shadow:0 0 12px color-mix(in srgb, var(--danger) 35%, transparent),0 8px 24px rgba(0,0,0,.35) !important;border-radius:18px !important}
#toast.is-error::before{content:"!";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--danger);color:#fff;font-size:12px}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
body:not(.mg-sub):not(.mg-detail) #toast{bottom:calc(92px + env(safe-area-inset-bottom, 0px)) !important}
}
/* Someone else's release / show (the owner's picks, 2026-10-05): the Add /
In your … pill in the hero (.rel-bought), Suggest an edit at the bottom. */
.rel-bought-btn.is-owned{color:var(--accent-dark, var(--accent));background:var(--mg-accent-tint);border-color:var(--mg-accent-line)}
.view-suggest{display:flex;justify-content:center;margin:18px 16px 0}
.view-suggest .link-hint{font-size:13.5px;font-weight:700}
.viewing-bar-kicker{display:inline}
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
/* The bar in two lines: VIEWING small above the name (no cut-off name). */
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-who{white-space:normal;line-height:1.15;padding-left:17px;position:relative}
.viewing-bar-inner:not(.viewing-bar-inner--full) .viewing-bar-who::before{position:absolute;left:0;bottom:4px;margin:0}
.viewing-bar-kicker{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
}
/* A pill, and a chosen one (TODO.md item 182): one rule for every pill
family on a phone — the account pages' choices, the notification and
Feedback kind pills, Admin's pills and status chips — so the look is
changed in one place. (`.choice-pill` is the shared markup for new ones.) */
@media (max-width:640px), (hover:none) and (max-height:500px), (pointer:coarse) and (max-height:500px){
.acct-part-sheet .segmented > button,
body.mg-acct #view .segmented > button,
body.mg-acct .notif-pill,
.acct-part-sheet .year-chip,
body.mg-acct #view .year-chip,
.admin-pill,
.admin-fb-thread .status-chip{border:1px solid var(--mg-line-soft, var(--line));background:var(--mg-fill, var(--card));color:var(--ink-mid, var(--ink-soft));border-radius:999px}
.acct-part-sheet .segmented > button.active,
body.mg-acct #view .segmented > button.active,
body.mg-acct .notif-pill.active,
.acct-part-sheet .year-chip.active,
body.mg-acct #view .year-chip.active,
body.mg-acct .pill-group button.active,
.admin-pill.active,
.admin-fb-thread .status-chip.sel{background:var(--mg-accent-tint);border-color:var(--mg-accent-line);color:var(--accent-dark, var(--accent));box-shadow:var(--mg-glow)}
}
/* ==========================================================================
Desktop in Midnight Glow (the owner's picks, 2026-10-05; mockups
https://claude.ai/artifact/SdxDCfADEPH3Hcno8QnLHc and
https://claude.ai/artifact/VBjaHdgfVwGtJCdWRWtyo2). The phone's choices
carried over to a wider screen. Every rule hangs off body.mg-desk
(updateHeader(): in the app and not the phone layout), so a phone and the
sign-in screens never see them.
========================================================================== */
/* ── Shell: search and + Add as the phone's round ⌕ and + at the top
right (the owner's pick, 2026-10-05 — the sidebar version didn't look
right); ⌕ opens the field beside it, with the search menu under it. ── */
body.mg-desk .content-topbar .header-right{gap:10px}
body.mg-desk .content-topbar .search-wrap{display:none}
body.mg-desk .content-topbar.search-open .search-wrap:not(.hidden){display:flex;width:380px}
body.mg-desk .content-topbar.search-open .search-input{width:100%;border-color:var(--accent);box-shadow:var(--mg-glow)}
body.mg-desk .content-topbar.search-open .search-clear{display:block}
body.mg-desk .content-topbar .mg-search-btn:not(.hidden){display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;
border:1.5px solid var(--mg-accent-line);background:var(--mg-ring-fill);color:var(--accent);box-shadow:var(--mg-glow);cursor:pointer}
body.mg-desk .content-topbar .mg-search-btn svg{width:18px;height:18px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round}
body.mg-desk .content-topbar.search-open .mg-search-btn{border-color:var(--accent)}
body.mg-desk .content-topbar .btn-add:not(.hidden){width:42px;height:42px;padding:0;border-radius:50%;font-size:0;display:flex;align-items:center;justify-content:center}
body.mg-desk .content-topbar .btn-add::before{content:"+";font-size:24px;font-weight:600;line-height:1}
body.mg-desk .content-topbar .gsearch-panel{left:auto;right:0;width:min(520px, calc(100vw - var(--sidebar-w) - 60px))}
/* The page you're on glows like the phone's tab bar: an ice-blue line and a
glowing icon, no filled block. */
body.mg-desk .sidebar .nav-btn.active{background:transparent;color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),-8px 0 16px -8px var(--accent)}
body.mg-desk .sidebar .nav-btn.active .nav-icon{filter:var(--mg-tab-filter)}
body.mg-desk .sidebar .nav-btn.active .nav-count{color:var(--accent)}
/* A see-through top bar: ⌕ and + on the right; Back on the left of every
page but the main ones; a sub-screen's name in the middle. */
body.mg-desk.mg-main .main{padding-top:4px}
body.mg-desk .content-topbar{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;position:relative;justify-content:flex-start}
body.mg-desk .content-topbar > *{pointer-events:auto}
body.mg-desk .content-topbar .header-right{flex:0 0 auto;margin-left:auto}
body.mg-desk .content-topbar .topbar-page-label{display:none}
body.mg-desk .mg-top-back:not(.hidden){
display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:999px;cursor:pointer;padding:0;
border:2px solid var(--accent);color:var(--accent);box-shadow:var(--mg-ring-glow);background:var(--mg-ring-fill);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
body.mg-desk .mg-top-back svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.mg-desk .mg-top-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.mg-desk .content-topbar .mg-more-btn:not(.hidden){
display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;height:auto;padding:2px 6px;background:none;border:0;cursor:pointer;
}
body.mg-desk .content-topbar .mg-more-btn svg{width:30px;height:18px;fill:var(--accent);stroke:none;filter:var(--mg-dot-glow)}
body.mg-desk .content-topbar .mg-more-label{display:block;font-size:11.5px;font-weight:700;line-height:1;color:var(--ink)}
/* A detail page: the bar floats over the hero and stays while you scroll. */
body.mg-desk.mg-detail .content-head{margin-bottom:-64px}
body.mg-desk.mg-detail .content-topbar{min-height:64px}
/* A sub-screen: its name in the middle of the bar. */
body.mg-desk.mg-sub .content-topbar .topbar-page-label{
display:flex;position:absolute;left:90px;right:90px;justify-content:center;text-align:center;pointer-events:none;
}
body.mg-desk.mg-sub .topbar-page-label .crumb-parent,body.mg-desk.mg-sub .topbar-page-label .crumb-sep{display:none}
body.mg-desk.mg-sub .topbar-page-label .crumb-name{display:block;font-family:'Archivo',sans-serif;font-stretch:100%;font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mg-desk.mg-sub.mg-scrolled .content-topbar{background:linear-gradient(180deg,var(--mg-tabbar) 62%,transparent)}
/* Back lives in the bar now: no "← BACK" in the hero, no "← Back" on Add,
Edit or a place page. */
body.mg-desk .rel-hero-back,body.mg-desk .add-page > .back-link,body.mg-desk .place-page > .back-link{display:none}
/* ── Menus at their button, pop-ups in the middle (the owner's picks,
round 3, 2026-10-05) ──
What is a sheet from the bottom on a phone: on a desktop a short menu
(⋯ More, Tags & favorite, + Add) drops down under its button, and
anything with fields or a list (Manage aliases, History, Went with,
Remove?, a city's shows …) is a pop-up in the middle — the panel from
the right was a long way for the mouse. Same markup, same closing. */
@keyframes mg-pop-in{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
/* Already open before this render (renderModals()): no entrance again. */
.modal.is-settled{animation:none !important}
body.mg-desk .modal-overlay.sheet-modal{align-items:center;justify-content:center;padding:24px;background:var(--overlay-bg)}
body.mg-desk .sheet-modal .modal-frame{width:520px;max-width:calc(100vw - 48px)}
body.mg-desk .sheet-modal .modal-frame.modal-wide{width:720px}
body.mg-desk .sheet-modal .modal{
position:relative;width:100%;max-height:calc(var(--vh) * 100 - 48px);overflow-y:auto;box-sizing:border-box;
border:1px solid var(--mg-accent-line);border-radius:20px;background:var(--mg-sheet-page);
box-shadow:var(--mg-glow),0 30px 60px rgba(0,0,0,.5);padding:26px 26px 24px;display:flex;flex-direction:column;
animation:mg-pop-in .18s ease-out}
body.mg-desk .sheet-modal > .modal{width:440px;max-width:calc(100vw - 48px)}
body.mg-desk .sheet-modal--tall .modal{min-height:min(560px, calc(var(--vh) * 100 - 48px))}
body.mg-desk .sheet-modal .modal::before{display:none}
body.mg-desk .sheet-modal .modal::after{content:"";position:absolute;left:8%;right:8%;top:0;height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow);pointer-events:none}
body.mg-desk .sheet-modal .modal-fade,body.mg-desk .sheet-modal .vscroll-nav{display:none}
/* A short menu under its button: the sheets' glow, an ice-blue edge. */
body.mg-desk .year-filter-panel.hero-more-panel,body.mg-desk .year-filter-panel.tag-manage-panel,body.mg-desk .add-menu{
background:var(--mg-sheet-page);border:1px solid var(--mg-accent-line);border-radius:16px;
box-shadow:var(--mg-glow),0 16px 40px rgba(0,0,0,.45);padding:8px;z-index:60}
body.mg-desk .year-filter-panel.hero-more-panel{min-width:250px}
body.mg-desk .year-filter-panel.tag-manage-panel{width:340px;padding:14px 16px}
body.mg-desk .add-menu{width:330px}
body.mg-desk .modal-overlay.add-menu-overlay{background:transparent}
body.mg-desk .add-menu::before,body.mg-desk .add-menu::after,body.mg-desk .year-filter-panel.hero-more-panel::after,body.mg-desk .year-filter-panel.tag-manage-panel::after{display:none}
body.mg-desk .hero-more-panel .hero-more-row{border-radius:10px}
body.mg-desk .hero-more-panel .hero-more-row:hover{background:var(--mg-accent-tint)}
body.mg-desk .fade-up:has(.hero-more-panel),body.mg-desk .fade-up:has(.tag-manage-panel){animation:none}
body.mg-desk .rel-hero:has(.hero-more-panel),body.mg-desk .rel-hero:has(.tag-manage-panel){z-index:50}
/* An ✕ top right of a pop-up (the owner, 2026-10-05); a menu closes by a
click beside it, no ✕. */
body.mg-desk .sheet-modal .modal-close{
display:grid;place-items:center;position:absolute;top:16px;right:16px;z-index:3;margin:0;
width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint);color:var(--accent);box-shadow:var(--mg-glow)}
body.mg-desk .sheet-modal .modal-close:hover{border-color:var(--accent)}
body.mg-desk .sheet-modal .modal-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.mg-desk .year-filter-panel.cf-panel .cf-sheet-done{display:none}
body.mg-desk .modal-overlay.sheet-modal .modal h2.sheet-title,
body.mg-desk .modal-overlay.sheet-modal .modal > h2{font-family:inherit;font-stretch:125%;font-weight:800;font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;padding-right:48px}
body.mg-desk .sheet-modal .modal > .modal-p:first-of-type{padding-right:40px}
/* Cancel and the main button: just the two buttons, at the right, the main
one glowing — no bar behind them (the owner's pick, round 3). */
body.mg-desk .sheet-modal .sheet-actions,body.mg-desk .sheet-modal .sheet-buttons{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:auto !important;padding-top:18px;background:none;position:static}
body.mg-desk .sheet-modal .sheet-actions .btn-cancel,body.mg-desk .sheet-modal .sheet-buttons .btn-cancel{flex:none;width:auto;padding:10px 22px;border-radius:999px}
body.mg-desk .sheet-modal .sheet-actions .submit-btn,body.mg-desk .sheet-modal .sheet-buttons .submit-btn{flex:none;width:auto;padding:10px 30px;border-radius:999px;box-shadow:var(--mg-btn-shadow)}
body.mg-desk .sheet-modal .sheet-actions .btn-text-danger{margin-right:auto}
body.mg-desk .sheet-modal .modal.delete-modal{max-width:none}
body.mg-desk .sheet-modal .delete-modal .modal-actions{justify-content:flex-end;gap:10px;margin-top:18px}
body.mg-desk .sheet-modal .delete-modal .btn-danger{background:transparent;border:1px solid color-mix(in srgb, var(--danger) 65%, transparent);color:var(--danger);padding:10px 22px;border-radius:999px}
body.mg-desk .sheet-modal .delete-modal .btn-cancel{border:0;color:var(--ink-mid);padding:10px}
/* ── Detail pages: ⋯ More as a pill in the hero, next to Tags (the owner's
pick, round 3) — its menu drops down under it; no More in the top bar. ── */
body.mg-desk .hero-round-actions{display:none}
body.mg-desk .hero-toolbar > .year-filter[data-filter-key="heroMoreOpen"]{display:block;position:relative}
body.mg-desk .content-topbar .mg-more-btn{display:none !important}
body.mg-desk .rel-hero .hero-more-btn{
display:inline-flex;align-items:center;gap:7px;width:auto;height:38px;padding:0 16px;border-radius:999px;
border:1.5px solid var(--accent);background:var(--mg-accent-tint);color:var(--accent);box-shadow:var(--mg-glow);font:inherit;font-weight:700;font-size:13.5px}
body.mg-desk .rel-hero .hero-more-btn svg{width:18px;height:18px;fill:var(--accent);stroke:none}
.hero-more-label{display:none}
body.mg-desk .rel-hero .hero-more-label{display:inline}
body.mg-desk .hero-more-row.mobile-only{display:none}
/* ── Add and Edit (the owner's picks: two columns with a preview, the bar
fixed at the bottom, the name in the top bar) ── */
body.mg-desk .add-page{max-width:1080px}
body.mg-desk .add-page.add-page-wide{max-width:1080px}
body.mg-desk .add-page > .panel,body.mg-desk .form-with-preview > .panel{background:none;border:0;box-shadow:none;padding:0;margin-top:0 !important;border-radius:0}
body.mg-desk .add-page .panel > h2.choose-heading{display:none}
body.mg-desk .add-page .form-section{border-top:1px solid var(--mg-line-soft, var(--line))}
body.mg-desk .form-with-preview{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:start}
body.mg-desk .form-with-preview > .panel{display:flex;flex-direction:column;min-height:calc(var(--vh) * 100 - 64px - 30px)}
.form-preview{position:sticky;top:84px;border-left:1px solid var(--mg-line-soft, var(--line));padding:4px 0 20px 30px;min-width:0}
.form-preview-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label);margin-bottom:14px}
.form-preview-cover{width:100%;max-width:240px;aspect-ratio:1;margin-bottom:16px;box-shadow:var(--r-shadow-cover, 0 10px 22px rgba(0,0,0,.45))}
.form-preview-cover img{width:100%;height:100%;object-fit:cover;display:block}
.form-preview-cover .coverless-art{width:100%;height:100%}
.form-preview-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;line-height:1.05;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.form-preview-artist{margin-top:5px;font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.form-preview-date{font-stretch:75%;font-weight:800;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--mg-live-ink);margin-bottom:6px}
.form-preview-tour{margin-top:5px;font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.form-preview-meta{margin-top:8px;font-size:13.5px;color:var(--ink-mid, var(--ink-soft))}
.form-preview-where{margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.form-preview .is-empty{color:var(--mg-faint);text-shadow:none}
/* Cancel / Add (Save) at the top right, in the bar beside the screen's name
(the owner's pick, round 3 C) — what's still needed just left of them. */
body.mg-desk .add-actions-bar{position:fixed;top:11px;right:28px;bottom:auto;z-index:45;margin:0;padding:0;background:none;border:0;border-radius:0;
-webkit-backdrop-filter:none;backdrop-filter:none;display:flex;flex-direction:row-reverse;align-items:center;gap:14px}
body.mg-desk .add-actions-bar .form-missing{background:none;border:0;padding:0;margin:0;font-size:12.5px;max-width:300px;text-align:right}
body.mg-desk .add-actions-bar .action-row{margin-top:0 !important;gap:10px;justify-content:flex-end}
body.mg-desk .add-actions-bar .btn-cancel{flex:none !important;padding:9px 18px !important;border-radius:999px}
body.mg-desk .add-actions-bar .submit-btn{flex:none !important;width:auto;padding:9px 26px !important;border-radius:999px;box-shadow:var(--mg-btn-shadow)}
body.mg-desk.mg-add .main,body.mg-desk.mg-edit .main{padding-bottom:0}
body.mg-desk.mg-sub .main{padding-top:6px}
/* ── Account, Admin, Help Center: the rail (the owner's picks) ──
No card around it; each row with its icon in a circle and its count, the
open one glowing like the sidebar's page. The page's name sits in the top
bar, so no second title. Admin: the copper "N things waiting on you"
line instead of the four tiles. */
body.mg-desk .profile-sidebar{background:none;border:0;box-shadow:none;padding:0;width:236px;top:84px}
body.mg-desk .profile-layout .profile-sidebar{width:236px}
body.mg-desk .profile-sidebar .acct-tab-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--mg-accent-line);color:var(--accent);background:var(--mg-accent-tint)}
body.mg-desk .profile-sidebar .acct-tab-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.mg-desk .profile-side-btn{gap:11px;padding:6px 10px;border-radius:10px;font-size:14px;color:var(--ink-mid, var(--ink-soft))}
body.mg-desk .profile-side-btn::before{display:none}
body.mg-desk .profile-side-btn:hover{background:var(--mg-accent-tint);color:var(--ink)}
body.mg-desk .profile-side-btn.active{background:transparent;color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),-8px 0 16px -8px var(--accent)}
body.mg-desk .profile-side-btn.active .acct-tab-icon{border-color:var(--accent);box-shadow:var(--mg-glow)}
body.mg-desk .acct-tab-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);background:none;border:0;padding:0}
body.mg-desk .acct-tab-count.is-due{color:var(--mg-live-ink);font-weight:600;background:none}
body.mg-desk .acct-rail-group{font-size:10px;color:var(--mg-label);padding:16px 10px 6px}
body.mg-desk .profile-rail-divider{border-top-color:var(--mg-line-soft, var(--line))}
body.mg-desk .acct-tab-label.is-caps{text-transform:none;letter-spacing:0}
body.mg-desk .profile-layout{gap:40px}
body.mg-desk.mg-acct #view .page-sub{margin-top:0}
body.mg-desk .admin-page > .page-sub{display:none}
body.mg-desk .admin-waiting{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;font-size:15px;color:var(--ink-soft)}
body.mg-desk .admin-waiting.is-due{color:var(--mg-live-ink, var(--warn-ink))}
body.mg-desk .admin-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--mg-live, var(--warn-ink));box-shadow:var(--mg-live-glow, none)}
/* The account pages' content: no card anywhere, like the rest. */
body.mg-desk.mg-acct #view .panel-grid{display:block}
body.mg-desk.mg-acct .acct-rows,body.mg-desk.mg-acct .notif-layout,body.mg-desk.mg-acct .conn-page,body.mg-desk.mg-acct .services-lede ~ *{max-width:760px}
/* Notifications: no "2 unread · 47 total" line on a desktop either (the
owner's note, 2026-10-05); Connections' lock before the count. */
body.mg-desk.mg-acct .notif-lede{display:none}
body.mg-desk.mg-acct .conn-page .section-title{display:flex;align-items:center;gap:8px}
body.mg-desk.mg-acct .conn-page .section-title .personal-section-tag{display:inline-flex;margin:0}
body.mg-desk.mg-acct .notif-col-side .panel{padding-top:0}
body.mg-desk.mg-acct .acct-panel-empty{background:none;border:0;box-shadow:none;color:var(--ink-soft)}
/* ── The avatar menu (the owner's pick: like the phone's) ──
Above the button at the bottom of the sidebar: the avatar with "Your
account ›" on top, icons in a circle, the copper count, Log out as an
outlined button. The button's avatar gets the top bar's ice-blue rim. */
body.mg-desk .user-menu-sheet-head{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;padding:8px 8px 12px;margin-bottom:6px;border-bottom:1px solid var(--mg-accent-line)}
body.mg-desk .user-menu-sheet-grip{display:none}
body.mg-desk .user-menu-sheet-avatar .conn-av{width:40px;height:40px;font-size:15px}
body.mg-desk .user-menu-sheet-who{display:flex;flex-direction:column;gap:1px;min-width:0}
body.mg-desk .user-menu-sheet-name{font-stretch:125%;font-weight:800;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mg-desk .sidebar .user-menu-panel{padding:10px;border-color:var(--mg-menu-line)}
body.mg-desk .sidebar .user-menu-item{min-height:42px;font-size:14px}
body.mg-desk .sidebar .user-menu-item > svg{width:32px;height:32px;padding:7px}
body.mg-desk .sidebar .user-menu-item:hover{background:var(--mg-accent-tint)}
body.mg-desk .sidebar .current-user-avatar .conn-av,body.mg-desk .user-menu-sheet-avatar .conn-av{box-shadow:0 0 0 2px var(--accent),var(--mg-glow)}
/* ── Dashboard (the owner's picks: the welcome in the middle without a
frame, no cards, three columns) ── */
body.mg-desk .dash-hero-stats .dash-hero-line{font-size:46px}
body.mg-desk .dash-hero-inner{padding:10px 0 18px}
body.mg-desk .dash-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 36px;align-items:start}
body.mg-desk .dash-body > .panel-grid,body.mg-desk .dash-body > .dash-row-split{display:contents}
body.mg-desk .dash-body > .dash-crate,body.mg-desk .dash-body > .dash-confirm,
body.mg-desk .dash-body > .dash-fav-panel,body.mg-desk .dash-body > .empty-state{grid-column:1 / -1}
body.mg-desk .dash-body > .dash-crate{margin-bottom:0}
body.mg-desk .dash .dash-section-gap{margin-top:0}
body.mg-desk .dash .dash-panel{min-width:0;height:auto}
body.mg-desk .dash-panel-head h2,body.mg-desk .dash-crate-title{font-size:16px !important;white-space:normal;min-width:0;line-height:1.2}
body.mg-desk .dash .bar-list{min-height:0}
/* ── Overviews (the owner's picks): the words stay in the filter bar, the
count moves to a pill at its end (not under the title); Filters is a
panel from the right with the phone's pills. ── */
body.mg-desk.mg-main .page-head .page-sub,body.mg-desk.mg-main .page-head .filter-row-sub{display:none}
body.mg-desk .filterbar .count-pill{margin-left:auto;display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font:inherit;font-size:13px;color:var(--ink-mid);
padding:6px 13px;border-radius:999px;border:1px solid var(--mg-accent-line);background:var(--mg-accent-tint)}
body.mg-desk .filterbar .count-pill b{font-size:16px;font-weight:800;color:var(--ink)}
body.mg-desk .filterbar .count-pill.is-filtering{cursor:pointer;box-shadow:var(--mg-glow)}
body.mg-desk .filterbar .count-pill-x{color:var(--accent);font-weight:800;margin-left:2px}
body.mg-desk .filterbar{flex-wrap:nowrap}
body.mg-desk .year-filter-panel.cf-panel .cf-sheet-head{display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;position:static;padding:0 0 4px}
body.mg-desk .year-filter-panel.cf-panel .cf-sheet-head::before{display:none}
body.mg-desk .year-filter-panel.cf-panel .cf-sheet-title{font-stretch:125%;font-weight:800;font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
body.mg-desk .year-filter-panel.cf-panel .cf-sheet-done{font:inherit;font-weight:700;color:var(--accent);background:none;border:0;cursor:pointer}
body.mg-desk .cf-body.cf-pills-body{padding:0;border:0;background:none;box-shadow:none;max-height:none}
body.mg-desk .cf-pills-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label);margin:18px 2px 8px}
body.mg-desk .cf-pills{display:flex;flex-wrap:wrap;gap:6px}
body.mg-desk .cf-pill{font:inherit;font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:999px;cursor:pointer;background:transparent;border:1px solid var(--mg-accent-line);color:var(--ink-mid)}
body.mg-desk .cf-pill:hover{background:var(--mg-accent-tint)}
body.mg-desk .cf-pill.inc{background:var(--mg-accent-tint);border-color:var(--accent);color:var(--accent-dark);box-shadow:var(--mg-glow)}
body.mg-desk .cf-pill.exc{border-color:color-mix(in srgb, var(--danger) 60%, transparent);color:var(--danger);text-decoration:line-through}
body.mg-desk .cf-pill-more{border-style:dashed;color:var(--accent)}
body.mg-desk .cf-pills-legend{font-size:12.5px;color:var(--ink-soft);margin:16px 2px 0}
/* A pointer (the owner's pick): a cover lifts a little with a soft ice-blue
glow, a row gets a soft fill. No extra labels — the overviews stay calm. */
@media (hover:hover){
body.mg-desk .album-card .album-cover,body.mg-desk .dash-crate-tile,body.mg-desk .artist-relcard .album-cover{transition:transform .18s ease,box-shadow .18s ease}
body.mg-desk .album-card:hover .album-cover,body.mg-desk .artist-relcard:hover .album-cover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(0,0,0,.45),0 0 22px rgba(127,220,255,.28)}
body.mg-desk .list-row:hover,body.mg-desk .srow:hover,body.mg-desk .tl-item:hover,body.mg-desk .dash-rank-row:hover,body.mg-desk .dash-recent-row:hover{background:var(--mg-accent-tint);border-radius:10px}
}
@media (prefers-reduced-motion:reduce){body.mg-desk .album-card .album-cover{transition:none}body.mg-desk .album-card:hover .album-cover{transform:none}}
/* ── Detail pages (the owner's picks: no cards, the side column in view,
the artist's head in the middle) ── */
body.mg-desk .rel-body .panel{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
body.mg-desk .rel-side{gap:30px}
body.mg-desk .rel-side-label{font-family:'Archivo',sans-serif;font-stretch:125%;font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
body.mg-desk .rel-side .meta-grid{border:0;padding:0;margin:14px 0 0;gap:14px 18px}
/* A long tracklist or setlist: the side column stays in view while it
scrolls — only when it fits on the screen (syncStickySides(), render.js). */
body.mg-desk .rel-body > .rel-side.is-sticky{position:sticky;top:84px}
/* Shows: no card per show on the timeline. */
body.mg-desk .shows-page .tl-card,body.mg-desk .shows-page .tl-row.upcoming .tl-card{background:none;border:0;border-bottom:1px solid var(--mg-line-soft);border-radius:0;box-shadow:none;padding:2px 0 14px}
body.mg-desk .shows-page .tl-row.approx .tl-card{border-bottom-style:dashed}
body.mg-desk .shows-page .tl-card:hover{transform:none;box-shadow:none}
/* Songs: the list without a card, the A–Z rail without a frame. */
body.mg-desk .songs-page .song-list-card.panel{background:none;border:0;box-shadow:none;padding:0 0 8px}
/* The hero of a release, an artist and a song (the owner's pick, round 3):
the cover (photo, turning stack) on the left, title, artist, year and the
numbers beside it, with Tags and ⋯ More under them — compacter than
everything centred. A show keeps its own hero. */
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-cols{
display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cover body" "cover tools";
column-gap:64px;row-gap:16px;align-items:end;text-align:left;justify-items:start}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-cols > :first-child:not(.rel-hero-body){grid-area:cover;align-self:center}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-body{grid-area:body;align-items:flex-start;text-align:left;width:auto}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-tools{grid-area:tools;align-self:start;justify-self:start;align-items:flex-start;min-width:0;height:auto;margin:0}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-icons{justify-content:flex-start}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-body .detail-title-block{justify-content:flex-start}
body.mg-desk :is(.album-detail,.artist-detail,.song-detail) .rel-hero-tags,body.mg-desk .artist-detail .artist-hero-rel{justify-content:flex-start}
body.mg-desk .album-detail .rel-hero-cover.has-sleeve{margin-right:40px}
body.mg-desk :is(.artist-detail,.song-detail) .song-hero-stats{max-width:440px;margin-left:0;margin-right:0;width:100%}
body.mg-desk :is(.artist-detail,.song-detail) .song-hero-stats .mg-hero-stat{align-items:flex-start}
body.mg-desk .artist-detail .artist-hero-photo{width:220px;height:220px;
box-shadow:0 0 0 2px var(--accent),0 0 26px color-mix(in srgb, var(--accent) 45%, transparent),0 10px 24px rgba(0,0,0,.45)}
body.mg-desk .song-detail .song-hero-fan{margin-right:50px}
body.mg-desk .artist-hero--plain .rel-hero-inner,body.mg-desk .song-hero--plain .rel-hero-inner,body.mg-desk .album-detail .rel-hero--plain .rel-hero-inner{padding-top:64px}
body.mg-desk .song-rail{background:none;border:0;box-shadow:none;position:sticky;top:30px}
/* ── Shows → Map (the owner's pick): the map fills everything beside the
sidebar, View and the region buttons float on it; a city opens the panel
on the right. Only the real map (#gl-map-slot) — the drawn fallback stays
in the page. ── */
body.mg-desk:has(.shows-page #gl-map-slot){overflow:hidden}
body.mg-desk .shows-page:has(#gl-map-slot) .page-head{display:none}
body.mg-desk .shows-page #gl-map-slot.wm-gl-slot{position:fixed;z-index:30;left:var(--sidebar-w);right:0;top:0;bottom:0;height:auto;min-height:0;border:0;border-radius:0}
body.mg-desk .shows-page:has(#gl-map-slot) .filterbar{position:fixed;z-index:32;left:calc(var(--sidebar-w) + 24px);top:22px;margin:0}
body.mg-desk .shows-page:has(#gl-map-slot) .fb-menu-btn,body.mg-desk .shows-page:has(#gl-map-slot) .fbtn,
body.mg-desk .shows-page:has(#gl-map-slot) .wm-rchip{background:linear-gradient(var(--mg-accent-tint),var(--mg-accent-tint)),var(--mg-card-solid);border-color:var(--mg-accent-line);color:var(--accent);box-shadow:var(--mg-glow)}
body.mg-desk .shows-page:has(#gl-map-slot) .wm-rchip.active{color:var(--accent-dark);border-color:var(--accent)}
body.mg-desk .shows-page:has(#gl-map-slot) .wm-regions{position:fixed;z-index:32;left:calc(var(--sidebar-w) + 24px);bottom:24px;top:auto;right:auto;margin:0;flex-direction:column-reverse;align-items:flex-start;gap:8px}
body.mg-desk .shows-page:has(#gl-map-slot) .wm-unplaced,body.mg-desk .shows-page:has(#gl-map-slot) .mg-page-tagline{display:none}
/* A place page keeps its path (Shows / Country / City / Venue) beside Back
— each step is a link up. */
body.mg-desk:not(.mg-main):not(.mg-sub):not(.mg-detail) .content-topbar .topbar-page-label{display:flex;margin-left:14px;font-size:11px;letter-spacing:.16em}
/* A pop-up opened from a panel (Import from a service, from its service's
panel) lies above that panel, not behind it. */
body.mg-desk .modal-overlay.screen-modal{z-index:300}
/* …and a sheet opened from inside such a pop-up (+ Add an artist, a
Remove? question in the admin's Edit show) lies above the pop-up — it
fell behind it (the owner, 2026-10-10). */
body.mg-desk .modal-overlay.sheet-modal{z-index:310}
/* The pop-up itself in Midnight Glow, like the other pop-ups in the middle
(the sheets' glow edge and surface, the calm overlay — it still had the
old card and brown overlay): the content scrolls, the title stays at the
top and Cancel / Save at the bottom (the owner, 2026-10-10). */
body.mg-desk .modal-overlay.screen-modal{padding:24px;background:var(--overlay-bg)}
body.mg-desk .screen-modal .modal-frame.modal-wide{width:880px;max-width:calc(100vw - 48px)}
body.mg-desk .screen-modal .modal{
position:relative;display:flex;flex-direction:column;width:100%;max-height:calc(var(--vh) * 100 - 48px);overflow:hidden;box-sizing:border-box;padding:0;
border:1px solid var(--mg-accent-line);border-radius:20px;background:var(--mg-sheet-page);
box-shadow:var(--mg-glow),0 30px 60px rgba(0,0,0,.5);animation:mg-pop-in .18s ease-out}
body.mg-desk .screen-modal .modal-fade,body.mg-desk .screen-modal .vscroll-nav{display:none}
body.mg-desk .screen-modal-top{flex:none;padding:24px 56px 8px 28px}
body.mg-desk .screen-modal-title{margin:0}
body.mg-desk .screen-modal-body{flex:1;min-height:0;overflow-y:auto;padding:6px 28px 20px;overscroll-behavior-y:contain}
body.mg-desk .screen-modal-bar{flex:none;margin:0;padding:12px 28px 18px;border-top:1px solid var(--mg-line-soft);background:var(--mg-sheet-page)}
body.mg-desk .screen-modal-bar .form-missing{margin:0 0 8px}
body.mg-desk .screen-modal-bar .sheet-buttons{margin-top:0;justify-content:flex-end}
body.mg-desk .screen-modal .modal-close{top:20px;right:20px;z-index:1}
/* Viewing someone's collection: the bar at the very top, above the floating
Back / More of a detail page (as on a phone, the owner 2026-10-05). */
body.mg-desk .content-head{display:flex;flex-direction:column}
body.mg-desk .content-head .header-stack{order:-1}
/* Menus that drop down (View, Sort, every app-select list, the Wishlist's
Tags): the sheets' glow and edge, like the search menu and the field
suggestions — no more flat card colour (the owner, 2026-10-05). */
body.mg-desk .year-filter-panel.fb-menu,
body.mg-desk .year-filter-panel:not(.gsearch-panel):not(.view-switch-menu):not(.tag-manage-panel):not(.cf-panel):not(.hero-more-panel) > .year-filter-panel-scroll{
background:var(--mg-sheet-page);border:1px solid var(--mg-accent-line);border-radius:14px;
box-shadow:var(--mg-glow),0 14px 32px rgba(0,0,0,.4)}
body.mg-desk .year-filter-panel.fb-menu{padding:6px}
body.mg-desk .fb-menu .hero-more-row{border-radius:10px}
body.mg-desk .fb-menu .hero-more-row:hover,body.mg-desk .fb-menu .hero-more-row.is-current{background:var(--mg-accent-tint)}
body.mg-desk .fb-menu .app-select-row:hover,body.mg-desk .fb-menu .app-select-row.is-active{background:var(--mg-accent-tint)}
/* A big photo (My memory, a cover): the whole screen on dark, as on a phone
(the owner, 2026-10-05). */
body.mg-desk .modal-overlay.lightbox-overlay{padding:0;background:#03060e}
body.mg-desk .lightbox-overlay .modal-frame{max-width:none;height:100%}
body.mg-desk .lightbox-overlay .lightbox-modal{max-width:none;width:100%;height:calc(var(--vh) * 100);max-height:none;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;justify-content:center;padding:0 0 22px}
body.mg-desk .lightbox-overlay .modal-close{position:absolute;top:20px;right:24px;z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(3,6,14,.5);color:#fff;font-size:22px;display:grid;place-items:center}
body.mg-desk .lightbox-overlay .lightbox-stage{background:none;border-radius:0;flex:1;display:flex;align-items:center;justify-content:center}
body.mg-desk .lightbox-overlay .lightbox-stage img{max-height:calc(var(--vh) * 80);max-width:calc(100vw - 160px)}
body.mg-desk .lightbox-overlay .lightbox-counter{position:absolute;top:30px;left:28px;color:#ccd}
body.mg-desk .lightbox-overlay .lightbox-shared-badge{text-align:center;color:#aab5c8;background:none}
body.mg-desk .lightbox-overlay .modal-actions{padding:6px 16px 0;justify-content:center !important;gap:22px}
body.mg-desk .lightbox-overlay .modal-actions .btn-outline{color:#7fdcff;border-color:rgba(127,220,255,.5);background:none;border-radius:999px}
/* Filters drops down under its button again (the owner, 2026-10-05: a
panel on the far right is a long way for the mouse) — with the phone's
pills, on the sheets' glow. */
body.mg-desk .year-filter-panel.cf-panel{width:440px;max-width:calc(100vw - var(--sidebar-w) - 40px);max-height:calc(var(--vh) * 100 - 220px);overflow-y:auto;
padding:16px 18px 18px;box-sizing:border-box;background:var(--mg-sheet-page);border:1px solid var(--mg-accent-line);border-radius:16px;box-shadow:var(--mg-glow),0 16px 40px rgba(0,0,0,.45)}
/* The ✕ never sits on a panel's text: the content starts below it. */
/* Detail pages: two columns of the same width (the owner, 2026-10-05). */
body.mg-desk .rel-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
/* Connections: your connections and the people without an account as wide
as the page. */
body.mg-desk .conn-layout{grid-template-columns:minmax(0,1fr)}
body.mg-desk.mg-acct .conn-page{max-width:none}
body.mg-desk :is(.rel-hero--plain,.artist-hero--plain,.song-hero--plain) .rel-hero-cols{column-gap:0}
/* A thin line between the rail and the page beside it (Account, Admin, the
Help Center; the owner's pick, round 3). */
body.mg-desk .profile-layout .profile-content{border-left:1px solid var(--mg-line-soft, var(--line));padding-left:36px;margin-left:-20px}
/* The sidebar a little wider (the owner, round 3): room for the account menu
and the search field. */
body.mg-desk{--sidebar-w:272px}
/* A row that opens on the page (Account, Views & filters, Services on a
desktop): the part right under its row, in a soft ice-blue frame. */
body.mg-desk .acct-row.is-open::after{transform:rotate(90deg)}
body.mg-desk .acct-row-open{margin:4px 0 14px;padding:16px 18px;border:1px solid var(--mg-accent-line);border-radius:14px;background:var(--mg-accent-tint);box-shadow:var(--mg-glow)}
body.mg-desk .acct-row-open .panel{background:none;border:0;box-shadow:none;padding:0;margin:0}
body.mg-desk .acct-row-open .settings-group-title{font-size:13px;margin-top:12px}
body.mg-desk .acct-row-wrap + .acct-row,body.mg-desk .acct-row-wrap + .acct-row-wrap{border-top:0}
/* ⋯ More with nothing in it on a desktop (a song: only Tags & favorite,
which has its own pill there) stays away. */
body.mg-desk .hero-toolbar > .year-filter.only-mobile-rows{display:none !important}
body.mg-desk .content-topbar .mg-top-logo{display:none !important}
/* ── Round 4 (the owner, 2026-10-05) ── */
/* Dashboard: the welcome on the left without a frame, the big logo with the
app's name on the right. */
body.mg-desk .dash-hero-inner{grid-template-columns:minmax(0,1fr) auto;justify-items:start;justify-content:stretch;text-align:left;align-items:center;gap:40px}
body.mg-desk .dash-hero-actions{justify-content:flex-start}
body.mg-desk .dash-hero-brand{justify-self:end;padding-right:10px}
body.mg-desk .dash-hero-brand-mark{width:200px;height:200px;border-radius:34px;box-shadow:var(--mg-logo-shadow)}
body.mg-desk .dash-hero-brand-text{font-stretch:125%;font-size:36px;color:var(--mg-hero-ink, var(--ink))}
/* The sidebar: the logo with CRATE & ENCORE on one line. */
body.mg-desk .sidebar .logo-text{white-space:nowrap;font-size:14.5px}
body.mg-desk .sidebar .logo-text br{display:none}
body.mg-desk .sidebar .logo-mark{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1.5px var(--accent),var(--mg-logo-shadow)}
/* ⌕ and + on every page but Add / Edit (Cancel and Save sit there) and the
account pages — detail pages keep them, as in v2.6.0 (the owner, 2026-10-06). */
body.mg-desk.mg-sub .content-topbar .mg-search-btn,
body.mg-desk.mg-sub .content-topbar .btn-add,
body.mg-desk.mg-sub .content-topbar .search-wrap{display:none !important}
/* ⋯ More in the hero: an ice-blue edge, no glow. */
body.mg-desk .rel-hero .hero-more-btn{box-shadow:none}
/* The artist page: no photo stretched behind the hero (it was cut off at
both sides on a wide screen) — the page's own glow, like a release. */
body.mg-desk .artist-detail .rel-hero-bg,body.mg-desk .artist-detail .artist-hero-light{display:none}
/* Detail pages in cards on a desktop after all (the owner, 2026-10-05): a
release, show, artist or song page's sections each in a calm Midnight
Glow card — the page is big, cards give it hold. Liner notes and My
memory keep their own glowing frame instead. A phone stays without. */
body.mg-desk .rel-body .panel:not(.rel-note-panel):not(.rel-details-gate){
background:var(--mg-card-hi, var(--card));border:1px solid var(--mg-line-soft, var(--line));border-radius:16px;padding:18px 20px;box-shadow:none}
body.mg-desk .rel-body{gap:24px}
body.mg-desk .rel-side{gap:20px}
body.mg-desk .song-main,body.mg-desk .sd-main,body.mg-desk .artist-main{gap:20px}
/* Dashboard: the welcome block a card again on a desktop, as in v2.6.0 (the
owner, 2026-10-05) — the hero card's glow, the logo then CRATE & ENCORE
on the right. */
body.mg-desk .dash-hero{background:var(--mg-hero-card);border:1px solid var(--line);border-radius:20px;padding:36px 38px 32px}
body.mg-desk .dash-hero-inner{padding:0}
body.mg-desk .dash-hero-brand{gap:22px;padding-right:0}
body.mg-desk .dash-body{padding-top:28px}
/* The top bar frosts over what scrolls under it, and while the search field
is open, so the field and the buttons stay easy to read — as on a phone
(the owner, 2026-10-06). See-through at the top of a page. */
body.mg-desk .content-topbar{isolation:isolate}
body.mg-desk .content-topbar::before{content:"";position:absolute;inset:0 0 -18px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s ease;
background:linear-gradient(180deg,var(--mg-tabbar) 0%,color-mix(in srgb, var(--mg-tabbar) 70%, transparent) 60%,transparent);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
body.mg-desk.mg-scrolled .content-topbar::before,body.mg-desk .content-topbar.search-open::before{opacity:1}
body.mg-desk.mg-sub.mg-scrolled .content-topbar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (prefers-reduced-motion:reduce){body.mg-desk .content-topbar::before{transition:none}}
/* ==========================================================================
Round 5 — v2.6.0's build-up in Midnight Glow (the owner's picks,
2026-10-06; mockup https://claude.ai/artifact/5fHVvRbt4fadMhtQx4CUtz).
Desktop only; the phone stays as it is. Four picks:
Z1 zones — the page a calm blue-black, cards a shade lighter, the sidebar
its own tint, a lighter band behind a detail page's hero;
Z2 calm type — the title large in plain letters, section heads as small
mono labels, compact list rows with thin lines;
Z3 glow budget — only + Add (and the other main buttons) and the page
you're on glow; rings, frames and pills don't;
Z5 a real top bar — the path on the left, the search field and + Add on
the right, as in v2.6.0.
Z4 (show more) was declined; its note: the tagline sits at the bottom of
the screen on a short page instead of floating halfway.
========================================================================== */
/* ── Z1: zones ── (dark one step towards "Midnight" with the phone, the
owner 2026-10-07) */
body.mg-desk{
--bg:#eef2f7; --mg-bg-glow:linear-gradient(#eef2f7,#eef2f7);
--mg-card-hi:#ffffff; --mgz-card-line:rgba(10,127,184,.14);
--mgz-band:linear-gradient(180deg,#dbe9f8 0%,#cfe0f3 100%);
--mgz-bar:rgba(238,242,247,.88);
}
:root[data-theme="dark"] body.mg-desk{
--bg:#060d1b; --mg-bg-glow:radial-gradient(60% 30% at 55% 0%,rgba(56,110,180,.14) 0%,rgba(56,110,180,0) 70%),linear-gradient(#060d1b,#060d1b);
--mg-card-hi:#0d182c; --mgz-card-line:rgba(160,190,230,.09);
--mgz-band:linear-gradient(180deg,#152f58 0%,#0e2344 100%);
--mgz-bar:rgba(6,13,27,.88);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.mg-desk{
--bg:#060d1b; --mg-bg-glow:radial-gradient(60% 30% at 55% 0%,rgba(56,110,180,.14) 0%,rgba(56,110,180,0) 70%),linear-gradient(#060d1b,#060d1b);
--mg-card-hi:#0d182c; --mgz-card-line:rgba(160,190,230,.09);
--mgz-band:linear-gradient(180deg,#152f58 0%,#0e2344 100%);
--mgz-bar:rgba(6,13,27,.88);
}}
/* The sidebar: its own deep blue in both themes, its text light. */
body.mg-desk .sidebar{
background:#0b1a38;border-right-color:rgba(127,220,255,.1);-webkit-backdrop-filter:none;backdrop-filter:none;
--chrome-ink:#e6eefb; --chrome-soft:#aebfda; --chrome-ink-dim:#aebfda; --chrome-line:rgba(127,220,255,.1);
--chrome-active:rgba(127,220,255,.12); --chrome-hover:rgba(127,220,255,.07); --chrome-accent:#7fdcff;
--accent:#7fdcff; --ink:#e6eefb; --ink-soft:#8ea3c4; --ink-mid:#aebfda; --mg-faint:#7d93b6;
--mg-fill:rgba(255,255,255,.06); --mg-fill-line:rgba(255,255,255,.1); --mg-line-soft:rgba(127,220,255,.08);
--mg-accent-tint:rgba(127,220,255,.12); --mg-accent-line:rgba(127,220,255,.4);
}
/* …but the avatar menu that opens from it keeps the page's own theme. */
body.mg-desk .sidebar .user-menu-panel{
--accent:#0973a8; --ink:#0b1a38; --ink-soft:#5d7090; --ink-mid:#4a5d7e; --mg-faint:#586c8e;
--mg-accent-tint:rgba(10,127,184,.1); --mg-accent-line:rgba(10,127,184,.3); --mg-line-soft:rgba(10,127,184,.06)}
:root[data-theme="dark"] body.mg-desk .sidebar .user-menu-panel{--accent:#7fdcff;--ink:#e6eefb;--ink-soft:#8ea3c4;--ink-mid:#aebfda;--mg-faint:#7d93b6;--mg-accent-tint:rgba(127,220,255,.16);--mg-accent-line:rgba(127,220,255,.5);--mg-line-soft:rgba(127,220,255,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.mg-desk .sidebar .user-menu-panel{--accent:#7fdcff;--ink:#e6eefb;--ink-soft:#8ea3c4;--ink-mid:#aebfda;--mg-faint:#7d93b6;--mg-accent-tint:rgba(127,220,255,.16);--mg-accent-line:rgba(127,220,255,.5);--mg-line-soft:rgba(127,220,255,.08)}}
/* Cards: a shade lighter than the page, a faint edge. */
body.mg-desk .rel-body .panel:not(.rel-note-panel):not(.rel-details-gate){border-color:var(--mgz-card-line)}
body.mg-desk .dash .dash-panel{background:var(--mg-card-hi);border:1px solid var(--mgz-card-line);border-radius:16px;padding:18px 20px}
body.mg-desk .dash-body > .dash-crate{background:var(--mg-card-hi);border:1px solid var(--mgz-card-line);border-radius:16px;padding:18px 20px}
body.mg-desk .dash .dash-panel .dash-card{background:none;border:0;box-shadow:none;padding:0}
/* A detail page's hero on its own lighter band, edge to edge. */
body.mg-desk .rel-hero{background:var(--mgz-band)}
body.mg-desk .rel-hero::after{display:none}
body.mg-desk .rel-body{padding-top:28px}
/* ── Z2: calm type ── */
body.mg-desk .page-title{font-stretch:100%;font-weight:700;font-size:34px;letter-spacing:0;text-transform:none}
body.mg-desk #view :is(.panel-head h2,.section-title,.rel-side-label,.dash-crate-title,.dash-panel-head h2,.srow-head,.settings-group-title){
font-family:'IBM Plex Mono',monospace !important;font-stretch:100%;font-weight:500;font-size:10.5px !important;letter-spacing:.18em;text-transform:uppercase;color:var(--mg-label)}
body.mg-desk :is(.panel-head h2,.section-title,.rel-side-label,.dash-panel-head h2) .section-count{font-size:10.5px}
body.mg-desk .rel-hero-body .detail-title-block{font-size:44px;line-height:1.02}
body.mg-desk .rel-hero-body .detail-title-block .detail-title{font-stretch:100%;font-weight:700;text-transform:none;letter-spacing:-.005em}
body.mg-desk .dash-hero-stats .dash-hero-line{font-stretch:100%;font-weight:700;font-size:40px;text-transform:none;letter-spacing:-.005em}
/* List rows: compact, a thin line between them, the number plain mono. */
body.mg-desk :is(.album-detail .rel-tracklist-panel .track-row,.show-detail .sd-panel--setlist .setlist-row){padding:8px 2px;gap:12px;border-bottom:1px solid var(--mg-line-soft);border-radius:0}
body.mg-desk .album-detail .rel-tracklist-panel .track-row .track-title{font-size:14.5px;font-weight:600}
body.mg-desk #view .show-detail .sd-panel--setlist .setlist-row > :not(.track-no){font-size:14.5px !important;font-weight:600}
body.mg-desk :is(.rel-tracklist-panel,.show-detail .sd-panel--setlist) .track-no{
min-width:24px;width:auto;height:auto;padding:0;border:0;background:none;box-shadow:none;justify-content:flex-start;
font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--mg-faint)}
body.mg-desk .rel-tracklist-panel .track-playtime{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft)}
/* ── Z3: glow budget — only the main buttons and the page you're on ── */
body.mg-desk{--mg-glow:none;--mg-live-glow:none;--mg-text-glow:none;--mg-ring-glow:none;--mg-live-ring-glow:none;
--mg-dot-glow:none;--mg-cover-glow:0 0 0 transparent;--mg-fav-glow:none;--mg-lock-glow:none;--mg-tag-glow:none;--mg-note-glow:none}
body.mg-desk .sidebar .nav-btn.active{background:var(--chrome-active);color:var(--accent);box-shadow:inset 3px 0 0 var(--accent),-8px 0 16px -8px var(--accent)}
body.mg-desk .sidebar .nav-btn.active .nav-icon{filter:drop-shadow(0 0 6px rgba(127,220,255,.6))}
/* Liner notes / My memory: a thin frame, no glowing edge. */
body.mg-desk #view .rel-note-panel .panel-add-link,body.mg-desk #view .rel-note-panel .my-note-text{border-width:1px;border-color:var(--mg-accent-line);box-shadow:none}
/* ── Z5: a real top bar ── */
body.mg-desk .content-topbar{
min-height:62px;padding:0 30px;pointer-events:auto;justify-content:flex-start;
background:var(--mgz-bar);border-bottom:1px solid var(--line);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.mg-desk .content-topbar::before{display:none}
body.mg-desk.mg-detail .content-head{margin-bottom:0}
body.mg-desk.mg-detail .content-topbar{min-height:62px}
body.mg-desk.mg-main .main{padding-top:28px}
/* The path on the left: "Releases / Paper Lanterns", the parent a link. */
body.mg-desk:not(.mg-sub) .content-topbar .topbar-page-label{display:flex;margin-left:0;font-size:11px;letter-spacing:.18em}
body.mg-desk:not(.mg-sub) .content-topbar .mg-top-back{display:none !important}
/* The search field always open, + Add as a pill beside it. */
body.mg-desk .content-topbar .mg-search-btn{display:none !important}
body.mg-desk:not(.mg-sub) .content-topbar .search-wrap:not(.hidden){display:flex;width:320px}
body.mg-desk .content-topbar .search-wrap .search-input{width:100%}
body.mg-desk .content-topbar.search-open .search-input{box-shadow:none}
body.mg-desk .content-topbar .search-wrap.has-text .search-clear{display:block}
body.mg-desk .content-topbar .btn-add:not(.hidden){width:auto;height:38px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:700;display:flex;align-items:center}
body.mg-desk .content-topbar .btn-add::before{content:none}
/* The hero no longer sits under a floating bar. */
body.mg-desk :is(.artist-hero--plain,.song-hero--plain) .rel-hero-inner,body.mg-desk .album-detail .rel-hero--plain .rel-hero-inner,
body.mg-desk .sd-hero--plain .rel-hero-inner{padding-top:34px}
body.mg-desk .rel-hero-inner{padding-top:34px}
/* Shows → Map: the map starts under the bar. */
body.mg-desk .shows-page #gl-map-slot.wm-gl-slot{top:62px}
body.mg-desk .shows-page:has(#gl-map-slot) .filterbar{top:84px}
/* Add / Edit: Cancel and Save stay at the top right, in the bar. */
body.mg-desk .add-actions-bar{top:12px}
/* ── Z4's note: the tagline at the bottom of a short page ── the page
fills the screen and the tagline sits on its bottom edge (absolute, so
the page itself stays a plain block). */
body.mg-desk .content-col{display:flex;flex-direction:column;min-height:calc(var(--vh, 1vh) * 100)}
body.mg-desk #view{flex:1 0 auto;width:100%;box-sizing:border-box;display:flex;flex-direction:column}
body.mg-desk #view > *{width:100%;box-sizing:border-box}
body.mg-desk #view > :has(> .mg-page-tagline){flex:1 0 auto;position:relative;padding-bottom:72px}
body.mg-desk #view > * > .mg-page-tagline{position:absolute;left:0;right:0;bottom:0}
/* ── Round 5 follow-up (the owner, 2026-10-07) ── */
/* The hero's three numbers one fixed width on every artist and song page,
not as wide as the longest line above them. */
body.mg-desk :is(.artist-detail,.song-detail) .song-hero-stats{width:440px;max-width:100%;flex:none}
/* The blurred picture behind the hero, as on a song page, on an artist
(their photo) and a release (its cover) too; without one the band stays. */
body.mg-desk :is(.artist-detail,.album-detail) .rel-hero-bg[style]{display:block}
body.mg-desk :is(.artist-detail,.album-detail,.song-detail) .rel-hero-bg:not([style]){display:none}
/* A show without a photo: the text on the left like every other detail
page, not centred. */
body.mg-desk .sd-hero--plain .rel-hero-cols{flex-direction:column;align-items:flex-start;text-align:left}
body.mg-desk .sd-hero--plain .rel-hero-body{align-items:flex-start;text-align:left}
body.mg-desk .sd-hero--plain .rel-hero-tags{justify-content:flex-start}
body.mg-desk .sd-hero--plain .sd-with,body.mg-desk .sd-hero--plain .rel-hero-tools{align-self:flex-start}
body.mg-desk .sd-hero--plain .rel-hero-icons{justify-content:flex-start}
/* The Dashboard page-wide, as in v2.6.0 (the owner, 2026-10-07 — not the
centred column after all): its own width beats round 5's #view > * rule.
Favorites right under Through the crate again; a phone keeps them last. */
body.mg-desk #view > .dash{width:calc(var(--hero-pane) - (2 * var(--hero-edge)))}
body.mg-desk .dash-body > *,body.mg-desk .dash-body > :is(.panel-grid,.dash-row-split) > *{order:2}
body.mg-desk .dash-body > .dash-crate{order:0}
body.mg-desk .dash-body > .dash-fav-panel{order:1}
/* A featured event (item 183) right under the welcome, as on a phone (the owner, 2026-10-10). */
body.mg-desk .dash-body > .ev-dash{order:-1}
/* Menus (Tags, ⋯ More, + Add, View, Sort, the dropdowns, the avatar menu):
the desktop's own surface — a card a shade above the page — not the
phone sheets' glow. */
body.mg-desk{--mgz-menu:#ffffff}
:root[data-theme="dark"] body.mg-desk{--mgz-menu:#111d33}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.mg-desk{--mgz-menu:#111d33}}
body.mg-desk .year-filter-panel.hero-more-panel,body.mg-desk .year-filter-panel.tag-manage-panel,body.mg-desk .add-menu,
body.mg-desk .year-filter-panel.fb-menu,body.mg-desk .year-filter-panel.cf-panel,
body.mg-desk .year-filter-panel:not(.gsearch-panel):not(.view-switch-menu):not(.tag-manage-panel):not(.cf-panel):not(.hero-more-panel) > .year-filter-panel-scroll,
body.mg-desk .sidebar .user-menu-panel{
background:var(--mgz-menu);border:1px solid var(--mgz-card-line);box-shadow:0 18px 40px rgba(0,0,0,.35)}
/* Tags & favorite: the rows straight on the menu, no card inside it. */
body.mg-desk .tag-manage-panel .year-filter-panel-scroll{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
/* ⋯ More dressed like the Tags pill beside it. */
body.mg-desk .rel-hero .hero-more-btn{height:36px;padding:0 15px;border:1px solid var(--mg-hero-line);background:var(--mg-hero-fill);color:var(--accent-dark);font-size:13px;font-weight:600;box-shadow:none}
body.mg-desk .rel-hero .hero-more-btn svg{fill:var(--accent-dark)}
body.mg-desk .rel-hero .hero-more-btn:hover{background:var(--mg-hero-hover);border-color:var(--mg-accent-line)}
/* Add / Edit: Cancel and Add (Save) under the preview on the right, what's
still missing just above them — no longer up in the top bar. */
body.mg-desk .form-preview .add-actions-bar{position:static;top:auto;right:auto;z-index:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:26px;padding-top:20px;border-top:1px solid var(--mg-line-soft, var(--line))}
body.mg-desk .form-preview .add-actions-bar .form-missing{max-width:none;text-align:left}
body.mg-desk .form-preview .add-actions-bar .action-row{display:flex;flex-direction:row;gap:10px;justify-content:stretch}
body.mg-desk .form-preview .add-actions-bar .submit-btn{flex:1 !important}
body.mg-desk .form-preview .add-actions-bar .submit-btn,body.mg-desk .form-preview .add-actions-bar .btn-cancel{white-space:nowrap;padding:11px 16px !important}
/* ── Featured events (TODO.md item 183, the owner's picks 2026-10-09) ──
The Dashboard card (a glowing card, the poster on top), the event page
(the poster as hero, day pills, the line-up per stage), the "I'm going"
sheet and the public page from the event's link. One look for every width;
a desktop only lets the card span the Dashboard's grid. */
.ev-dash{display:flex;flex-direction:column;gap:14px;margin-bottom:30px}
body.mg-desk .ev-dash{grid-column:1 / -1;margin-bottom:0}
.ev-card{display:flex;flex-direction:column;border:1px solid var(--mg-accent-line);border-radius:18px;overflow:hidden;background:var(--mg-card-hi);box-shadow:var(--mg-glow)}
body.mg-desk .ev-card{flex-direction:row}
.ev-card-poster{display:block;padding:0;border:0;background:none;cursor:pointer;max-height:220px;overflow:hidden}
body.mg-desk .ev-card-poster{max-height:none;width:240px;flex:none}
.ev-card-poster img{display:block;width:100%;height:100%;object-fit:cover}
.ev-card-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;min-width:0}
.ev-eyebrow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label)}
.ev-date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-live-ink)}
.ev-card-title{all:unset;cursor:pointer;font-weight:800;font-size:19px;line-height:1.2;color:var(--ink)}
.ev-card-title:hover{color:var(--accent)}
.ev-meta{font-size:13px;color:var(--ink-mid)}
.ev-going{font-size:12.5px;color:var(--ink-soft)}
.ev-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ev-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ev-btns .submit-btn,.ev-card-actions .btn-outline{width:auto}
.ev-joined{font-weight:700;font-size:14px;color:var(--accent)}
.ev-page{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}
.ev-hero{position:relative;border-radius:18px;overflow:hidden}
.ev-hero.has-poster{min-height:220px;display:flex;align-items:flex-end;background:var(--mg-card-solid)}
.ev-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-hero.has-poster .ev-hero-text{position:relative;width:100%;padding:48px 16px 14px;background:linear-gradient(transparent,rgba(5,12,28,.88));color:#fff}
.ev-hero.has-poster .ev-date{color:#f0b878}
.ev-hero.has-poster .ev-place{color:rgba(255,255,255,.85)}
.ev-hero-text{display:flex;flex-direction:column;gap:4px;padding:6px 0 2px}
.ev-title{margin:0;font-weight:800;font-size:clamp(24px,5vw,34px);letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
.ev-place{font-size:14px;color:var(--ink-mid)}
.ev-days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.ev-days::-webkit-scrollbar{display:none}
.ev-days .choice-pill{white-space:nowrap;flex:none}
.ev-days .choice-pill.is-mine:not(.on){border-color:var(--mg-accent-line);color:var(--accent)}
.ev-glow{height:2px;background:var(--mg-glowline);box-shadow:var(--mg-glowline-shadow);margin:2px 0}
.ev-section{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mg-label)}
.ev-lineup{display:flex;flex-direction:column}
.ev-stage{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label);padding:12px 0 4px}
.ev-act{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--mg-line-soft);font-size:15px;color:var(--ink)}
.ev-act-seen{margin-left:auto;color:var(--accent);font-weight:700}
.ev-empty{color:var(--ink-soft);font-size:14px;padding:8px 0}
.ev-open-show{align-self:flex-start}
.ev-foot{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.ev-foot .link-btn{font-size:12.5px}
.pof-event{margin-left:auto}
/* The sheet: days as rows with a check, then per begun day the acts per stage. */
.ev-join-head{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label);margin:2px 0 8px}
.ev-join-days{display:flex;flex-direction:column;gap:6px}
.ev-join-day,.ev-act-btn{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;cursor:pointer}
.ev-join-day{padding:10px 12px;border:1px solid var(--mg-line-soft);border-radius:12px;font-size:14.5px;color:var(--ink)}
.ev-join-day.on{border-color:var(--mg-accent-line);background:var(--mg-accent-tint)}
.ev-join-day[disabled]{cursor:default;opacity:.65}
.ev-join-check{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--mg-line-soft);display:grid;place-items:center;font-size:13px;color:var(--accent)}
.ev-join-day.on .ev-join-check,.ev-act-btn.on .ev-join-check,.ev-join-day.is-mine .ev-join-check{border-color:var(--mg-accent-line);background:var(--mg-accent-tint);box-shadow:var(--mg-glow)}
.ev-act-btn{padding:9px 0;border-bottom:1px solid var(--mg-line-soft);font-size:15px;color:var(--ink)}
.ev-act-btn .ev-join-check{margin-left:auto}
.ev-join-have{font-size:12px;color:var(--ink-soft)}
.ev-join-note{font-size:13px;color:var(--ink-soft);margin:10px 0 0}
.ev-join-seen{margin-top:14px}
.ev-join-seen-head{font-weight:700;font-size:14.5px;color:var(--ink)}
.ev-stage-btn{all:unset;box-sizing:border-box;display:flex;width:100%;justify-content:space-between;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mg-label);padding:14px 0 4px}
.ev-stage-btn span{color:var(--accent);letter-spacing:.08em}
.ev-join .sheet-buttons{margin-top:16px}
/* Signed out: the public page and the event above the sign-up card. */
.ev-public-body{width:100%;max-width:560px;margin:0 auto;padding:0 16px 24px;box-sizing:border-box}
.ev-public .ev-page{text-align:left}
.ev-auth-ctx{display:flex;gap:12px;align-items:center;border:1px solid var(--mg-accent-line);border-radius:16px;background:var(--mg-card-hi);box-shadow:var(--mg-glow);padding:10px 12px;margin-bottom:12px;text-align:left}
.ev-auth-ctx img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}
.ev-auth-ctx div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev-auth-ctx strong{font-size:15px;color:var(--ink)}
.ev-auth-ctx span:last-child{font-size:12.5px;color:var(--ink-mid)}
/* Admin → Events. */
.ev-adm-form{display:flex;flex-direction:column;gap:10px}
.ev-adm-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
.ev-adm-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.ev-adm-day{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid var(--mg-line-soft)}
.ev-adm-remove{width:auto}
.ev-adm-event{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--mg-line-soft)}
.ev-adm-event-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.ev-adm-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ev-adm-actions .btn-outline{width:auto}
.ev-adm-link{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-mid);word-break:break-all}
.ev-adm-qr{display:flex;align-items:center;gap:12px}
.ev-adm-qr img{width:160px;height:160px;border-radius:10px;background:#fff}
.ev-adm-poster{display:flex;gap:12px;align-items:flex-start}
.ev-adm-poster > img{width:90px;border-radius:10px;flex:none}
.ev-adm-poster > div{flex:1;min-width:0}
/* ── Privacy statement & terms of use (2026-10-09) ── one reading column,
in the app and signed out; "Privacy · Terms" under the sign-in screens. */
.legal-page{max-width:680px;margin:0 auto;padding:6px 0 18px;color:var(--ink)}
.legal-title{margin:0 0 4px;font-weight:800;font-size:clamp(24px,5vw,32px);letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.legal-updated{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mg-label);margin-bottom:12px}
.legal-section h2{font-size:16px;font-weight:700;margin:20px 0 6px;color:var(--ink)}
.legal-section p,.legal-section li{font-size:14.5px;line-height:1.6;color:var(--ink-mid)}
.legal-section p{margin:0 0 10px}
.legal-section ul{margin:0 0 10px;padding-left:20px}
.legal-section li{margin-bottom:6px}
.legal-section a{color:var(--accent)}
.legal-other{margin-top:18px}
.legal-public-body{width:100%;max-width:720px;margin:0 auto;padding:0 16px 24px;box-sizing:border-box;text-align:left}
.legal-back{margin:4px 0 8px}
.legal-links{display:flex;justify-content:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.legal-links .link-btn{font-size:12.5px;color:var(--ink-soft)}
/* The box to tick (sign-up, and the agree screen for an existing account). */
.legal-accept{display:flex;gap:10px;align-items:flex-start;margin:6px 0 12px;font-size:13px;line-height:1.5;color:var(--ink-mid);text-align:left}
.legal-accept .link-btn{font-size:13px;padding:0;vertical-align:baseline}
.legal-check{flex:none;width:22px;height:22px;margin-top:1px;border-radius:7px;border:1.5px solid var(--ink-soft);background:transparent;color:var(--accent);display:grid;place-items:center;font-size:13px;cursor:pointer;padding:0}
.legal-check.on{border-color:var(--mg-accent-line);background:var(--mg-accent-tint);box-shadow:var(--mg-glow)}
.legal-check:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.legal-changes{border:1px solid var(--mg-line-soft);border-radius:12px;padding:10px 12px;margin:6px 0 10px;text-align:left}
.legal-changes p{margin:4px 0 0;font-size:13.5px;color:var(--ink-mid)}
/* Versions: which one you read, which you agreed to, the earlier ones. */
.legal-old{border:1px solid var(--mg-live-line);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:13.5px;color:var(--ink-mid)}
.legal-agreed{font-size:13px;color:var(--accent);margin-bottom:6px}
.legal-versions{margin-top:22px;padding-top:12px;border-top:1px solid var(--mg-line-soft);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.legal-versions .meta-label{width:100%}
.legal-versions .link-btn.is-current{font-weight:700;text-decoration:none;color:var(--ink)}
.legal-first{width:100%;font-size:12.5px;color:var(--ink-soft)}
.legal-history{margin-top:6px}
/* ── Artist photos from Wikimedia Commons (TODO.md item 144) ──
"Find a photo ›" next to "+ Add a photo"; the sheet's photo grid; the crop
(a square view with the circle drawn over it); Admin → Suggest photos. */
.rel-add-cover{gap:10px;flex-wrap:wrap;align-items:center}
.rel-find-photo{font:inherit;font-size:14px;font-weight:600;color:var(--accent);background:none;border:1px solid var(--mg-accent-line);border-radius:999px;padding:7px 14px;cursor:pointer}
.rel-find-photo:hover{box-shadow:var(--mg-glow)}
.cp-head{font-size:13.5px;color:var(--ink-mid);margin:0 0 10px}
.cp-head .link-btn{font-size:13.5px;padding:0}
.cp-note{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0;text-align:center}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.cp-cand{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--mg-line-soft);border-radius:14px;font-size:12px;color:var(--ink-mid);min-width:0}
.cp-cand.on{border-color:var(--mg-accent-line);box-shadow:var(--mg-glow);background:var(--mg-accent-tint)}
.cp-cand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cp-sq{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--mg-card-solid)}
.cp-sq img{width:100%;height:100%;object-fit:cover;display:block}
.cp-who{font-weight:700;color:var(--ink)}
.cp-lic{font-size:10.5px;letter-spacing:.06em;color:var(--mg-label)}
.cp-view{position:relative;margin:4px auto 0;overflow:hidden;border-radius:14px;background:#000;touch-action:none;cursor:grab;user-select:none}
.cp-view:active{cursor:grabbing}
.cp-view img{position:absolute;max-width:none;pointer-events:none}
.cp-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(3,8,20,.55);outline:2px solid var(--accent);outline-offset:-2px;pointer-events:none}
.cp-zoom{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}
.cp-zoom .cp-note{margin:0}
.ap-list{display:flex;flex-direction:column;gap:8px}
.ap-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 12px;border:1px solid var(--mg-line-soft);border-radius:14px}
.ap-pic{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mg-card-solid)}
.ap-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ap-body{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink-soft)}
.ap-body b{font-size:14.5px;color:var(--ink)}
.ap-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
.ap-actions .submit-btn,.ap-actions .btn-outline{width:auto;padding:7px 12px}
/* ── A whole event's programme in one paste box (item 183, 2026-10-10) ──
The box and its live preview side by side on a desktop, stacked on a
phone; a time in front of an act on the event page and in the sheet. */
.ev-prog{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:6px;align-items:start}
@media (max-width:900px){.ev-prog{grid-template-columns:1fr}}
.ev-prog textarea{font-family:'IBM Plex Mono',monospace;font-size:12.5px;line-height:1.55;min-height:320px;white-space:pre;overflow-x:auto}
.ev-prog-preview{border:1px solid var(--mg-line-soft);border-radius:14px;padding:12px 14px;max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;font-size:13px;min-width:0}
.ev-prog-sum{font-weight:700}
.ev-prog-sum.is-ok{color:var(--accent)}
.ev-prog-sum.is-bad{color:var(--warn-ink, #c0812c)}
.ev-prog-warn{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--warn-ink, #c0812c)}
.ev-prog-changes{display:flex;flex-direction:column;gap:3px;border:1px solid var(--mg-line-soft);border-radius:10px;padding:8px 10px}
.ev-prog-chg{font-size:12.5px}
.ev-prog-chg.is-add{color:var(--success, #1f7a4d)}
.ev-prog-chg.is-del{color:var(--danger)}
.ev-prog-chg.is-mov{color:var(--ink-mid)}
.ev-prog-days{display:flex;flex-direction:column;gap:14px}
.ev-prog-day{display:flex;flex-direction:column;gap:2px}
.ev-prog-day > b{font-size:13.5px;color:var(--ink)}
.ev-prog-day .ev-stage{padding:6px 0 2px}
.ev-prog-act{display:flex;gap:8px;color:var(--ink-mid)}
.ev-act-time{flex:none;min-width:7em;font-size:12px;color:var(--mg-label)}