/* =====================================================================
   Summer Breeze Crew — base styles + SB 2026 default theme tokens.
   Genre themes only OVERRIDE tokens (see themes.css).
   ===================================================================== */

:root{
  --bg: oklch(0.15 0.02 275);
  --surface: oklch(0.19 0.025 275);
  --surface-2: oklch(0.235 0.03 275);
  --line: oklch(0.33 0.03 275);
  --tx: oklch(0.93 0.012 260);
  --tx-2: oklch(0.71 0.02 265);
  --accent: oklch(0.78 0.09 245);
  --accent-text: var(--accent);   /* text-on-dark variant; themes override when --accent fails AA */
  --accent-ink: oklch(0.17 0.03 260);
  --accent-2: oklch(0.63 0.15 305);
  --ok: oklch(0.75 0.16 150);
  --err: oklch(0.68 0.19 25);
  --disp: 'Metal Mania', system-ui, sans-serif;
  --disp-hero: var(--disp);
  --hero-transform: var(--h-transform, none);
  --disp-weight: 400;
  --radius: 10px;
  --radius-sm: 7px;
  --glow: none;
  --h-transform: none;
  --h-skew: none;
  --h-spacing: 0.02em;
  --chip-border: 1px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--tx);
  min-height: 100dvh;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
body, .card, .day-chip, .m-dot, .btn, header, input, .adm-row{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hidden{display:none !important}
.app{max-width:520px;margin:0 auto;padding:0 var(--space-md) 140px}
.no-scroll{overflow:hidden}

/* utility spacing (keeps markup free of inline styles — CSP) */
.mt-0{margin-top:0}
.mt-12{margin-top:12px}
.mt-lg{margin-top:var(--space-lg)}
.mb-lg{margin-bottom:var(--space-lg)}
.form-grid{display:grid;gap:12px;margin-top:12px}
.row-flex{display:flex;gap:10px;margin-top:var(--space-md)}
.flex1{flex:1}
.btn-inline{width:auto;padding:13px 18px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* boot splash (visible until session_info answers) */
.splash{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:var(--bg);transition:opacity .3s ease;
}
.splash img{width:min(40vw,160px);opacity:.85}
.splash.gone{opacity:0;pointer-events:none}

h1,h2,h3{
  font-family: var(--disp);
  font-weight: var(--disp-weight);
  text-transform: var(--h-transform, none);
  letter-spacing: var(--h-spacing);
  line-height: 1.15;
}
h2{font-size:clamp(1.35rem,5vw,1.7rem);text-shadow:var(--glow);transform:var(--h-skew,none)}
h3{font-size:1.2rem;color:var(--tx)}
section{margin-top:var(--space-2xl)}
section > h2{margin-bottom:var(--space-lg)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:10;
  background:color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top);
}
.bar{max-width:520px;margin:0 auto;padding:10px var(--space-md);display:flex;align-items:center;gap:10px}
.bar img{width:34px;height:34px}
.bar .t{font-family:'Metal Mania',system-ui,sans-serif;font-weight:400;font-size:1.1rem;letter-spacing:.02em}
.bar .who{margin-left:auto;font-size:.8rem;color:var(--tx-2)}
.bar .iconbtn{
  background:none;border:none;color:var(--tx-2);cursor:pointer;
  font-size:1.05rem;padding:10px 12px;min-width:44px;min-height:44px;
  border-radius:var(--radius-sm);
}
.bar .iconbtn:hover{color:var(--tx)}

/* ---------- hero ---------- */
.hero{padding-top:var(--space-xl);text-align:center}
.logo-img{width:min(58vw,240px);height:auto;display:block;margin:0 auto;transition:filter .5s ease}
.hero h1{font-family:var(--disp-hero);text-transform:var(--hero-transform);font-size:clamp(2.1rem,9vw,3rem);margin-top:var(--space-md);text-shadow:var(--glow);transform:var(--h-skew,none)}
.hero .sub{color:var(--tx-2);font-size:.95rem;margin-top:6px}
.hero .sub strong{color:var(--tx);font-weight:600}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--space-lg)}
.count .cell{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 4px 10px}
.count .n{
  font-size:clamp(1.7rem,8vw,2.4rem);font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--accent-text);
  text-shadow:var(--glow);line-height:1;
}
.count .l{font-size:.7rem;color:var(--tx-2);text-transform:uppercase;letter-spacing:.12em;margin-top:6px}
.live-badge{
  display:inline-block;margin-top:var(--space-lg);
  font-size:.95rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid var(--accent-text);border-radius:99px;padding:8px 18px;
  text-shadow:var(--glow);
}

