/* ==========================================================================
   StringLog — standalone CSS
   Mobile-first, light mode default, dark mode via prefers-color-scheme.
   All class names prefixed with `sl-` to avoid collision with styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Light Mode defaults)
   -------------------------------------------------------------------------- */
:root {
  --sl-primary: #0891B2;          /* Cyan-600 */
  --sl-primary-dark: #67E8F9;     /* Cyan-300 — used in dark mode */
  --sl-primary-hover: #0E7490;    /* Cyan-700 */
  --sl-tint: #ECFEFF;             /* Cyan-50 */
  --sl-text-on-primary: #FFFFFF;
  --sl-bg: #FFFFFF;
  --sl-text: #1F2937;             /* Gray-800 */
  --sl-text-secondary: #6B7280;   /* Gray-500 */
  --sl-border: #E5E7EB;           /* Gray-200 */
  --sl-card-bg: #FFFFFF;
  --sl-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sl-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sl-radius: 0.5rem;
  --sl-radius-lg: 0.75rem;
  --sl-radius-full: 9999px;
  --sl-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --sl-transition: 150ms ease;
}

/* --------------------------------------------------------------------------
   2. Dark Mode Overrides
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --sl-primary: #67E8F9;          /* Lighter cyan for readability */
    --sl-primary-hover: #A5F3FC;    /* Cyan-200 */
    --sl-tint: #164E63;             /* Cyan-900 */
    --sl-text-on-primary: #0C4A6E;  /* Dark text on light cyan */
    --sl-bg: #111827;               /* Gray-900 */
    --sl-text: #F9FAFB;             /* Gray-50 */
    --sl-text-secondary: #9CA3AF;   /* Gray-400 */
    --sl-border: #374151;           /* Gray-700 */
    --sl-card-bg: #1F2937;          /* Gray-800 */
    --sl-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sl-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

/* ── Product heading ────────────────────────────────── */
.sl-product-header {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 0;
}

.sl-product-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sl-primary);
    text-decoration: none;
    display: inline-block;
}
.sl-product-title:hover {
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   3. Layout — .sl-page, .sl-page-header
   -------------------------------------------------------------------------- */
.sl-page {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  font-family: var(--sl-font);
  color: var(--sl-text);
}

@media (min-width: 640px) {
  .sl-page {
    padding: 1.5rem 1.5rem 3rem;
  }
}

@media (min-width: 1024px) {
  .sl-page {
    padding: 1.5rem 2rem 3rem;
  }
}

/* Breadcrumb navigation */
.sl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
}

.sl-breadcrumb a {
  color: var(--sl-text-secondary);
  text-decoration: none;
  transition: color var(--sl-transition);
}

.sl-breadcrumb a:hover {
  color: var(--sl-primary);
}

.sl-breadcrumb__sep {
  opacity: 0.5;
}

.sl-page--narrow {
  max-width: 40rem;
}

.sl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.sl-page-header h1,
.sl-page-header h2 {
  margin: 0;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--sl-text);
}

.sl-page-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .sl-product-header {
    padding: 0.75rem 1rem 0;
  }
  .sl-product-title {
    font-size: 1.375rem;
  }
  .sl-page {
    padding: 0.75rem 1rem 1.5rem;
  }
  .sl-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    margin-bottom: 1rem;
  }
  .sl-page-header h1,
  .sl-page-header h2 {
    font-size: 1.25rem;
  }
  .sl-page-header__actions {
    align-self: flex-end;
  }
  .sl-form-group {
    margin-bottom: 0.75rem;
  }
  .sl-info-box {
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }
  .sl-string-section {
    padding: 0.75rem;
  }
  .sl-string-section__label {
    margin-bottom: 0.5rem;
  }
}

/* Dashboard header — branded with nav links */
.sl-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--sl-primary);
}

.sl-dashboard-header__brand h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sl-text);
  letter-spacing: -0.5px;
}

.sl-dashboard-header__tagline {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--sl-primary);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.sl-dashboard-header__nav {
  display: flex;
  gap: 0.25rem;
}

.sl-nav-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--sl-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-text-secondary);
  text-decoration: none;
  transition: all var(--sl-transition);
}

.sl-nav-link:hover {
  color: var(--sl-primary);
  background: var(--sl-tint);
}

.sl-nav-link__icon {
  font-size: 1rem;
}

/* Dashboard section with header */
.sl-dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.sl-dashboard-section__header h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sl-text-secondary);
}

/* Dashboard empty state */
.sl-dashboard-empty {
  text-align: center;
  padding: 3rem 2rem;
}

.sl-dashboard-empty__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.5;
}

.sl-dashboard-empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--sl-text);
}

.sl-dashboard-empty p {
  margin: 0 auto 2rem;
  max-width: 24rem;
  font-size: 0.9375rem;
  color: var(--sl-text-secondary);
  line-height: 1.6;
}

/* String block — structured string display in setup cards */
.sl-setup-card__string-block {
  margin: 0.5rem 0;
}

.sl-setup-card__string-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.sl-setup-card__string-value {
  font-size: 0.9375rem;
  color: var(--sl-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.sl-setup-card__tension {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

/* Stat items in setup card bottom */
.sl-setup-card__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.sl-setup-card__stat-value {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--sl-text);
}

.sl-setup-card__stat-label {
  font-size: 0.6875rem;
  color: var(--sl-text-secondary);
}

/* Session cards — individual session entries on setup detail page */
.sl-session-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--sl-border);
}

