/* Mathbench — shared tokens, chrome and topic cards. */

/* ---------- Colors ----------
   Every color on the site comes from these two lists. DARK_MODE in settings.py picks one.

   --page, --bg       page background
   --surface          cards, answer boxes
   --panel            slightly tinted areas (answer side, sub-topic lists)
   --soft             light blue fills (buttons, highlights, table headers)
   --hover            light blue fill when hovering a soft button
   --border           normal borders
   --hover-border     border when hovering a card or choice
   --ink              text
   --muted            grey text
   --primary          main blue (buttons, selected things)
   --accent           progress bar fill, dashed table blanks
   --track            the empty part of a progress bar
   --ring             the outline of an unchecked sub-topic dot
   --focus-ring       the glow around a box you're typing in
   --shadow           shadow color for popups and cards
*/
:root,
:root[data-theme="light"] {
  --page: #FFFFFF; --bg: #FFFFFF; --panel: #F8FAFC; --surface: #FFFFFF;
  --soft: #EFF6FF; --hover: #DBEAFE; --border: #E5E7EB; --hover-border: #BFDBFE;
  --ink: #0F172A; --muted: #64748B; --placeholder: #6A8296;
  --primary: #2563EB; --primary-hover: #1D4ED8; --on-primary: #FFFFFF; --accent: #2563EB;
  --track: #E2E8F0; --ring: #CBD5E1; --focus-ring: rgba(37, 99, 235, 0.22);
  --shadow: rgba(15, 23, 42, 0.12);
}
:root[data-theme="dark"] {
  --page: #0B141C; --bg: #121E29; --panel: #172634; --surface: #1C2D3C;
  --soft: #24394C; --hover: #2C4459; --border: #2A3F52; --hover-border: #3E6A8E;
  --ink: #E6EFF6; --muted: #9DB2C3; --placeholder: #7E95A8;
  --primary: #5AAEE6; --primary-hover: #7DC0EC; --on-primary: #0B141C; --accent: #5AAEE6;
  --track: #24394C; --ring: #3A5268; --focus-ring: rgba(90, 174, 230, 0.35);
  --shadow: rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--hover-border); outline-offset: 2px; }

.math { font-family: 'STIX Two Text', 'Cambria Math', serif; }

/* ---------- App shell (fills the window) ---------- */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* The inset numbers come from PAGE_INSETS in settings.py (PHONE_PAGE_INSETS on small
     screens). base.html turns them into these CSS variables. Order: top, right, bottom, left. */
  padding: var(--page-inset-top, 40px) var(--page-inset-right, 120px) var(--page-inset-bottom, 48px) var(--page-inset-left, 120px);
  max-width: calc(var(--page-max-width, 1280px) + var(--page-inset-left, 120px) + var(--page-inset-right, 120px));
  margin: 0 auto;
}

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'STIX Two Text', serif; font-size: 26px;
}
.brand-name { font-size: 24px; font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 44px; height: 44px; border-radius: 22px; background: var(--soft); color: var(--primary-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}

/* ---------- Search ---------- */
.search {
  height: 64px; background: var(--surface);
  border: 2px solid var(--border); border-radius: 16px;
  display: flex; align-items: center; gap: 14px; padding: 0 10px 0 20px;
  transition: border-color .15s;
}
.search:focus-within { border-color: var(--primary); }
.search svg { flex: none; color: var(--muted); }
.search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 19px; font-weight: 600; color: var(--ink);
}
.search input::placeholder { color: var(--placeholder); }
.search input::-webkit-search-cancel-button { display: none; }
.btn-soft {
  height: 44px; padding: 0 16px; border: none; border-radius: 10px;
  background: var(--soft); font-size: 16px; font-weight: 700;
}
.btn-soft:hover { background: var(--hover); }
[hidden] { display: none !important; }

