/*
Theme Name:  GTG 3.0
Description: Guitar Tone Gurus 3.0 — presentation only. Business logic lives in the GTG Picks plugin.
Version:     0.2.0
Author:      Guitar Tone Gurus
Requires PHP: 8.1
Text Domain: gtg3
*/

/* Tokens ------------------------------------------------------------------
   The interface stays neutral stage-black so the warm product art glows.
   Color comes from footswitch LED rings: each device has its own (--led),
   set per element by the theme. */
:root { color-scheme: dark; } /* Native controls (date pickers, scrollbars) draw in dark mode. */
[hidden] { display: none !important; } /* Hidden always wins over display rules like .grid. */

:root {
	--blackout: #07080c;
	--floor: #141722;
	--floor-2: #1d2130;
	--rule: #262b3b;
	--house: #eef0f6;
	--muted: #8b93a7;
	--spot: #f6ead2;
	--led: #8b93a7;
	--display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
	--text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--max: 1320px;
	--gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--blackout);
	color: var(--house);
	font: 400 1rem/1.6 var(--text);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1; }
h2 { font: 800 clamp(2rem, 4.2vw, 3.1rem)/.95 var(--display); letter-spacing: .005em; }
:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--spot); color: var(--blackout); padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.led { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 25%, transparent), 0 0 10px var(--led); flex: none; }

.btn { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.3em; border-radius: 6px; background: var(--spot); color: var(--blackout); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background .2s; }
.btn:hover { background: #fff; }
.btn.is-ghost { background: transparent; color: var(--house); box-shadow: inset 0 0 0 1px var(--rule); cursor: default; }
.text-link { color: var(--muted); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--rule); }
.text-link:hover { color: var(--house); text-decoration-color: currentColor; }

/* Header */
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--rule); background: var(--blackout); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.wordmark { font: 900 1.55rem/1 var(--display); letter-spacing: .01em; text-decoration: none; margin-right: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.site-nav a, .account-link { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; }
.site-nav a:hover, .account-link:hover, .site-nav .current-menu-item a { color: var(--house); }
.account-link { padding: .45em .9em; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule); }

/* Haze ---------------------------------------------------------------------
   Room haze, the kind a fog machine leaves on a stage: a thin, even veil that hangs in the air,
   settles toward the floor and barely moves. It is there to give the light something to glow in,
   so it is faint everywhere except inside the spotlight's cone. One small SVG noise tile, swayed
   a little with transforms only (never scrolled), so it stays cheap. */
:root {
	--fog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .0065' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .75 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
	/* Wispier, with more contrast: the texture the spotlight picks out inside its cone. */
	--fog-wisp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .011' numOctaves='4' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.7 0 0 0 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
body::before, body::after, .stage::before, .stage::after, .stage-beam::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: -160px; right: -160px; pointer-events: none;
	background: var(--fog) repeat-x 0 100% / 1400px 100%;
	animation: haze 70s ease-in-out infinite alternate;
	will-change: transform;
}
/* Site-wide: a whisper behind the cards, heavier toward the bottom of the screen. */
body::before, body::after {
	position: fixed; z-index: -1; opacity: .12;
	-webkit-mask: linear-gradient(to bottom, transparent 10%, #000 90%); mask: linear-gradient(to bottom, transparent 10%, #000 90%);
}
body::after { background-position: 700px 100%; opacity: .09; animation-duration: 95s; animation-direction: alternate-reverse; }
/* On the stage: settled on the floor, tinted by the LED of the rig in the spotlight. */
.stage::before, .stage::after {
	z-index: -1;
	background: color-mix(in srgb, var(--led) 45%, var(--spot));
	-webkit-mask: var(--fog) repeat-x 0 100% / 1400px 100%, linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.35) 62%, #000 96%);
	-webkit-mask-composite: source-in;
	mask: var(--fog) repeat-x 0 100% / 1400px 100%, linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.35) 62%, #000 96%);
	mask-composite: intersect;
	opacity: .36; transition: background-color .8s ease;
}
.stage::after {
	-webkit-mask-position: 600px 100%, 0 0; mask-position: 600px 100%, 0 0;
	opacity: .24; animation-duration: 95s; animation-direction: alternate-reverse;
}
/* Inside the beam's cone (the beam is clipped to it): the haze the light picks out. */
.stage-beam::before { background-image: var(--fog-wisp); opacity: .5; animation-duration: 55s; -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,.25), #000 75%); mask: linear-gradient(to bottom, rgba(0,0,0,.25), #000 75%); }
@keyframes haze {
	from { transform: translate3d(-110px, 0, 0); }
	to { transform: translate3d(110px, 8px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	body::before, body::after, .stage::before, .stage::after, .stage-beam::before { animation: none; }
}

/* The stage ---------------------------------------------------------------- */
.stage {
	--spot-x: 50%;
	--spot-w: 27%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(calc(100svh - 65px), 800px);
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* let the rig row scroll instead of widening the grid */
	grid-template-rows: auto 1fr;
	background:
		radial-gradient(90% 42% at 50% 100%, var(--floor-2) 0%, transparent 70%),
		linear-gradient(to bottom, var(--blackout) 50%, var(--floor) 88%, var(--blackout) 100%);
}
.stage-beam {
	position: absolute; z-index: -1; top: -5%; bottom: 8%;
	left: var(--spot-x); width: calc(var(--spot-w) * 2.1);
	transform: translateX(-50%);
	clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--spot) 5%, transparent),
		color-mix(in srgb, var(--spot) 20%, transparent) 62%,
		color-mix(in srgb, var(--led) 38%, transparent));
	filter: blur(10px);
	opacity: 0;
	transition: left .7s cubic-bezier(.2,.7,.2,1), width .7s cubic-bezier(.2,.7,.2,1), opacity 1.6s ease .2s;
}
.stage.is-on .stage-beam { opacity: 1; }

