@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap");

/* Shared presentation layer for learner-facing routes. */
body[data-learning-modern] {
  --learning-ink: #071a2d;
  --learning-paper: #fbfaf6;
  --learning-muted: #617080;
  --learning-line: #d9d7cf;
  --learning-gold: #d8a126;
  background: var(--learning-paper) !important;
  color: var(--learning-ink) !important;
  font-family: Manrope, Inter, sans-serif !important;
}

body[data-learning-modern] :is(h1, h2, h3) {
  color: var(--learning-ink);
}

body[data-learning-modern] h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(38px, 5vw, 62px) !important;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
}

body[data-learning-modern] :is(main, .page, .container) {
  max-width: 1180px;
}

body[data-learning-modern] :is(.domain-card, .item, .card, .panel, .question-card, .simulation-card, .lab-card, .sim-card) {
  border: 1px solid var(--learning-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body[data-learning-modern] .sim-card {
  color: var(--learning-ink) !important;
}

body[data-learning-modern] .sim-card :is(.sim-title, .sim-desc) {
  color: var(--learning-ink) !important;
}

body[data-learning-modern] .sim-card .sim-desc {
  color: var(--learning-muted) !important;
}

body[data-learning-modern] .sim-card .sim-action {
  border: 1px solid var(--learning-gold);
  border-radius: 0;
  background: transparent;
  color: var(--learning-ink);
}

body[data-learning-modern] :is(.domain-card, .item, .card):hover {
  border-color: var(--learning-gold) !important;
  box-shadow: 0 12px 28px rgba(7, 26, 45, .08) !important;
}

body[data-learning-modern] .domain-card,
body[data-learning-modern] .item {
  position: relative;
  min-height: 92px;
  padding: 22px 68px 22px 26px !important;
  align-items: center;
}

body[data-learning-modern] :is(.domain-card, .item)::after {
  content: "→";
  position: absolute;
  right: 26px;
  color: var(--learning-gold);
  font: 500 28px/1 "Source Serif 4", Georgia, serif;
}

body[data-learning-modern] :is(.domain-card, .item) :is(.domain-icon, .item-icon) {
  display: none;
}

body[data-learning-modern] .domain-title,
body[data-learning-modern] .item-content strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

body[data-learning-modern] .page-title-row #pageTitle {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(36px, 5vw, 58px) !important;
  font-weight: 600;
  letter-spacing: -.045em;
}

body[data-learning-modern] :is(.domain-icon, .item-icon) {
  filter: grayscale(1) sepia(.25) hue-rotate(160deg) saturate(.65);
}

body[data-learning-modern] :is(.btn, button, .nav-btn) {
  border-radius: 0 !important;
}

body[data-learning-modern] :is(.btn, .nav-btn, button.primary, button[type="submit"]) {
  border-color: var(--learning-gold);
}

body[data-learning-modern] :is(.btn:hover, .nav-btn:hover, button.primary:hover, button[type="submit"]:hover) {
  border-color: var(--learning-gold);
  background: var(--learning-gold);
  color: var(--learning-ink);
}

body[data-learning-modern] :is(input, select, textarea) {
  border-color: var(--learning-line) !important;
  border-radius: 0 !important;
  font-family: Manrope, Inter, sans-serif;
}

body[data-learning-modern] :is(input, select, textarea):focus {
  border-color: var(--learning-gold) !important;
  box-shadow: 0 0 0 3px rgba(216, 161, 38, .18) !important;
}

body[data-learning-modern] .page-back-btn,
body[data-learning-modern] .back-button {
  color: #174b9b !important;
  font-weight: 800;
}

body[data-learning-modern] .muted,
body[data-learning-modern] :is(.domain-description, .item-content small, #context, .subtitle) {
  color: var(--learning-muted) !important;
}

body[data-learning-modern] .course-unavailable,
body[data-learning-modern] .empty-state {
  border-left: 3px solid var(--learning-gold);
  background: #fff;
  padding: 24px;
}

body[data-learning-modern] .topic-content,
body[data-learning-modern] .topic-body {
  color: #263746;
  line-height: 1.7;
}

body[data-learning-modern].primer-modern :is(.primer-nav, .catalog-nav) {
  background: var(--learning-ink);
  border-color: rgba(216, 161, 38, .65);
}

body[data-learning-modern].primer-modern :is(.primer-nav a, .catalog-nav a) {
  color: #fff;
}

@media (max-width: 700px) {
  body[data-learning-modern] :is(main, .page, .container) { padding-left: 22px; padding-right: 22px; }
  body[data-learning-modern] h1 { font-size: clamp(34px, 12vw, 48px) !important; }
}