/* ─────────────────────────────────────────────────────────────
   HPG SKILLS LAB — Shared Stylesheet
   Loaded by all pages. Tailwind utilities are applied via CDN.
───────────────────────────────────────────────────────────── */

/* Base */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: #1A1C23;
  color: #e5e2e1;
}

/* Material Symbols icon rendering */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Brand border utilities */
.studio-border {
  border: 1px solid #FFD700;
}

.studio-border-thin {
  border: 0.5px solid rgba(255, 215, 0, 0.4);
}

/* Glass panel */
.glass-panel {
  background: rgba(26, 28, 35, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

/* ─── Index: Timeline ─────────────────────────────────────── */
.timeline-line {
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: -20px;
  width: 1px;
  background: rgba(255, 215, 0, 0.3);
}

.timeline-step:last-child .timeline-line {
  display: none;
}

/* ─── Lab pages: Week bar animation ──────────────────────── */
.week-bar {
  transition: width 0.6s ease;
}

/* ─── Reserve page: Form elements ────────────────────────── */
.form-input {
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s ease;
  outline: none;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-input:focus {
  border-color: #FFD700;
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
}

/* Reserve page: Radio card selection states */
.program-card input[type="radio"]:checked + label {
  border-color: #FFD700;
  background-color: rgba(255, 215, 0, 0.08);
}

.program-card input[type="radio"]:checked + label .card-icon {
  color: #FFD700;
  border-color: #FFD700;
}

.program-card input[type="radio"]:checked + label .card-check {
  opacity: 1;
}