/* ============================================
   ROUND — dedicated single-stage prep page (round.html).
   Reuses .firm-row + .firm-stage__grid from firm.css for the problem
   list so styling matches the firm page.
   ============================================ */

#round-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-12) var(--space-6);
}

.round-loading {
  text-align: center;
  padding: var(--space-12);
  color: var(--text-muted);
}
.round-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  animation: round-spin 0.8s linear infinite;
}
@keyframes round-spin { to { transform: rotate(360deg); } }

/* ---- Hero ---- */
.round-hero {
  padding: var(--space-8) 0 var(--space-6) 0;
}
.round-hero__crumbs {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.round-hero__crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.round-hero__crumbs a:hover { color: var(--accent-primary); }
.round-hero__crumbs-sep { color: var(--border-color); }
.round-hero__crumbs-current { color: var(--text-color); font-weight: var(--font-medium); }
.round-hero__top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.round-hero__logo {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.round-hero__heads { display: flex; flex-direction: column; gap: var(--space-1); }
.round-hero__firm {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.round-hero__title {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: var(--font-bold);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.round-hero__format {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 3px 10px;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}
.round-hero__back {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--accent-primary);
  text-decoration: none;
}
.round-hero__back:hover { text-decoration: underline; }
.round-hero__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.round-hero__save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary, var(--text-color));
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.round-hero__save:hover {
  background: rgba(99, 102, 241, 0.10);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: translateY(-1px);
}
.round-hero__save--saved {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}
.round-hero__save--saved:hover {
  background: var(--accent-primary);
  color: white;
  /* tighten the affordance hint when already saved so it's clear the click removes */
  border-color: rgba(255, 255, 255, 0.6);
}
.round-hero__save-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  font-weight: var(--font-bold);
  font-size: 12px;
  flex-shrink: 0;
}
.round-hero__save--saved .round-hero__save-icon {
  background: rgba(255, 255, 255, 0.22);
}
@keyframes round-save-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.round-hero__save--pulse { animation: round-save-pulse 0.4s ease-out; }

/* ---- Section heads (shared across editorial / formulas / problems) ---- */
.round-section-head { margin-bottom: var(--space-4); }
.round-section-head__eyebrow {
  font-size: 10px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
  background: rgba(99, 102, 241, 0.10);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.round-section-head__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin: 0;
  letter-spacing: -0.005em;
}

/* ---- Overview blurb ---- */
.round-overview {
  margin: var(--space-6) 0 var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  background: linear-gradient(120deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02) 70%, transparent);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-md);
}
.round-overview__eyebrow {
  font-size: 10px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
  margin-bottom: var(--space-2);
}
.round-overview__blurb {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-color);
  margin: 0;
}

/* ---- Editorial card grid (richer than firm.html version) ---- */
.round-editorial { margin: var(--space-8) 0; }
.round-editorial__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: var(--space-3);
}
.round-tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.round-tip:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.10);
  transform: translateY(-1px);
}
/* numbered badge — anchors each prep point as an ordered checklist item */
.round-tip__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 2px 6px var(--accent-glow);
  margin-top: 1px;
}
.round-tip__main { min-width: 0; }
.round-tip__heading {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--accent-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.round-tip__body {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--text-color);
}
.round-tip__body strong { color: var(--text-color); }
.round-tip .katex { padding: 0 1px; }
.round-tip .katex-display {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-2);
  background: rgba(99, 102, 241, 0.05);
  border-radius: var(--radius-sm);
}

/* (Removed) .round-formulas / .round-formula — the auto-extracted "Math to
   know cold" section was dropped; formulas live in the prep cards in context. */

