/* ============================================
   CalSpecific Design System v0.0.4
   Google Fit + PocketPrep + Duolingo fusion
   ============================================ */

/* --- Custom Properties --- */
:root {
  --bg: #F0F2F5;
  --card: #FFFFFF;
  --card-border: rgba(0,0,0,0.07);
  --ink: #1A1D21;
  --ink2: #374151;
  --mute: #6B7280;
  --line: #E5E7EB;
  --teal: #0E8A7D;
  --teal-soft: rgba(14,138,125,0.10);
  --teal-glow: rgba(14,138,125,0.25);
  --amber: #D97706;
  --amber-soft: rgba(217,119,6,0.10);
  --coral: #DC2626;
  --coral-soft: rgba(220,38,38,0.10);
  --green: #059669;
  --green-soft: rgba(5,150,105,0.10);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12);
  --r: 16px;
  --r-sm: 10px;
  --r-full: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'SF Pro Display', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D1117;
    --card: #161B22;
    --card-border: rgba(255,255,255,0.06);
    --ink: #E6EDF3;
    --ink2: #B1BAC4;
    --mute: #8B949E;
    --line: #30363D;
    --teal: #2FC2B2;
    --teal-soft: rgba(47,194,178,0.12);
    --teal-glow: rgba(47,194,178,0.20);
    --amber: #F59E0B;
    --amber-soft: rgba(245,158,11,0.12);
    --coral: #EF4444;
    --coral-soft: rgba(239,68,68,0.12);
    --green: #10B981;
    --green-soft: rgba(16,185,129,0.12);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 14px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.5);
  }
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: 26px; margin-bottom: 4px; }
h2 { font-size: 20px; margin-bottom: 4px; }
h3 { font-size: 17px; margin-bottom: 2px; }
a { color: var(--teal); }
[hidden] { display: none !important; }

/* --- Layout --- */
main {
  max-width: 640px;
  margin: auto;
  padding: calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 88px);
}

