/* ============================================================
   THE LINEUP APP — FOLLOW + ALERTS boards
   Supplemental components layered on system.css (v2 design system).
   Nothing here overrides the core tokens — it extends them.
   ============================================================ */

/* ---------- the FOLLOW control ---------- */
/* not-following: accent, inviting, the primary action on a band page */
.follow{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:11px; padding:12px 18px; font:500 14px/1 var(--sans);
  border:1px solid transparent; cursor:default; text-decoration:none;
}
.follow svg{ width:18px; height:18px; }
.follow.to-follow{ background:var(--accent); color:#fff; }
/* following: settled, quiet, a held state — with the bell that says "alerts on" */
.follow.following{ background:var(--accent-wash); color:var(--accent-deep); border-color:var(--accent-line); }
.follow.following .lbl{ display:inline-flex; align-items:center; gap:7px; }
/* compact follow pill (used in lists / following view) */
.follow-sm{ display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:7px 13px; font:500 12.5px/1 var(--sans); }
.follow-sm.to-follow{ border:1px solid var(--accent); color:var(--accent-deep); background:var(--n0); }
.follow-sm.following{ border:1px solid var(--accent-line); color:var(--accent-deep); background:var(--accent-wash); }
.follow-sm svg{ width:15px; height:15px; }

/* follower count line — the "first-class / champion" signal */
.followers{ display:inline-flex; align-items:center; gap:6px; color:var(--n400);
  font:400 12.5px/1.3 var(--sans); }
.followers b{ color:var(--n600); font-weight:600; }

/* ---------- iOS-style toggle ---------- */
.toggle{ width:46px; height:28px; border-radius:16px; background:var(--n100); position:relative;
  flex:none; transition:background .15s; }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:11px; background:#fff; box-shadow:0 1px 3px rgba(7,14,26,.28); transition:left .15s; }
.toggle.on{ background:var(--accent); }
.toggle.on::after{ left:21px; }
.toggle.live.on{ background:var(--live); }

/* preference row — label + sublabel + control on the right */
.prefrow{ display:flex; align-items:center; gap:13px; padding:14px 16px; background:var(--n0); }
.prefrow + .prefrow{ border-top:1px solid var(--n75); }
.prefrow .pl{ flex:1; min-width:0; }
.prefrow .pl .pt{ font:500 15px/1.25 var(--sans); color:var(--n700); }
.prefrow .pl .ps{ font:400 12.5px/1.4 var(--sans); color:var(--n300); margin-top:2px; }
.prefrow .ico{ flex:none; width:34px; height:34px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:var(--accent-wash); color:var(--accent-deep); }

/* lightened "You" sub-screen app bar (the grammar APP extended) */
.subbar{ display:flex; align-items:center; gap:12px; padding:8px 16px 12px; }
.subbar .back{ color:var(--n500); display:flex; }
.subbar .stitle{ font:600 21px/1.15 var(--serif); letter-spacing:-0.01em; color:var(--n700); }

/* group header inside a list (e.g. "Bands" / "Venues") */
.grouphd{ display:flex; align-items:center; gap:8px; padding:18px 18px 8px;
  font:500 11px/1 var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--n300); }
.grouphd .ct{ color:var(--n200); }

