/* Smooth Gym — compiled CSS (hand-curated, based on Smooth Notes design system) */

/* ===== Theme Variables ===== */
:root {
  /* Page backgrounds */
  --bg-page: #F5F5F0;
  --bg-card: #FFFFFF;
  --bg-muted: #f0efeb;
  --bg-input: #FFFFFF;
  --bg-input-focus: #FFFFFF;
  --bg-elevated: #FFFFFF;

  /* Text colors */
  --text-primary: #141413;
  --text-secondary: #6b6b6a;
  --text-muted: #b0aea5;
  --text-placeholder: #b0aea5;

  /* Borders */
  --border-subtle: rgba(0,0,0,0.08);
  --border-input: #e8e6dc;
  --border-input-focus: #d97757;
  --border-default: #e8e6dc;

  /* Accent (brand consistency with Smooth Notes) */
  --accent: #d97757;
  --accent-hover: #c96442;
  --accent-bg: rgba(217,119,87,0.08);
  --accent-glow: rgba(217,119,87,0.2);
  --accent-glow-hover: rgba(217,119,87,0.35);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.04);
  --shadow-elevated: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04);
  --shadow-input-focus: 0 0 0 3px rgba(217,119,87,0.15);

  /* Semantic — Success */
  --success-bg: #f0fdf4;
  --success-text: #166534;
  --success-border: #bbf7d0;

  /* Semantic — Error */
  --error-bg: #fef2f2;
  --error-text: #991b1b;
  --error-border: #fecaca;

  /* Semantic — Warning */
  --warning-bg: #fffbeb;
  --warning-text: #92400e;
  --warning-border: #fed7aa;

  /* Semantic — Info */
  --info-bg: #eff6ff;
  --info-text: #1e40af;
  --info-border: #bfdbfe;

  /* Badges */
  --badge-active-bg: #dcfce7;
  --badge-active-text: #166534;
  --badge-completed-bg: #dbeafe;
  --badge-completed-text: #1e40af;
  --badge-abandoned-bg: #f0efeb;
  --badge-abandoned-text: #6b6b6a;

  /* Scrollbar */
  --scrollbar-track: #f0efeb;
  --scrollbar-thumb: #d4d2ce;
  --scrollbar-thumb-hover: #a8a6a0;

  /* Skeleton */
  --skeleton-bg: #e8e6dc;

  /* Nav */
  --nav-bg: rgba(255,255,255,0.8);
  --nav-border: rgba(0,0,0,0.08);

  /* Footer */
  --footer-bg: #FFFFFF;
  --footer-border: rgba(0,0,0,0.08);

  /* Toggle */
  --toggle-bg: rgba(0,0,0,0.05);
  --toggle-bg-hover: rgba(0,0,0,0.08);
  --toggle-text: #6b6b6a;

  /* Focus ring */
  --focus-ring: rgba(217,119,87,0.5);

  /* Buttons — secondary */
  --btn-secondary-bg: #f0efeb;
  --btn-secondary-bg-hover: #e4e2dc;
  --btn-secondary-text: #3f3f3e;

  /* Buttons — ghost */
  --btn-ghost-text: #6b6b6a;
  --btn-ghost-text-hover: #141413;
  --btn-ghost-bg-hover: #f0efeb;

  /* Buttons — outline */
  --btn-outline-border: #d97757;
  --btn-outline-text: #d97757;
  --btn-outline-bg-hover: rgba(217,119,87,0.08);

  /* Progress ring */
  --progress-track: #e8e6dc;
  --progress-fill: #d97757;

  /* ===== Gym-Specific Variables ===== */

  /* Rest timer */
  --timer-bg: #1e293b;
  --timer-text: #f8fafc;
  --timer-alert: #ef4444;
  --timer-running: #22c55e;

  /* PR indicators */
  --pr-bg: #fef3c7;
  --pr-text: #92400e;
  --pr-border: #fde68a;
  --pr-icon: #f59e0b;

  /* Trend arrows */
  --trend-up: #16a34a;
  --trend-down: #dc2626;
  --trend-flat: #6b7280;

  /* Form score colours (1-5) */
  --form-1: #ef4444;  /* terrible */
  --form-2: #f97316;  /* poor */
  --form-3: #eab308;  /* okay */
  --form-4: #22c55e;  /* good */
  --form-5: #16a34a;  /* perfect */

  /* Set type badges */
  --set-warmup-bg: #dbeafe;
  --set-warmup-text: #1e40af;
  --set-working-bg: #dcfce7;
  --set-working-text: #166534;
  --set-drop-bg: #fef3c7;
  --set-drop-text: #92400e;
  --set-failure-bg: #fee2e2;
  --set-failure-text: #991b1b;
}