.sl-session-card--feel-1 { border-left-color: #EF4444; }
.sl-session-card--feel-2 { border-left-color: #F59E0B; }
.sl-session-card--feel-3 { border-left-color: #9CA3AF; }
.sl-session-card--feel-4 { border-left-color: #22C55E; }
.sl-session-card--feel-5 { border-left-color: #06B6D4; }

.sl-session-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.sl-session-card__date {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sl-text);
}

.sl-session-card__duration {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  font-weight: 500;
}

.sl-session-card__feel {
  margin-bottom: 0.375rem;
}

.sl-feel-indicator {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--sl-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sl-feel-indicator--1 { background: #FEE2E2; color: #991B1B; }
.sl-feel-indicator--2 { background: #FEF3C7; color: #92400E; }
.sl-feel-indicator--3 { background: #F3F4F6; color: #4B5563; }
.sl-feel-indicator--4 { background: #D1FAE5; color: #065F46; }
.sl-feel-indicator--5 { background: #CFFAFE; color: #155E75; }

@media (prefers-color-scheme: dark) {
  .sl-feel-indicator--1 { background: #7F1D1D; color: #FCA5A5; }
  .sl-feel-indicator--2 { background: #78350F; color: #FCD34D; }
  .sl-feel-indicator--3 { background: #374151; color: #9CA3AF; }
  .sl-feel-indicator--4 { background: #064E3B; color: #6EE7B7; }
  .sl-feel-indicator--5 { background: #164E63; color: #67E8F9; }
}

/* Feel trend strip — colored dots showing feel degradation over sessions */
.sl-feel-trend {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
}

.sl-feel-trend__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sl-text-secondary);
  margin-bottom: 0.375rem;
}

.sl-feel-trend__dots {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
}

.sl-feel-trend__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.sl-feel-trend__dot--1 { background: #EF4444; }
.sl-feel-trend__dot--2 { background: #F59E0B; }
.sl-feel-trend__dot--3 { background: #9CA3AF; }
.sl-feel-trend__dot--4 { background: #22C55E; }
.sl-feel-trend__dot--5 { background: #06B6D4; }

.sl-feel-trend__range {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
}

.sl-session-card__surface {
  font-size: 0.75rem;
  color: var(--sl-text-secondary);
  text-transform: capitalize;
}

.sl-session-card__notes {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--sl-text-secondary);
  line-height: 1.5;
  font-style: italic;
}

/* Session delete button — revealed on hover, absolute-positioned in card corner */
.sl-session-card {
  position: relative;
}

.sl-session-delete-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--sl-text-secondary);
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: var(--sl-radius);
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sl-session-card:hover .sl-session-delete-btn {
  opacity: 1;
}

.sl-session-delete-btn:hover {
  background: #FEF2F2;
  color: #EF4444;
}

@media (prefers-color-scheme: dark) {
  .sl-session-delete-btn:hover {
    background: #450A0A;
    color: #FCA5A5;
  }
}

/* Nudge — contextual hint on active setup cards */
.sl-nudge {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #B45309;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--sl-radius);
  padding: 0.375rem 0.625rem;
  margin-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .sl-nudge {
    color: #FCD34D;
    background: #78350F;
    border-color: #92400E;
  }
}

.sl-setup-card--retired {
  opacity: 0.7;
}

.sl-setup-card--retired:hover {
  opacity: 1;
}

.sl-setup-card__view-link {
  font-size: 0.8125rem;
  color: var(--sl-primary);
  font-weight: 500;
  align-self: flex-end;
}

@media (min-width: 640px) {
  .sl-setup-card__view-link {
    align-self: auto;
  }
}

.sl-btn--lg {
  padding: 0.875rem 2rem;
  font-size: 1.0625rem;
}
.sl-btn--full {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   4. Cards — .sl-setup-card, .sl-racket-card
   -------------------------------------------------------------------------- */
/* Card links — removes inline style needs */
a.sl-racket-card,
a.sl-setup-card,
.sl-setup-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.sl-setup-card,
.sl-racket-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--sl-card-shadow);
  transition: box-shadow var(--sl-transition);
}

.sl-setup-card:hover,
.sl-racket-card:hover {
  box-shadow: var(--sl-card-shadow-hover);
}

.sl-setup-card__top,
.sl-setup-card__header,
.sl-racket-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sl-setup-card__racket-info {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}

.sl-setup-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sl-border);
}

@media (min-width: 640px) {
  .sl-setup-card__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.sl-setup-card__stat-sep {
  color: var(--sl-text-secondary);
  opacity: 0.5;
}

.sl-setup-card__title,
.sl-racket-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sl-text);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. Color Dot — .sl-color-dot
   -------------------------------------------------------------------------- */
.sl-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0.7;
  flex-shrink: 0;
}

.sl-color-dot--lg {
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

.sl-color-dot--red    { background-color: #EF4444; }
.sl-color-dot--blue   { background-color: #3B82F6; }
.sl-color-dot--green  { background-color: #22C55E; }
.sl-color-dot--orange { background-color: #F97316; }
.sl-color-dot--purple { background-color: #A855F7; }
.sl-color-dot--yellow { background-color: #EAB308; }
.sl-color-dot--pink   { background-color: #EC4899; }
.sl-color-dot--teal   { background-color: #14B8A6; }
.sl-color-dot--white  { background-color: #FFFFFF; border: 1px solid var(--sl-border); }
.sl-color-dot--black  { background-color: #1F2937; }

@media (prefers-color-scheme: dark) {
  .sl-color-dot--black { background-color: #D1D5DB; }
  .sl-color-dot--white { background-color: #374151; border-color: var(--sl-border); }
}

/* --------------------------------------------------------------------------
   6. Owner Tags — .sl-owner-tag
   -------------------------------------------------------------------------- */
.sl-owner-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--sl-radius-full);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.sl-owner-tag--mine {
  background: #EEF2FF;        /* Indigo-50 */
  color: #4338CA;             /* Indigo-700 */
}

.sl-owner-tag--friend {
  background: #FDF2F8;        /* Pink-50 */
  color: #BE185D;             /* Pink-700 */
}

@media (prefers-color-scheme: dark) {
  .sl-owner-tag--mine {
    background: #312E81;        /* Indigo-900 */
    color: #A5B4FC;             /* Indigo-300 */
  }

  .sl-owner-tag--friend {
    background: #831843;        /* Pink-900 */
    color: #F9A8D4;             /* Pink-300 */
  }
}

/* --------------------------------------------------------------------------
   6c. Color Picker — circle swatches with checkmark selection
   -------------------------------------------------------------------------- */
.sl-color-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sl-color-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--sl-transition);
  position: relative;
  padding: 0;
  outline-offset: 2px;
}

.sl-color-swatch:hover {
  transform: scale(1.15);
}

.sl-color-swatch--selected {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 2px var(--sl-bg), 0 0 0 4px var(--sl-primary);
}

.sl-color-swatch--selected::after {
  content: '\2713';
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.sl-color-swatch--red    { background-color: #EF4444; }
.sl-color-swatch--blue   { background-color: #3B82F6; }
.sl-color-swatch--green  { background-color: #22C55E; }
.sl-color-swatch--orange { background-color: #F97316; }
.sl-color-swatch--purple { background-color: #A855F7; }
.sl-color-swatch--yellow { background-color: #EAB308; }
.sl-color-swatch--pink   { background-color: #EC4899; }
.sl-color-swatch--teal   { background-color: #14B8A6; }
.sl-color-swatch--white  { background-color: #F9FAFB; border-color: var(--sl-border); }
.sl-color-swatch--black  { background-color: #1F2937; }

.sl-color-swatch--white.sl-color-swatch--selected::after { color: #374151; text-shadow: none; }
.sl-color-swatch--yellow.sl-color-swatch--selected::after { color: #713F12; text-shadow: none; }

@media (prefers-color-scheme: dark) {
  .sl-color-swatch--black { background-color: #4B5563; }
  .sl-color-swatch--white { background-color: #D1D5DB; border-color: var(--sl-border); }
  .sl-color-swatch--white.sl-color-swatch--selected::after { color: #1F2937; }
}

/* --------------------------------------------------------------------------
   6b. Filter Bar — .sl-filter-bar, .sl-filter-chip (history page)
   -------------------------------------------------------------------------- */
.sl-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.sl-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-full);
  background: var(--sl-card-bg);
  color: var(--sl-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
}

.sl-filter-chip:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-filter-chip--active {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-filter-chip--active:hover {
  background: var(--sl-primary-hover);
  border-color: var(--sl-primary-hover);
}

/* --------------------------------------------------------------------------
   7. Feel Chips — .sl-feel-chips, .sl-feel-chip
   -------------------------------------------------------------------------- */
.sl-feel-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sl-feel-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-card-bg);
  color: var(--sl-text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-feel-chip:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-feel-chip--selected {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-feel-chip--selected:hover {
  background: var(--sl-primary-hover);
  border-color: var(--sl-primary-hover);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   7b. Feel Scale — connected segmented control for 1-5 ratings
   -------------------------------------------------------------------------- */
.sl-feel-scale {
  display: inline-flex;
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sl-border);
}

.sl-feel-scale__option {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: none;
  border-right: 1px solid var(--sl-border);
  background: var(--sl-card-bg);
  color: var(--sl-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-feel-scale__option:last-child {
  border-right: none;
}

.sl-feel-scale__option:hover {
  background: var(--sl-tint);
  color: var(--sl-primary);
}

.sl-feel-scale__option--selected {
  background: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-feel-scale__option--selected:hover {
  background: var(--sl-primary-hover);
  color: var(--sl-text-on-primary);
}

/* Sub-ratings grid — connected segments per row */
.sl-sub-scale {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.sl-sub-scale__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sl-text-secondary);
  min-width: 4rem;
  text-align: right;
}

.sl-sub-scale__options {
  display: inline-flex;
  border-radius: var(--sl-radius);
  overflow: hidden;
  border: 1px solid var(--sl-border);
}

.sl-sub-scale__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  border: none;
  border-right: 1px solid var(--sl-border);
  background: var(--sl-card-bg);
  color: var(--sl-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-sub-scale__btn:last-child {
  border-right: none;
}

.sl-sub-scale__btn:hover {
  background: var(--sl-tint);
  color: var(--sl-primary);
}

.sl-sub-scale__btn--selected {
  background: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-sub-scale__btn--selected:hover {
  background: var(--sl-primary-hover);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   8. Duration Stepper — .sl-stepper
   -------------------------------------------------------------------------- */
.sl-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  box-shadow: var(--sl-card-shadow);
}

.sl-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: var(--sl-card-bg);
  color: var(--sl-primary);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--sl-transition), color var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-stepper__btn:hover {
  background: var(--sl-tint);
}

.sl-stepper__btn:active {
  background: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-stepper__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sl-stepper__value,
.sl-stepper__input {
  min-width: 3.5rem;
  width: 3.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-text);
  padding: 0 0.25rem;
  border: none;
  border-left: 1px solid var(--sl-border);
  border-right: 1px solid var(--sl-border);
  line-height: 44px;
  background: var(--sl-card-bg);
  font-family: var(--sl-font);
  outline: none;
  -moz-appearance: textfield;
}

.sl-stepper__input::-webkit-outer-spin-button,
.sl-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Nerd Drawer — .sl-nerd-drawer
   -------------------------------------------------------------------------- */
.sl-nerd-drawer {
  margin-top: 1.5rem;
}

.sl-nerd-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  outline-offset: 2px;
  padding: 0.625rem 0;
  border: none;
  background: transparent;
  color: var(--sl-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--sl-transition);
}

.sl-nerd-drawer__toggle:hover {
  color: var(--sl-primary);
}

.sl-nerd-drawer__expand {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  transition: color var(--sl-transition);
}

.sl-nerd-drawer__toggle:hover .sl-nerd-drawer__expand {
  color: var(--sl-primary);
}

.sl-nerd-drawer[open] .sl-nerd-drawer__expand {
  display: none;
}

.sl-nerd-drawer__content {
  padding: 0.5rem 0 0;
}

/* --------------------------------------------------------------------------
   10. Form Components — .sl-form-group, .sl-label, .sl-input, .sl-select,
       .sl-textarea
   -------------------------------------------------------------------------- */
.sl-form-group {
  margin-bottom: 1rem;
}

.sl-label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-text);
}

.sl-required {
  color: #EF4444;
  font-weight: 600;
}

.sl-hint {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  color: var(--sl-text-secondary);
  line-height: 1.4;
}

.sl-input,
.sl-select,
.sl-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-card-bg);
  color: var(--sl-text);
  font-size: 1rem;
  font-family: var(--sl-font);
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
  outline: none;
}

.sl-input[type="number"] {
  -moz-appearance: textfield;
}
.sl-input[type="number"]::-webkit-outer-spin-button,
.sl-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sl-input::placeholder,
.sl-textarea::placeholder {
  color: var(--sl-text-secondary);
}

.sl-input:hover,
.sl-select:hover,
.sl-textarea:hover {
  border-color: var(--sl-primary);
}

.sl-input:focus,
.sl-select:focus,
.sl-textarea:focus {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);
}

@media (prefers-color-scheme: dark) {
  .sl-input:focus,
  .sl-select:focus,
  .sl-textarea:focus {
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.2);
  }
}

.sl-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 1 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 1 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.sl-textarea {
  min-height: 5rem;
  resize: vertical;
}

/* Form card container — used for info summary cards, not form wrappers */
.sl-form-card {
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg, 12px);
  padding: 1.5rem;
}

.sl-form-card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
}

.sl-form-card--link:hover {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 1px var(--sl-primary);
}

/* Full-width form layout — no card wrapper, content IS the page */
.sl-form {
  margin-bottom: 1.5rem;
}

/* Side-by-side fields on desktop, stacked on mobile */
.sl-form-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

@media (min-width: 640px) {
  .sl-form-row {
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-end;
  }
}

.sl-form-group--grow {
  flex: 1;
  min-width: 0;
}

.sl-form-group--fixed {
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .sl-form-group--fixed {
    flex: 0 0 16rem;
  }
}

/* Form actions — right-aligned with cancel + submit */
.sl-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 2rem;
}
.sl-form-actions--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.sl-form-actions__cancel {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sl-text-secondary);
  text-decoration: none;
  padding: 0.5rem;
  transition: color var(--sl-transition);
}
.sl-form-actions__cancel:hover {
  color: var(--sl-text);
  text-decoration: underline;
}

/* Input with unit suffix (e.g. "lbs") */
.sl-input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.sl-input-with-suffix .sl-input {
  flex: 1;
  padding-right: 2.5rem;
}

.sl-input-suffix {
  position: absolute;
  right: 0.75rem;
  pointer-events: none;
  color: var(--sl-primary);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Section divider (e.g. MAINS / CROSSES labels) */
.sl-section-divider {
  margin: 1rem 0 0.5rem;
}

.sl-section-divider__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sl-primary);
}

/* Tinted background for string sections in setup form */
.sl-string-section {
  background: var(--sl-tint);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  overflow: visible;
  position: relative;
}
.sl-string-section__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sl-primary);
  margin-bottom: 0.75rem;
}
.sl-string-section--crosses .sl-string-section__label {
  color: #0D9488;
}
.sl-string-section--crosses {
  background: #F0FDFA;
}
@media (prefers-color-scheme: dark) {
  .sl-string-section--crosses {
    background: #134E4A;
  }
}

/* Tinted input borders inside string sections */
.sl-string-section .sl-input,
.sl-string-section .sl-select {
  border-color: var(--sl-primary);
}
.sl-string-section--crosses .sl-input,
.sl-string-section--crosses .sl-select {
  border-color: #0D9488;
}

/* Full-width button */
.sl-btn--full {
  width: 100%;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   11. Segmented Control — .sl-toggle
   -------------------------------------------------------------------------- */
.sl-toggle {
  display: flex;
  border-radius: var(--sl-radius);
  background: var(--sl-card-bg);
}

.sl-toggle__option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 44px;
  border: 1px solid var(--sl-border);
  position: relative;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--sl-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-toggle__option:first-child {
  border-radius: var(--sl-radius) 0 0 var(--sl-radius);
}
.sl-toggle__option:last-child {
  border-radius: 0 var(--sl-radius) var(--sl-radius) 0;
}
.sl-toggle__option + .sl-toggle__option {
  margin-left: -1px;
}

.sl-toggle__option:hover {
  color: var(--sl-text);
  background: var(--sl-tint);
}

.sl-toggle__option--active {
  background: var(--sl-primary);
  color: var(--sl-text-on-primary);
  border-color: var(--sl-primary);
  z-index: 1;
}

.sl-toggle__option--active:hover {
  background: var(--sl-primary-hover);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   12. Autocomplete — .sl-autocomplete
   -------------------------------------------------------------------------- */
.sl-autocomplete {
  position: relative;
  z-index: 10;
}

.sl-autocomplete__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 15rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 0.25rem 0;
}

@media (prefers-color-scheme: dark) {
  .sl-autocomplete__dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

.sl-autocomplete__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--sl-text);
  cursor: pointer;
  transition: background var(--sl-transition);
}

.sl-autocomplete__item:hover {
  background: var(--sl-tint);
}

.sl-autocomplete__item--highlighted {
  background: var(--sl-tint);
  color: var(--sl-primary);
}

.sl-autocomplete__secondary {
  font-size: 0.75rem;
  color: var(--sl-text-secondary);
  text-transform: capitalize;
}

/* Selected string chip — replaces input after selection */
.sl-autocomplete__chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  background: var(--sl-tint);
  border: 1px solid var(--sl-primary);
  border-radius: var(--sl-radius);
  font-size: 0.9375rem;
  color: var(--sl-text);
}

.sl-autocomplete__chip-text {
  flex: 1;
}

.sl-autocomplete__chip-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--sl-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  transition: color var(--sl-transition), background var(--sl-transition);
}

.sl-autocomplete__chip-clear:hover {
  color: var(--sl-text);
  background: var(--sl-border);
}

/* Custom string inline form */
.sl-custom-string-form {
  background: var(--sl-tint);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 1rem;
  margin-top: 0.75rem;
}
.sl-custom-string-form__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-text);
  margin-bottom: 0.75rem;
}
.sl-custom-string-form__row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.sl-custom-string-form__field {
  flex: 1;
}
.sl-custom-string-form__field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sl-text-secondary);
  margin-bottom: 0.25rem;
}
.sl-custom-string-form__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.sl-custom-string-form__cancel {
  background: none;
  border: none;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  cursor: pointer;
}
.sl-custom-string-form__cancel:hover {
  color: var(--sl-text);
}

/* --------------------------------------------------------------------------
   13. Buttons — .sl-btn
   -------------------------------------------------------------------------- */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--sl-radius);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--sl-font);
  cursor: pointer;
  transition: all var(--sl-transition);
  text-decoration: none;
  line-height: 1.25;
  user-select: none;
  -webkit-user-select: none;
}

.sl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sl-btn--primary {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-btn--primary:hover:not(:disabled) {
  background: var(--sl-primary-hover);
  border-color: var(--sl-primary-hover);
}

.sl-btn--secondary {
  background: transparent;
  border-color: var(--sl-border);
  color: var(--sl-text);
}

.sl-btn--secondary:hover:not(:disabled) {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-btn--outline-primary {
  background: transparent;
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-btn--outline-primary:hover:not(:disabled) {
  background: var(--sl-tint);
  border-color: var(--sl-primary-hover);
  color: var(--sl-primary-hover);
  background: var(--sl-tint);
}

.sl-btn--sm {
  min-height: 36px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   14. Sub-Rating Grid — .sl-sub-ratings
   -------------------------------------------------------------------------- */
.sl-sub-ratings {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.sl-sub-ratings__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sl-text-secondary);
  text-align: right;
}

.sl-sub-ratings__chips {
  display: flex;
  gap: 0.25rem;
}

.sl-sub-ratings__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-card-bg);
  color: var(--sl-text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-sub-ratings__chip:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-sub-ratings__chip--selected {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   14b. Expandable card — accordion pattern
   -------------------------------------------------------------------------- */
.sl-setup-card__expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.sl-setup-card--expanded .sl-setup-card__expand {
  max-height: 2000px;
  transition: max-height 0.3s ease-in;
}
.sl-setup-card__expand-content {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}
.sl-setup-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.sl-setup-card__actions .sl-text-link {
  font-size: 0.8125rem;
  color: var(--sl-primary);
  text-decoration: none;
}
.sl-setup-card__actions .sl-text-link:hover {
  text-decoration: underline;
}

/* Overflow menu */
.sl-overflow-menu {
  position: relative;
}
.sl-overflow-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 1.25rem;
  color: var(--sl-text-secondary);
  cursor: pointer;
  line-height: 1;
  border-radius: var(--sl-radius);
}
.sl-overflow-btn:hover {
  background: var(--sl-tint);
  color: var(--sl-text);
}
.sl-overflow-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  box-shadow: var(--sl-card-shadow-hover);
  min-width: 10rem;
  z-index: 50;
  padding: 0.25rem 0;
}
.sl-overflow-dropdown--open {
  display: block;
}
.sl-overflow-dropdown__item {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: left;
  background: none;
  border: none;
  font-size: 0.875rem;
  color: var(--sl-text);
  cursor: pointer;
}
.sl-overflow-dropdown__item:hover {
  background: var(--sl-tint);
}
.sl-overflow-dropdown__item--danger {
  color: #EF4444;
}
.sl-overflow-dropdown__item--danger:hover {
  background: #FEF2F2;
}
@media (prefers-color-scheme: dark) {
  .sl-overflow-dropdown__item--danger:hover {
    background: #450A0A;
  }
}

.sl-expand-loading {
  padding: 1rem 0;
  text-align: center;
  color: var(--sl-text-secondary);
  font-size: 0.875rem;
}

/* Compact session rows inside expanded card */
.sl-session-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  position: relative;
}
.sl-session-row + .sl-session-row {
  border-top: 1px solid var(--sl-border);
}
.sl-session-row__date {
  font-weight: 500;
  color: var(--sl-text);
  min-width: 5rem;
}
.sl-session-row__duration {
  min-width: 4rem;
}
.sl-session-row__surface {
  color: var(--sl-text-secondary);
}
.sl-session-row .sl-session-delete-btn {
  position: static;
  margin-left: auto;
  opacity: 0;
}
.sl-session-row:hover .sl-session-delete-btn {
  opacity: 1;
}

/* Previous setups list inside expanded racket card */
.sl-previous-setups {
  margin-top: 0.75rem;
}
.sl-previous-setups__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sl-text-secondary);
  margin-bottom: 0.5rem;
}
.sl-previous-setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--sl-border);
}
.sl-previous-setup-row:last-child {
  border-bottom: none;
}
.sl-previous-setup-row:hover {
  color: var(--sl-text);
}
.sl-previous-setup-row__string {
  flex: 1;
  min-width: 0;
}
.sl-previous-setup-row__stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   15. Landing Page — full-width layout matching CourtSnap pattern
   -------------------------------------------------------------------------- */
/* Landing page — scoped overrides for sample dashboard polish */
/* Landing header — title left, CTA right */
.sl-landing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0;
  border-bottom: none;
  flex-wrap: wrap;
}

.sl-landing__header > .sl-btn {
  margin-left: auto;
}

.sl-landing__header h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sl-text);
  letter-spacing: -0.02em;
}

.sl-sample-label {
  font-size: 0.875rem;
  color: var(--sl-text-secondary);
  margin: 0;
}

/* More generous card padding on landing */
.sl-landing .sl-setup-card {
  padding: 1.25rem 1.5rem;
}

/* Wider gap between sections */
.sl-landing .sl-dashboard-section + .sl-dashboard-section {
  margin-top: 2.5rem;
}

/* Load more button */
.sl-load-more {
  text-align: center;
  padding: 1rem 0 0;
}

/* Landing page — CTA section */
.sl-landing-cta {
  padding: 1.5rem 0 1rem;
}

/* "View sessions" button styled as a link */
.sl-sample-view-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--sl-primary);
}
.sl-sample-view-btn:hover {
  text-decoration: underline;
}

/* Session side panel */
.sl-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 90;
}
.sl-panel-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.sl-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(28rem, 90vw);
  height: 100%;
  background: var(--sl-card-bg);
  border-left: 1px solid var(--sl-border);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sl-panel--open {
  transform: translateX(0);
}

/* Panel header, title, close — see updated styles below (line ~2487) */
.sl-panel__body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.sl-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   16. Status Badges — .sl-badge
   -------------------------------------------------------------------------- */
.sl-badge--active,
.sl-badge--retired,
.sl-badge--broke {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: var(--sl-radius-full);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.5;
}

.sl-badge--active {
  background: #D1FAE5;         /* Green-100 */
  color: #065F46;              /* Green-800 */
}

.sl-badge--retired {
  background: #F3F4F6;         /* Gray-100 */
  color: #6B7280;              /* Gray-500 */
}

.sl-badge--broke {
  background: #FEE2E2;         /* Red-100 */
  color: #991B1B;              /* Red-800 */
}

@media (prefers-color-scheme: dark) {
  .sl-badge--active {
    background: #064E3B;        /* Green-900 */
    color: #6EE7B7;             /* Green-300 */
  }

  .sl-badge--retired {
    background: #374151;        /* Gray-700 */
    color: #9CA3AF;             /* Gray-400 */
  }

  .sl-badge--broke {
    background: #7F1D1D;        /* Red-900 */
    color: #FCA5A5;             /* Red-300 */
  }
}

/* --------------------------------------------------------------------------
   17. Info Box — .sl-info-box
   -------------------------------------------------------------------------- */
.sl-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: var(--sl-tint);
  border: 1px solid #A5F3FC;  /* Cyan-200 */
  border-radius: var(--sl-radius);
  font-size: 0.875rem;
  color: #155E75;              /* Cyan-800 */
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  .sl-info-box {
    background: #164E63;        /* Cyan-900 */
    border-color: #0E7490;      /* Cyan-700 */
    color: #A5F3FC;             /* Cyan-200 */
  }
}

/* --------------------------------------------------------------------------
   18. Quick Chips — .sl-quick-chips (duration quick-pick: 60/90/120 min)
   -------------------------------------------------------------------------- */
.sl-quick-chips {
  display: inline-flex;
  gap: 0.375rem;
}

.sl-quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-full);
  background: var(--sl-card-bg);
  color: var(--sl-text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-quick-chip:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
}

.sl-quick-chip--selected {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   19. Surface Chips — .sl-surface-chip (hard/clay/grass/indoor/carpet)
   -------------------------------------------------------------------------- */
.sl-surface-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-full);
  background: var(--sl-card-bg);
  color: var(--sl-text);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sl-transition);
  user-select: none;
  -webkit-user-select: none;
}

.sl-surface-chip:hover {
  border-color: var(--sl-primary);
  color: var(--sl-primary);
  background: var(--sl-tint);
}

.sl-surface-chip--selected {
  background: var(--sl-primary);
  border-color: var(--sl-primary);
  color: var(--sl-text-on-primary);
}

.sl-surface-chip--selected:hover {
  background: var(--sl-primary-hover);
  border-color: var(--sl-primary-hover);
  color: var(--sl-text-on-primary);
}

/* --------------------------------------------------------------------------
   20a. Surface Background
   -------------------------------------------------------------------------- */
.sl-surface-bg {
  background: var(--sl-bg);
}

/* --------------------------------------------------------------------------
   20. Utility Helpers
   -------------------------------------------------------------------------- */
.sl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sl-flex {
  display: flex;
}

.sl-flex-wrap {
  flex-wrap: wrap;
}

.sl-items-center {
  align-items: center;
}

.sl-justify-between {
  justify-content: space-between;
}

.sl-gap-sm {
  gap: 0.5rem;
}

.sl-gap-md {
  gap: 0.75rem;
}

.sl-gap-lg {
  gap: 1rem;
}

.sl-mt-sm {
  margin-top: 0.5rem;
}

.sl-mt-md {
  margin-top: 1rem;
}

.sl-mt-lg {
  margin-top: 1.5rem;
}

.sl-mb-sm {
  margin-bottom: 0.5rem;
}

.sl-mb-md {
  margin-bottom: 1rem;
}

.sl-mb-lg {
  margin-bottom: 1.5rem;
}

.sl-ml-sm {
  margin-left: 0.5rem;
}

.sl-mt-xs {
  margin-top: 0.25rem;
}

.sl-text-sm {
  font-size: 0.875rem;
}

.sl-text-xs {
  font-size: 0.75rem;
}

.sl-text-secondary {
  color: var(--sl-text-secondary);
}

.sl-text-center {
  text-align: center;
}

.sl-text-primary {
  color: var(--sl-primary);
}

.sl-hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   21. Missing layout classes used in templates
   -------------------------------------------------------------------------- */
.sl-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
}

.sl-empty-state__icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.sl-empty-state__icon--lg {
  font-size: 4rem;
}

.sl-empty-state h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sl-text);
}

.sl-empty-state p {
  color: var(--sl-text-secondary);
  font-size: 0.9375rem;
  max-width: 24rem;
  margin: 0 auto 1.5rem;
}

.sl-empty-state__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.sl-page-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.sl-page-actions--center {
  justify-content: center;
}

.sl-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sl-text);
  margin: 0 0 1rem;
}

.sl-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sl-text);
  margin: 0 0 0.75rem;
}