.stage-copy {
	position: relative; width: 100%;
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px 48px; align-items: end;
	padding-top: clamp(36px, 7vh, 88px); padding-bottom: 12px;
}
.stage-title {
	font: 900 clamp(3rem, 6.6vw, 6.4rem)/.86 var(--display);
	letter-spacing: -.005em;
	max-width: 13ch;
	text-wrap: balance;
}
.readout { max-width: 36ch; padding-bottom: .4em; }
.readout-name { display: flex; align-items: center; gap: .45em; margin: 0; font: 800 1.7rem/1 var(--display); }
.readout-name::before { content: ""; width: .42em; height: .42em; border-radius: 50%; background: var(--led); box-shadow: 0 0 12px var(--led); transition: background .4s, box-shadow .4s; }
.readout-blurb { margin: .5em 0 1.2em; color: var(--muted); }

.stage-floor { position: relative; align-self: end; padding: 32px var(--gutter) clamp(20px, 3.5vh, 40px); }
.rigs {
	list-style: none; margin: 0 auto; padding: 0; max-width: 1480px;
	display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.6vw, 28px);
}
.rig { position: relative; }
.rig--hx-stomp { width: 13%; }
.rig--helix { width: 22%; }
.rig--helix-stadium { width: 28%; }
.rig--pod-go { width: 20%; }
.rig--pod-express { width: 15%; }
.rig a { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--muted); border-radius: 8px; }
.rig img {
	width: 100%;
	filter: brightness(.22) saturate(.3);
	transition: filter .6s ease;
}
.stage.is-on .rig img { filter: brightness(.46) saturate(.55); }
.stage.is-on .rig a:hover img { filter: brightness(.7) saturate(.8); }
.stage.is-on .rig.is-lit img { filter: brightness(1.04) saturate(1.05) drop-shadow(0 18px 24px rgba(0,0,0,.7)); }
/* Pool of light on the floor under the lit rig, tinted by its LED. */
.rig::before {
	content: ""; position: absolute; z-index: -1; left: -18%; right: -18%; bottom: 20px; height: 38%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--led) 34%, transparent), transparent);
	filter: blur(14px); opacity: 0; transition: opacity .6s ease;
}
.stage.is-on .rig.is-lit::before { opacity: 1; }
.rig-name { display: flex; align-items: center; gap: .45em; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: color .4s; }
.rig-name .led { opacity: .35; transition: opacity .4s; }
.rig-count { color: var(--muted); font-weight: 400; }
.rig.is-lit .rig-name { color: var(--house); }
.rig.is-lit .rig-name .led { opacity: 1; }

/* Sections */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }

/* Product grid: art first, words underneath; no boxes. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 36px 24px; }
.card a { display: block; text-decoration: none; }
.card-media { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--floor); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.card a:hover .card-media img { filter: brightness(1.12); }
.card-media .placeholder { width: 100%; height: 100%; display: grid; place-items: center; font: 900 2.4rem var(--display); color: var(--rule); }
.card-device { display: flex; align-items: center; gap: .5em; margin-top: 14px; color: var(--muted); font-size: .85rem; }
.card-title { font: 600 1.05rem/1.3 var(--text); margin: 4px 0 6px; }
.card a:hover .card-title { text-decoration: underline; text-underline-offset: .2em; }
.card-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .88rem; }
.price { font-weight: 600; color: var(--house); }
.price.is-free { color: var(--spot); }

/* Filters */
.filter { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.filter-label { color: var(--muted); font-size: .85rem; min-width: 4.5em; }
.filter ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .35em .8em; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); text-decoration: none; font-size: .88rem; }
.chip:hover { color: var(--house); box-shadow: inset 0 0 0 1px var(--muted); }
.chip.is-active { color: var(--blackout); background: var(--spot); box-shadow: none; }
.chip-n { font-size: .78em; opacity: .6; font-variant-numeric: tabular-nums; }
.chip.is-active .chip-n { opacity: .7; }
.chip-x { margin-left: .15em; font-size: 1.1em; line-height: 1; }
.chip.is-empty { opacity: .35; cursor: not-allowed; }
.chip.is-empty:hover { color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.filters-clear { margin: 4px 0 0; font-size: .9rem; }
.filters { margin-bottom: 36px; }

.archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.archive-head h1 { font: 900 clamp(2.6rem, 6vw, 4.8rem)/.9 var(--display); }
.archive-head .count { color: var(--muted); }

/* Setlist: genres set big, like the list taped to the stage floor. */
.setlist { list-style: none; margin: 28px 0 0; padding: 0; columns: 3 220px; column-gap: 40px; }
.setlist li { break-inside: avoid; }
.setlist a { display: inline-flex; align-items: baseline; gap: .35em; padding: .12em 0; font: 800 clamp(1.9rem, 3.6vw, 2.9rem)/1.05 var(--display); text-decoration: none; }
.setlist a:hover { color: var(--spot); }
.setlist span { font: 500 .9rem var(--text); color: var(--muted); }

/* Single product ------------------------------------------------------------
   The hero band takes its light from the pack's own art (--art, blurred), so each
   page carries its mood; the device LED (--led) tags the rig and the preset strips. */
.pack-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--rule); }
.pack-hero::before {
	content: ""; position: absolute; inset: -20%; z-index: -1;
	background: var(--art) center / cover no-repeat;
	filter: blur(90px) saturate(1.3); opacity: .32;
}
.pack-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, var(--blackout)); }
.crumbs { display: flex; gap: .6em; padding-top: 22px; color: var(--muted); font-size: .88rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--house); }
.pack-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(20px, 3vw, 36px) 0 clamp(40px, 6vw, 72px); }
.pack-art img { border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.product-device { display: inline-flex; align-items: center; gap: .5em; color: var(--house); text-decoration: none; font-weight: 600; font-size: .95rem; }
.product-device:hover { text-decoration: underline; text-underline-offset: .2em; }
.pack-info h1 { font: 900 clamp(2.6rem, 5.4vw, 4.8rem)/.88 var(--display); margin: 14px 0 20px; text-wrap: balance; }
.product-excerpt { color: #c9cedb; font-size: 1.08rem; max-width: 50ch; margin: 0; }
.buy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 28px 0 8px; }
.buy .price { font: 900 2.4rem/1 var(--display); }
.buy .btn { font-size: 1.02rem; padding: .9em 1.5em; }
.file-note { color: var(--muted); font-size: .82rem; word-break: break-all; margin: 8px 0 0; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: .95rem; }
.facts dt { color: var(--muted); font-size: .82rem; }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; }

