/* Rockmah shared theme — tokens and component skin from the apex landing.
   Loaded after each app's own stylesheet. Markup, routes, and behavior stay put.
   Small text uses --blue-text (#0E4E75), which clears WCAG AA on silver, white, and blue-light.
   --blue-light / --blue-strong are for glows, rules, and large decorative marks. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,800;1,600&family=Inter:wght@400;500;600&display=swap");

:root {
  --silver-light: #E6E9ED;
  --silver-mid: #C0C6CE;
  --graphite: #2B3440;
  --ink-soft: #3E4956;
  --blue-light: #7CC4F2;
  --blue-strong: #3FA9E8;
  --blue-text: #0E4E75;
  --bg-top: #F4F6F8;
  --bg-bottom: #C9CFD6;
  --radius: 24px;
  --font-title: "Montserrat", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --rm-metal: linear-gradient(145deg, #FDFEFF 0%, var(--silver-light) 42%, var(--silver-mid) 100%);
  --rm-metal-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 6px rgba(43, 52, 64, .08),
    0 14px 34px rgba(43, 52, 64, .14);
  --rm-glow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(124, 196, 242, .75),
    0 0 28px rgba(124, 196, 242, .45),
    0 18px 36px rgba(43, 52, 64, .16);

  --rm-graphite-rgb: 43 52 64;
  --rm-silver-rgb: 230 233 237;
  --rm-silver-mid-rgb: 192 198 206;
  --rm-bg-rgb: 244 246 248;
  --rm-blue-rgb: 14 78 117;
  --rm-ink-soft-rgb: 62 73 86;
  --rm-white-rgb: 253 254 255;
  --rm-bottom-rgb: 201 207 214;

  /* Existing app tokens, retargeted so older rules follow the palette. */
  --rm-font: var(--font-body);
  --rm-bg: var(--bg-top);
  --rm-surface: #FDFEFF;
  --rm-ink: var(--graphite);
  --rm-ink-2: var(--ink-soft);
  --rm-muted: var(--ink-soft);
  --rm-line: rgba(43, 52, 64, .14);
  --rm-accent: var(--blue-text);
  --rm-accent-2: #0A3E5E;
  --rm-accent-soft: #E7F3FA;
  --rm-success: #166534;
  --rm-warn: #92400E;
  --rm-danger: #9F1239;
  --rm-radius: 24px;
  --rm-radius-sm: 14px;
  --rm-shadow: var(--rm-metal-shadow);
  --rm-shadow-lg: var(--rm-glow);
  --rm-ring: 0 0 0 4px rgba(14, 78, 117, .22);
  --background: var(--bg-top);
  --text-dark: var(--graphite);
  --text-medium: var(--ink-soft);
  --text-light: var(--ink-soft);
  --border-light: var(--silver-mid);
  --white: #FDFEFF;
  --rockmah-green: var(--blue-text);
  --rockmah-green-light: var(--blue-strong);
  --ai-purple: var(--blue-text);
  --ai-purple-dark: #0A3E5E;
  --google-blue: var(--blue-text);
  --portal-bg: #F7F8FA;
  --portal-bg-2: var(--silver-light);
  --portal-line: rgba(43, 52, 64, .12);
  --portal-text: var(--graphite);
  --portal-muted: var(--ink-soft);
  --portal-accent: var(--blue-text);

  /* Investing dashboard tokens. */
  --bg: var(--bg-top);
  --bg-2: var(--silver-light);
  --panel: #FDFEFF;
  --line: rgba(43, 52, 64, .14);
  --text: var(--graphite);
  --muted: var(--ink-soft);
  --accent: var(--blue-text);
  --accent-2: var(--blue-text);
  --gold: #7A4E10;
  --down: #9F1239;
  --shadow: 0 14px 34px rgba(43, 52, 64, .12);

  /* Bootstrap, when a page pulls it in. */
  --bs-primary: var(--blue-text);
  --bs-primary-rgb: 14, 78, 117;
  --bs-body-color: var(--graphite);
  --bs-body-bg: var(--bg-top);
  --bs-secondary-color: var(--ink-soft);
  --bs-border-color: var(--silver-mid);
  --bs-link-color: var(--blue-text);
  --bs-link-hover-color: #0A3E5E;
  --bs-border-radius: 14px;
  --bs-border-radius-lg: 24px;
  --bs-font-sans-serif: var(--font-body);
  --bs-focus-ring-color: rgba(14, 78, 117, .35);
}

