/* ========================================
   BASE — reset, variables, typography, nav,
   cards, forms, buttons, grid, alerts
   ======================================== */

:root {
  --bg: #f8f9fa; --fg: #212529; --primary: #2563eb; --primary-hover: #1d4ed8;
  --border: #dee2e6; --card-bg: #fff; --success: #16a34a; --danger: #dc2626;
  --muted: #6b7280; --radius: 8px; --warning: #ca8a04;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg); line-height: 1.6;
  max-width: 900px; margin: 0 auto; padding: 1rem;
}
h1, h2, h3 { margin-bottom: 0.5rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========================================
   DASHBOARD — dash-* classes, activity,
   cards, progress, course grid, week bars
   ======================================== */
.dash { max-width: 500px; margin: 0 auto; }
.dash-activity { margin-bottom: 1.25rem; }
.dash-activity-main { display: flex; align-items: center; gap: 0.5rem; }
.dash-minutes { font-size: 1.4rem; font-weight: 800; min-width: 3rem; }
.dash-goal-bar { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.dash-goal-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s; }
.dash-goal-label { font-size: 0.8rem; color: var(--muted); }
.dash-stats { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; }

.dash-card {
  display: block; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem; margin-bottom: 0.75rem;
  text-decoration: none; color: var(--fg); transition: border-color 0.15s, box-shadow 0.15s;
}
.dash-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(37,99,235,.1); text-decoration: none; }
.dash-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.dash-card-icon { font-size: 1.2rem; }
.dash-card-title { font-weight: 700; font-size: 0.95rem; flex: 1; }
.dash-card-badge { background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; }
.dash-card-body {}
.dash-card-main { font-size: 1rem; font-weight: 600; margin-bottom: 0.2rem; }
.dash-card-sub { font-size: 0.85rem; color: var(--muted); }
.dash-progress-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.dash-progress-bar { flex: 1; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.dash-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; }
.dash-progress-text { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
/* Empty state — visible enough to be a clear CTA */
.dash-empty { opacity: 0.7; border-style: dashed; }
.dash-empty:hover { opacity: 1; border-color: var(--primary); }
.dash-empty .dash-card-sub { font-weight: 600; }

/* Global disabled state for buttons and interactive elements */
button:disabled, .btn:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: auto;
}
button:disabled:hover, .btn:disabled:hover { transform: none; box-shadow: none; }

/* Badge + cue indicator (coach source detail) */
.badge-cue {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  background: #e5e7eb; color: var(--muted); padding: 0.1rem 0.4rem;
  border-radius: 4px; vertical-align: middle; margin-left: 0.4rem;
}
.cue-segment { border-left: 3px solid var(--muted); opacity: 0.7; }

/* Nav — layout and active link */
nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.brand { font-weight: 700; font-size: 0.9rem; color: var(--muted); }
.links { display: flex; gap: 1rem; font-size: 0.9rem; }
.links a { color: var(--muted); padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.links a:hover { color: var(--fg); text-decoration: none; }
.links a.active { color: var(--fg); font-weight: 600; border-bottom-color: var(--primary); }
.dash-more-focused { display: flex; flex-direction: column; gap: 0.35rem; margin: -0.4rem 0 0.75rem; padding: 0 0.5rem; }
.dash-card-mini { display: flex; justify-content: space-between; padding: 0.4rem 0.75rem; background: var(--card-bg); border: 1px solid #f0f0f0; border-radius: 6px; font-size: 0.85rem; color: var(--fg); text-decoration: none; }
.dash-card-mini:hover { border-color: var(--primary); text-decoration: none; }

.dash-bg-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.9rem; color: var(--fg); text-decoration: none; }
.dash-bg-item:hover { color: var(--primary); text-decoration: none; }
.dash-star-item { font-size: 0.85rem; color: var(--muted); padding: 0.15rem 0; font-style: italic; }

.dash-focused { border-left: 4px solid var(--primary); }
.dash-background { border-left: 4px solid #8b5cf6; }
.dash-activation { border-left: 4px solid #f59e0b; }
.dash-library { border-left: 4px solid var(--success); }

/* Universal card action button — used by card-actions.js */
.card-action-btn {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg); cursor: pointer; font-size: 0.85rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.15s, background 0.15s, color 0.15s, transform 0.12s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.card-action-btn:hover { transform: scale(1.08); }
.card-action-btn.done { opacity: 1; background: var(--success); color: #fff; border-color: var(--success); cursor: default; }
.card-action-btn.done:hover { transform: none; }
.card-action-btn--add { color: var(--primary); font-weight: 700; font-size: 1.1rem; }
.card-action-btn--add:hover { background: var(--primary); color: #fff; }
.card-action-btn--remove { color: var(--muted); }
.card-action-btn--remove:hover { color: var(--danger); background: #fef2f2; }
.card-action-btn.inline { position: static; flex-shrink: 0; margin-left: 0.3rem; }
.dash-section-add {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--primary); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: background 0.15s, color 0.15s;
}
.dash-section-add:hover { background: var(--primary); color: #fff; text-decoration: none; }
.card-action-row { display: flex; align-items: center; }
.card-action-link { display: block; color: var(--fg); text-decoration: none; }
.card-action-link:hover { text-decoration: none; }

/* ========================================
   FOCUSED — episode rows + status dots
   ======================================== */
.ep-row { position: relative; }
.ep-title { display: inline-flex; align-items: center; gap: 0.5rem; }
.ep-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ep-dot-untouched { background: #d1d5db; }
.ep-dot-started   { background: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.ep-dot-completed { background: var(--success); }
.ep-dot-uncommitted { background: transparent; box-shadow: inset 0 0 0 1.5px #d1d5db; }
.ep-untouched { opacity: 0.75; }
.ep-started   { border-left: 3px solid var(--primary); }
.ep-completed { border-left: 3px solid var(--success); background: rgba(22, 163, 74, 0.04); }
.ep-accordion { margin-top: 0.5rem; }
.ep-accordion-summary, .ep-accordion-summary * { cursor: pointer; user-select: none; }
.ep-accordion-summary { font-size: 0.85rem; color: var(--muted); padding: 0.25rem 0; }
.ep-accordion-summary:hover { color: var(--primary); }
.ep-accordion[open] .ep-accordion-summary { margin-bottom: 0.25rem; }
.ep-accordion-body { padding-top: 0.25rem; }