/* AIbegin training theme — shared by the main course and standalone modules. */
:root {
  --ai-ink: #11110f;
  --ai-muted: #5e5b53;
  --ai-paper: #f4f1e8;
  --ai-paper-soft: #fbfaf5;
  --ai-card: #e7ded0;
  --ai-card-soft: #eee8dd;
  --ai-line: #cec4b5;
  --ai-white: #fff;
  --ai-success: #276247;
  --ai-warning: #8a5a16;
  --ai-error: #8d3529;
  --ai-shadow: 0 18px 48px rgba(17, 17, 15, 0.08);
  --ai-content: 1180px;
  --authority-blue: var(--ai-ink);
  --authority-blue-dark: #000;
  --authority-ink: var(--ai-ink);
  --authority-muted: var(--ai-muted);
  --authority-bg: var(--ai-paper);
  --authority-surface: var(--ai-paper-soft);
  --authority-panel: var(--ai-card-soft);
  --authority-panel-warm: var(--ai-card);
  --authority-line: var(--ai-line);
  --authority-line-strong: var(--ai-ink);
  --authority-focus: #9b8cff;
  --authority-success: var(--ai-success);
  --authority-warning: var(--ai-warning);
  --authority-error: var(--ai-error);
  --color-background: var(--ai-paper);
  --color-header: var(--ai-ink);
  --color-surface: var(--ai-paper-soft);
  --color-panel: var(--ai-card-soft);
  --color-primary: var(--ai-ink);
  --color-primary-dark: #000;
  --color-text: var(--ai-ink);
  --color-muted: var(--ai-muted);
  --color-border: var(--ai-line);
  --color-border-cool: var(--ai-line);
}

html { background: var(--ai-paper); scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--ai-paper);
  color: var(--ai-ink);
  font-family: Inter, "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
a { color: inherit; text-underline-offset: 4px; }
.container { width: 100%; max-width: none; padding: 0; background: var(--ai-paper); }

.brand-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(38px, 6vw, 72px);
  color: var(--ai-ink);
}
.brand-lockup span { font-size: 1.18rem; font-weight: 850; letter-spacing: -0.035em; }
.brand-lockup small { font-size: .72rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; opacity: .62; }
.brand-lockup-light { color: var(--ai-white); }
.header-logo, .gate-logo { display: none !important; }