[data-theme="dark"] {
  --bg-page: #1a1815;
  --bg-card: #201d18;
  --bg-muted: #2b2a27;
  --bg-input: #2b2a27;
  --bg-input-focus: #2b2a27;
  --bg-elevated: #201d18;

  --text-primary: #e8e6e3;
  --text-secondary: #a8a6a0;
  --text-muted: #6b6b6a;
  --text-placeholder: #6b6b6a;

  --border-subtle: rgba(255,255,255,0.06);
  --border-input: rgba(255,255,255,0.1);
  --border-input-focus: #d97757;
  --border-default: rgba(255,255,255,0.08);

  --accent: #d97757;
  --accent-hover: #e0876a;
  --accent-bg: rgba(217,119,87,0.12);
  --accent-glow: rgba(217,119,87,0.25);
  --accent-glow-hover: rgba(217,119,87,0.4);

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.2);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.2);
  --shadow-elevated: 0 2px 15px -3px rgba(0,0,0,0.3), 0 10px 20px -2px rgba(0,0,0,0.2);
  --shadow-input-focus: 0 0 0 3px rgba(217,119,87,0.2);

  --success-bg: rgba(22,163,74,0.1);
  --success-text: #86efac;
  --success-border: rgba(22,163,74,0.2);

  --error-bg: rgba(220,38,38,0.1);
  --error-text: #fca5a5;
  --error-border: rgba(220,38,38,0.2);

  --warning-bg: rgba(217,119,6,0.1);
  --warning-text: #fcd34d;
  --warning-border: rgba(217,119,6,0.2);

  --info-bg: rgba(37,99,235,0.1);
  --info-text: #93c5fd;
  --info-border: rgba(37,99,235,0.2);

  --badge-active-bg: rgba(34,197,94,0.15);
  --badge-active-text: #86efac;
  --badge-completed-bg: rgba(59,130,246,0.15);
  --badge-completed-text: #93c5fd;
  --badge-abandoned-bg: rgba(255,255,255,0.08);
  --badge-abandoned-text: #a8a6a0;

  --scrollbar-track: #1a1815;
  --scrollbar-thumb: #3a3835;
  --scrollbar-thumb-hover: #4a4845;

  --skeleton-bg: #2b2a27;

  --nav-bg: rgba(26,24,21,0.9);
  --nav-border: rgba(255,255,255,0.06);

  --footer-bg: #1a1815;
  --footer-border: rgba(255,255,255,0.06);

  --toggle-bg: rgba(255,255,255,0.06);
  --toggle-bg-hover: rgba(255,255,255,0.1);
  --toggle-text: #a8a6a0;

  --focus-ring: rgba(217,119,87,0.5);

  --btn-secondary-bg: #2b2a27;
  --btn-secondary-bg-hover: #353330;
  --btn-secondary-text: #e8e6e3;

  --btn-ghost-text: #a8a6a0;
  --btn-ghost-text-hover: #e8e6e3;
  --btn-ghost-bg-hover: #2b2a27;

  --btn-outline-border: #d97757;
  --btn-outline-text: #d97757;
  --btn-outline-bg-hover: rgba(217,119,87,0.12);

  --progress-track: rgba(255,255,255,0.1);
  --progress-fill: #d97757;

  /* Gym dark overrides */
  --timer-bg: #0f172a;
  --timer-text: #f1f5f9;

  --pr-bg: rgba(234,179,8,0.12);
  --pr-text: #fde047;
  --pr-border: rgba(234,179,8,0.25);
  --pr-icon: #fbbf24;

  --form-1: #f87171;
  --form-2: #fb923c;
  --form-3: #fde047;
  --form-4: #4ade80;
  --form-5: #22c55e;

  --set-warmup-bg: rgba(59,130,246,0.15);
  --set-warmup-text: #93c5fd;
  --set-working-bg: rgba(34,197,94,0.15);
  --set-working-text: #86efac;
  --set-drop-bg: rgba(234,179,8,0.15);
  --set-drop-text: #fde047;
  --set-failure-bg: rgba(239,68,68,0.15);
  --set-failure-text: #fca5a5;
}