/* ---------- LOCK SCREEN (for the alert-voice board) ---------- */
.lock{ position:absolute; inset:0; border-radius:44px; overflow:hidden;
  background:linear-gradient(168deg,#13233D 0%, #1F1430 52%, #3A1E33 100%);
  display:flex; flex-direction:column; }
.lock .lwrap{ flex:1; display:flex; flex-direction:column; padding:0 14px; }
.lock .ltime{ text-align:center; color:#fff; padding-top:66px; }
.lock .ltime .dt{ font:500 13px/1 var(--micro); letter-spacing:.04em; color:rgba(255,255,255,.78); }
.lock .ltime .tm{ font:300 72px/1 var(--sans); letter-spacing:-0.02em; margin-top:6px; }
.lock .lstack{ margin-top:auto; padding-bottom:30px; display:flex; flex-direction:column; gap:9px; }

/* a single push notification on the lock screen */
.lpush{ background:rgba(244,245,247,.82); backdrop-filter:blur(18px);
  border-radius:18px; padding:11px 13px; display:flex; gap:11px; align-items:flex-start; }
.lpush .app{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--n700);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font:600 17px/1 var(--serif); }
.lpush .app .tau{ display:inline-block; border:1.4px solid #fff; border-radius:4px;
  width:21px; height:21px; line-height:19px; text-align:center; font-size:13px; }
.lpush .pbody{ flex:1; min-width:0; }
.lpush .prow{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.lpush .pname{ font:600 12px/1 var(--micro); letter-spacing:.04em; text-transform:uppercase; color:var(--n500); }
.lpush .pago{ font:400 11.5px/1 var(--sans); color:var(--n300); }
.lpush .ph{ font:600 14px/1.3 var(--sans); color:var(--n800); margin-top:4px; }
.lpush .pp{ font:400 13.5px/1.4 var(--sans); color:var(--n600); margin-top:2px; }

/* ---------- voice spectrum (alert-voice board annotation) ---------- */
.spectrum{ display:flex; flex-direction:column; gap:10px; }
.specrow{ border:1px solid #E3DFD4; border-radius:12px; padding:13px 15px; background:#fff;
  border-left-width:4px; }
.specrow .tag{ font:500 10px/1 var(--micro); letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.specrow .ex{ font:400 15px/1.4 var(--sans); color:var(--n700); }
.specrow.bad{ border-left-color:#C25B4E; } .specrow.bad .tag{ color:#A8412F; }
.specrow.flat{ border-left-color:var(--n200); } .specrow.flat .tag{ color:var(--n300); }
.specrow.aim{ border-left-color:var(--live); background:var(--live-wash); } .specrow.aim .tag{ color:var(--live); }
.specrow.play{ border-left-color:var(--accent); } .specrow.play .tag{ color:var(--accent); }

/* voice-type card grid (the rotating sets) */
.vtype{ background:#fff; border:1px solid #E3DFD4; border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.vtype h4{ font:600 17px/1.2 var(--serif); color:var(--n700); }
.vtype .vmeta{ font:400 12.5px/1.4 var(--sans); color:var(--n400); margin:4px 0 12px; }
.vtype .line{ font:400 14.5px/1.45 var(--sans); color:var(--n600); padding:9px 0; border-top:1px solid var(--n75); }
.vtype .line:first-of-type{ border-top:none; }
.vtype .line b{ color:var(--n800); font-weight:600; }
.vtype .anchor{ color:var(--accent-deep); font-weight:500; }

/* pre-prompt sheet (first-follow permission) — a bottom sheet over a dimmed screen */
.dim{ position:absolute; inset:0; background:rgba(7,14,26,.42); border-radius:44px; }
.sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--n0);
  border-radius:26px 26px 44px 44px; padding:24px 22px 30px; text-align:center; }
.sheet .glyph{ width:58px; height:58px; border-radius:16px; margin:0 auto 16px;
  background:var(--accent-wash); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; }
.sheet .glyph svg{ width:30px; height:30px; }
.sheet h3{ font:600 20px/1.25 var(--serif); color:var(--n700); margin-bottom:8px; }
.sheet p{ font:400 14px/1.5 var(--sans); color:var(--n400); margin-bottom:18px; }
.sheet .sbtns{ display:flex; flex-direction:column; gap:9px; }

/* the iOS system permission dialog (what the pre-prompt earns) */
.osdialog{ width:270px; background:rgba(248,248,248,.96); backdrop-filter:blur(14px);
  border-radius:14px; overflow:hidden; text-align:center; box-shadow:0 16px 50px rgba(0,0,0,.3); }
.osdialog .od-body{ padding:18px 16px 14px; }
.osdialog .od-title{ font:600 16px/1.3 var(--sans); color:#000; }
.osdialog .od-msg{ font:400 12.5px/1.4 var(--sans); color:#1c1c1e; margin-top:4px; }
.osdialog .od-btns{ display:flex; border-top:1px solid rgba(0,0,0,.12); }
.osdialog .od-btns a{ flex:1; padding:11px 0; font:400 16px/1 var(--sans); color:#0A84FF; text-decoration:none; }
.osdialog .od-btns a.bold{ font-weight:600; }
.osdialog .od-btns a + a{ border-left:1px solid rgba(0,0,0,.12); }

/* small inline legend dot */
.legdot{ display:inline-block; width:9px; height:9px; border-radius:5px; vertical-align:0; margin-right:5px; }