/* ---------- cards / common ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-lg)}
.hint{color:var(--tx-2);font-size:.85rem;margin-top:var(--space-sm)}
.badge{
  display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:4px 10px;color:var(--tx-2);
}
.badge.lock{color:var(--accent-text);border-color:var(--accent-text)}
.badge.paid{color:var(--ok);border-color:var(--ok)}

/* ---------- day picker ---------- */
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.day-chip{
  border:var(--chip-border) solid var(--line);background:var(--surface);color:var(--tx);
  border-radius:var(--radius);padding:14px 4px 12px;text-align:center;cursor:pointer;font-family:inherit;
}
.day-chip .d{font-size:1.15rem;font-weight:800}
.day-chip .dt{font-size:.72rem;color:var(--tx-2);margin-top:2px}
.day-chip .st{font-size:.85rem;margin-top:8px;height:1.1em;color:var(--tx-2)}
.day-chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--glow)}
.day-chip[aria-pressed="true"] .dt{color:color-mix(in oklab, var(--accent-ink) 88%, transparent)}
.day-chip[aria-pressed="true"] .st{color:var(--accent-ink);font-weight:700}
.day-chip:active{transform:scale(.96)}
.day-chip:disabled{opacity:.55;cursor:not-allowed}
.day-chip:disabled:active{transform:none}

/* ---------- crew matrix ---------- */
.matrix{width:100%;border-collapse:collapse}
.matrix thead th{font-size:.72rem;color:var(--tx-2);text-transform:uppercase;letter-spacing:.1em;padding:0 0 10px;font-weight:600;text-align:center}
.matrix thead th:first-child{text-align:left}
.matrix td, .matrix tbody th{padding:9px 0;border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent)}
.matrix tbody .nm{font-size:.95rem;font-weight:400;color:var(--tx);padding-right:6px;overflow-wrap:anywhere;text-align:left;text-transform:none;letter-spacing:normal}
.matrix .me .nm{font-weight:800;color:var(--accent-text)}
.m-dot{
  width:22px;height:22px;border-radius:50%;margin:0 auto;
  display:grid;place-items:center;border:1.5px solid var(--line);
  color:transparent;font-size:.75rem;font-weight:900;
}
.m-dot.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:var(--glow)}
.m-paid{font-size:.85rem;color:var(--ok);text-align:center}
.m-sum td{color:var(--tx-2);font-size:.8rem;font-variant-numeric:tabular-nums;text-align:center;padding-top:10px}
.m-sum td:first-child{text-align:left}

/* ---------- costs / payment ---------- */
.cost-rows{display:grid;gap:10px}
.cr{display:flex;justify-content:space-between;align-items:baseline;font-size:.95rem}
.cr .k{color:var(--tx-2)}
.cr .v{font-variant-numeric:tabular-nums;font-weight:600}
.cr.big{border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.cr.big .k{color:var(--tx);font-weight:700}
.cr.big .v{font-size:1.7rem;font-weight:900;color:var(--accent-text);text-shadow:var(--glow)}
.pay-block{margin-top:var(--space-lg);border-top:1px dashed var(--line);padding-top:var(--space-lg)}
.btn{
  display:block;width:100%;text-align:center;
  background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:var(--radius);
  font-size:1.05rem;font-weight:800;padding:15px;cursor:pointer;
  box-shadow:var(--glow);text-decoration:none;font-family:inherit;
}
.btn:active{transform:scale(.985)}
.btn.ghost{background:none;color:var(--tx-2);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{color:var(--tx)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.paid-note{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ok);font-weight:700}

/* ---------- login ---------- */
.login{max-width:400px;margin:0 auto;padding:var(--space-xl) var(--space-md) var(--space-2xl);text-align:center}
.login .logo-img{width:min(64vw,260px)}
.login h1{font-family:var(--disp-hero);text-transform:var(--hero-transform);font-size:clamp(2rem,9vw,2.7rem);margin-top:var(--space-md)}
.login form{margin-top:var(--space-xl);display:grid;gap:12px;text-align:left}
label{font-size:.8rem;color:var(--tx-2);letter-spacing:.06em;text-transform:uppercase}
input[type=text], input[type=password], input[type=date], input[type=number]{
  width:100%;padding:13px 14px;font-size:1rem;
  background:var(--surface);color:var(--tx);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;
}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-err{color:var(--err);font-size:.9rem;min-height:1.3em}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);
  background:var(--surface-2);color:var(--tx);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 18px;font-size:.9rem;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  z-index:70;max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--err);color:var(--err)}

