/* ═══════════════════════════════════════════════════════
   RACKETLOG — Page-specific styles
   Depends on: base.css (loaded first)
   Accent palette: green → blue
   ═══════════════════════════════════════════════════════ */

:root {
  --accent: #10b981;
  --accent-bright: #34d399;
  --accent-2: #059669;
  --gradient: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
  --gradient-soft: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(59,130,246,0.15) 100%);
  --max-w: 1100px;
  --section-pad: 100px;
}

/* ─── HERO GLOW ────────────────────────────────────── */
.hero-glow {
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 70%);
}

/* ─── HERO LABEL ───────────────────────────────────── */
.hero-label {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
}

/* ─── PHONE GLOW ───────────────────────────────────── */
.phone-glow {
  background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
}

/* ─── FEATURE LIST CHECK (accent-coloured bg/border) ─ */
.feature-list li .check {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
}

/* ─── FEAT CARD HOVER ──────────────────────────────── */
.feat-card:hover {
  border-color: rgba(16,185,129,0.3);
}

/* ─── CTA GLOW ─────────────────────────────────────── */
.cta-glow {
  background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
}

/* ─── BTN-PRIMARY shadow overrides ─────────────────── */
.btn-primary {
  box-shadow: 0 0 30px rgba(16,185,129,0.2);
}

.btn-primary:hover {
  box-shadow: 0 8px 40px rgba(16,185,129,0.35);
}

/* ─── PHONE SCREEN UI — RacketLog specific ──────────── */
.racket-card {
  background: #161b22;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}

.racket-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.racket-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--white);
}

.racket-brand {
  font-size: 0.55rem;
  color: var(--muted);
  margin-top: 2px;
}

.gauge-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.gauge-label {
  font-size: 0.5rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}

.gauge-bar-bg {
  height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
}

.gauge-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--gradient);
}

.gauge-status {
  font-size: 0.52rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(16,185,129,0.15);
  color: var(--accent-bright);
  display: inline-block;
}

.session-item {
  background: #161b22;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-left { display: flex; flex-direction: column; gap: 2px; }
.session-title { font-size: 0.58rem; font-weight: 600; color: var(--white); }
.session-meta { font-size: 0.5rem; color: var(--muted); }
.session-dur { font-size: 0.6rem; font-weight: 700; color: var(--accent-bright); }

/* ─── MOCK GAUGE BLOCK ─────────────────────────────── */
.mock-gauge-block {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

.mock-gauge-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mock-gauge-bar-bg {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}

.mock-gauge-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--gradient);
}

.mock-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.55rem;
  color: var(--muted);
}

