/* IstrucE: Build & Rise — shared stylesheet. Plain CSS, no build step. */

:root {
  --bg: #0f1222;
  --panel: #1a1e35;
  --panel-2: #232848;
  --text: #eef0fb;
  --muted: #9aa1c4;
  --accent: #6366f1;
  --good: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  /* Belt-and-braces: nothing on the page should ever be wider than the
     viewport, but if something misbehaves (e.g. an unwrapped flex row),
     clip it here rather than letting the whole page scroll sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #232848 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
  /* Room for the fixed bottom tab bar, so nothing is trapped underneath it.
     Removed again at >=720px, where the tabs move back into the top bar. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }

.page {
  max-width: 960px;
  margin: 0 auto;
  /* Bottom safe-area inset covers the gesture-nav bar on edge-to-edge Android
     (targetSdk 35+ can no longer opt out of it — see .topnav below). */
  padding: 0 20px calc(60px + env(safe-area-inset-bottom));
}

/* --- Top nav --- */
.topnav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  /* Android 15 (targetSdk 35) draws content edge-to-edge unconditionally, so
     without this the status bar overlaps the nav instead of sitting above
     it. viewport-fit=cover (set on every page's <meta viewport>) is what
     makes the browser/WebView populate env(safe-area-inset-*) at all. */
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  background: rgba(26, 30, 53, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topnav-brand { font-weight: 700; margin-right: auto; display: flex; align-items: center; gap: 8px; }
/* Holds the inline buckling-column mark from js/nav.js. currentColor is set
   here rather than inherited from the brand text, which is plain white. */
.brand-mark { display: inline-flex; align-items: center; color: #818cf8; }
/* Hidden on phones — the fixed bottom tab bar carries navigation there, which
   is what stopped this row wrapping onto two and three lines in the first
   place. The >=720px media query at the end of this file puts it back. */
.topnav-links { display: none; flex-wrap: wrap; justify-content: center; gap: 4px; }
.topnav-link {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
}
.topnav-link:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.topnav-link.active { background: var(--accent); color: white; }
.topnav-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.stat-pill {
  background: var(--panel-2);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.stat-pill.premium { background: linear-gradient(90deg,#f59e0b,#f97316); color: #1a1200; }

/* --- Generic building blocks --- */
.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.06);
}
.card + .card { margin-top: 16px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.1); }
.btn.secondary { background: var(--panel-2); color: var(--text); }
.btn.locked { background: #33395c; color: var(--muted); cursor: not-allowed; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge.difficulty-1 { background: #14532d; color: #86efac; }
.badge.difficulty-2 { background: #365314; color: #bef264; }
.badge.difficulty-3 { background: #713f12; color: #fcd34d; }
.badge.difficulty-4 { background: #7c2d12; color: #fdba74; }
.badge.difficulty-5 { background: #7f1d1d; color: #fca5a5; }

.disclaimer {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

.premium-lock {
  position: relative;
  filter: grayscale(0.6);
  opacity: 0.6;
  pointer-events: none;
}
.premium-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(90deg,#f59e0b,#f97316);
  color: #1a1200;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

/* --- Hero / header --- */
.hero {
  padding: 32px 0 12px;
}
.hero h1 { margin: 0 0 6px; font-size: 28px; }
.hero p { color: var(--muted); margin: 0; }

/* --- Level map --- */
.topic-row { margin-top: 28px; }
.topic-row-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.topic-row-header .icon { font-size: 22px; }
.topic-row-header h2 { font-size: 18px; margin: 0; }
.topic-path {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 4px 14px;
}
.level-node {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 2px solid rgba(255,255,255,0.08);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.level-node:hover { transform: translateY(-3px); }
.level-node.locked { opacity: 0.4; cursor: not-allowed; }
.level-node.completed { border-color: var(--good); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.level-node .stars { font-size: 11px; margin-top: 2px; }
.level-node .n { font-size: 20px; }

/* --- Forms / calculators --- */
label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
input, select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}
.result-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.35);
}

/* --- Tabs --- */
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tab-btn {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel-2);
  border: none;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.tab-btn.active { background: var(--accent); color: white; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Quiz ---
   Everything js/quiz.js renders lives here, so the pages that host a quiz
   (level, daily, project, lesson, mistakes) don't each carry a copy. */
.quiz-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.quiz-prompt { font-size: 17px; font-weight: 600; margin: 14px 0 16px; }
.quiz-options { margin-bottom: 8px; }
.quiz-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.explain-box .eurocode-ref { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.explain-box .verdict { font-weight: 700; margin-bottom: 6px; }
.explain-box .verdict.correct { color: var(--good); }
.explain-box .verdict.incorrect { color: var(--danger); }
.explain-box .correct-answer { margin-bottom: 6px; }
.result-score { font-size: 32px; font-weight: 800; margin: 4px 0; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.numeric-answer { margin-bottom: 8px; }
.numeric-input-row { display: flex; align-items: center; gap: 10px; }
.numeric-input-row input { font-size: 16px; font-variant-numeric: tabular-nums; }
.numeric-input-row input.correct { border-color: var(--good); background: rgba(34,197,94,0.15); }
.numeric-input-row input.incorrect { border-color: var(--danger); background: rgba(239,68,68,0.15); }
.numeric-unit { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.numeric-hint { margin-top: 6px; }

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--panel-2);
  color: var(--text);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
}
.quiz-option:hover { border-color: var(--accent); }
.quiz-option:disabled,
.quiz-option[data-disabled="true"] { cursor: default; }
.quiz-option[data-disabled="true"]:hover { border-color: rgba(255,255,255,0.1); }
.quiz-option.selected { border-color: var(--accent); background: rgba(99,102,241,0.15); }
.quiz-option.correct { border-color: var(--good); background: rgba(34,197,94,0.15); }
.quiz-option.incorrect { border-color: var(--danger); background: rgba(239,68,68,0.15); }

.progress-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* --- Learn: lesson index + reader (pages/learn.html, pages/lesson.html) --- */
.lesson-list { margin-top: 12px; }
.lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
}
.lesson-row:hover { border-color: var(--accent); }
.lesson-row .lesson-idx {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); font-size: 13px; font-weight: 700;
}
.lesson-row.done .lesson-idx { background: var(--good); color: #08240f; }
.lesson-row .lesson-title { font-weight: 600; font-size: 14px; }
.lesson-row .lesson-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lesson-row .lesson-meta { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

.lesson-body { line-height: 1.65; }
.lesson-body p { margin: 0 0 14px; }
.lesson-body h3 { font-size: 16px; margin: 22px 0 8px; }
.lesson-body ul { margin: 0 0 14px; padding-left: 22px; }
.lesson-body li { margin-bottom: 6px; }
.lesson-formula {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.35);
  text-align: center;
}
.lesson-formula .expr { font-size: 17px; font-weight: 700; letter-spacing: 0.3px; }
.lesson-formula .note { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 400; }
.lesson-note {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(245,158,11,0.1);
  border-left: 3px solid var(--warn);
  font-size: 14px;
}
.key-points { margin: 0; padding-left: 22px; }
.key-points li { margin-bottom: 8px; }

.search-box { margin-bottom: 16px; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.flex { display: flex; align-items: center; }
.gap-8 { gap: 8px; }
.between { justify-content: space-between; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }

/* --- "You" group sub-nav (progress / leaderboard / toolkit / profile) ---
   Looks like .tab-btn but is a separate class on purpose — toolkit.html treats
   every .tab-btn on the page as one of its own in-page panel switchers. */
.subnav { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.subnav-link {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
}
.subnav-link:hover { color: var(--text); }
.subnav-link.active { background: var(--accent); color: white; }

/* --- Bottom tab bar ---
   Injected into <body> by js/nav.js on every page. Five destinations within
   thumb reach; the top bar keeps only the brand and the XP/streak pills. */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: rgba(26, 30, 53, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.08);
  /* Keeps the labels clear of the iOS home indicator / Android gesture bar. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 2px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  /* Stops a long-press turning a tab into a text selection on Android. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tabbar-item .tabbar-icon { font-size: 20px; line-height: 1; }
.tabbar-item .tabbar-label { white-space: nowrap; }
.tabbar-item.active { color: var(--text); }
.tabbar-item.active .tabbar-icon {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(99,102,241,0.6));
}
.tabbar-item.active .tabbar-label { color: #a5b4fc; }

/* Desktop: the five links go back inline in the top bar and the tab bar goes
   away, so the wide layout keeps the feel it always had. */
@media (min-width: 720px) {
  body { padding-bottom: 0; }
  .topnav-links { display: flex; }
  .tabbar { display: none; }
}