.sl-setup-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sl-setup-card__racket {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
}

.sl-setup-card__racket-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sl-text);
}

@media (min-width: 640px) {
  .sl-setup-card__racket-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sl-setup-card__nickname {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  font-style: italic;
}

.sl-setup-card__string {
  font-size: 0.875rem;
  color: var(--sl-primary);
  line-height: 1.5;
}

.sl-setup-card__string-label {
  font-weight: 600;
  color: var(--sl-text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sl-setup-card__stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  flex-wrap: wrap;
  flex: 1;
}

.sl-setup-card__log-btn {
  align-self: flex-start;
}

.sl-form-error {
  color: #DC2626;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--sl-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* ── Confirm dialog ─────────────────────────────── */
.sl-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.sl-confirm {
  background: var(--sl-card-bg);
  border-radius: 0.75rem;
  padding: 1.5rem;
  max-width: 24rem;
  width: calc(100% - 2rem);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.sl-confirm__message {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-text);
  margin: 0 0 0.25rem;
}
.sl-confirm__detail {
  font-size: 0.875rem;
  color: var(--sl-text-secondary);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}
.sl-confirm__message + .sl-confirm__actions {
  margin-top: 1.25rem;
}
.sl-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.sl-confirm__btn--danger {
  background: #EF4444;
  color: white;
  border: none;
  border-radius: var(--sl-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.sl-confirm__btn--danger:hover {
  background: #DC2626;
}

.sl-global-error {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #DC2626;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--sl-radius);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  .sl-form-error {
    color: #FCA5A5;
    background: #450A0A;
    border-color: #7F1D1D;
  }
}

/* ==========================================================================
   20. Compact Dashboard Cards + Side Panel
   ========================================================================== */

/* ── Compact card grid ── */
.sl-compact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .sl-compact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
  }
}
@media (min-width: 1024px) {
  .sl-compact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

/* ── Individual compact card ── */
.sl-compact-card {
  background: var(--sl-card-bg);
  border: 2px solid transparent;
  border-radius: var(--sl-radius-lg);
  padding: 0.625rem 1rem 0.875rem;
  box-shadow: var(--sl-card-shadow);
  cursor: pointer;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition), transform 0.1s ease;
  position: relative;
}
.sl-compact-card:hover {
  box-shadow: var(--sl-card-shadow-hover);
  border-color: color-mix(in srgb, var(--sl-primary) 30%, transparent);
}
.sl-compact-card:active {
  transform: scale(0.99);
}
.sl-compact-card--active {
  border-color: var(--sl-primary);
  box-shadow: 0 0 0 1px var(--sl-primary), var(--sl-card-shadow-hover);
}
.sl-compact-card--unstrung {
  opacity: 0.65;
}

/* Card head: identity + feel badge */
.sl-compact-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.sl-compact-card__identity {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1;
}
a.sl-compact-card__name,
.sl-compact-card__name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
a.sl-compact-card__name:hover {
  color: var(--sl-primary);
  text-decoration: underline;
}
.sl-compact-card__nick {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  font-style: italic;
  flex-shrink: 0;
}

/* String row: name + tension */
.sl-compact-card__string {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.sl-compact-card__string-name {
  font-size: 0.8125rem;
  color: var(--sl-primary);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sl-compact-card__string-sep {
  color: var(--sl-text-secondary);
  margin: 0 0.125rem;
}
.sl-compact-card__tension {
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sl-compact-card__tension-sep {
  margin: 0 0.0625rem;
}

/* Stats bar */
.sl-compact-card__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  font-size: 0.75rem;
  color: var(--sl-text-secondary);
}
.sl-compact-card__stat {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  white-space: nowrap;
}
.sl-compact-card__stat-val {
  font-weight: 600;
  color: var(--sl-text);
  font-variant-numeric: tabular-nums;
}
.sl-compact-card__stat-lbl {
  color: var(--sl-text-secondary);
}
.sl-compact-card__stat-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--sl-text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .sl-compact-card__stat-dot { display: none; }
  .sl-compact-card__stats { gap: 0.125rem 0.5rem; }
}

/* Log Session button — full width below stats */
.sl-compact-card__log-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.75rem;
}

/* Racket metadata line (inline under heading) */
.sl-racket-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  margin-top: 0.25rem;
}

.sl-page-header__nick {
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--sl-text-secondary);
}