body.is-admin,
body.is-instructor,
body.is-student,
body.is-portal {
  --portal-bg: #F7F8FA;
  --portal-bg-2: var(--silver-light);
  --portal-line: rgba(43, 52, 64, .12);
  --portal-text: var(--graphite);
  --portal-muted: var(--ink-soft);
  --portal-accent: var(--blue-text);
}

html { scroll-behavior: smooth; }

body {
  isolation: isolate;
  font-family: var(--font-body);
  color: var(--graphite);
  background: linear-gradient(160deg, var(--bg-top) 0%, var(--silver-light) 46%, var(--bg-bottom) 100%);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .025) 1px 3px),
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  right: -20vmax;
  bottom: -25vmax;
  pointer-events: none;
  background: radial-gradient(circle, rgba(124, 196, 242, .22), transparent 65%);
}

h1, h2, h3, h4, .section-title, .hero-title, .auth-title {
  font-family: var(--font-title);
  color: var(--graphite);
  letter-spacing: -.02em;
  line-height: 1.15;
}

h1, .hero-title, .auth-title { font-weight: 800; }
h2, h3, h4, .section-title { font-weight: 600; }

a { color: var(--blue-text); }
a:hover { color: #0A3E5E; }

::selection { background: var(--blue-light); color: var(--graphite); }

:focus-visible {
  outline: 3px solid var(--blue-text);
  outline-offset: 3px;
}

/* --- Header, nav, footer ------------------------------------------------ */
header,
header.site-header,
body.is-portal .site-header {
  background: rgba(244, 246, 248, .86);
  color: var(--graphite);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(43, 52, 64, .06);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.logo-text {
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: .08em;
  background: linear-gradient(180deg, #4A5563 0%, var(--graphite) 45%, #6B7684 55%, var(--graphite) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links a,
.nav-links button,
.nav-user-greeting,
.lang-switcher a {
  color: var(--graphite);
}

.nav-portal-link,
.nav-admin-link {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .8);
  color: var(--graphite);
}

.nav-portal-link:hover,
.nav-admin-link:hover { background: #fff; }

.nav-toggle {
  border-color: rgba(43, 52, 64, .2);
}

.nav-toggle-bar { background: var(--graphite); }

.lang-switcher { border-color: rgba(43, 52, 64, .16); }

@media (max-width: 900px) {
  .nav-portal-link,
  .nav-admin-link,
  .btn-login,
  .nav-logout .btn-link {
    background: rgba(255, 255, 255, .55);
    color: var(--graphite);
  }
}

footer,
.foot {
  background: transparent;
  color: var(--ink-soft);
  border-top: 1px solid rgba(43, 52, 64, .1);
}

.footer-main { color: var(--graphite); }
.footer-legal { color: var(--ink-soft); opacity: 1; }
footer a, .foot a { color: var(--blue-text); }

/* --- Surfaces ------------------------------------------------------------ */
.hero {
  background: transparent;
  color: var(--graphite);
}

.hero::before { content: none; }

.hero-title,
.hero-subtitle,
.hero-kicker,
.hero-stats strong,
.hero-stats span,
.section-subtitle { color: var(--graphite); }

.hero-kicker,
.hero-stats span,
.section-subtitle,
.page-lead { color: var(--ink-soft); }

.hero-highlight {
  background: linear-gradient(180deg, #4A5563 0%, var(--graphite) 48%, var(--blue-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.courses-section,
main,
.portal-main,
.auth-container { background: transparent; }

.card,
.course-card,
.entity-card,
.stat-card,
.admin-section,
.auth-card,
.info-box,
.notice-item,
.lesson-row,
.table-scroll {
  background: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius);
  box-shadow: var(--rm-metal-shadow);
}

.card p,
.course-description,
.entity-card p,
.stat-meta,
.text-muted { color: var(--ink-soft); }

.course-card,
.card,
.entity-card,
.stat-card {
  transition: transform .35s ease, box-shadow .35s ease;
}

.course-card:hover,
.card:hover,
.entity-card:hover,
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--rm-glow);
}

.course-badge { border-radius: 999px; }
.course-badge-excel,
.course-badge-ai,
.badge-active,
.badge-completed,
.badge-draft,
.badge-paused {
  background: rgba(255, 255, 255, .7);
  color: var(--graphite);
  border: 1px solid rgba(43, 52, 64, .1);
}

.stat-value { color: var(--graphite); font-family: var(--font-title); }
.stat-label { color: var(--ink-soft); }

/* --- Buttons ------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.btn-sm,
.btn-login,
.btn-course,
.btn-course-excel,
.btn-course-ai,
.google-btn,
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-sm,
a.btn-course,
button.btn-primary,
body.is-portal .btn,
body.is-portal .btn-sm,
body.is-portal .btn-primary,
body.is-portal .btn-secondary,
body.is-portal .btn-inline {
  background: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(43, 52, 64, .12);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-sm:hover,
.btn-login:hover,
.btn-course:hover,
.btn-course-excel:hover,
.btn-course-ai:hover,
.google-btn:hover,
a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
body.is-portal .btn:hover,
body.is-portal .btn-primary:hover {
  color: var(--graphite);
  transform: translateY(-2px);
  box-shadow: var(--rm-glow);
}

.btn-danger,
a.btn-danger,
.btn-danger:hover {
  color: #9F1239;
  background: linear-gradient(145deg, #fff, #fde8ec);
  border-color: #fecdd3;
}

.btn:disabled,
button:disabled { opacity: .55; transform: none; cursor: not-allowed; }

.btn-link {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--blue-text);
}

/* `.btn-login` is the header login control. site.css sets
   `.btn-login { color: white !important }`, which stays white on the metal fill
   in every state. The same declaration covers that class anywhere it is used,
   plus the usual header/nav button variants. */
.btn-login,
a.btn-login:link,
a.btn-login:visited,
.btn-login:hover,
.btn-login:focus,
.btn-login:focus-visible,
.btn-login:active,
:is(header, .site-header, .nav-bar, .nav-links, nav) :is(
  .btn:not(.btn-link):not(.btn-danger),
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-light,
  .btn-outline-secondary
),
:is(header, .site-header, .nav-bar, .nav-links, nav) :is(
  .btn:not(.btn-link):not(.btn-danger),
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-light,
  .btn-outline-secondary
):is(:link, :visited, :hover, :focus, :focus-visible, :active) {
  color: var(--graphite) !important;
  -webkit-text-fill-color: var(--graphite);
  background: var(--rm-metal);
}

.btn-login:focus-visible,
:is(header, .site-header, .nav-bar, .nav-links, nav) :is(
  .btn:not(.btn-link):not(.btn-danger),
  .btn-primary,
  .btn-secondary,
  .btn-light,
  .btn-outline-light
):focus-visible {
  outline: 3px solid var(--blue-text);
  outline-offset: 3px;
}

/* --- Forms --------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.form-control {
  background: #FDFEFF;
  color: var(--graphite);
  border: 1px solid var(--silver-mid);
  border-radius: 14px;
  font-family: var(--font-body);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-text);
  box-shadow: var(--rm-ring);
  outline: none;
}

.form-group label,
.form-check label { color: var(--graphite); }

.validation-summary-errors {
  background: #fef2f2;
  border: 1px solid #fecdd3;
  color: #9F1239;
  border-radius: 14px;
}

.alert-success,
.alert-success-inline {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #166534;
}

code {
  background: var(--rm-accent-soft);
  color: var(--blue-text);
  border-radius: 6px;
}

/* --- Tables -------------------------------------------------------------- */
.table th,
.data-table th,
table.data th {
  background: rgba(255, 255, 255, .55);
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(43, 52, 64, .1);
}

.table td,
.data-table td,
table.data td { color: var(--graphite); border-bottom-color: rgba(43, 52, 64, .08); }

.table tbody tr:hover td,
.data-table tbody tr:hover td,
table.data tbody tr:hover { background: rgba(124, 196, 242, .12); }

/* --- Portal -------------------------------------------------------------- */
.portal-sidebar {
  background: linear-gradient(180deg, #FDFEFF 0%, var(--silver-light) 100%);
  color: var(--graphite);
  border-right: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset -1px 0 0 rgba(43, 52, 64, .06);
}

.portal-kicker { color: var(--blue-text); }
.portal-nav-group { color: var(--ink-soft); }

.portal-nav-link { color: var(--graphite); }

.portal-nav-link:hover {
  background: rgba(255, 255, 255, .7);
  color: var(--graphite);
}

.portal-nav-link.is-active,
body.is-admin .portal-nav-link.is-active,
body.is-instructor .portal-nav-link.is-active {
  background: linear-gradient(90deg, rgba(124, 196, 242, .45), rgba(255, 255, 255, .4));
  color: var(--graphite);
  box-shadow: inset 3px 0 0 var(--blue-text);
}

.progress-chip { background: rgba(124, 196, 242, .28); color: var(--blue-text); }
.tutor-msg-user { background: var(--blue-text); color: #FDFEFF; }
.tutor-msg-user strong { color: #E7F3FA; }
.tutor-msg-assistant { background: rgba(255, 255, 255, .75); color: var(--graphite); }

/* --- Storefront ---------------------------------------------------------- */
body.storefront {
  font-family: var(--font-body);
  color: var(--graphite);
  background: linear-gradient(160deg, var(--bg-top) 0%, var(--silver-light) 46%, var(--bg-bottom) 100%);
}

body.storefront .sf-header {
  background: rgba(244, 246, 248, .9);
  color: var(--graphite);
  box-shadow: 0 10px 30px rgba(43, 52, 64, .06);
}

body.storefront .sf-brand,
body.storefront .sf-nav a { color: var(--graphite); }

body.storefront .sf-search input {
  background: #fff;
  color: var(--graphite);
  border: 1px solid var(--silver-mid);
}

body.storefront .sf-search input::placeholder { color: var(--ink-soft); }

body.storefront .sf-card,
body.storefront .sf-box,
body.storefront .sf-table {
  background: var(--rm-metal);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--radius);
  box-shadow: var(--rm-metal-shadow);
  color: var(--graphite);
}

body.storefront .sf-card:hover { transform: translateY(-6px); box-shadow: var(--rm-glow); }

body.storefront .sf-btn {
  background: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(43, 52, 64, .12);
}

body.storefront .sf-btn:hover { color: var(--graphite); transform: translateY(-2px); box-shadow: var(--rm-glow); filter: none; }

body.storefront .sf-price,
body.storefront .sf-cart { color: var(--graphite) !important; }

body.storefront .sf-footer {
  background: transparent;
  color: var(--ink-soft);
  border-top: 1px solid rgba(43, 52, 64, .1);
}

body.storefront .sf-footer a { color: var(--blue-text); }

/* --- Investing dashboard ------------------------------------------------- */
.topbar {
  background: rgba(244, 246, 248, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 30px rgba(43, 52, 64, .06);
}

.brand,
.brand-text,
.brand-text small { color: var(--graphite); }

.brand-mark {
  background: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--rm-metal-shadow);
}

.nav a { color: var(--ink-soft); }
.nav a.is-active,
.nav a:hover {
  color: var(--graphite);
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(124, 196, 242, .7);
}

.indicator,
.panel,
.meta-grid div,
.detail-grid div,
.countdown,
.prob-mini,
.banner,
.notice,
.table-scroll {
  background: var(--rm-metal);
  border: 1px solid rgba(255, 255, 255, .95);
  color: var(--graphite);
  box-shadow: var(--rm-metal-shadow);
}

.indicator:hover { transform: translateY(-4px); border-color: rgba(124, 196, 242, .8); box-shadow: var(--rm-glow); }

.kicker,
.event-cat,
.ticker,
.up { color: var(--blue-text); }

.chip { color: var(--ink-soft); border-color: rgba(43, 52, 64, .16); }
.chip.is-active,
.chip:hover { color: var(--graphite); background: rgba(255, 255, 255, .75); }

table.data th,
table.data td { border-bottom-color: rgba(43, 52, 64, .1); }

.foot { background: transparent; }

/* --- Marketing landings (excel + ai-video) ------------------------------ */
body.rm-landing {
  font-family: var(--font-body);
  color: var(--graphite);
}

body.rm-landing h1,
body.rm-landing h2,
body.rm-landing h3,
body.rm-landing .font-display {
  font-family: var(--font-title);
  color: var(--graphite);
}

body.rm-landing .text-white,
body.rm-landing .hover\:text-white:hover { color: var(--graphite); }

body.rm-landing header,
body.rm-landing .nav-solid {
  background: rgba(244, 246, 248, .88);
  color: var(--graphite);
  box-shadow: 0 10px 30px rgba(43, 52, 64, .06);
}

body.rm-landing .bg-ai-purple,
body.rm-landing .bg-gray-900,
body.rm-landing .bg-gray-800,
body.rm-landing .bg-gray-50,
body.rm-landing .bg-black,
body.rm-landing .from-ai-purple,
body.rm-landing .to-ai-purple-dark,
body.rm-landing .via-ai-purple,
body.rm-landing .from-gray-900,
body.rm-landing .to-gray-800,
body.rm-landing .from-ai-purple\/90,
body.rm-landing .via-ai-purple\/80,
body.rm-landing .to-ai-purple-dark\/70 {
  --tw-gradient-from: rgb(244 246 248 / 0.94) var(--tw-gradient-from-position);
  --tw-gradient-via: rgb(230 233 237 / 0.9) var(--tw-gradient-via-position);
  --tw-gradient-to: rgb(201 207 214 / 0.92) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
  background-color: #F4F6F8;
  color: var(--graphite);
}

body.rm-landing .bg-surface,
body.rm-landing .bg-white,
body.rm-landing article {
  border-radius: var(--radius);
}

body.rm-landing button,
body.rm-landing .btn-accent,
body.rm-landing #sticky-cta-bar {
  background: var(--rm-metal);
  background-image: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(43, 52, 64, .12);
}

body.rm-landing button:hover,
body.rm-landing .btn-accent:hover {
  color: var(--graphite);
  transform: translateY(-2px);
  box-shadow: var(--rm-glow);
  filter: none;
}

body.rm-landing #sticky-cta-bar a,
body.rm-landing #sticky-cta-bar button { color: var(--graphite); }

body.rm-landing footer { background: transparent; color: var(--ink-soft); }

body.rm-landing .bg-bg\/70,
body.rm-landing .bg-bg\/80 {
  background-color: rgb(244 246 248 / 0.94);
}

body.rm-landing .bg-\[\#217346\] {
  background: var(--rm-metal);
  color: var(--graphite);
}

body.rm-app article,
body.rm-app table {
  background: var(--rm-metal);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 16px;
  box-shadow: var(--rm-metal-shadow);
  color: var(--graphite);
}

body.rm-app a.button,
body.rm-app button {
  background: var(--rm-metal);
  color: var(--graphite);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(43, 52, 64, .12);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}