/* --- Navigation --- */
nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--card-border);
  padding: 4px 0 env(safe-area-inset-bottom,0px);
  z-index: 5;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@supports (backdrop-filter: blur(1px)) {
  nav { background: color-mix(in srgb, var(--card) 85%, transparent); }
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 6px;
  text-decoration: none;
  color: var(--mute);
  transition: color 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-item.on { color: var(--teal); }
.nav-icon { width: 22px; height: 22px; }
.nav-label { font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }

/* --- Cards --- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 16px;
  margin: 0 0 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease);
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  margin-bottom: 12px;
}

/* --- Buttons --- */
button, .btn-primary {
  font: inherit;
  border: 0;
  border-radius: 14px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 80%, #000));
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  margin: 4px 0;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
button:active, .btn-primary:active { transform: scale(0.98); opacity: 0.9; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-sm {
  width: auto;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  flex-shrink: 0;
}
.cta {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 8px 0 16px;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 16px var(--teal-glow);
}

/* --- Inputs --- */
input[type="email"], input[type="password"], input[type="text"] {
  font: inherit;
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  margin: 4px 0;
  transition: border-color 0.15s;
  outline: none;
}
input:focus { border-color: var(--teal); }

/* --- Progress Ring --- */
.ring-card {
  display: flex;
  justify-content: center;
  padding: 28px 16px 20px;
}
.ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring-value {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1;
}
.ring-label {
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  circle.arc { transition: stroke-dashoffset 0.8s var(--ease); }
}

/* --- Stat Pills --- */
.stat-pills {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stat-pills::-webkit-scrollbar { display: none; }
.stat-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.stat-pill.accent {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

/* --- Bar Chart --- */
.bar-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 120px;
  padding-top: 8px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.bar-track {
  flex: 1;
  width: 100%;
  max-width: 36px;
  border-radius: 6px;
  background: var(--teal-soft);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bar-fill {
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--teal), color-mix(in srgb, var(--teal) 70%, #000));
  transition: height 0.6s var(--ease);
  min-height: 4px;
}
.bar-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--mute);
  order: -1;
}
.bar-day {
  font-size: 11px;
  color: var(--mute);
  font-weight: 500;
}

/* --- Sparkline --- */
.sparkline-wrap {
  padding: 8px 0;
  overflow: hidden;
}
.sparkline { display: block; width: 100%; }

/* --- Gauge --- */
.gauge-card {
  text-align: center;
  padding: 24px 16px 16px;
}
.gauge-wrap {
  position: relative;
  display: inline-block;
}
.gauge-value {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1;
}
.gauge-label {
  margin-top: 8px;
}

/* --- Quiz Components --- */
.quiz-progress {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 8px 0 16px;
  overflow: hidden;
}
.quiz-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 2px;
  transition: width 0.4s var(--ease);
}
.concept-badge {
  display: inline-block;
  padding: 4px 12px;
  background: var(--teal-soft);
  color: var(--teal);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.quiz-q {
  font-size: 19px;
  line-height: 1.4;
  margin-bottom: 20px;
}
.quiz-opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 500;
  margin: 0;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.opt:active:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
}
.opt-text { flex: 1; }
.opt.ok {
  border-color: var(--green);
  background: var(--green-soft);
}
.opt.ok .opt-letter {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.opt.bad {
  border-color: var(--coral);
  background: var(--coral-soft);
}
.opt.bad .opt-letter {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* --- Feedback --- */
.feedback {
  border-radius: var(--r);
  padding: 16px;
  margin: 16px 0 8px;
}
.feedback.correct {
  background: var(--green-soft);
  border-left: 4px solid var(--green);
}
.feedback.wrong {
  background: var(--coral-soft);
  border-left: 4px solid var(--coral);
}
.feedback b { display: block; margin-bottom: 6px; font-size: 15px; }
.review-hint { font-size:13px; margin:12px 0 8px; }
.opt.review-selected { outline:2px solid var(--amber); outline-offset:2px; }
.preference-note { font-size:13px; margin:0 0 12px; }
.opt-detail { display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:14px; color:var(--ink2); }
.opt-detail[hidden] { display:none; }
.opt-detail strong, .opt-detail span { display:block; }
.opt-detail strong { margin-bottom:4px; }
.opt.review-selected { align-items:flex-start; }
.citation-dialog { position:fixed; inset:0; width:100%; height:100%; height:100dvh; max-width:none; max-height:none; border:0; padding:0; margin:0; background:var(--bg); }
.citation-dialog iframe { display:block; width:100%; height:100%; border:0; }
.feedback p { font-size: 15px; color: var(--ink2); margin: 0 0 8px; }
.source-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: none;
  margin-top: 4px;
}

/* --- Confidence --- */
.confidence-row {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.conf-btn {
  flex: 1;
  padding: 10px 6px;
  font-size: 13px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-weight: 500;
}
.conf-btn.selected {
  border-color: var(--teal);
  background: var(--teal-soft);
  color: var(--teal);
}

/* --- Results --- */
.results-header {
  text-align: center;
  padding: 8px 0 4px;
}
.results-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.results-actions button { flex: 1; }

/* --- Concept Bars --- */
.concept-result { margin-bottom: 12px; }
.concept-result:last-child { margin-bottom: 0; }
.concept-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.concept-bar {
  height: 8px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.concept-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s var(--ease);
}

/* --- Focus / Progress Bars --- */
.focus-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}
.focus-row:last-child { margin-bottom: 0; }
.focus-name { font-weight: 500; }
.focus-pct { font-weight: 700; text-align: right; }
.progress-track {
  grid-column: 1 / -1;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease);
}

/* --- Stratigraphic Column --- */
.strat-col { display: flex; flex-direction: column; gap: 6px; }
.strat-layer {
  position: relative;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--line);
  display: flex;
  align-items: center;
  padding: 0 12px;
  overflow: hidden;
  font-size: 14px;
}
.strat-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--r-sm);
  transition: width 0.8s var(--ease);
  opacity: 0.2;
}
.strat-name {
  position: relative;
  font-weight: 600;
  z-index: 1;
}
.strat-meta {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}
.strat-pct { font-weight: 700; font-size: 14px; }
.strat-change {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--r-full);
}
.strat-change.up {
  color: var(--green);
  background: var(--green-soft);
}