/* ---- Problems section ---- */
.round-problems { margin: var(--space-8) 0; }
.round-problems .firm-stage__grid {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ---- Error state ---- */
.round-error {
  text-align: center;
  padding: var(--space-12);
}
.round-error h1 { margin-bottom: var(--space-3); }
.round-error p { color: var(--text-muted); margin-bottom: var(--space-5); }

@media (max-width: 700px) {
  .round-hero__top { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .round-hero__logo { height: 40px; }
}

/* OA round: broad-role groups (data/oa/<firm>.json driven) */
.round-oa-group { margin-bottom: 22px; }
.round-oa-group__head { display:flex; align-items:center; gap:10px; margin:0 2px 10px; }
.round-oa-group__role { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent,#2563eb); }
.round-oa-group__count { font-size:11px; font-weight:700; color:var(--text-muted,#9aa4b2); background:var(--bg-elevated,#f5f7f9); border-radius:999px; padding:2px 9px; }

/* ---- OA round: two-column (sticky role rail + per-track blocks) ---- */
.round-oa__intro { font-size:14px; color:var(--text-secondary,#5b6470); line-height:1.55; margin:2px 0 18px; max-width:760px; }
.round-oa { display:grid; grid-template-columns:210px 1fr; gap:30px; align-items:start; }
.round-oa__rail { position:sticky; top:84px; align-self:start; }
.round-oa__rail-head { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted,#9aa4b2); margin:0 0 10px; }
.round-oa__rail-fam { font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-secondary,#5b6470); margin:14px 0 6px; }
.round-oa__rail-link { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px; text-decoration:none; color:var(--text-primary,#1e293b); font-size:13px; font-weight:600; }
.round-oa__rail-link:hover { background:var(--bg-elevated,#f5f7f9); }
.round-oa__rail-track { flex:1; min-width:0; line-height:1.25; }
.round-oa__rail-n { font-size:11px; font-weight:700; color:var(--text-muted,#9aa4b2); }
.round-oa__lane { width:8px; height:8px; border-radius:50%; flex:none; background:#cbd2da; }
.round-oa__lane--current, .round-oa__lane--live { background:#1a9d6b; }
.round-oa__lane--new { background:var(--accent,#2563eb); }
.round-oa__lane--intern { background:#8b7bd8; }
.round-oa__lane--retired { background:#cbd2da; }
.round-oa__block { margin-bottom:26px; scroll-margin-top:84px; }
.round-oa__block-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.round-oa__block-title { font-size:16px; font-weight:800; margin:0; display:flex; align-items:center; gap:10px; }
.round-oa__status { font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.round-oa__status--current,.round-oa__status--live { color:#1a9d6b; background:#e9f7f1; }
.round-oa__status--new { color:var(--accent,#2563eb); background:#eef5fe; }
.round-oa__status--intern { color:#7a52c9; background:#f5f0fe; }
.round-oa__status--retired { color:#9aa4b2; background:#f3f5f7; }
.round-oa__chips { display:flex; flex-wrap:wrap; gap:6px; }
.round-oa__chip { font-size:11px; font-weight:600; color:var(--text-secondary,#5b6470); background:var(--bg-elevated,#f5f7f9); border-radius:7px; padding:3px 8px; }
.round-oa__block-sum { font-size:12.5px; color:var(--text-secondary,#5b6470); line-height:1.5; margin:6px 0 10px; }
@media (max-width:820px){ .round-oa{ grid-template-columns:1fr; } .round-oa__rail{ position:static; } }

/* ============================================================
   MOBILE (true-width phones get zoom:1, so this renders at ~360-414px).
   Everything below lives ONLY inside max-width media queries — desktop
   (>768px) is untouched. Goal: zero horizontal overflow at 360px.
   ============================================================ */
@media (max-width: 768px) {
  /* The page gutter ate ~48px of a 360px screen; reclaim it. */
  #round-content {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  /* Hero: title can't get so big it forces overflow; keep crumbs/actions wrapping. */
  .round-hero { padding: var(--space-6) 0 var(--space-5) 0; }
  .round-hero__title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .round-hero__logo { max-width: 160px; }
  .round-hero__save { flex: 1 1 auto; justify-content: center; }

  /* Overview blurb: trim heavy side padding so text isn't squeezed. */
  .round-overview {
    margin: var(--space-5) 0 var(--space-6) 0;
    padding: var(--space-4) var(--space-4);
  }

  /* Editorial tip cards: lighter padding; keep the number badge + body in one column-safe grid. */
  .round-tip { padding: var(--space-4); gap: var(--space-3); }
  /* Wide KaTeX display math scrolls inside its own box instead of stretching the page. */
  .round-tip .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: var(--space-3) var(--space-2);
  }

  /* OA section: the 210px rail already collapses at 820px; tighten the stacked gap. */
  .round-oa { gap: var(--space-5); }
  .round-oa__intro { max-width: 100%; }
  /* Block heads already wrap; make sure long titles + chip rows don't push width. */
  .round-oa__block-title { font-size: 15px; min-width: 0; word-break: break-word; }
  .round-oa__block-sum { max-width: 100%; }

  /* OA launch card: allow the body to shrink so icon + "Go" never force overflow. */
  .round-oa__test { gap: 10px; padding: 12px 13px; flex-wrap: wrap; }
  .round-oa__test-body { flex: 1 1 60%; min-width: 0; }
  .round-oa__test-title { word-break: break-word; }

  /* Section heads + long unbreakable tokens (urls, ids) must wrap, not overflow. */
  .round-section-head__title { word-break: break-word; }
  .round-tip__heading { word-break: break-word; }
}

/* Very narrow phones (~360px and under): squeeze the last few pixels. */
@media (max-width: 480px) {
  #round-content {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .round-overview { padding: var(--space-4) var(--space-3); }
  .round-tip { padding: var(--space-3); }
  .round-oa { gap: var(--space-4); }
  /* Stack the OA launch card so the trailing "Go" arrow never collides with the title. */
  .round-oa__test { align-items: flex-start; }
  .round-oa__test-go { flex-basis: 100%; }
}

/* ---- OA timed-test launch card (Datathon, QT/QR) ---- */
.round-oa__test {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--bg-card, #fff); border: 1.5px solid var(--accent, #4c8bf5);
  border-radius: 12px; padding: 14px 16px; margin: 4px 0 14px;
  transition: background .15s, box-shadow .15s;
}
.round-oa__test:hover { background: rgba(76,139,245,.07); box-shadow: 0 2px 12px rgba(76,139,245,.18); }
.round-oa__test-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--accent, #4c8bf5); }
.round-oa__test-body { flex: 1; }
.round-oa__test-title { font-weight: 700; color: var(--text-bright, #111827); font-size: 15px; }
.round-oa__test-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.round-oa__test-go { font-weight: 700; color: var(--accent, #4c8bf5); font-size: 14px; flex-shrink: 0; }
.round-oa__practice-head {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-secondary); font-weight: 600; margin: 6px 0 8px;
}

/* free 2-question example link under the timed-OA card */
.round-oa__sample { display: block; margin: 10px 0 4px; font-size: 13.5px; font-weight: 700;
  color: var(--accent-primary); text-decoration: none; }
.round-oa__sample:hover { text-decoration: underline; }

/* ── OA deep-dive callout (links the dedicated SIG / Optiver pages) ──── */
.round-oa__deepdive {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 14px 18px;
  background: linear-gradient(120deg, rgba(99,102,241,.12), rgba(139,92,246,.10));
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px;
  text-decoration: none; transition: border-color .15s, transform .15s;
}
.round-oa__deepdive:hover { border-color: #8b5cf6; transform: translateY(-1px); }
.round-oa__deepdive-ic { font-size: 1.3rem; color: #f59e0b; }
.round-oa__deepdive-tx { display: flex; flex-direction: column; gap: 2px; }
.round-oa__deepdive-tx b { color: var(--text-primary, #111827); font-size: 1rem; }
.round-oa__deepdive-tx span { color: var(--text-secondary, #6b7280); font-size: .85rem; }

/* ── OA cross-link cluster (every OA page links the others) ─────────── */
.round-oa__cross { margin: 36px 0 8px; }
.round-oa__cross-title { font-size: 1.15rem; margin: 0 0 14px; color: var(--text-primary, #111827); }
.round-oa__cross-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.round-oa__cross-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 12px; text-decoration: none; background: var(--bg-surface, #fff);
  transition: border-color .15s, transform .15s;
}
.round-oa__cross-link:hover { border-color: #6366f1; transform: translateY(-2px); }
.round-oa__cross-link b { color: var(--text-primary, #111827); font-size: .95rem; }
.round-oa__cross-link span { color: var(--text-secondary, #6b7280); font-size: .82rem; }