/* Clearpath: shared learner/admin design tokens. These rules are scoped to the
   opt-in body class so saved legacy templates remain untouched. Business logic,
   form contracts and the editor's annotation geometry live in their own files. */
:root {
  --cp-bg:#f5f7f5; --cp-surface:#fff; --cp-soft:#edf2ee;
  --cp-ink:#172e2a; --cp-muted:#50635d; --cp-primary:#176b57;
  --cp-primary-hover:#115340; --cp-line:#ccd8d2; --cp-focus:#a95b1f;
  --cp-danger:#963b32; --cp-radius:14px;
}
body.clearpath { margin:0; padding:0; background:var(--cp-bg); background-image:none; color:var(--cp-ink); font:16px/1.6 "Segoe UI",system-ui,-apple-system,Arial,sans-serif; color-scheme:light; }
body.clearpath *,body.clearpath *::before,body.clearpath *::after { box-sizing:border-box; }
body.clearpath::before { display:none; }
body.clearpath [hidden] { display:none !important; }
body.clearpath a { color:var(--cp-primary); text-underline-offset:3px; }
body.clearpath a:hover { text-decoration:underline; }
body.clearpath h1,body.clearpath h2,body.clearpath h3 { color:var(--cp-ink); line-height:1.25; letter-spacing:-.025em; }
body.clearpath h1 { font-size:clamp(1.8rem,3vw,2.3rem); margin:0 0 12px; font-weight:700; }
body.clearpath h2 { font-size:1.35rem; margin:0 0 16px; }
body.clearpath h3 { font-size:1.1rem; }
body.clearpath p { overflow-wrap:anywhere; }
body.clearpath button,body.clearpath input,body.clearpath select,body.clearpath textarea { font-family:inherit; }
body.clearpath button,body.clearpath .primary-button,body.clearpath .secondary-button,body.clearpath .danger-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid var(--cp-primary); border-radius:8px; background:var(--cp-primary); color:#fff; font-size:.94rem; line-height:1.4; font-weight:600; cursor:pointer; text-decoration:none; }
body.clearpath button:hover,body.clearpath .primary-button:hover { background:var(--cp-primary-hover); border-color:var(--cp-primary-hover); }
body.clearpath button:disabled { opacity:.55; cursor:not-allowed; }
body.clearpath :is(.cp-secondary-button,.secondary-button) { background:var(--cp-surface); color:var(--cp-primary); border-color:var(--cp-line); }
body.clearpath :is(.cp-secondary-button,.secondary-button):hover { background:var(--cp-soft); color:var(--cp-primary); }
body.clearpath .danger-button { background:#fff; border-color:#dbb6b0; color:var(--cp-danger); }
body.clearpath .danger-button:hover { background:#fff0ed; border-color:var(--cp-danger); }
body.clearpath .cp-quiet-button { background:transparent; color:var(--cp-muted); border-color:transparent; }
body.clearpath .cp-quiet-button:hover { background:var(--cp-soft); border-color:var(--cp-line); color:var(--cp-ink); }
body.clearpath :is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--cp-focus); outline-offset:3px; }
body.clearpath input[type=checkbox],body.clearpath input[type=radio] { accent-color:var(--cp-primary); }
body.clearpath .cp-skip-link { position:absolute; top:8px; left:16px; transform:translateY(-200%); z-index:2000; padding:12px; background:#fff; border:2px solid var(--cp-primary); }
body.clearpath .cp-skip-link:focus { transform:none; }
/* A compact, consistent header replaces the stacked title/navigation/status
   banners. Wrapping keeps every destination available without a hamburger. */
body.clearpath .cp-header { background:var(--cp-surface); border:0; border-bottom:1px solid var(--cp-line); padding:0; margin:0; border-radius:0; box-shadow:none; text-align:left; color:var(--cp-ink); font-size:1rem; }
body.clearpath .cp-header-inner { max-width:1440px; margin:auto; padding:15px 32px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 28px; min-height:76px; }
body.clearpath .cp-brand { display:inline-flex; align-items:center; gap:10px; font-size:1.1rem; font-weight:750; color:var(--cp-ink); white-space:nowrap; text-decoration:none; }
body.clearpath .cp-brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--cp-primary); color:#fff; font:25px/1 Georgia,serif; }
body.clearpath .cp-nav { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
body.clearpath .cp-nav a { display:inline-flex; align-items:center; min-height:44px; padding:9px 12px; color:var(--cp-muted); border-radius:7px; text-decoration:none; font-size:.9rem; font-weight:600; }
body.clearpath .cp-nav a:hover,body.clearpath .cp-nav a[aria-current=page] { background:var(--cp-soft); color:var(--cp-primary); }
body.clearpath .cp-nav a[aria-current=page] { box-shadow:inset 0 -2px var(--cp-primary); }
body.clearpath .cp-account-nav { margin-left:auto; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:.85rem; }
body.clearpath .cp-credit-balance { color:var(--cp-muted); white-space:nowrap; font-size:.85rem; }
body.clearpath .cp-header form { display:inline-flex; width:auto; max-width:none; padding:0; margin:0; border:0; background:transparent; box-shadow:none; }
body.clearpath .cp-header .cp-logout { width:auto; margin:0; background:transparent; color:var(--cp-muted); border-color:var(--cp-line); font-size:.82rem; padding:8px 13px; }
body.clearpath .cp-signup { background:var(--cp-primary); color:#fff; border-radius:8px; padding:10px 14px; text-decoration:none; }
body.clearpath .cp-container { max-width:1240px; margin:0 auto; padding:0 32px; }
body.clearpath .site-content-scroll { padding:12px 0 24px; min-height:55vh; }
body.clearpath .site-footer { padding:24px; text-align:center; color:var(--cp-muted); font-size:.8rem; border-top:1px solid var(--cp-line); }
body.clearpath .sticky-status-area:empty { display:none; }
body.clearpath .info-banner { background:transparent; border:0; box-shadow:none; border-bottom:1px solid var(--cp-line); border-radius:0; margin:0; padding:14px 0; color:var(--cp-muted); font-size:.85rem; text-align:left; }
body.clearpath .info-banner>a { margin-left:12px; }
/* Guest entry uses the same understated divider and green links as Clearpath.
   Flex wrapping keeps one desktop line without clipping text on small screens;
   authenticated credit/referral notices retain their existing layout. */
body.clearpath .info-banner.cp-guest-banner { display:flex; align-items:center; flex-wrap:wrap; gap:10px 24px; padding:16px 0; line-height:1.6; }
body.clearpath .cp-guest-copy { flex:1 1 360px; }
body.clearpath .cp-guest-copy strong { color:var(--cp-ink); font-weight:600; }
body.clearpath .cp-guest-price { white-space:nowrap; color:var(--cp-muted); font-size:.8rem; }
body.clearpath .cp-guest-links { display:flex; gap:20px; align-items:center; }
body.clearpath .cp-guest-links a { color:var(--cp-primary); font-weight:600; white-space:nowrap; text-underline-offset:3px; padding:6px 0; }
/* Notice decoration belongs to each message, so a welcome is plain text while
   actionable notices keep their visual treatment, including after AJAX updates. */
body.clearpath .flash-messages { margin:20px 0; }
body.clearpath .flash-messages p { background:var(--cp-soft); color:var(--cp-ink); border-left:3px solid var(--cp-primary); border-radius:8px; padding:12px 18px; margin:8px 0; }
body.clearpath .flash-messages .cp-welcome { background:transparent; border:0; border-radius:0; padding:0; font-size:1.08rem; }
body.clearpath .cp-page-intro { margin:20px 0 28px; max-width:760px; }
body.clearpath .cp-page-intro>p:last-child { color:var(--cp-muted); font-size:1.06rem; }
body.clearpath .cp-eyebrow { text-transform:uppercase; color:var(--cp-primary); font-size:.72rem; letter-spacing:.12em; font-weight:700; margin:0 0 12px; }
body.clearpath .muted { color:var(--cp-muted); }
/* Quiz generation, custom problem entry, and their existing result containers
   keep their original IDs. The optional tabs never reset a draft or submit a
   form; they only choose which intent panel is currently visible. */
body.clearpath.cp-quiz .main-wrapper { max-width:980px; margin:0 auto !important; padding:0; }
body.clearpath.cp-quiz .cp-intent { display:flex; gap:10px; margin:0 0 24px; }
body.clearpath.cp-quiz .cp-intent button { width:auto; margin:0; padding:12px 22px; background:transparent; color:var(--cp-muted); border:1px solid var(--cp-line); }
body.clearpath.cp-quiz .cp-intent button[aria-selected=true] { background:var(--cp-primary); color:#fff; border-color:var(--cp-primary); }
body.clearpath.cp-quiz .main-wrapper form { width:100%; max-width:none; margin:0 0 28px; padding:28px 32px; background:var(--cp-surface); border:1px solid var(--cp-line); border-radius:var(--cp-radius); box-shadow:0 4px 20px #17302204; }
body.clearpath.cp-quiz #quiz-generator-form { max-width:700px; }
body.clearpath.cp-quiz #quiz-generator-form label { display:block; font-weight:600; font-size:.9rem; margin:16px 0 6px; }
body.clearpath.cp-quiz :is(select,input[type=text],input[type=file]) { border:1px solid var(--cp-line); border-radius:8px; background:#fff; color:var(--cp-ink); font-size:1rem; min-height:48px; padding:11px 13px; width:100%; margin:6px 0 14px; }
body.clearpath.cp-quiz .main-wrapper button { width:auto; margin:10px 8px 0 0; }
body.clearpath.cp-quiz .main-wrapper label { font-size:.9rem; font-weight:600; }
body.clearpath.cp-quiz :is(.question-box,.solution-box,.visual-aid-box,.graph-box) { max-width:none; margin:24px 0; padding:28px 32px; background:#fff; border:1px solid var(--cp-line); border-radius:var(--cp-radius); box-shadow:none; scroll-margin-top:24px; }
body.clearpath.cp-quiz .quiz-question { border-top:1px solid var(--cp-line); padding:20px 0; margin:0 !important; }
body.clearpath.cp-quiz .quiz-question:last-child { padding-bottom:0; }
body.clearpath.cp-quiz .practice-launch { background:var(--cp-primary); color:#fff; min-height:44px; padding:10px 18px; border-radius:8px; font-size:.94rem; }
body.clearpath.cp-quiz .drop-zone { border-color:#94b3a6; background:var(--cp-bg); color:var(--cp-muted); }
body.clearpath.cp-quiz .drop-zone.dragover { background:var(--cp-soft); border-color:var(--cp-primary); }
body.clearpath.cp-quiz :is(.graph-meta-item,.graph-note,.graph-controls,.graph-parameter-control) { background:var(--cp-bg); border-color:var(--cp-line); color:var(--cp-ink); }
body.clearpath.cp-quiz .referral-code-chip { background:var(--cp-soft); color:var(--cp-primary); border-color:var(--cp-line); }
body.clearpath.cp-quiz .referral-copy-button { background:var(--cp-primary); border-color:var(--cp-primary); width:auto; min-height:32px; margin:0; }
body.clearpath.cp-quiz .cp-community { max-width:980px; margin:28px auto; color:var(--cp-muted); border-top:1px solid var(--cp-line); padding-top:14px; }
body.clearpath.cp-quiz .cp-community summary { cursor:pointer; min-height:44px; font-size:.85rem; padding:8px 0; }
body.clearpath.cp-quiz .cp-community-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
body.clearpath.cp-quiz .side-panel,body.clearpath.cp-quiz .left-panel { display:block; position:static; top:auto; left:auto; right:auto; width:auto; height:auto; max-width:100%; margin:0; padding:18px; background:#fff; border:1px solid var(--cp-line); box-shadow:none; backdrop-filter:none; }
body.clearpath.cp-quiz .left-panel :is(.left-upper,.left-lower) { padding:0; background:transparent; box-shadow:none; }
/* Exam shares the same surfaces and button hierarchy; the saved-set list and
   exact configured cost stay fully functional and visibly separate. */
body.clearpath .exam-page-wrapper { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr); gap:28px; max-width:none; margin:20px 0 40px; align-items:start; }
body.clearpath .exam-card { background:#fff; color:var(--cp-ink); border:1px solid var(--cp-line); border-radius:var(--cp-radius); padding:28px; margin:0; }
body.clearpath .exam-card select { border-color:var(--cp-line); color:var(--cp-ink); }
body.clearpath .exam-card button { background:var(--cp-primary); border-color:var(--cp-primary); }
body.clearpath .saved-exam-list a { background:var(--cp-soft); color:var(--cp-primary); border-color:var(--cp-line); }
body.clearpath :is(.exam-note,.exam-balance) { color:var(--cp-muted); }
body.clearpath .exam-balance { margin:0; padding:14px 0; text-align:left; font-size:.85rem; border-bottom:1px solid var(--cp-line); }
body.clearpath .exam-question-nav { background:var(--cp-soft); border-color:var(--cp-line); }
body.clearpath .exam-question-nav select { color:var(--cp-ink); border-color:var(--cp-line); }
body.clearpath :is(.rendered-solution,.math-content) { min-width:0; overflow-wrap:anywhere; }
body.clearpath mjx-container[display=true] { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:3px 0; }
@media(max-width:1050px) {
  body.clearpath .cp-header-inner { gap:8px 18px; }
  body.clearpath .cp-nav { order:3; width:100%; }
  body.clearpath .exam-page-wrapper { grid-template-columns:1fr; }
}
@media(max-width:640px) {
  body.clearpath .cp-header-inner { padding:12px 16px; }
  body.clearpath .cp-brand { font-size:1rem; }
  body.clearpath .cp-account-nav { font-size:.78rem; gap:8px; }
  body.clearpath .cp-nav { gap:2px; }
  body.clearpath .cp-nav a { padding:9px 10px; font-size:.82rem; }
  body.clearpath .cp-container { padding:0 16px; }
  body.clearpath.cp-quiz .cp-intent button { flex:1; padding:10px 12px; font-size:.85rem; }
  body.clearpath.cp-quiz :is(.main-wrapper form,.question-box,.solution-box,.visual-aid-box,.graph-box),body.clearpath .exam-card { padding:22px 18px; }
  body.clearpath.cp-quiz .main-wrapper button:not(.cp-quiet-button) { width:100%; margin-right:0; }
  body.clearpath.cp-quiz .cp-community-grid { grid-template-columns:1fr; }
  body.clearpath .cp-credit-balance { font-size:.75rem; }
  body.clearpath .info-banner { overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) { body.clearpath *,body.clearpath *::before,body.clearpath *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }