/* Clearpath account surfaces share the learner palette. These selectors include
   the page class so account layouts never change the quiz or practice workspace.
   Forms, payment endpoints, hidden fields and behavioral scripts stay in their
   existing templates; this file controls presentation and responsive sizing only. */
body.clearpath:is(.cp-auth, .cp-account, .cp-payment, .cp-result, .cp-public) {
  --account-shadow: 0 8px 28px rgba(23, 46, 42, .045);
}
body.clearpath .auth-page-wrap { max-width: 480px; margin: 44px auto 60px; padding: 0; }
body.clearpath :is(.auth-card, .dashboard-card, .cp-payment-card, .cp-result-card, .splash-card) {
  box-sizing: border-box; background: var(--cp-surface); border: 1px solid var(--cp-line);
  border-radius: 18px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--account-shadow);
}
body.clearpath.cp-auth .auth-card { width: 100%; max-width: none; }
body.clearpath :is(.auth-card, .cp-payment-card, .cp-result-card, .splash-card) h2,
body.clearpath .cp-result-card h1 { color: var(--cp-ink); margin: 0 0 12px; font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
body.clearpath :is(.auth-card, .cp-payment-card, .cp-result-card, .splash-card) p { line-height: 1.65; color: var(--cp-muted); }
body.clearpath :is(.auth-card, .dashboard-form) label,
body.clearpath .cp-promo-label { display: block; margin: 0 0 8px; font-size: .92rem; font-weight: 650; color: var(--cp-ink); }
/* Explicit field sizing prevents the historical content-box overflow at phone
   widths. Native radios retain their own proportions and a visible focus state. */
body.clearpath :is(.auth-card, .dashboard-form) input:not([type="hidden"]),
body.clearpath.cp-payment input[type="text"] {
  box-sizing: border-box; display: block; width: 100%; min-height: 46px;
  padding: 11px 13px; margin: 0 0 20px; border: 1px solid var(--cp-line);
  border-radius: 9px; background: var(--cp-surface); color: var(--cp-ink); font: inherit;
}
body.clearpath :is(.auth-card, .dashboard-form) input:focus,
body.clearpath.cp-payment input:focus { border-color: var(--cp-primary); outline: 3px solid #176b5728; outline-offset: 2px; }
body.clearpath .auth-card button { width: 100%; margin-top: 4px; }
body.clearpath .auth-back-link { text-align: center; margin-top: 22px; }
body.clearpath .auth-card a { color: var(--cp-primary); text-underline-offset: 3px; }
body.clearpath :is(.notice, .splash-note) { background: var(--cp-soft); border: 1px solid var(--cp-line); border-left: 3px solid var(--cp-primary); border-radius: 9px; padding: 15px; margin: 20px 0; color: var(--cp-ink); line-height: 1.6; }
body.clearpath .auth-alert { padding: 14px; margin: 18px 0; color: #78431b; background: #fff5e8; border: 1px solid #dcc5a7; border-radius: 9px; }
body.clearpath .dashboard-wrap { margin: 28px auto 48px; }
body.clearpath .dashboard-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 4px 0 26px; background: none; border: 0; box-shadow: none; }
body.clearpath .dashboard-hero > div:first-child { flex: 1 1 400px; }
body.clearpath .dashboard-hero h2 { margin: 0 0 10px; font-size: 2rem; color: var(--cp-ink); letter-spacing: -.03em; }
body.clearpath .dashboard-hero p { margin: 0; max-width: 60ch; }
body.clearpath .dashboard-card { min-width: 0; margin-bottom: 22px; }
body.clearpath .dashboard-card h3 { margin: 0 0 16px; font-size: 1.2rem; color: var(--cp-ink); }
body.clearpath .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; }
body.clearpath .credit-badge { padding: 12px 17px; background: var(--cp-soft); border: 1px solid var(--cp-line); border-radius: 100px; color: var(--cp-primary); font-weight: 650; }
body.clearpath .dashboard-form .readonly-field { background: var(--cp-soft); color: var(--cp-muted); }
body.clearpath :is(.primary-button, .secondary-button, .danger-button, .referral-copy-button) {
  display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box;
  min-height: 44px; border-radius: 9px; padding: 11px 17px; border: 1px solid transparent;
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
}
body.clearpath .primary-button { color: #fff; background: var(--cp-primary); }
body.clearpath :is(.secondary-button, .referral-copy-button) { color: var(--cp-primary); background: var(--cp-soft); border-color: var(--cp-line); }
body.clearpath .danger-button { color: #923d35; background: #fcf0ed; border-color: #e8c8c1; }
body.clearpath :is(.primary-button, .secondary-button, .danger-button, .referral-copy-button):hover { filter: brightness(.95); text-decoration: none; }
body.clearpath .referral-copy-button.copied { color: #fff; background: var(--cp-primary); }
body.clearpath .referral-code-chip { display: inline-block; padding: 5px 10px; border: 1px solid var(--cp-line); border-radius: 7px; background: var(--cp-soft); color: var(--cp-primary); font-weight: 650; }
body.clearpath .muted { font-size: .92rem; line-height: 1.6; color: var(--cp-muted); }
body.clearpath .stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
body.clearpath .stat-box { flex: 1 1 145px; padding: 16px; border: 1px solid var(--cp-line); border-radius: 10px; background: var(--cp-soft); color: var(--cp-muted); }
body.clearpath .stat-box strong { display: block; color: var(--cp-primary); font-size: 1.55rem; }
body.clearpath .reset-form { margin-top: 22px; }
/* Histories remain real tables for assistive technology. Only this focusable
   region scrolls on small screens, keeping all columns and actions available. */
body.clearpath .cp-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--cp-line); border-radius: 10px; }
body.clearpath .dashboard-table { border-collapse: collapse; width: 100%; min-width: 590px; margin: 0; font-size: .93rem; }
body.clearpath .dashboard-table :is(th, td) { padding: 14px; border-bottom: 1px solid var(--cp-line); text-align: left; vertical-align: middle; }
body.clearpath .dashboard-table th { background: var(--cp-soft); color: var(--cp-muted); font-weight: 650; }
body.clearpath .dashboard-table tr:last-child td { border-bottom: 0; }
body.clearpath .cp-payment-card { max-width: 620px; margin: 36px auto 60px; }
body.clearpath .cp-payment-card > p { margin-top: 0; }
body.clearpath .pricing-options { display: grid; gap: 12px; margin: 25px 0; }
body.clearpath .pricing-option { display: flex; gap: 13px; align-items: flex-start; border: 2px solid var(--cp-line); border-radius: 12px; padding: 17px; cursor: pointer; background: var(--cp-surface); }
body.clearpath .pricing-option:hover { border-color: var(--cp-primary); }
body.clearpath .pricing-option.selected { background: var(--cp-soft); border-color: var(--cp-primary); }
body.clearpath .pricing-option:focus-within { outline: 3px solid #176b5728; outline-offset: 2px; }
body.clearpath .pricing-option input { width: 19px; height: 19px; min-height: 0; flex: 0 0 19px; margin: 3px 0 0; accent-color: var(--cp-primary); }
body.clearpath .pricing-option-body { flex: 1; min-width: 0; }
body.clearpath .pricing-option-main { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 650; }
body.clearpath .pricing-option-price { color: var(--cp-primary); font-size: 1.2rem; }
body.clearpath .pricing-option-description { margin-top: 5px; color: var(--cp-muted); font-size: .9rem; line-height: 1.5; }
body.clearpath .pricing-featured-badge { display: inline-block; margin-top: 10px; padding: 3px 8px; border-radius: 5px; background: #d9e9df; color: #22543f; font-size: .78rem; font-weight: 650; }
body.clearpath .wallet-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 12px; }
body.clearpath .wallet-pill { padding: 7px 13px; border: 1px solid var(--cp-line); border-radius: 6px; background: var(--cp-surface); font-size: .9rem; font-weight: 650; color: var(--cp-ink); }
body.clearpath :is(.wallet-note, .small-note, .referral-footnote) { color: var(--cp-muted); font-size: .86rem; line-height: 1.6; margin: 12px 0 22px; }
body.clearpath .cp-payment-card #checkout-button { width: 100%; margin-top: 6px; }
body.clearpath .referral-link { padding: 19px; margin-top: 24px; background: var(--cp-soft); border: 1px solid var(--cp-line); border-radius: 11px; }
body.clearpath .referral-title { color: var(--cp-ink); font-weight: 650; margin-bottom: 12px; }
body.clearpath .referral-grid { display: grid; gap: 7px; }
body.clearpath .referral-row { display: grid; grid-template-columns: 1fr 20px 1.4fr; gap: 8px; font-size: .9rem; }
body.clearpath :is(.referral-arrow, .referral-reward) { color: var(--cp-primary); font-weight: 650; }
body.clearpath .referral-footnote { margin-bottom: 0; }
body.clearpath .success-msg { margin: 12px 0; padding: 12px; color: #22543f; background: var(--cp-soft); border-radius: 8px; }
body.clearpath .error-msg { margin: 12px 0; padding: 12px; color: #923d35; background: #fcf0ed; border-radius: 8px; }
body.clearpath .cp-result-card { max-width: 600px; margin: 48px auto; text-align: center; }
body.clearpath .cp-result-card .primary-button { margin-top: 12px; }
body.clearpath .splash-wrap { max-width: 760px; margin: 48px auto; }
body.clearpath .splash-card { text-align: center; }
body.clearpath .splash-badge { display: inline-block; padding: 7px 12px; margin-bottom: 20px; border-radius: 100px; background: var(--cp-soft); color: var(--cp-primary); font-size: .86rem; font-weight: 650; }
body.clearpath .splash-note { text-align: left; }
body.clearpath .splash-contact { margin-top: 24px; }
@media (max-width: 640px) {
  body.clearpath .dashboard-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.clearpath :is(.auth-page-wrap, .cp-payment-card, .cp-result-card, .splash-wrap) { margin-top: 24px; }
  body.clearpath .dashboard-hero { gap: 14px; }
  body.clearpath .dashboard-hero h2 { font-size: 1.65rem; }
  body.clearpath .referral-row { font-size: .82rem; grid-template-columns: .9fr 15px 1.5fr; }
}