/* Empty state inside card */
.sl-compact-card__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
}

/* Extra-small button */
.sl-btn--xs {
  min-height: auto;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--sl-radius);
}

/* ── Side panel overlay ── */
.sl-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sl-panel-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-color-scheme: dark) {
  .sl-panel-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
}

/* ── Side panel ── */
.sl-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;              /* leave 12% tap target on mobile */
  max-width: 28rem;
  background: var(--sl-bg);
  border-left: 1px solid var(--sl-border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.sl-panel--open {
  transform: translateX(0);
}
@media (prefers-color-scheme: dark) {
  .sl-panel {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 640px) {
  .sl-panel {
    width: 100%;
    max-width: 24rem;
  }
}

/* Swipe handle — visual hint that the panel is draggable */
.sl-panel__swipe-handle {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0;
  flex-shrink: 0;
}
.sl-panel__swipe-handle::after {
  content: '';
  width: 2rem;
  height: 3px;
  border-radius: 2px;
  background: var(--sl-border);
}
@media (min-width: 640px) {
  .sl-panel__swipe-handle {
    display: none; /* hide grab handle on desktop */
  }
}

/* Panel header */
.sl-panel__header {
  padding: 0.75rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--sl-border);
  flex-shrink: 0;
}
.sl-panel__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.sl-panel__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sl-text);
  line-height: 1.3;
}
.sl-panel__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--sl-text-secondary);
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: var(--sl-radius);
  flex-shrink: 0;
}
.sl-panel__close:hover {
  background: var(--sl-tint);
  color: var(--sl-text);
}
.sl-panel__subtitle {
  font-size: 0.8125rem;
  color: var(--sl-primary);
  margin-top: 0.25rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Panel body */
.sl-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}
.sl-panel__loading {
  text-align: center;
  padding: 2rem 0;
  color: var(--sl-text-secondary);
  font-size: 0.875rem;
}