/* Preset list as footswitch scribble strips. */
.strips-section { padding: clamp(40px, 6vw, 72px) 0 0; }
.strips-section h2 { margin-bottom: 20px; }
.strips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.strips li {
	position: relative; padding: 16px 16px 14px; border-radius: 6px;
	background: #0e1018; box-shadow: inset 0 0 0 1px var(--rule);
	font: 700 1.15rem/1.15 var(--display); letter-spacing: .01em; overflow-wrap: anywhere;
}
.strips li::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 2px; border-radius: 2px; background: var(--led); box-shadow: 0 0 12px var(--led); }

.pack-body { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.product-content { color: #c9cedb; max-width: 68ch; font-size: 1.02rem; }
.product-content h3 { font: 800 1.6rem/1.1 var(--display); color: var(--house); margin: 1.7em 0 .5em; }
.product-content > :first-child { margin-top: 0; }
.product-content li { margin: .25em 0; }
.product-content strong { color: var(--house); font-weight: 600; }
.product-content code { font-size: .9em; background: var(--floor); padding: .1em .35em; border-radius: 4px; }

/* The Pick icon, used wherever an amount of Picks appears. Sized to the text around it. */
.picks { display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.pick-icon { width: .82em; height: .9em; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn .picks { gap: .15em; }
.picks-amount .pick-icon { filter: drop-shadow(0 4px 14px rgba(246,234,210,.18)); }
.picks-split { color: var(--muted); margin: 8px 0 0; }

/* Forms, notices, account ------------------------------------------------ */
.picks-pill { margin-left: .4em; padding: .1em .5em; border-radius: 4px; background: var(--floor-2); color: var(--house); font-size: .82em; }
.notice { padding: 12px 16px; border-radius: 8px; margin: 0 0 18px; font-size: .95rem; box-shadow: inset 3px 0 0 var(--muted); background: var(--floor); }
.notice--ok { box-shadow: inset 3px 0 0 var(--success, #2fd6a1); }
.notice--error { box-shadow: inset 3px 0 0 #ff4d5e; }
.pack-info .notice { margin-top: 22px; }
.get-form { display: inline; margin: 0; }
.buy .text-link { font-size: .92rem; }

.account { padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(56px, 8vw, 96px); }
.auth { max-width: 440px; margin: 0 auto; }
.auth h1, .account-head h1 { font: 900 clamp(2.6rem, 6vw, 4rem)/.9 var(--display); margin-bottom: 12px; }
.auth-lede { color: var(--muted); margin: 0 0 28px; }
.auth-alt { color: var(--muted); font-size: .92rem; margin: 14px 0 0; }
.form { display: grid; gap: 16px; }
.form--wide { max-width: 520px; }
.field { display: grid; gap: 6px; }
.field span { font-size: .9rem; font-weight: 600; }
.field em { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: .75em .9em; border-radius: 6px; border: 1px solid var(--rule); background: var(--floor); color: var(--house); font: inherit; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2em; }
.field select option, .field select optgroup { background: var(--floor); color: var(--house); }
.gtg-loc { display: grid; gap: 16px; }
.field [hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.form-note { margin: 0; font-size: .85rem; color: var(--muted); }
.field input:focus, .field select:focus { outline: 2px solid var(--spot); outline-offset: 1px; border-color: transparent; }
.check { display: flex; align-items: center; gap: .5em; font-size: .92rem; color: var(--muted); }
.fieldset { border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px 16px; margin: 0; }
.fieldset legend { padding: 0 6px; font-size: .9rem; color: var(--muted); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.account-head h1 { margin: 0; }
.account-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.account-nav a { padding: .5em .9em; border-radius: 6px; color: var(--muted); text-decoration: none; font-weight: 500; }
.account-nav a:hover { color: var(--house); }
.account-nav a[aria-current="page"] { background: var(--spot); color: var(--blackout); }
.account-meta { color: var(--muted); margin: 0 0 16px; }
.account-h2 { margin: 40px 0 14px; font-size: 1.9rem; }
.settings-part { scroll-margin-top: 90px; }
.settings-part:first-child .account-h2 { margin-top: 8px; }
.settings-part + .settings-part { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--rule); }
.fieldset .check + .check { margin-top: 10px; }
.field textarea { resize: vertical; line-height: 1.5; min-height: 3.2em; }
.field textarea:focus { outline: 2px solid var(--spot); outline-offset: 1px; border-color: transparent; }
.field input[type="file"] { padding: .6em; }
.field small.form-note code { font-size: .85em; background: var(--floor); color: var(--house); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rule); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 14px; }
.check-grid .check + .check { margin-top: 0; }
.pack-form { max-width: 720px; }
.packs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.packs-head .account-meta { margin: 0; }
.packs-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.account-h3 { font: 800 1.25rem/1.1 var(--display); margin: 30px 0 10px; }
.table-scroll { overflow-x: auto; max-width: 760px; }
.withdraw-form { margin-top: 12px; }
.desc-preview { border: 1px dashed var(--rule); border-radius: 8px; padding: 12px 16px 4px; }
.desc-preview-label { margin: 0 0 8px; font-size: .8rem; color: var(--muted); }
.desc-preview-body h3 { font-size: 1.15rem; margin: 14px 0 6px; }
.desc-preview-body h3:first-child { margin-top: 0; }
.desc-preview-body p, .desc-preview-body ul { margin: 0 0 10px; }
.desc-preview-body ul { padding-left: 1.2em; }
.zip-name { line-height: 1.7; }
.zip-name code { font-size: .85em; background: var(--floor); color: var(--house); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rule); }
.zip-warning { display: block; margin-top: 6px; color: #ff8a8a; }
.zip-warning[hidden] { display: none; }
.price-choice .check { flex-wrap: wrap; color: var(--house); }
.price-input { width: 80px; padding: .45em .6em; border-radius: 6px; border: 1px solid var(--rule); background: var(--floor); color: var(--house); font: inherit; }
.price-input:disabled { opacity: .45; }
.price-choice .form-note { display: block; margin-top: 10px; }
.field textarea::placeholder, .field input::placeholder { color: var(--muted); opacity: .7; }
.history small { color: var(--muted); }
.account-foot { margin-top: 20px; }
.tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 28px 0 0; max-width: 1080px; }
.top { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; }
.top h2 { font-size: 1.25rem; margin: 0 0 10px; }
.top ol { margin: 0; padding: 0; list-style: none; counter-reset: top; display: grid; gap: 8px; }
.top li { counter-increment: top; display: grid; grid-template-columns: 1.4em 1fr; column-gap: 6px; font-size: .92rem; }
.top li::before { content: counter(top); color: var(--muted); font-variant-numeric: tabular-nums; grid-row: span 2; }
.top-name { overflow-wrap: anywhere; }
.top-n { color: var(--muted); font-size: .82rem; }

.library { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.library-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 14px 10px 10px; border-radius: 10px; background: var(--floor); }
.library-art img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; }
.library-text { display: grid; gap: 2px; min-width: 0; }
.library-device { display: inline-flex; align-items: center; gap: .45em; color: var(--muted); font-size: .82rem; }
.library-title { font-weight: 600; text-decoration: none; }
.library-title:hover { text-decoration: underline; }
.library-when { color: var(--muted); font-size: .82rem; }

.payout-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; max-width: 760px; }
.payout-figures div { padding: 14px 16px; border-radius: 10px; background: var(--floor); display: grid; gap: 4px; }
.payout-figures span { color: var(--muted); font-size: .85rem; }
.payout-figures strong { font: 800 1.7rem/1 var(--display); }
.payout-figures div:first-child strong { color: #2fd6a1; }
.payout-box { max-width: 760px; }
.payout-box h2 { font-size: 1.9rem; margin-bottom: 12px; }
.payout-box .form { max-width: 440px; margin-bottom: 8px; }
.payout-note { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
.payout-note p { margin: 0 0 8px; }
.payout-note strong { color: var(--house); font-weight: 600; }
.account-ls { margin-top: 12px; max-width: 70ch; }
@media (max-width: 620px) { .payout-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.range { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 24px; }
.range .field { max-width: 180px; }
.sales-total { margin-bottom: 8px; }
.empty { padding: 40px 0; max-width: 46ch; }
.empty h2 { margin-bottom: 10px; }
.empty p { color: var(--muted); margin: 0 0 22px; }

.picks-balance { padding: 28px; border-radius: 12px; background: var(--floor); max-width: 560px; }
.picks-amount { margin: 0; font: 900 clamp(3.4rem, 8vw, 5.2rem)/.9 var(--display); }
.picks-note { color: var(--muted); margin: 12px 0 20px; }
.history { width: 100%; max-width: 760px; border-collapse: collapse; font-size: .95rem; }
.history th { text-align: left; color: var(--muted); font-weight: 500; font-size: .85rem; padding: 0 14px 8px; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.history td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.history th:first-child, .history td:first-child { padding-left: 0; }
.history th:last-child, .history td:last-child { padding-right: 0; }
.history th.num { text-align: right; }
.history .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.account .history { max-width: 100%; display: block; overflow-x: auto; }
.history .num { text-align: right; font-variant-numeric: tabular-nums; }
.history .is-in { color: #2fd6a1; }
.history.expiry { max-width: 560px; }
.history tr.is-soon td { color: #ff8a95; }

@media (max-width: 760px) {
	.library-item { grid-template-columns: 56px minmax(0, 1fr); }
	.library-art img { width: 56px; height: 56px; }
	.library-item .btn { grid-column: 1 / -1; justify-content: center; }
	.account-link .picks-pill { display: none; }
}

/* Buy Picks (/picks/) ---------------------------------------------------- */
.store { padding-bottom: clamp(56px, 8vw, 96px); background: radial-gradient(70% 40% at 50% 0%, rgba(246,234,210,.07), transparent 70%); }
.store-head { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 28px; text-align: center; }
.store-head h1 { font: 900 clamp(3rem, 8vw, 5.6rem)/.88 var(--display); margin-bottom: 16px; }
.store-lede { color: #c9cedb; font-size: 1.1rem; max-width: 56ch; margin: 0 auto; }
.store-balance { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 8px 14px; border-radius: 999px; background: var(--floor); color: var(--muted); font-size: .95rem; }
.store-balance .picks { color: var(--house); font-weight: 600; }
.store .notice { max-width: 760px; margin: 0 auto 24px; }

.store-bundles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.store-bundle { display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 16px; background: var(--floor); box-shadow: inset 0 0 0 1px var(--rule); text-align: center; }
.store-bundle.is-best { background: linear-gradient(180deg, #1e2232, var(--floor)); box-shadow: inset 0 0 0 2px var(--spot), 0 24px 60px -24px rgba(246,234,210,.35); transform: translateY(-8px); }
.store-tag { align-self: center; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px; background: var(--floor-2); color: var(--muted); font-size: .82rem; font-weight: 600; }
.store-bundle.is-best .store-tag { background: var(--spot); color: var(--blackout); }
.store-picks { margin: 0; font: 900 clamp(3rem, 5vw, 4rem)/1 var(--display); display: flex; justify-content: center; align-items: baseline; gap: .15em; }
.store-picks > span:last-child { font-size: .38em; color: var(--muted); font-weight: 800; letter-spacing: .02em; }
.store-picks .pick-icon { width: .7em; height: .77em; }
.store-split { margin: 6px 0 18px; color: var(--muted); font-size: .92rem; min-height: 1.4em; }
.store-price { margin: 0; font: 800 2.4rem/1 var(--display); }
.store-per { margin: 6px 0 14px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.store-per strong { color: #2fd6a1; font-weight: 600; }
.store-enough { margin: 0 0 20px; padding-top: 14px; border-top: 1px solid var(--rule); color: #c9cedb; font-size: .9rem; line-height: 1.45; flex: 1; }
.store-bundle form, .store-bundle > .btn { margin-top: auto; }
.store-bundle .btn { width: 100%; justify-content: center; }
.btn.is-outline { background: transparent; color: var(--house); box-shadow: inset 0 0 0 1px var(--muted); }
.btn.is-outline:hover { background: var(--floor-2); }

.store-how, .store-notes { max-width: 820px; margin: clamp(48px, 7vw, 80px) auto 0; }
.store-how h2, .store-notes h2 { margin-bottom: 18px; text-align: center; }
.store-how ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.store-how li { counter-increment: s; padding: 18px; border-radius: 12px; background: var(--floor); color: var(--muted); font-size: .95rem; }
.store-how li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--floor-2); color: var(--house); font: 800 1.05rem var(--display); }
.store-how strong { display: block; color: var(--house); font-weight: 600; margin-bottom: 4px; }
.store-notes dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; margin: 0; }
.store-notes dt, .store-notes dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--rule); }
.store-notes dt { font-weight: 600; padding-right: 20px; }
.store-notes dd { color: var(--muted); }

@media (max-width: 980px) {
	.store-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.store-bundle.is-best { transform: none; }
}
@media (max-width: 620px) {
	.store-bundles, .store-how ol { grid-template-columns: 1fr; }
	.store-notes dl { grid-template-columns: 1fr; }
	.store-notes dd { border-top: 0; padding-top: 0; }
}

/* Blog --------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 36px 24px; }
.post-card a { display: block; text-decoration: none; }
.post-media { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--floor); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.post-media .placeholder { width: 100%; height: 100%; display: grid; place-items: center; font: 900 2.4rem var(--display); color: var(--rule); }
.post-card a:hover img { filter: brightness(1.12); }
.post-meta { color: var(--muted); font-size: .85rem; margin: 14px 0 4px; }
.post-title { font: 600 1.15rem/1.3 var(--text); }
.post-card a:hover .post-title { text-decoration: underline; text-underline-offset: .2em; }
.post-card.is-lead { grid-column: 1 / -1; }
.post-card.is-lead a { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.post-card.is-lead .post-title { font: 900 clamp(2rem, 4.4vw, 3.4rem)/.92 var(--display); transition: color .2s; }
/* The big title's lines sit too close for an underline (it would run through the next line): light it up instead. */
.post-card.is-lead a:hover .post-title { text-decoration: none; color: var(--spot); }
.post-excerpt { color: #c9cedb; margin: 14px 0 0; max-width: 46ch; }
.section-sub { margin: 8px 0 0; color: var(--muted); }
/* Backstage reel: three posts across, more a swipe or an arrow away; each stop snaps a post to the left edge. */
.backstage-nav { display: flex; align-items: center; gap: 10px; }
.backstage-nav .text-link { margin-left: 8px; }
.reel-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--floor-2); color: var(--house); font: 600 1.05rem/1 var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); transition: background .2s, opacity .2s; }
.reel-btn:hover:not(:disabled) { background: var(--spot); color: var(--blackout); }
.reel-btn:disabled { opacity: .35; cursor: default; }
.backstage .reel {
	display: grid; grid-auto-flow: column; grid-template-columns: none;
	grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; padding-bottom: 4px;
}
.backstage .reel::-webkit-scrollbar { display: none; }
.backstage .reel .post-card { scroll-snap-align: start; }
.backstage .reel:focus-visible { outline: 2px solid var(--spot); outline-offset: 6px; border-radius: 10px; }
@media (max-width: 900px) { .backstage .reel { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 560px) { .backstage .reel { grid-auto-columns: 84%; } }
@media (prefers-reduced-motion: reduce) { .backstage .reel { scroll-behavior: auto; } }
.backstage .post-excerpt { margin-top: 8px; font-size: .95rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.article-head { padding-top: 8px; max-width: 900px; }
.article-head h1 { font: 900 clamp(2.6rem, 6vw, 4.8rem)/.9 var(--display); margin: 14px 0 12px; text-wrap: balance; }
.article-hero { margin-top: 24px; }
.entry-hero { margin: 22px 0 30px; }
.entry-hero img { border-radius: 14px; width: 100%; height: auto; }
.article-hero img { border-radius: 14px; width: 100%; max-height: 560px; object-fit: cover; }
.article-body { max-width: 68ch; margin: clamp(28px, 5vw, 48px) 0; font-size: 1.08rem; line-height: 1.75; }
.article-body h2 { font: 800 clamp(1.7rem, 3vw, 2.2rem)/1.05 var(--display); color: var(--house); margin: 1.6em 0 .5em; }
.article-body img { border-radius: 10px; margin: 1.2em 0; }
.article-body a { color: var(--spot); }
.article-body blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--rule); color: var(--house); }
.article-body pre, .article-body code { background: var(--floor); border-radius: 6px; }
.article-body pre { padding: 14px 16px; overflow-x: auto; }
.article-cta { max-width: 68ch; margin-bottom: clamp(48px, 7vw, 88px); padding: 24px; border-radius: 12px; background: var(--floor); }
.article-cta h2 { font-size: 1.9rem; margin-bottom: 8px; }
.article-cta p { color: var(--muted); margin: 0 0 16px; }

@media (max-width: 760px) {
	.post-card.is-lead a { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 48px 0 56px; color: var(--muted); font-size: .92rem; }
.footer-mark { font: 900 1.8rem/1 var(--display); color: var(--house); margin: 0 0 10px; }
.footer-small { font-size: .8rem; max-width: 70ch; }
.footer-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--house); }
.entry { padding: 48px 0 80px; max-width: 70ch; }
.entry h1 { font: 900 clamp(2.4rem, 5vw, 4rem)/.92 var(--display); margin-bottom: 20px; }
.pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 6px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--rule); text-decoration: none; color: var(--muted); }
.pagination .current { background: var(--spot); color: var(--blackout); box-shadow: none; }

/* Phones: the stage becomes a swipeable row of rigs. */
@media (max-width: 760px) {
	.site-nav li:not(:first-child) { display: none; }
	.site-header .wrap { gap: 16px; }
	.stage { min-height: 0; }
	.stage-copy { grid-template-columns: 1fr; }
	.stage-floor { padding-left: 0; padding-right: 0; }
	.rigs { justify-content: flex-start; overflow-x: auto; position: relative; scroll-snap-type: x mandatory; padding: 12px var(--gutter) 4px; gap: 22px; scrollbar-width: none; }
	.rigs::-webkit-scrollbar { display: none; }
	.rig { flex: none; scroll-snap-align: center; }
	.rig--hx-stomp { width: 34vw; }
	.rig--helix { width: 62vw; }
	.rig--helix-stadium { width: 72vw; }
	.rig--pod-go { width: 58vw; }
	.rig--pod-express { width: 40vw; }
	.pack-top { grid-template-columns: 1fr; }
	.filter { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.stage-beam, .rig img, .rig::before, .rig-name, .readout-name::before { transition: none; }
}

.store-signin { display: block; margin-top: 10px; font-size: .92rem; }

/* Invite a friend (Account → Picks) */
.invite { max-width: 760px; }
.invite-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.invite-link { flex: 1 1 320px; min-width: 0; padding: .75em .9em; border-radius: 6px; border: 1px solid var(--rule); background: var(--floor); color: var(--house); font: inherit; }
.invite-share { display: flex; gap: 18px; margin: 0 0 8px; }

/* Reviews on a pack page */
.reviews { padding: 0 0 clamp(48px, 7vw, 88px); }
.reviews-head { display: flex; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.reviews-summary { margin: 0; color: var(--muted); }
.reviews-summary strong { color: var(--house); }
.stars { color: var(--led, var(--spot)); letter-spacing: .08em; }
.review-form { max-width: 720px; padding: 20px 22px; border-radius: 12px; background: var(--floor); box-shadow: inset 0 0 0 1px var(--rule); margin-bottom: 28px; display: grid; gap: 14px; }
.review-form h3 { font: 800 1.5rem/1 var(--display); }
.review-form .btn { justify-self: start; }
.review-form textarea { background: var(--blackout); }
.review-note, .review-status { margin: 0; color: var(--muted); }
.review-status { margin-bottom: 24px; }
/* Stars are listed 5 to 1 and shown right to left, so hovering or picking one lights it and all before it. */
.star-pick { border: 0; margin: 0; padding: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.star-pick legend { float: left; width: 100%; margin-bottom: 4px; font-size: .9rem; color: var(--muted); }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick label { font-size: 2rem; line-height: 1; color: var(--rule); cursor: pointer; transition: color .15s; }
.star-pick label:hover, .star-pick label:hover ~ label, .star-pick input:checked ~ label { color: var(--led, var(--spot)); }
.star-pick input:focus-visible + label { outline: 2px solid var(--spot); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 860px; }
.review { padding: 16px 18px; border-radius: 10px; background: var(--floor); }
.review-top { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.review-date { color: var(--muted); font-size: .88rem; }
.review-body { margin: 0; }

/* Hear it: video + audio demos on a pack page */
.demos-section { padding: 44px 0 28px; }
.demos-section h2 { margin: 0 0 16px; }
.demos { display: grid; gap: 18px; max-width: 1080px; }
.demos.is-two { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.demos.is-two .demo--audio { display: flex; }
.demos.is-two .demo--audio iframe { height: 100%; min-height: 300px; }
@media (max-width: 800px) { .demos.is-two { grid-template-columns: 1fr; } }
.demo--video { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--rule); }
.demo--video iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-facade { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: #000 center / cover no-repeat; display: block; }
.yt-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); }
.yt-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 54px; margin: -27px 0 0 -38px; border-radius: 14px; background: var(--led, #fff); box-shadow: 0 6px 24px rgba(0,0,0,.5); transition: transform .15s; }
.yt-play::before { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--blackout, #07080c); }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: scale(1.08); }
.yt-facade:focus-visible { outline: 2px solid var(--spot); outline-offset: 2px; }
.demo--audio iframe { width: 100%; height: 300px; border: 0; border-radius: 10px; display: block; }
@media (prefers-reduced-motion: reduce) { .yt-play { transition: none; } }

/* Buy confirmation (paid packs): self-contained, so browser defaults never leak in */
.gtg-confirm {
	--c: var(--led, var(--spot));
	width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto;
	border: 1px solid rgba(255,255,255,.08); border-radius: 18px; color: var(--house); font: 400 1rem/1.5 var(--body, 'Instrument Sans', system-ui, sans-serif);
	background: #10121a; box-shadow: 0 30px 90px rgba(0,0,0,.7); /* fallbacks for browsers without color-mix() */
	background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), linear-gradient(180deg, #151826, #0c0e15);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 30px 90px rgba(0,0,0,.7), 0 0 80px color-mix(in srgb, var(--c) 18%, transparent);
}
.gtg-confirm[open] { animation: gtg-pop .22s cubic-bezier(.2,.9,.3,1.2); }
.gtg-confirm::backdrop { background: rgba(3,4,7,.78); backdrop-filter: blur(6px); }
.gtg-confirm > form { margin: 0; padding: 22px; }
.gtg-confirm-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.gtg-confirm-art { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 28px color-mix(in srgb, var(--c) 35%, transparent); }
.gtg-confirm-kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; color: var(--muted); font-size: .8rem; }
.gtg-confirm-kicker .led { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.gtg-confirm h2 { margin: 0; font: 800 1.35rem/1.08 var(--display, 'Big Shoulders Display', sans-serif); letter-spacing: .01em; color: var(--house); }
.gtg-confirm-price { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.gtg-confirm-label { color: var(--muted); font-size: .9rem; }
.gtg-confirm-amount { font: 800 1.9rem/1 var(--display, 'Big Shoulders Display', sans-serif); color: var(--house); }
.gtg-confirm-balance { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 0; font-size: .9rem; color: var(--muted); }
.gtg-confirm-flow { display: inline-flex; align-items: center; gap: 8px; color: var(--house); }
.gtg-confirm-flow strong { color: var(--c); }
.gtg-confirm-arrow { color: var(--muted); }
.gtg-confirm-note { margin: 14px 2px 18px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.gtg-confirm-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.gtg-confirm-actions button { appearance: none; margin: 0; padding: .85em 1em; border-radius: 10px; font: 600 .95rem/1 var(--body, 'Instrument Sans', system-ui, sans-serif); cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s; }
.gtg-confirm-cancel { background: transparent; color: var(--house); border: 1px solid rgba(255,255,255,.14); }
.gtg-confirm-cancel:hover { background: rgba(255,255,255,.06); }
.gtg-confirm-go { background: var(--spot); color: var(--blackout, #07080c); border: 0; box-shadow: 0 0 0 1px var(--spot); box-shadow: 0 0 0 1px var(--spot), 0 8px 26px color-mix(in srgb, var(--c) 40%, transparent); }
.gtg-confirm-go:hover { box-shadow: 0 0 0 2px var(--c), 0 10px 32px color-mix(in srgb, var(--c) 55%, transparent); }
.gtg-confirm-actions button:active { transform: translateY(1px); }
.gtg-confirm-actions button:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
@keyframes gtg-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 520px) {
	.gtg-confirm { width: 100%; max-width: none; margin: auto 0 0; border-radius: 18px 18px 0 0; }
	.gtg-confirm[open] { animation: gtg-sheet .25s ease-out; }
	@keyframes gtg-sheet { from { transform: translateY(40px); opacity: .4; } }
}
@media (prefers-reduced-motion: reduce) { .gtg-confirm[open] { animation: none; } }
.btn.is-busy { opacity: .7; cursor: progress; }

/* Picks store: the bundle you clicked lights up while checkout opens */
.store-bundle { transition: transform .2s, box-shadow .25s, opacity .25s, filter .25s; }
.store-bundle.is-loading { transform: translateY(-4px); border-color: var(--spot); box-shadow: 0 0 0 2px var(--spot), 0 18px 50px rgba(0,0,0,.45), 0 0 60px rgba(246,234,210,.35); animation: store-glow 1.4s ease-in-out infinite; }
.store-bundle.is-dimmed { opacity: .45; filter: saturate(.6); pointer-events: none; }
.store-busy .store-bundle button { cursor: progress; }
.spin { display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes store-glow { 50% { box-shadow: 0 0 0 2px var(--spot), 0 18px 50px rgba(0,0,0,.45), 0 0 90px rgba(246,234,210,.55); } }
@media (prefers-reduced-motion: reduce) { .store-bundle.is-loading, .spin { animation: none; } .store-bundle { transition: none; } }

/* Home: Most popular | Newest tabs */
.tabs { display: flex; gap: 6px; align-items: baseline; }
.tabs [role=tab] { appearance: none; background: none; border: 0; padding: 0 2px 6px; margin-right: 18px; cursor: pointer; font: 800 clamp(1.6rem, 3.4vw, 2.6rem)/.95 var(--display); letter-spacing: .005em; color: var(--muted); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tabs [role=tab]:hover { color: var(--house); }
.tabs [role=tab][aria-selected="true"] { color: var(--house); border-bottom-color: var(--spot); }
.tabs [role=tab]:focus-visible { outline: 2px solid var(--spot); outline-offset: 4px; }
/* Catalog: sort + clear under the filters */
.filters-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.sort { display: flex; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; }
.sort .chip { font-size: .85rem; }
.filters-clear { font-size: .9rem; }

/* Date fields: the calendar icon in the theme's light color */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .8; cursor: pointer; padding: 2px; border-radius: 4px; } /* color-scheme: dark already draws it light */
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: rgba(0,0,0,.25); }

/* Artist Sales: quick ranges, totals row, top-list totals */
.quick-range { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 22px; }
.sales-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; max-width: 1080px; }
.sales-figures div { padding: 14px 16px; border-radius: 10px; background: var(--floor); border: 1px solid var(--rule); display: grid; gap: 3px; align-content: start; }
.sales-figures span { color: var(--muted); font-size: .85rem; }
.sales-figures strong { font: 800 1.9rem/1 var(--display); font-variant-numeric: tabular-nums; }
.sales-figures em { font-style: normal; font-size: .78rem; color: var(--muted); }
.sales-figures .is-total { background: var(--floor-2); border-color: color-mix(in srgb, var(--spot) 35%, var(--rule)); }
.sales-figures .is-money strong { color: #2fd6a1; }
.sales-explain { max-width: 820px; margin: 12px 0 0; font-size: .88rem; }
.top-n strong { color: var(--house); font-weight: 600; }
.top-total { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--muted); }
.top-total strong { color: var(--house); }
.top-more summary { cursor: pointer; font-size: .82rem; color: var(--muted); margin-top: 10px; }
.top-more summary:hover { color: var(--house); }
.top-more ol { margin-top: 8px; max-height: 320px; overflow: auto; padding-right: 4px; }
.top-more ol { counter-reset: top 5; } /* continue numbering after the top 5 */

/* Artist Tools tab */
.tools-intro { max-width: 760px; }
.tools-block { margin-bottom: 8px; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 1080px; margin-bottom: 16px; }
.tool-card { background: var(--floor); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.tool-card h3 { font-size: 1.25rem; margin: 0 0 6px; }
.tool-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.tools-readmes { max-width: 820px; }
.guide { max-width: 820px; border: 1px solid var(--rule); border-radius: 10px; background: var(--floor); padding: 12px 16px; margin-bottom: 10px; }
.guide summary { cursor: pointer; font-weight: 600; }
.guide[open] summary { margin-bottom: 8px; }
.guide p, .guide li { color: var(--muted); font-size: .93rem; }
.guide ul, .guide ol { padding-left: 1.2em; margin: 6px 0 4px; }
.guide li { margin-bottom: 5px; }
.guide code, .tools-block code { font-size: .85em; background: var(--floor-2); color: var(--house); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--rule); }
.brand-mark .mark-on-dark, .brand-mark .mark-on-light { border-radius: 8px; padding: 18px; margin-bottom: 10px; display: grid; place-items: center; }
.brand-mark .mark-on-dark { background: #07080c; border: 1px solid var(--rule); }
.brand-mark .mark-on-light { background: #f2efe8; }
.brand-mark img { max-width: 100%; height: 34px; width: auto; }
.tools-sub { font-size: 1.25rem; margin: 18px 0 10px; }
.swatches { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.swatches li { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.swatch { width: 22px; height: 22px; border-radius: 6px; display: inline-block; }

/* Artist agreement (Account → Agreement) */
.agreement-status { padding: 14px 18px; border: 1px solid var(--rule); border-radius: 8px; margin: 0 0 28px; }
.agreement-status.is-signed { border-color: #2fd6a1; background: rgba(47, 214, 161, .08); }
.agreement-status.is-open { border-color: var(--spot); background: rgba(246, 234, 210, .06); }
.agreement-text { max-width: 75ch; line-height: 1.65; }
.agreement-text h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.agreement-text ul { padding-left: 1.2em; margin: 0; }
.agreement-text li { margin: .35em 0; }
.agreement-sign { margin-top: 32px; max-width: 560px; }

/* Library: packs no longer in the store */
.library--gone .library-art img { filter: grayscale(1); opacity: .55; }
.library--gone .library-title { color: var(--muted); }

/* Destructive actions (artist: request removal) */
.btn.is-danger { background: #ff4d5e; color: #fff; }
.btn.is-danger:hover { background: #ff6b79; }
.pack-remove { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
/* On the update page the main action is "Send for review"; removal is deliberately small and quiet. */
.pack-form > .btn[type="submit"] { font-size: 1.05rem; padding: .95em 1.8em; }
.pack-remove .btn.is-danger { font-size: .82rem; padding: .5em .9em; background: transparent; color: #ff6b79; box-shadow: inset 0 0 0 1px #ff4d5e; }
.pack-remove .btn.is-danger:hover { background: #ff4d5e; color: #fff; }