/* ===== Base Reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-default);
}

::before,
::after {
  --tw-content: '';
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  line-height: inherit;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, system-ui, sans-serif;
  font-smoothing: antialiased;
  color: var(--text-primary);
  background-color: var(--bg-page);
}

/* ===== Smooth Theme Transitions ===== */
body, .card, .card-elevated, .card-hover, .nav-floating,
.input-floating, .textarea-floating, header, footer, main {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== Component Styles ===== */

/* Buttons */
.btn-primary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--accent);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: #ffffff;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
}

.btn-secondary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: var(--btn-secondary-bg);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: var(--btn-secondary-text);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
}

.btn-outline {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid var(--btn-outline-border);
  color: var(--btn-outline-text);
  background: transparent;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-outline:hover {
  background-color: var(--btn-outline-bg-hover);
}

.btn-ghost {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--btn-ghost-text);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.btn-ghost:hover {
  background-color: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-text-hover);
}

/* Inputs */
.input-floating {
  width: 100%;
  min-height: 44px;
  border-radius: 0.5rem;
  border: 1px solid var(--border-input);
  background-color: var(--bg-input);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 1rem;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.input-floating::placeholder {
  color: var(--text-placeholder);
}

.input-floating:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-input-focus);
}

.textarea-floating {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  overflow-y: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--border-input);
  background-color: var(--bg-input);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-size: 1rem;
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.textarea-floating::placeholder {
  color: var(--text-placeholder);
}

.textarea-floating:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-input-focus);
}

/* Generic form element dark mode support */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border-input);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-input-focus);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-placeholder);
}
input[type="checkbox"],
input[type="radio"] {
  background-color: var(--bg-input);
  border-color: var(--border-input);
}

/* Cards */
.card {
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.card-elevated {
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-elevated);
}

.card-hover {
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition-property: color, background-color, border-color, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.card-hover:hover {
  box-shadow: var(--shadow-elevated);
}

/* Glassmorphism */
.glassmorphism {
  border-radius: 0.75rem;
  border: 1px solid var(--border-subtle);
  background-color: var(--nav-bg);
  backdrop-filter: blur(4px);
}

/* Nav */
.nav-floating {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--nav-border);
  background-color: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== Badges ===== */
.badge-active {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--badge-active-bg);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--badge-active-text);
}

.badge-completed {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--badge-completed-bg);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--badge-completed-text);
}

.badge-abandoned {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--badge-abandoned-bg);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--badge-abandoned-text);
}

/* ===== Flash Messages ===== */
.flash-success {
  border: 1px solid var(--success-border);
  border-radius: 0.5rem;
  background-color: var(--success-bg);
  padding: 1rem;
  color: var(--success-text);
}

.flash-error {
  border: 1px solid var(--error-border);
  border-radius: 0.5rem;
  background-color: var(--error-bg);
  padding: 1rem;
  color: var(--error-text);
}

.flash-warning {
  border: 1px solid var(--warning-border);
  border-radius: 0.5rem;
  background-color: var(--warning-bg);
  padding: 1rem;
  color: var(--warning-text);
}

.flash-info {
  border: 1px solid var(--info-border);
  border-radius: 0.5rem;
  background-color: var(--info-bg);
  padding: 1rem;
  color: var(--info-text);
}

/* ===== Skeleton / Loading ===== */
.skeleton {
  border-radius: 0.25rem;
  background-color: var(--skeleton-bg);
  animation: pulseSoft 2s infinite;
}

.skeleton-text {
  height: 1rem;
  border-radius: 0.25rem;
  background-color: var(--skeleton-bg);
  animation: pulseSoft 2s infinite;
}

.skeleton-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--skeleton-bg);
  animation: pulseSoft 2s infinite;
}

/* ===== Gym-Specific Components ===== */

/* Form score indicators (1-5) — coloured circles */
.form-score-1,
.form-score-2,
.form-score-3,
.form-score-4,
.form-score-5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
}