/* Access gate */
.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vw, 80px);
  background: var(--ai-ink);
  color: var(--ai-white);
}
.gate-inner {
  width: min(100%, 720px);
  display: block;
  padding: clamp(32px, 6vw, 68px);
  border-radius: 28px;
  background: var(--ai-paper-soft);
  color: var(--ai-ink);
  text-align: left;
  box-shadow: 0 30px 90px rgba(0,0,0,.26);
}
.gate-inner .brand-lockup { color: var(--ai-ink); margin-bottom: 42px; }
.gate-title {
  max-width: 620px;
  margin: 0;
  color: var(--ai-ink);
  font-size: clamp(2.65rem, 8vw, 5.6rem);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .93;
}
.gate-subtitle {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--ai-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  line-height: 1.45;
}
.gate-form { width: 100%; max-width: 560px; margin-top: 40px; gap: 10px; }
.gate-label, .name-entry label {
  margin-top: 10px;
  color: var(--ai-ink);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.gate-input, .name-entry input, .reflection-prompt textarea {
  width: 100%; min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  background: var(--ai-white);
  color: var(--ai-ink);
  box-shadow: none;
}
.gate-input:focus, .name-entry input:focus, .reflection-prompt textarea:focus {
  border-color: var(--ai-ink);
  outline: 3px solid rgba(17,17,15,.12);
  outline-offset: 2px;
}
.gate-error { color: var(--ai-error); font-weight: 700; }

/* Branded hero */
header.hero-header, .standalone-hero {
  min-height: 500px;
  display: block;
  padding: clamp(34px, 5vw, 68px) max(24px, calc((100vw - var(--ai-content)) / 2)) clamp(70px, 10vw, 128px);
  border: 0;
  border-radius: 0;
  background: var(--ai-ink);
  color: var(--ai-white);
  text-align: left;
  box-shadow: none;
}
header.hero-header h1, .standalone-hero h1 {
  max-width: 1020px;
  margin: 0;
  color: var(--ai-white);
  font-size: clamp(3.1rem, 8.4vw, 7.8rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .88;
}
header.hero-header p, .standalone-hero p {
  max-width: 800px;
  margin: 30px 0 0;
  color: #d9d1c5;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.48;
}
.back-to-login {
  top: 40px; right: max(24px, calc((100vw - var(--ai-content)) / 2));
  color: #d9d1c5; font-size: .84rem; font-weight: 750; text-decoration: none;
}
.back-to-login:hover { color: var(--ai-white); }
.notebook-mark { display: none; }

/* Progress and chapter navigation */
.progress-top, .hero-quote, .nav-dots, .section, .disclaimer {
  width: min(calc(100% - 48px), var(--ai-content));
  max-width: var(--ai-content);
  margin-left: auto;
  margin-right: auto;
}
.progress-top {
  padding: clamp(34px, 5vw, 60px) 0 0;
  background: transparent;
  border: 0;
}
.progress-top-bar, .progress-bar, .practice-meter {
  height: 8px; overflow: hidden; border-radius: 999px; background: #d7cfc2;
}
.progress-top-fill, .progress-fill, .practice-meter span {
  height: 100%; border-radius: inherit; background: var(--ai-ink);
}
.progress-top-text, .progress-text, .practice-meter-text {
  margin-top: 14px; color: var(--ai-muted); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.progress-top-text #progressPercent, #progressPercent { color: var(--ai-ink); }
.chapter-progress, .nav-dots { gap: 8px; padding-top: 20px; }
.chapter-progress-item, .nav-dot {
  min-width: 34px; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--ai-line); border-radius: 999px;
  background: transparent; color: var(--ai-muted);
  font-size: .74rem; font-weight: 800;
}
.nav-dot { width: 12px; min-width: 12px; min-height: 12px; padding: 0; }
.chapter-progress-item.active, .chapter-progress-item.done, .nav-dot.active, .nav-dot.completed {
  border-color: var(--ai-ink); background: var(--ai-ink); color: var(--ai-white);
}
.hero-quote { margin-top: clamp(26px, 4vw, 48px); padding: 0; }
.hero-quote p {
  max-width: 900px; margin: 0; padding: 0 0 0 24px;
  border-left: 2px solid var(--ai-ink);
  color: var(--ai-ink); font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 400; line-height: 1.5;
}

/* Lesson canvas */
.section {
  display: none;
  margin-top: clamp(32px, 5vw, 64px);
  margin-bottom: clamp(48px, 8vw, 100px);
  padding: clamp(30px, 6vw, 78px);
  border: 1px solid rgba(206,196,181,.75);
  border-radius: 24px;
  background: var(--ai-paper-soft);
  color: var(--ai-ink);
  box-shadow: var(--ai-shadow);
}
.section.active { display: block; animation: aiReveal .32s ease both; }
@keyframes aiReveal { from { opacity: 0; transform: translateY(8px); } }
.section h2, .completion h2 {
  max-width: 900px; margin: 0 0 30px;
  color: var(--ai-ink);
  font-size: clamp(2.35rem, 6vw, 5.3rem);
  font-weight: 900; letter-spacing: -.06em; line-height: .95;
}
.section h2 .emoji, .scenario-header .icon, .category-icon, .risk-category-icon, .completion-icon { font-size: .76em; }
.section h3 {
  max-width: 820px; margin: clamp(42px, 6vw, 70px) 0 16px;
  color: var(--ai-ink); font-size: clamp(1.55rem, 3vw, 2.5rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.12;
}
.section h4, .question-card h4, .summary-card h4, .chapter-questions h4 {
  color: var(--ai-ink); font-size: clamp(1.12rem, 2vw, 1.45rem); font-weight: 850; letter-spacing: -.015em;
}
.section p, .section li { max-width: 880px; color: var(--ai-muted); font-size: clamp(1rem, 1.4vw, 1.12rem); }
.section > p:first-of-type {
  max-width: 900px; color: var(--ai-ink); font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2.2vw, 1.55rem); line-height: 1.55;
}
.chapter-list { max-width: 880px; padding-left: 1.25em; }
.chapter-list li { margin: 10px 0; }

/* Cards and information blocks */
.learning-cards, .feature-grid, .prompt-grid, .domain-grid { gap: 16px; }
.learning-card, .feature-card, .prompt-card, .practice-scenario, .reflection-prompt,
.final-rules-card, .practice-mode-panel, .scenario, .tip-box, .info-box, .warning-box,
.danger-box, .chapter-summary, .chapter-questions, .question-card, .summary-card,
.example-card, .example-list, .risk-categories-reminder, .category-card, .domain-item,
.rule, .read-confirmation, .accordion-item, .lesson-banner, .completion, .name-entry {
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  background: var(--ai-card-soft);
  color: var(--ai-ink);
  box-shadow: none;
}
.learning-card, .feature-card, .prompt-card, .practice-scenario, .reflection-prompt,
.final-rules-card, .practice-mode-panel, .scenario, .tip-box, .info-box, .warning-box,
.danger-box, .chapter-summary, .chapter-questions, .question-card, .summary-card,
.risk-categories-reminder, .read-confirmation, .name-entry {
  width: min(100%, 920px); margin: 24px 0; padding: clamp(20px, 3.5vw, 34px);
}
.learning-card, .feature-card, .prompt-card { background: var(--ai-card); }
.scenario-eyebrow, .learning-card span, .feature-card span, .scenario-header,
.chapter-summary strong, .prompt-card strong, .example-label {
  color: var(--ai-ink); font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
}
.tip-box, .info-box { border-left: 5px solid var(--ai-ink); }
.warning-box { border-left: 5px solid var(--ai-warning); }
.danger-box { border-left: 5px solid var(--ai-error); }
.lesson-banner { padding: 26px 30px; background: var(--ai-ink); color: var(--ai-white); }
.lesson-banner p, .lesson-banner strong { margin: 0; color: var(--ai-white); }
.accordion { max-width: 920px; }
.accordion-item { overflow: hidden; margin: 12px 0; background: var(--ai-paper-soft); }
.accordion-header { min-height: 64px; padding: 18px 22px; color: var(--ai-ink); font-weight: 800; }
.accordion-header:hover, .accordion-body { background: var(--ai-card-soft); }
.accordion-body { padding: 24px; border-top: 1px solid var(--ai-line); }

/* Inputs, choices and feedback */
.option, .scenario-option, .chapter-q-options label {
  min-height: 56px; padding: 15px 18px;
  border: 1px solid var(--ai-line); border-radius: 12px;
  background: var(--ai-white); color: var(--ai-ink);
}
.option:hover, .option.selected, .scenario-option:hover, .scenario-option.selected,
.chapter-q-options label:hover { border-color: var(--ai-ink); background: var(--ai-card-soft); }
.feedback, .scenario-feedback, .reflectie-required-overlay-content, .accordion-required-msg {
  border: 1px solid var(--ai-line); border-radius: 16px; background: var(--ai-card-soft); color: var(--ai-ink); box-shadow: var(--ai-shadow);
}
.tag, .risk-cat-item { border-radius: 999px; }
.rule-number { border-radius: 999px; background: var(--ai-ink); color: var(--ai-white); }

/* Actions */
.btn, .primary-button, .secondary-button, .tool-card a, button {
  min-height: 50px; padding: 0 21px;
  border: 1px solid var(--ai-ink); border-radius: 999px;
  background: var(--ai-ink); color: var(--ai-white);
  font-family: inherit; font-size: .95rem; font-weight: 800;
  box-shadow: none; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover, .primary-button:hover, button:hover { transform: translateY(-1px); background: #2b2a26; }
.btn-outline, .secondary-button {
  border-color: var(--ai-line); background: transparent; color: var(--ai-ink);
}
.btn-outline:hover, .secondary-button:hover { border-color: var(--ai-ink); background: var(--ai-ink); color: var(--ai-white); }
.btn-nav { max-width: 920px; margin-top: clamp(42px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--ai-line); }
.btn:focus-visible, button:focus-visible, .accordion-header:focus-visible { outline: 3px solid #9b8cff; outline-offset: 3px; }

.completion { text-align: left; background: var(--ai-card); }
.completion .certificate-name-line, .name-entry-confirmed { color: var(--ai-ink); }
.disclaimer { margin-bottom: 60px; color: var(--ai-muted); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .gate { padding: 0; place-items: stretch; }
  .gate-inner { min-height: 100vh; border-radius: 0; padding: 28px 22px 48px; }
  .gate-inner .brand-lockup { margin-bottom: 70px; }
  header.hero-header, .standalone-hero { min-height: 440px; padding: 26px 22px 70px; }
  header.hero-header .brand-lockup, .standalone-hero .brand-lockup { margin-bottom: 86px; }
  .back-to-login { top: 29px; right: 22px; }
  .progress-top, .hero-quote, .nav-dots, .section, .disclaimer { width: min(calc(100% - 28px), var(--ai-content)); }
  .section { padding: 30px 20px; border-radius: 18px; }
  .section h2 { overflow-wrap: anywhere; }
  .learning-cards, .feature-grid, .prompt-grid, .domain-grid { grid-template-columns: 1fr; }
  .btn-nav { display: grid; gap: 10px; }
  .btn-nav .btn { width: 100%; }
}

@media print {
  body { background: #fff; }
  header.hero-header, .progress-top, .hero-quote, .nav-dots, .btn-nav, .back-to-login { display: none !important; }
  .section { border: 0; box-shadow: none; }
}