/* ─── MOCK STAR / RATING ───────────────────────────── */
.mock-star-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.mock-star {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(251,191,36,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
}

.mock-rating-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mock-rating-item {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
}

.mock-rating-label { font-size: 0.58rem; color: var(--muted); margin-bottom: 4px; }
.mock-rating-bar-bg { height: 4px; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; }
.mock-rating-bar-fill { height: 100%; border-radius: 10px; }
.fill-green { background: var(--gradient); }
.fill-blue { background: linear-gradient(135deg, #3b82f6, #8b5cf6); }

/* ─── MOCK TAGS ────────────────────────────────────── */
.mock-tag {
  display: inline-flex;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

.mock-tag.green  { background: rgba(16,185,129,0.15); color: #34d399; }
.mock-tag.orange { background: rgba(251,146,60,0.15);  color: #fb923c; }
.mock-tag.red    { background: rgba(239,68,68,0.15);   color: #f87171; }
.mock-tag.blue   { background: rgba(59,130,246,0.15);  color: #60a5fa; }

/* ─── RESPONSIVE — RacketLog specific ──────────────── */
@media (max-width: 560px) {
  .mock-rating-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════
   RACKETLOG — New authentic UI components
   rl-  prefix = racketlog phone/feature screen elements
   ═══════════════════════════════════════════════════════ */

/* ─── PHONE SCREEN OVERRIDE ─────────────────────────── */
.phone-screen {
  gap: 0;
  padding: 12px 10px 10px;
  min-height: 520px;
  background: #111111;
}

/* ─── STATUS BAR ────────────────────────────────────── */
.rl-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px;
}

.rl-time {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

.rl-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ─── APP HEADER ────────────────────────────────────── */
.rl-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}

.rl-header-icon {
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: var(--muted);
}

.rl-header-title { text-align: center; flex: 1; }
.rl-header-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}
.rl-header-sub {
  font-size: 0.42rem;
  color: var(--muted);
}

.rl-header-plus {
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}

/* ─── RACKET CARD (phone hero) ──────────────────────── */
.rl-racket-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 7px;
}

.rl-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.rl-card-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* ─── STATUS BADGES ─────────────────────────────────── */
.rl-badge {
  display: inline-flex;
  font-size: 0.48rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.rl-badge.healthy  { background: rgba(16,185,129,0.18); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.rl-badge.heads-up { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(96,165,250,0.2); }
.rl-badge.replace  { background: rgba(251,146,60,0.18); color: #fb923c; border: 1px solid rgba(251,146,60,0.3); }
.rl-badge.overdue  { background: rgba(239,68,68,0.15);  color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

/* ─── STRING INFO IN CARD ───────────────────────────── */
.rl-card-strings {
  margin-bottom: 8px;
}

.rl-string-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1px;
}

.rl-string-label {
  font-size: 0.45rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.rl-string-name {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--white);
}

.rl-string-tension {
  font-size: 0.5rem;
  color: var(--muted);
  margin-bottom: 4px;
}

/* ─── CARD BOTTOM (ring + stats) ────────────────────── */
.rl-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* ─── CIRCULAR PROGRESS RING ────────────────────────── */
.rl-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.rl-ring {
  width: 44px;
  height: 44px;
}

.rl-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.08);
}

.rl-ring-fill {
  fill: none;
  stroke-linecap: round;
}

.rl-ring-fill.healthy { stroke: #34d399; }
.rl-ring-fill.replace { stroke: #fb923c; }
.rl-ring-fill.heads-up{ stroke: #60a5fa; }

.rl-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

/* Replace state: shows 0% + "Replace" label */
.rl-ring-replace {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
}

.rl-ring-zero {
  font-size: 0.5rem;
  font-weight: 800;
  color: #fb923c;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rl-ring-repl-label {
  font-size: 0.35rem;
  font-weight: 700;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ─── STATS NEXT TO RING ────────────────────────────── */
.rl-card-stats { flex: 1; }
.rl-stat {
  font-size: 0.48rem;
  color: var(--white);
  line-height: 1.5;
}
.rl-stat-sub {
  font-size: 0.44rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── QUICK LOG CHIPS ───────────────────────────────── */
.rl-quick-log {
  display: flex;
  gap: 5px;
}

.rl-quick-chip {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 2px;
  font-size: 0.46rem;
  font-weight: 700;
  color: var(--off-white);
}

.rl-chip-active {
  background: rgba(16,185,129,0.15);
  border-color: rgba(52,211,153,0.3);
  color: #34d399;
}

.rl-quick-highlight .rl-quick-chip {
  border-color: rgba(16,185,129,0.2);
}


/* ═══════════════════════════════════════════════════════
   FEATURE DETAIL SCREEN (fd) — RacketLog
   ═══════════════════════════════════════════════════════ */

.rl-fd-screen {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* Override feature-visual padding when fd-screen inside */
.feature-visual:has(.rl-fd-screen) {
  padding: 28px;
  justify-content: flex-start;
  min-height: unset;
}

.feature-visual:has(.rl-fd-screen)::before {
  opacity: 0.4;
}

.rl-fd-back {
  font-size: 0.58rem;
  color: #60a5fa;
  font-weight: 600;
  margin-bottom: 10px;
}

.rl-fd-section-label {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 5px;
  margin-top: 8px;
}

.rl-fd-section-label:first-of-type { margin-top: 0; }

.rl-fd-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 4px;
}

.rl-fd-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.rl-fd-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white);
}

.rl-fd-card-sub {
  font-size: 0.58rem;
  color: var(--off-white);
  margin-top: 2px;
}

.rl-fd-edit {
  font-size: 0.52rem;
  font-weight: 600;
  color: #60a5fa;
}

.rl-fd-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 6px 0;
}

.rl-fd-string-block { margin-bottom: 2px; }
.rl-fd-string-label {
  font-size: 0.46rem;
  color: var(--muted);
  margin-bottom: 1px;
}
.rl-fd-string-name {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--white);
}
.rl-fd-string-detail {
  font-size: 0.5rem;
  color: var(--muted);
}

.rl-fd-date {
  font-size: 0.5rem;
  color: var(--muted);
  margin: 6px 0 8px;
}

/* Ring row inside fd card */
.rl-fd-ring-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.rl-fd-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.rl-fd-ring {
  width: 56px;
  height: 56px;
}

.rl-fd-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.03em;
}

.rl-fd-ring-stats { flex: 1; }

/* Action buttons inside string job card */
.rl-fd-action-row {
  display: flex;
  gap: 6px;
}

.rl-fd-btn-secondary {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 6px;
  font-size: 0.52rem;
  font-weight: 700;
  color: #60a5fa;
}

.rl-fd-btn-primary {
  flex: 1.4;
  text-align: center;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-radius: 20px;
  padding: 6px;
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--white);
}

/* ─── SESSION ROWS ──────────────────────────────────── */
.rl-sess-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.rl-sess-date {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--white);
}

.rl-sess-meta {
  font-size: 0.48rem;
  color: var(--muted);
  margin-top: 1px;
}

.rl-sess-dur {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--off-white);
}

/* ─── STRING JOB ROW ────────────────────────────────── */
.rl-fd-job-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.rl-fd-job-line {
  font-size: 0.56rem;
  color: var(--white);
  font-weight: 500;
  line-height: 1.5;
}

.rl-fd-job-key {
  font-weight: 700;
}

.rl-fd-job-dim {
  color: var(--muted);
  font-size: 0.5rem;
}

.rl-fd-job-meta {
  font-size: 0.46rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ─── PLAYER RATINGS ────────────────────────────────── */
.rl-rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
}

.rl-rating-label {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--white);
  min-width: 60px;
}

.rl-rating-pills {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 2px;
}

.rl-pill {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.rl-pill.active {
  background: rgba(255,255,255,0.18);
  color: var(--white);
  font-weight: 700;
}

/* ─── STATUS LEGEND ─────────────────────────────────── */
.rl-status-legend {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.rl-status-legend .rl-badge {
  flex: 1;
  justify-content: center;
  font-size: 0.44rem;
}