/* ============================================================
   JOEBEN.SYS — COMPONENTS
   Built entirely on tokens.css. No hardcoded colors/sizes here.
   Load order: this file @imports tokens first.
   ============================================================ */

@import url('tokens.css');

/* ---------- RESET / BASE ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(139,92,246,0.16), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(56,189,248,0.10), transparent 50%),
    var(--bg);
  color:var(--text-body);
  font-family:var(--f-mono);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--link); }
a:hover{ color:var(--link-hover); }

/* visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* faint CRT flicker on the whole page (motion-safe) */
@media (prefers-reduced-motion: no-preference){
  body{ animation: flicker var(--flicker) infinite; }
}
@keyframes flicker{
  0%,97%,100%{ opacity:1; }
  98%{ opacity:.985; }
  99%{ opacity:.97; }
}

/* ---------- CRT OVERLAYS (decorative, pointer-safe) ---------- */
.crt-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:var(--z-overlay);
  mix-blend-mode:soft-light;
  background:repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 3px);
}
.crt-vignette{
  position:fixed; inset:0; pointer-events:none; z-index:var(--z-vignette);
  background:radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- LAYOUT SHELL ---------- */
.shell{
  max-width:var(--shell-max);
  margin:0 auto;
  padding:var(--space-8) var(--space-5) var(--space-10);
  position:relative; z-index:var(--z-content);
}

/* ---------- TITLEBAR ---------- */
.titlebar{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4);
  border-bottom:var(--bw) solid var(--border-dim);
  padding-bottom:var(--space-3); margin-bottom:var(--space-6);
  font-size:var(--t-sm); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--text-muted);
}
.titlebar .status{ color:var(--ok); }
.titlebar .status::before{ content:"● "; color:var(--accent); }
/* status variants */
.titlebar .status.is-idle{ color:var(--warn); }
.titlebar .status.is-idle::before{ color:var(--warn); }
.titlebar .status.is-offline{ color:var(--text-muted); }
.titlebar .status.is-offline::before{ content:"○ "; color:var(--text-muted); }

/* ---------- PROMPT LINE ---------- */
.prompt{
  font-size:var(--t-sm); color:var(--text-muted);
  letter-spacing:.02em; margin:0 0 var(--space-2);
}
.prompt::before{ content:"> "; color:var(--accent-2); }

/* ---------- HEADINGS / DISPLAY ---------- */
h1,h2,.display{
  font-family:var(--f-display); font-weight:400; letter-spacing:var(--track-tight);
  margin:0; color:var(--text); text-shadow:var(--glow-text);
}
h1{ font-size:var(--t-h1); line-height:var(--lh-tight); }
h2{ font-size:var(--t-h2); margin-bottom:var(--space-4); }
.display--sm{ font-size:var(--t-h3); }

.lede{ font-size:var(--t-lede); color:var(--text-body); max-width:var(--measure); }

/* blinking block cursor — pair with a headline */
.cursor{
  display:inline-block; width:.55ch; height:1em; background:var(--accent-2);
  vertical-align:-.12em; margin-left:var(--space-2); box-shadow:var(--glow-soft);
}
@media (prefers-reduced-motion: no-preference){
  .cursor{ animation:blink var(--blink) steps(1) infinite; }
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- EYEBROW / SECTION LABEL ---------- */
.eyebrow{
  font-size:var(--t-xs); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--accent); margin:0 0 var(--space-3);
}

/* ---------- DIVIDER ---------- */
.rule{ border:none; border-top:var(--bw) dashed var(--border-dim); margin:var(--space-7) 0; }

/* ---------- CHIP / TAG ---------- */
.tag{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--text-muted);
  border:var(--bw) solid var(--border-dim); border-radius:var(--radius);
  padding:2px 7px; flex-shrink:0;
}
.tag--accent{ color:var(--accent-2); border-color:var(--accent-2); }