.form-score-1 { background-color: var(--form-1); }
.form-score-2 { background-color: var(--form-2); }
.form-score-3 { background-color: var(--form-3); color: #141413; }
.form-score-4 { background-color: var(--form-4); }
.form-score-5 { background-color: var(--form-5); }

/* Set type badges */
.set-type-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.set-type-badge.warmup {
  background-color: var(--set-warmup-bg);
  color: var(--set-warmup-text);
}

.set-type-badge.working {
  background-color: var(--set-working-bg);
  color: var(--set-working-text);
}

.set-type-badge.drop {
  background-color: var(--set-drop-bg);
  color: var(--set-drop-text);
}

.set-type-badge.failure {
  background-color: var(--set-failure-bg);
  color: var(--set-failure-text);
}

/* Rest timer */
.rest-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: var(--timer-bg);
  color: var(--timer-text);
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rest-timer.running {
  box-shadow: 0 0 0 2px var(--timer-running), 0 0 12px rgba(34,197,94,0.3);
}

.rest-timer.alert {
  box-shadow: 0 0 0 2px var(--timer-alert), 0 0 12px rgba(239,68,68,0.3);
  animation: pulseSoft 1s infinite;
}

/* PR badge */
.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  border: 1px solid var(--pr-border);
  background-color: var(--pr-bg);
  color: var(--pr-text);
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.pr-badge::before {
  content: '\2605';
  color: var(--pr-icon);
}

/* Trend indicator */
.trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.trend-indicator.up { color: var(--trend-up); }
.trend-indicator.down { color: var(--trend-down); }
.trend-indicator.flat { color: var(--trend-flat); }

.trend-indicator.up::before { content: '\25B2'; font-size: 0.625rem; }
.trend-indicator.down::before { content: '\25BC'; font-size: 0.625rem; }
.trend-indicator.flat::before { content: '\25C0'; font-size: 0.5rem; transform: rotate(-90deg); display: inline-block; }

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

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.hidden { display: none; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.h-full { height: 100%; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.max-w-7xl { max-width: 80rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-auto { margin-top: auto; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  border-color: var(--border-subtle);
}
.grid { display: grid; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.container { width: 100%; }
.min-w-0 { min-width: 0; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-mono { font-family: ui-monospace, monospace; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.leading-relaxed { line-height: 1.625; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.no-underline, .no-underline a { text-decoration: none; }

/* Colour utilities — mapped to CSS variables */
.text-gray-900 { color: var(--text-primary); }
.text-gray-800 { color: var(--text-primary); }
.text-gray-700 { color: var(--text-secondary); }
.text-gray-600 { color: var(--text-secondary); }
.text-gray-500 { color: var(--text-muted); }
.text-gray-400 { color: var(--text-muted); }
.text-white { color: #ffffff; }
.text-red-500 { color: var(--error-text); }
.text-red-600 { color: var(--error-text); }
.text-red-800 { color: var(--error-text); }
.text-green-500 { color: var(--success-text); }
.text-green-600 { color: var(--success-text); }
.text-green-800 { color: var(--success-text); }
.text-amber-600 { color: var(--warning-text); }
.text-amber-800 { color: var(--warning-text); }
.text-blue-600 { color: var(--info-text); }
.text-blue-800 { color: var(--info-text); }
.text-primary-600 { color: var(--accent); }

.bg-white { background-color: var(--bg-card); }
.bg-gray-50 { background-color: var(--bg-page); }
.bg-gray-100 { background-color: var(--bg-muted); }
.bg-gray-200 { background-color: var(--btn-secondary-bg); }
.bg-primary-100 { background-color: var(--btn-outline-bg-hover); }
.bg-primary-600 { background-color: var(--accent); }
.bg-red-50 { background-color: var(--error-bg); }
.bg-red-500 { background-color: #ef4444; }
.bg-green-50 { background-color: var(--success-bg); }
.bg-green-100 { background-color: var(--badge-active-bg); }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: var(--success-text); }
.bg-blue-50 { background-color: var(--info-bg); }
.bg-blue-100 { background-color: var(--badge-completed-bg); }
.bg-amber-50 { background-color: var(--warning-bg); }
.bg-amber-100 { background-color: var(--warning-bg); }
.bg-gray-300 { background-color: var(--border-input); }

.text-yellow-600 { color: var(--warning-text); }
.text-yellow-800 { color: var(--warning-text); }
.text-yellow-400 { color: var(--warning-text); }
.text-green-400 { color: var(--success-text); }
.text-red-400 { color: var(--error-text); }
.text-red-700 { color: var(--error-text); }
.text-blue-400 { color: var(--info-text); }
.text-amber-400 { color: var(--warning-text); }
.text-amber-700 { color: var(--warning-text); }
.hover\:text-amber-600:hover { color: var(--warning-text); }
.hover\:text-red-600:hover { color: var(--error-text); }
.hover\:bg-green-700:hover { background-color: #15803d; }
.bg-red-400 { background-color: var(--error-text); }

.last\:border-b-0:last-child { border-bottom-width: 0; }

.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border { border-width: 1px; }
.border-l-4 { border-left-width: 4px; }
.border-2 { border-width: 2px; }
.border-gray-100 { border-color: var(--border-subtle); }
.border-gray-200 { border-color: var(--border-subtle); }
.border-gray-300 { border-color: var(--border-input); }
.border-white\/20 { border-color: var(--border-subtle); }
.border-red-200 { border-color: var(--error-border); }
.border-red-300 { border-color: var(--error-border); }
.border-red-400 { border-color: #f87171; }
.border-green-200 { border-color: var(--success-border); }
.border-green-400 { border-color: #4ade80; }
.border-blue-200 { border-color: var(--info-border); }
.border-blue-300 { border-color: var(--info-border); }
.border-blue-500 { border-color: var(--info-text); }
.border-amber-200 { border-color: var(--warning-border); }
.border-amber-400 { border-color: #fbbf24; }

.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded { border-radius: 0.25rem; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-elevated); }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-100 { opacity: 1; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; }
.resize-y { resize: vertical; }
.resize-none { resize: none; }
.pointer-events-none { pointer-events: none; }

.w-1 { width: 0.25rem; }
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.max-h-96 { max-height: 24rem; }
.w-80 { width: 20rem; }
.w-3\/4 { width: 75%; }
.w-2\/3 { width: 66.667%; }
.w-1\/2 { width: 50%; }

.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.transform { transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)); }
.translate-x-5 { --tw-translate-x: 1.25rem; transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)); }
.-rotate-90 { --tw-rotate: -90deg; }

/* Hover utilities */
.hover\:text-primary-600:hover { color: var(--accent); }
.hover\:text-gray-900:hover { color: var(--text-primary); }
.hover\:text-red-600:hover { color: var(--error-text); }
.hover\:text-blue-700:hover { color: var(--info-text); }
.hover\:bg-primary-50:hover { background-color: var(--btn-outline-bg-hover); }
.hover\:bg-gray-50:hover { background-color: var(--bg-muted); }
.hover\:bg-gray-100:hover { background-color: var(--bg-muted); }
.hover\:bg-gray-200:hover { background-color: var(--btn-secondary-bg); }
.hover\:bg-gray-300:hover { background-color: var(--btn-secondary-bg-hover); }
.hover\:bg-red-50:hover { background-color: var(--error-bg); }
.hover\:bg-blue-50:hover { background-color: var(--info-bg); }
.hover\:bg-blue-100:hover { background-color: var(--badge-completed-bg); }
.hover\:bg-amber-50:hover { background-color: var(--warning-bg); }
.hover\:bg-primary-700:hover { background-color: var(--accent-hover); }
.hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; }

/* Focus utilities */
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--accent); }
.focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-red-500:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.focus\:ring-gray-400:focus { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--border-input); }
.focus\:border-primary-500:focus { border-color: var(--border-input-focus); }
.focus\:border-red-500:focus { border-color: var(--error-border); }
.focus\:border-blue-500:focus { border-color: var(--info-border); }

/* Disabled */
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* ===== Responsive Breakpoints ===== */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:block { display: block; }
  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:hidden { display: none; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }
}

/* ===== Animation Keyframes ===== */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
.animate-slide-up { animation: slideUp 0.3s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }
.animate-pulse-soft { animation: pulseSoft 2s infinite; }
.animate-pulse { animation: pulseSoft 1s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

/* ===== Focus Visibility ===== */
*:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
}

/* ===== Prose ===== */
.prose { max-width: 65ch; }
.prose-sm { font-size: 0.875rem; line-height: 1.5; }
.max-w-none { max-width: none; }

/* ===== Theme Toggle (nav bar) ===== */
.theme-toggle-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: var(--toggle-text);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.theme-toggle-nav:hover {
  background: var(--toggle-bg-hover);
  color: var(--text-primary);
}
.theme-toggle-nav svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ===== Mobile Bottom Navigation ===== */
.mobile-nav-item.active {
  color: var(--accent) !important;
}

/* Add bottom padding on mobile when logged in to prevent content hiding behind bottom nav */
@media (max-width: 639px) {
  body.has-bottom-nav {
    padding-bottom: 0;
  }
  body.has-bottom-nav #main-content {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0.25rem));
  }
}