/* --- Danger Card --- */
.danger-card {
  border-left: 4px solid var(--amber);
}

/* --- Leaderboard --- */
.leaderboard { display: flex; flex-direction: column; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row.me { background: var(--teal-soft); margin: 0 -16px; padding: 10px 16px; border-radius: var(--r-sm); }
.lb-rank {
  width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.lb-info { flex: 1; min-width: 0; }
.lb-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-info .mute { font-size: 12px; }
.lb-xp {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Avatar --- */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--av, var(--teal));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }

/* --- Friends --- */
.friend-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.friend-info { flex: 1; min-width: 0; }
.friend-info b { display: block; font-size: 14px; }
.friend-info .mute { font-size: 13px; }
.section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
  margin: 16px 0 8px;
}

/* --- Profile --- */
.profile-header {
  text-align: center;
  padding: 16px 0 8px;
}
.profile-header .avatar { margin-bottom: 12px; }
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.stat-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-box-value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1.1;
}
.stat-box-label {
  display: block;
  font-size: 12px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  font-weight: 500;
}

/* --- Settings --- */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 15px;
}
.setting-row:last-child { border-bottom: 0; }
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 13px;
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-track { background: var(--teal); }
.toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

/* --- Login --- */
.login-hero {
  text-align: center;
  padding: 48px 0 28px;
}
.login-logo { margin-bottom: 16px; }
.login-tagline {
  font-size: 16px;
  color: var(--mute);
  margin-top: 4px;
}
.login-card { padding: 20px; }
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--line);
  font-size: 15px;
  padding: 14px;
}
.oauth-btn svg { flex-shrink: 0; }
.oauth-btn.apple { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--mute);
  font-size: 13px;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- Mode Cards --- */
.mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mode-card:active { border-color: var(--teal); }
.mode-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--teal-soft);
  border-radius: 12px;
  flex-shrink: 0;
}
.mode-info { flex: 1; min-width: 0; }
.mode-info h3 { margin-bottom: 0; }
.mode-info .mute { font-size: 13px; }
.mode-meta {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  margin-top: 2px;
}

/* --- Error Screen --- */
.error-screen {
  text-align: center;
  padding: 80px 16px;
}
.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* --- Banner --- */
#banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  background: var(--amber);
  color: #1A1D21;
  padding: 10px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
#banner button {
  width: auto;
  display: inline;
  padding: 5px 14px;
  font-size: 13px;
  background: #1A1D21;
  color: #fff;
  margin-left: 8px;
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .card, .stat-pill, .ring-card, .gauge-card, .stat-box, .mode-card, .friend-card {
    animation: fadeIn 0.35s var(--ease) both;
  }
  .card:nth-child(2) { animation-delay: 0.04s; }
  .card:nth-child(3) { animation-delay: 0.08s; }
  .card:nth-child(4) { animation-delay: 0.12s; }
  .card:nth-child(5) { animation-delay: 0.16s; }
}

/* --- Utilities --- */
.mute { color: var(--mute); }
.text-center { text-align: center; }
.teal { color: var(--teal); }
.coral { color: var(--coral); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mb-0 { margin-bottom: 0; }

/* --- Level bar --- */
.level-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.level-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 0.6s var(--ease);
}

/* Approved Strata identity, shared across light and dark themes. */
.brand-header { max-width:640px; margin:0 auto; padding:20px 16px 0; }
.brand-header[hidden] { display:none; }
.brand-header a { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:750; font-size:18px; letter-spacing:-.5px; }
.brand-header img, .brand-footer img { border-radius:9px; flex-shrink:0; }
.login-logo img { display:block; margin:0 auto; border-radius:28px; }
.login-hero h1 { letter-spacing:-1.3px; font-weight:800; }
.brand-footer { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; font-size:13px; flex-wrap:wrap; }
.auth-switch { text-align:center; margin:16px 0 0; font-size:14px; color:var(--mute); } .auth-switch a { color:var(--teal); font-weight:600; text-decoration:none; } .register-heading { font-size:19px; margin:0 0 12px; }