/* Panel sections */
.sl-panel-section {
  margin-bottom: 1.25rem;
}
.sl-panel-section__title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--sl-text-secondary);
  margin: 0 0 0.5rem;
}

/* Panel stats row */
.sl-panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sl-panel-stat {
  text-align: center;
  padding: 0.625rem 0.375rem;
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
}
.sl-panel-stat__val {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.sl-panel-stat__lbl {
  display: block;
  font-size: 0.6875rem;
  color: var(--sl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0.125rem;
}

/* Panel session rows */
.sl-panel-session {
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--sl-text-secondary);
  position: relative;
}
.sl-panel-session__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.sl-panel-session__ratings {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}
.sl-panel-session__rating {
  color: var(--sl-text-secondary);
}
.sl-panel-session__notes {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--sl-text);
  line-height: 1.4;
}
.sl-panel-session + .sl-panel-session {
  border-top: 1px solid var(--sl-border);
}
.sl-panel-session__date {
  font-weight: 500;
  color: var(--sl-text);
  min-width: 5.5rem;
}
.sl-panel-session__dur {
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
}
.sl-panel-session__surface {
  text-transform: capitalize;
  margin-left: auto;
}
.sl-panel-session__edit {
  color: var(--sl-primary);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0.125rem 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.sl-panel-session:hover .sl-panel-session__edit,
.sl-panel-session__header:hover .sl-panel-session__edit {
  opacity: 0.7;
}
.sl-panel-session__edit:hover {
  opacity: 1;
}
.sl-panel-session__delete {
  background: none;
  border: none;
  color: var(--color-danger, #dc2626);
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1;
  padding: 0.125rem 0.25rem;
  border-radius: var(--sl-radius);
  opacity: 0;
  transition: opacity 0.15s;
}
.sl-panel-session:hover .sl-panel-session__delete,
.sl-panel-session__header:hover .sl-panel-session__delete {
  opacity: 0.7;
}
.sl-panel-session__delete:hover {
  opacity: 1;
}

/* Panel previous setups */
.sl-panel-prev {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
}
.sl-panel-prev + .sl-panel-prev {
  border-top: 1px solid var(--sl-border);
}
.sl-panel-prev__string {
  color: var(--sl-text);
  font-weight: 500;
}
.sl-panel-prev__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sl-text-secondary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Panel footer */
.sl-panel__footer {
  padding: 0.75rem 1.25rem;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-shrink: 0;
}
.sl-panel__footer:empty {
  display: none;
}

/* Panel actions — overflow menu */
.sl-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.sl-panel-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sl-text);
  background: var(--sl-card-bg);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--sl-transition), border-color var(--sl-transition);
}
.sl-panel-action:hover {
  background: var(--sl-tint);
  border-color: var(--sl-primary);
}
.sl-panel-action--danger {
  color: #EF4444;
}
.sl-panel-action--danger:hover {
  background: #FEF2F2;
  border-color: #EF4444;
}
@media (prefers-color-scheme: dark) {
  .sl-panel-action--danger:hover {
    background: #450A0A;
    border-color: #FCA5A5;
  }
}