/* ---------- Headings & empty state ---------- */
.eyebrow {
  font-size: 16px; font-weight: 800; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.empty {
  background: var(--surface); border: 1px dashed var(--border); border-radius: 18px;
  padding: 40px; font-size: 18px; color: var(--muted);
}

/* ---------- Topic cards ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 260px), 1fr));
  gap: 18px;
  /* room for preview popovers on the first row */
  padding-top: 4px;
}
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 18px; display: flex; flex-direction: column; gap: 8px;
  text-align: left; font: inherit; color: inherit; width: 100%;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.card:hover, .card:focus-visible {
  border-color: var(--hover-border); box-shadow: 0 4px 0 var(--border);
}
.card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--border); }
.card-name { font-size: 19px; font-weight: 800; line-height: 1.3; }
.card-meta { font-size: 16px; font-weight: 600; color: var(--muted); }
.card-progress { display: block; width: 100%; margin-top: auto; padding-top: 6px; }
.bar { display: block; width: 100%; height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 5px; background: var(--accent); }

/* Example-problem preview, shown above the hovered card */
.preview {
  position: absolute; left: -1px; bottom: calc(100% + 10px); z-index: 5;
  min-width: calc(100% + 2px); width: max-content; max-width: min(420px, 90vw);
  background: var(--surface); border: 1px solid var(--hover-border); border-radius: 16px;
  box-shadow: 0 12px 32px var(--shadow);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity .12s, transform .12s, visibility 0s .12s;
}
.preview .eyebrow { font-size: 15px; }
.preview-math { font-family: 'STIX Two Text', serif; font-size: 28px; line-height: 1.3; text-wrap: pretty; }
.card:hover .preview, .card:focus-visible .preview {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .12s, transform .12s;
}
/* Flip the preview below a card when there's no room above (set by JS). */
.card.preview-below .preview { bottom: auto; top: calc(100% + 10px); }
/* Keep wide previews on-screen for cards near the right edge. */
.card.preview-right .preview { left: auto; right: -1px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Cards are links now, so no underline on hover */
a.card:hover { text-decoration: none; }

/* ---------- Top bar links and buttons ---------- */
.topbar-link { font-size: 16px; font-weight: 700; color: var(--ink); }
.inline-form { margin: 0; display: inline; }
.button-link { background: none; border: none; padding: 0; }
.button-link:hover { text-decoration: underline; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px; border: none; border-radius: 12px;
  background: var(--primary); color: var(--on-primary);
  font-size: 16px; font-weight: 800; white-space: nowrap;
}
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }
a.btn-soft { display: inline-flex; align-items: center; color: var(--ink); }
a.btn-soft:hover { text-decoration: none; }

.muted { color: var(--muted); }

/* ---------- Messages ("You joined Period 3!") ---------- */
.flash {
  padding: 14px 18px; border-radius: 12px; font-weight: 700;
  background: var(--soft); border: 1px solid var(--border);
}
.flash-error { border-color: #D64545; }
.flash-success { border-color: #2E9E5B; }

/* ---------- Ads ---------- */
.ad-slot { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.ad-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }

@media (max-width: 640px) {
  .brand-name { display: none; }
  .topbar-right { gap: 10px; }
  .topbar-link { font-size: 14px; }
}

/* Small screens: the page insets switch to PHONE_PAGE_INSETS (set in base.html) */

/* "Open an assignment" - paste a link (assignment_code_box.html) */
.code-box { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.code-box label { font-weight: 800; }
.code-box input {
  flex: 1;
  min-width: 220px;
  max-width: 460px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.code-box input:focus { outline: none; border-color: var(--primary); }

/* Square roots: a drawn √ hook, and a bar over what's inside (math_display.make_math_pretty).
   The hook stretches to the full height of the radicand, so its top always meets the bar. */
.radical { display: inline-flex; align-items: stretch; white-space: nowrap; vertical-align: bottom; }
.radical-sign { width: 0.5em; height: auto; flex: none; overflow: visible; }
.radical-sign path { fill: none; stroke: currentColor; stroke-width: 0.07em; stroke-linejoin: miter;
                     stroke-linecap: square; vector-effect: non-scaling-stroke; }
.radicand { border-top: 0.07em solid currentColor; padding: 0.06em 0.1em 0 0.04em; line-height: 1.15; }

/* Repeating decimals: a bar over the digits that repeat (math_display: 0.1rep(6)) */
.repeat { text-decoration: overline; text-decoration-thickness: 0.06em; text-underline-offset: 0; }