/* ---------- admin ---------- */
.adm-grid{display:grid;gap:12px}
.adm-grid .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adm-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 0;border-top:1px solid color-mix(in oklab, var(--line) 55%, transparent);
}
.adm-row .nm{font-weight:700;flex:1;min-width:90px;overflow-wrap:anywhere}
.adm-row .nm.inactive{color:var(--tx-2);text-decoration:line-through}
.adm-days{display:flex;gap:5px}
.adm-d{
  width:40px;height:40px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--tx-2);
  font-size:.72rem;font-weight:800;cursor:pointer;font-family:inherit;
}
.adm-d.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mini{
  background:none;border:1px solid var(--line);color:var(--tx-2);
  border-radius:var(--radius-sm);padding:10px 11px;font-size:.75rem;cursor:pointer;font-family:inherit;
}
.mini:hover{color:var(--tx)}
.mini.on{color:var(--ok);border-color:var(--ok)}
.mini.danger:hover{color:var(--err);border-color:var(--err)}
.amount-sm{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--tx-2);min-width:72px;text-align:right}

/* ---------- pedalboard (theme switcher) ---------- */
.amp-tab{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:30;
  background:oklch(0.24 0.01 60);color:oklch(0.85 0.02 75);
  border:1px solid oklch(0.4 0.02 60);border-bottom:none;
  border-radius:10px 10px 0 0;
  padding:8px 26px calc(10px + env(safe-area-inset-bottom));
  font-size:.75rem;letter-spacing:.18em;font-weight:800;cursor:pointer;
  box-shadow:0 -4px 16px oklch(0 0 0 / 0.4);font-family:inherit;
}
.amp-tab::before{content:'';display:block;width:34px;height:3px;border-radius:2px;background:oklch(0.55 0.02 60);margin:0 auto 6px}
.sheet-backdrop{
  position:fixed;inset:0;z-index:38;background:oklch(0 0 0 / 0.55);
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.pedalboard{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  background:
    repeating-linear-gradient(90deg, oklch(0.22 0.008 60) 0 3px, oklch(0.2 0.008 60) 3px 6px),
    oklch(0.21 0.008 60);
  border-top:3px solid oklch(0.38 0.02 60);
  border-radius:18px 18px 0 0;
  padding:14px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px oklch(0 0 0 / 0.55);
}
.pedalboard.open{transform:translateY(0)}
/* first-login ritual: board covers the screen, no dismiss until a pedal is stomped */
.pedalboard.ritual{
  top:0;transform:none;border-radius:0;border-top:none;
  display:grid;align-content:center;
  transition:none;
}
.pedalboard.ritual .pb-handle{display:none}
.pedalboard.ritual .pb-ritual-head{display:block}
.pb-ritual-head{display:none;text-align:center;margin-bottom:26px}
.pb-ritual-head .rh1{
  font-family:'Metal Mania';font-size:clamp(1.8rem,7vw,2.5rem);
  color:oklch(0.9 0.02 75);line-height:1.2;
}
.pb-ritual-head .rh2{color:oklch(0.65 0.02 75);font-size:.9rem;margin-top:8px}
.pb-inner{max-width:560px;margin:0 auto;width:100%}
.pb-handle{width:64px;height:22px;padding:0;border-radius:3px;background:none;margin:0 auto 4px;cursor:pointer;border:none;display:block;position:relative}
.pb-handle::after{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);width:42px;height:4px;border-radius:3px;background:oklch(0.5 0.015 60)}
.pb-title{
  text-align:center;color:oklch(0.8 0.02 75);font-size:.72rem;
  letter-spacing:.22em;font-weight:800;text-transform:uppercase;margin-bottom:14px;
}
.pedals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pedal{
  border-radius:8px;border:1px solid oklch(0.1 0 0 / 0.6);
  padding:12px 8px 10px;cursor:pointer;text-align:center;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.18), 0 3px 6px oklch(0 0 0 / 0.45);
  transition:transform .1s ease;color:oklch(0.15 0.01 0);font-family:inherit;
}
.pedal:active{transform:translateY(2px);box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.12), 0 1px 2px oklch(0 0 0 / 0.45)}
.pedal .led{width:9px;height:9px;border-radius:50%;margin:0 auto 8px;background:oklch(0.3 0.02 25);border:1px solid oklch(0.15 0 0 / 0.55)}
.pedal.on .led{background:oklch(0.72 0.21 25);box-shadow:0 0 8px oklch(0.7 0.22 25 / 0.9)}
.pedal .knob{
  width:22px;height:22px;border-radius:50%;margin:0 auto 8px;
  background:radial-gradient(circle at 35% 30%, oklch(0.45 0 0), oklch(0.2 0 0));
  border:1px solid oklch(0.1 0 0 / 0.7);position:relative;
}
.pedal .knob::after{content:'';position:absolute;left:50%;top:2px;width:2px;height:7px;background:oklch(0.9 0 0);transform:translateX(-50%);border-radius:1px}
.pedal .sw{
  width:26px;height:26px;border-radius:50%;margin:0 auto 9px;
  background:radial-gradient(circle at 40% 35%, oklch(0.75 0.01 80), oklch(0.45 0.01 80));
  border:2px solid oklch(0.25 0.01 60);
}
.pedal .nm{font-size:.78rem;line-height:1.25;font-weight:700}
.pedal .fx-nm{font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin-top:3px}
.pedal[data-set="sb"]{background:linear-gradient(180deg, oklch(0.62 0.08 250), oklch(0.5 0.08 255))}
.pedal[data-set="sb"] .nm{font-family:'Metal Mania';font-weight:400}
.pedal[data-set="black"]{background:linear-gradient(180deg, oklch(0.42 0.005 270), oklch(0.28 0.005 270));color:oklch(0.93 0.015 85)}
.pedal[data-set="black"] .nm{font-family:'XXII Black Metal';font-size:.85rem;line-height:1.3}
.pedal[data-set="death"]{background:linear-gradient(180deg, oklch(0.5 0.19 27), oklch(0.38 0.16 27));color:oklch(0.95 0.01 30)}
.pedal[data-set="death"] .nm{font-family:'Brutal Tooth';font-size:.85rem;line-height:1.3}
.pedal[data-set="hardcore"]{background:linear-gradient(180deg, oklch(0.88 0.16 95), oklch(0.78 0.16 95))}
.pedal[data-set="hardcore"] .nm{font-family:'New York Hardcore';font-size:.8rem;text-transform:uppercase}
.pedal[data-set="glam"]{background:linear-gradient(180deg, oklch(0.68 0.22 350), oklch(0.55 0.2 340));color:oklch(0.97 0.01 340)}
.pedal[data-set="glam"] .nm{font-family:'Die Nasty';font-size:.85rem}
.pedal[data-set="thrash"]{background:linear-gradient(180deg, oklch(0.8 0.21 130), oklch(0.66 0.19 130))}
.pedal[data-set="thrash"] .nm{font-family:'Metal Lord';font-size:.85rem}

/* ---------- footer ---------- */
footer{margin-top:var(--space-2xl);text-align:center;color:var(--tx-2);font-size:.8rem}
footer .links{display:flex;gap:18px;justify-content:center;margin-top:8px}
footer button{background:none;border:none;color:var(--tx-2);cursor:pointer;font-size:.85rem;text-decoration:underline;font-family:inherit;padding:12px 14px;min-height:44px}
footer button:hover{color:var(--tx)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media (min-width:760px){
  .app,.bar{max-width:640px}
  .pedals{grid-template-columns:repeat(6,1fr)}
  .pedalboard.ritual .pedals{grid-template-columns:repeat(3,1fr);max-width:560px}
}