/* ---------- PROJECT MENU (landing) ---------- */
.menu{ list-style:none; margin:0; padding:0; }
.menu li{ margin-bottom:2px; }
.menu a{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-4) var(--space-3); text-decoration:none; color:var(--text);
  border:var(--bw) solid transparent; border-radius:var(--radius-sm);
  font-family:var(--f-display); font-size:var(--t-h3); letter-spacing:var(--track-tight);
  transition:border-color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.menu .thumb{
  width:40px; height:40px; object-fit:cover; flex-shrink:0;
  border:var(--bw) solid var(--border-dim); border-radius:var(--radius-sm);
}
.menu .desc{
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--text-muted);
  margin-left:auto; text-align:right;
}
.menu .arrow{
  color:var(--accent-2); opacity:0; transform:translateX(-6px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.menu a:hover, .menu a:focus-visible{
  border-color:var(--accent);
  background:linear-gradient(90deg, rgba(139,92,246,.12), rgba(56,189,248,.08));
  transform:translateX(2px);
}
.menu a:hover .tag, .menu a:focus-visible .tag{ border-color:var(--accent-2); color:var(--accent-2); }
.menu a:hover .arrow, .menu a:focus-visible .arrow{ opacity:1; transform:translateX(0); }
.menu a:hover .desc, .menu a:focus-visible .desc{ color:var(--text-body); }

/* ---------- ROSTER / LINEUP ---------- */
.roster{ display:grid; gap:var(--space-4); margin:var(--space-5) 0 0; padding:0; list-style:none; }
.roster li{
  display:flex; justify-content:space-between; gap:var(--space-5);
  border-left:var(--bw-accent) solid var(--accent); padding:var(--space-1) 0 var(--space-1) var(--space-3);
}
.roster .name{ color:var(--text); font-weight:500; }
.roster .role{ color:var(--text-muted); font-size:var(--t-sm); text-align:right; white-space:nowrap; }
/* roster with a blurb under the name */
.roster .blurb{ display:block; color:var(--text-body); font-size:var(--t-sm); margin-top:var(--space-1); max-width:52ch; }
/* photo variant — member avatars beside each name */
.roster--photos li{ align-items:flex-start; gap:var(--space-4); }
.roster--photos .name{ flex:1; }
.roster .avatar{
  width:88px; height:112px; object-fit:cover; flex-shrink:0;
  border:var(--bw) solid var(--border-dim); border-radius:var(--radius-sm);
}

/* ---------- PANEL ---------- */
.panel{
  border:var(--bw) solid var(--border); background:rgba(255,255,255,0.015);
  border-radius:var(--radius); padding:var(--space-5) var(--space-5); margin:var(--space-5) 0;
}
.panel > :first-child{ margin-top:0; }
.panel > :last-child{ margin-top:0; margin-bottom:0; }
/* placeholder variant — dashed, clearly "to fill" */
.panel--todo{ border-style:dashed; color:var(--text-muted); }

/* ---------- PAGE LOGO / HERO IMAGE ---------- */
.logo-hero{ display:block; width:100%; max-width:240px; height:auto; margin:0 0 var(--space-5); }

/* ---------- SOCIAL EMBED (vertical reel / short) ---------- */
.embed{
  width:100%; max-width:340px; margin:var(--space-4) 0 0;
  border:var(--bw) solid var(--border); border-radius:var(--radius);
  overflow:hidden; background:var(--surface);
}
.embed iframe{ display:block; width:100%; max-width:100%; height:604px; border:0; }

/* ---------- VIDEO THUMBNAIL (click-through to YouTube/etc.) ---------- */
.video{
  position:relative; display:block; max-width:560px; margin:var(--space-4) 0 0;
  border:var(--bw) solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.video img{ display:block; width:100%; height:auto; }
/* portrait variant for vertical reels/shorts */
.video--portrait{ max-width:340px; }
.video .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(10,8,23,.30); transition:background var(--dur-fast) var(--ease);
}
.video:hover .play, .video:focus-visible .play{ background:rgba(10,8,23,.08); }
.video .play span{
  width:64px; height:64px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; color:var(--void); font-size:22px;
  padding-left:4px; box-shadow:var(--glow-soft);
}
.video .cap{
  position:absolute; left:0; right:0; bottom:0; padding:var(--space-3) var(--space-4);
  background:linear-gradient(to top, rgba(10,8,23,.85), transparent);
  color:var(--text); font-size:var(--t-sm);
}

/* ---------- SHOW LIST ---------- */
.shows{ list-style:none; margin:var(--space-4) 0 0; padding:0; }
.shows li{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:baseline;
  padding:var(--space-3) 0; border-bottom:var(--bw) dashed var(--border-dim);
}
.shows .date{ color:var(--accent-2); font-size:var(--t-sm); white-space:nowrap; }
.shows .venue{ color:var(--text); }
.shows .city{ color:var(--text-muted); font-size:var(--t-sm); text-align:right; white-space:nowrap; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; font-family:var(--f-mono); font-size:var(--t-sm);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  padding:var(--space-3) var(--space-4); border-radius:var(--radius);
  color:var(--void); background:var(--grad); border:var(--bw) solid transparent;
  font-weight:700; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--glow-soft); color:var(--void); }
.btn:active{ transform:translateY(0); }
/* secondary / ghost */
.btn--ghost{
  background:transparent; color:var(--text); border-color:var(--border-dim);
}
.btn--ghost:hover{ color:var(--text); border-color:var(--accent); background:rgba(139,92,246,.08); box-shadow:none; }
/* disabled */
.btn:disabled, .btn.is-disabled{ opacity:.4; pointer-events:none; }

/* ---------- CONNECT / SOCIAL ROW ---------- */
.connect{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); margin-top:var(--space-2); }
.connect a{
  color:var(--text-body); text-decoration:none; font-size:var(--t-sm); letter-spacing:.02em;
  border-bottom:var(--bw) dotted var(--border-dim); padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.connect a:hover{ color:var(--accent-2); border-color:var(--accent-2); }

/* ---------- INLINE LINK (in body copy) ---------- */
.link{
  color:var(--link); text-decoration:none; border-bottom:var(--bw) solid var(--border-dim);
  transition:border-color var(--dur-fast) var(--ease);
}
.link:hover{ border-color:var(--link); }

/* ---------- FORM FIELDS (contact / booking) ---------- */
.field{ display:block; margin-bottom:var(--space-4); }
.field label{
  display:block; font-size:var(--t-xs); letter-spacing:var(--track-label);
  text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-2);
}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--f-mono); font-size:var(--t-body); color:var(--text);
  background:var(--surface); border:var(--bw) solid var(--border);
  border-radius:var(--radius); padding:var(--space-3) var(--space-3);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-muted); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent-2); box-shadow:var(--glow-soft); }
/* form-level success / status message */
.form-status{ color:var(--ok); font-size:var(--t-sm); margin-top:var(--space-3); }
.field .error{ color:var(--danger); font-size:var(--t-xs); margin-top:var(--space-1); }

/* ---------- BACK LINK ---------- */
.back{
  display:inline-flex; align-items:center; gap:var(--space-2); color:var(--text-body);
  text-decoration:none; font-size:var(--t-sm); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:var(--space-6); border:var(--bw) solid var(--border-dim);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius);
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.back:hover{ color:var(--text); border-color:var(--accent); background:rgba(139,92,246,.08); }

/* ---------- FOOTER ---------- */
footer{
  margin-top:var(--space-9); padding-top:var(--space-5); border-top:var(--bw) solid var(--border-dim);
  font-size:var(--t-xs); color:var(--text-muted);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:560px){
  .menu a{ font-size:18px; flex-wrap:wrap; }
  .menu .desc{ display:none; }
  .roster li{ flex-direction:column; gap:2px; }
  .roster .role{ text-align:left; }
  .shows li{ grid-template-columns:1fr; gap:2px; }
  .shows .city{ text-align:left; }
}