/* Align the standalone learn page with the main phishing.113.mn palette. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c10;
  --panel: #10131a;
  --line: #2a3040;
  --cyan: #ff3a31;
  --muted: #aeb6c6;
  --white: #e8ebf0;
  --learn-paper-strong: #fff;
  --learn-paper-faint: #99a1b4;
  --learn-surface: #171b24;
  --learn-surface-raised: #1f2430;
  --learn-signal-soft: rgba(255, 58, 49, .1);
  --learn-signal-line: rgba(255, 58, 49, .35);
  --learn-amber: #f5a524;
  --learn-amber-soft: rgba(245, 165, 36, .1);
  --learn-amber-line: rgba(245, 165, 36, .35);
  --learn-sage: #3fa67c;
  --learn-sage-soft: rgba(63, 166, 124, .1);
  --learn-sage-line: rgba(63, 166, 124, .35);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;
  --panel: #fff;
  --line: #cbd2dc;
  --cyan: #c82f3d;
  --muted: #596273;
  --white: #242a35;
  --learn-paper-strong: #0d1117;
  --learn-paper-faint: #737e90;
  --learn-surface: #eef1f5;
  --learn-surface-raised: #e3e7ed;
  --learn-signal-soft: rgba(200, 47, 61, .09);
  --learn-signal-line: rgba(200, 47, 61, .3);
  --learn-amber: #b76b00;
  --learn-amber-soft: rgba(245, 165, 36, .13);
  --learn-amber-line: rgba(183, 107, 0, .28);
  --learn-sage: #23785a;
  --learn-sage-soft: rgba(63, 166, 124, .11);
  --learn-sage-line: rgba(35, 120, 90, .28);
}
body {
  background: var(--bg);
  color: var(--white);
  font-family: "Learn Header Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1,
h2,
h3,
.example .quote,
.checklist strong { color: var(--learn-paper-strong); }
h1 em,
.motto,
.eyebrow,
.art-caption,
.num,
.step-number,
.icon,
summary::after,
.help-list a,
.example .advice { color: var(--cyan); }
p,
.hero p,
.fine,
.feedback,
.checklist li,
.contact-row span { color: var(--muted); }
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline-color: var(--cyan);
}
.button {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
  box-shadow: none;
}
.button:hover {
  background: #ff514a;
  border-color: #ff514a;
  box-shadow: 0 12px 26px -20px rgba(255, 58, 49, .85);
}
.button.outline {
  background: var(--panel);
  border-color: var(--line);
  color: var(--white);
}
.button.outline:hover {
  background: var(--learn-surface-raised);
  border-color: var(--learn-signal-line);
  color: var(--learn-paper-strong);
}
.panel,
.card {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 22px 48px -36px rgba(0, 0, 0, .9);
}
.card {
  background: var(--learn-surface);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.card:hover {
  border-color: var(--learn-signal-line);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -28px rgba(255, 58, 49, .55);
}
.channels span {
  background: var(--learn-surface);
  border-color: var(--line);
  color: var(--muted);
}
.channels span:hover {
  border-color: var(--learn-signal-line);
  color: var(--learn-paper-strong);
}
.notice {
  background: var(--learn-amber-soft);
  border-color: var(--learn-amber-line);
  color: var(--learn-amber);
}
.notice span { color: var(--learn-amber); }
.tag {
  background: var(--learn-signal-soft);
  color: var(--cyan);
}
.checklist li,
.help-list details,
.contact-row {
  border-color: var(--line);
}
.checklist li::before { color: var(--cyan); }
.evidence {
  background: var(--learn-surface);
  border: 1px solid var(--line);
  color: var(--muted);
}
.cta {
  background: linear-gradient(135deg, var(--learn-signal-soft), var(--panel) 62%);
  border-color: var(--learn-signal-line);
}
.skip { background: var(--cyan); color: #fff; }
dialog {
  background: var(--panel);
  border-color: var(--learn-signal-line);
  color: var(--white);
}
#quiz-content .option {
  background: var(--learn-surface);
  border-color: var(--line);
  color: var(--white);
}
#quiz-content .option:hover:not(:disabled) { border-color: var(--cyan); }
#quiz-content .correct {
  border-color: var(--learn-sage) !important;
  background: var(--learn-sage-soft) !important;
}
#quiz-content .wrong { border-color: var(--cyan) !important; }
.score { color: var(--cyan); }
footer {
  background: #0d1016;
  color: #fff;
}
footer p,
footer > a:last-child { color: #aeb6c6; }
html[data-theme="light"] body { background: var(--bg); }
html[data-theme="light"] .hero-art img {
  content: url("/learn-assets/hero-light.png");
  filter: none;
  mix-blend-mode: normal;
  mask-image: radial-gradient(ellipse, black 58%, transparent 82%);
}
html[data-theme="light"] .panel { background: #fff; }
html[data-theme="light"] .button {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}
html[data-theme="light"] .button:hover {
  background: #a32439;
  border-color: #a32439;
  box-shadow: 0 12px 24px -20px rgba(200, 47, 61, .7);
}
html[data-theme="light"] .button.outline {
  background: #fff;
  border-color: var(--line);
  color: #922436;
}
html[data-theme="light"] .button.outline:hover { background: #f7f6f8; }
html[data-theme="light"] .card {
  background: #fff;
  box-shadow: 0 10px 24px -22px rgba(35, 5, 67, .7);
}
html[data-theme="light"] .card:hover {
  border-color: #b9aebf;
  box-shadow: 0 16px 32px -28px rgba(35, 5, 67, .55);
}
html[data-theme="light"] .channels span { background: #eef1f5; }
html[data-theme="light"] .checklist li,
html[data-theme="light"] .help-list details { border-bottom-color: var(--line); }
html[data-theme="light"] .evidence { background: #eef1f5; }
html[data-theme="light"] .cta {
  background: linear-gradient(135deg, var(--learn-signal-soft), #fff 62%);
  border-color: var(--learn-signal-line);
}
html[data-theme="light"] .skip { background: var(--cyan); color: #fff; }
html[data-theme="light"] main :is(a, summary):focus-visible {
  outline-color: var(--cyan);
}
/* Keep the supplied white footer wordmark legible in both themes. */
html[data-theme="light"] footer {
  max-width: none;
  padding-left: max(24px, calc((100% - 1170px) / 2));
  padding-right: max(24px, calc((100% - 1170px) / 2));
  background: #0d1016;
  color: #fff;
}
html[data-theme="light"] footer p,
html[data-theme="light"] footer > a:last-child { color: #aeb6c6; }

.learn-theme-toggle {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  transition: border-color 150ms, background-color 150ms, color 150ms;
}
.learn-theme-toggle:hover {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.learn-theme-toggle svg { display: block; width: 18px; height: 18px; }
.learn-theme-toggle .learn-theme-moon,
html[data-theme="light"] .learn-theme-toggle .learn-theme-sun { display: none; }
html[data-theme="light"] .learn-theme-toggle .learn-theme-moon { display: block; }
.learn-theme-toggle.is-menu {
  display: flex;
  width: 100%;
  min-height: 46px;
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 0;
  padding: 0 12.8px;
  border-color: rgba(255, 255, 255, .12);
  font-size: 14px;
  font-weight: 700;
}
@media (min-width: 640px) {
  .learn-theme-toggle { display: inline-flex; }
}