/* ==========================================================================
   21. Timeline — vertical connector for racket detail string history
   ========================================================================== */
.sl-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sl-timeline__item {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.sl-timeline__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1rem;
  flex-shrink: 0;
  padding-top: 1rem;
}
.sl-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sl-border);
  border: 2px solid var(--sl-card-bg);
  box-shadow: 0 0 0 2px var(--sl-border);
  flex-shrink: 0;
  z-index: 1;
}
.sl-timeline__dot--active {
  background: var(--sl-primary);
  box-shadow: 0 0 0 2px var(--sl-primary);
}
.sl-timeline__line {
  width: 2px;
  flex: 1;
  background: var(--sl-border);
  margin: 0.25rem 0;
}
.sl-timeline__card {
  flex: 1;
  min-width: 0;
  margin-bottom: 0.5rem;
}
.sl-timeline__item--active .sl-timeline__card {
  border-color: color-mix(in srgb, var(--sl-primary) 30%, transparent);
}

/* ── Inline expand (timeline setup details) ────────── */
.sl-expandable {
    cursor: pointer;
}
.sl-expandable--open {
    border-color: var(--sl-primary);
}

.sl-setup-expand {
    border-top: 1px solid var(--sl-border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.sl-setup-expand__content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sl-setup-expand__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--sl-text);
}

.sl-setup-expand__label {
    color: var(--sl-text-secondary);
    min-width: 6rem;
}

.sl-setup-expand__actions {
    margin-top: 0.375rem;
    display: flex;
    justify-content: flex-end;
}

.sl-setup-expand__edit-link {
    font-size: 0.8125rem;
    color: var(--sl-primary);
    text-decoration: none;
}
.sl-setup-expand__edit-link:hover {
    text-decoration: underline;
}

.sl-sessions-link {
    cursor: pointer;
    color: var(--sl-primary);
    padding: 0.375rem 0.5rem;
    margin: -0.375rem -0.5rem;
    border-radius: var(--sl-radius);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}
.sl-sessions-link:active {
    background: var(--sl-primary-bg, rgba(0,128,128,0.08));
}
.sl-sessions-link .sl-compact-card__stat-val,
.sl-sessions-link .sl-compact-card__stat-lbl {
    color: var(--sl-primary);
    text-decoration: underline;
}

/* Head right side — feel + status badges */
.sl-compact-card__head-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-left: auto;
}
.sl-compact-card__edit-btn {
  font-size: 1rem;
  color: var(--color-text-tertiary);
  text-decoration: none;
  padding: 0.375rem;
  margin: -0.375rem -0.375rem -0.375rem 0;
  flex-shrink: 0;
}
.sl-compact-card__edit-btn:hover {
  color: var(--sl-primary);
  text-decoration: underline;
}
.sl-compact-card__delete-btn {
  display: inline-flex;
  align-items: center;
  color: var(--color-danger, #dc2626);
  background: none;
  border: none;
  padding: 0.375rem;
  margin: -0.375rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.sl-compact-card__delete-btn:hover {
  opacity: 1;
}

/* ── Link cards (dashboard) ─────────────────────────── */
.sl-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sl-link-card {
    display: flex;
    align-items: center;
    background: var(--sl-card-bg);
    border: 1px solid var(--sl-border);
    border-radius: 0.625rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.sl-link-card:hover {
    border-color: var(--sl-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.sl-link-card--retired {
    opacity: 0.7;
}

.sl-link-card__body { flex: 1; min-width: 0; }

.sl-link-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.sl-link-card__identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.sl-link-card__name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--sl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-link-card__nick {
    color: var(--sl-text-secondary);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.sl-link-card__string {
    font-size: 0.8125rem;
    color: var(--sl-text-secondary);
    margin-top: 0.25rem;
}

.sl-link-card__stats {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--sl-text-secondary);
    margin-top: 0.25rem;
}

.sl-link-card__stat-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--sl-text-secondary);
    opacity: 0.5;
}

.sl-link-card__empty {
    font-size: 0.8125rem;
    color: var(--sl-text-secondary);
    margin-top: 0.25rem;
}

.sl-link-card__chevron {
    color: var(--sl-border);
    font-size: 1.25rem;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

.sl-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.5rem;
}