/* One theme source for every Training Wu page. Breakpoint layout remains in
   training-desktop.css and training-mobile-ui.css. */
:root {
  --training-ink: #111;
  --training-muted: #626262;
  --training-wash: #f4f4f4;
  --training-paper: #fff;
  --training-line: #dedede;
  --training-red: #c41230;
  --training-red-dark: #a61028;
  --training-focus: rgb(196 18 48 / 38%);
  --training-radius: 16px;
  --training-font: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* Keep the established desktop layout's token names on this shared palette. */
  --training-desktop-ink: var(--training-ink);
  --training-desktop-muted: var(--training-muted);
  --training-desktop-paper: var(--training-paper);
  --training-desktop-canvas: var(--training-wash);
  --training-desktop-line: var(--training-line);
  --training-desktop-red: var(--training-red);
  --training-desktop-radius: var(--training-radius);
}

html { color-scheme: light; }
:root body {
  margin: 0;
  color: var(--training-ink);
  background: var(--training-wash);
  font-family: var(--training-font);
  line-height: 1.55;
}

body :is(.shell, .page, .access-shell, .relearning-shell, .login-shell) {
  color: var(--training-ink);
}

body :is(.card, .panel, .exam-card, .answer-panel, .review-panel,
         .access-shell, .relearning-shell, .login-shell, .recovery-panel) {
  color: var(--training-ink);
  background: var(--training-paper);
  border-color: var(--training-line);
  border-radius: var(--training-radius);
}

body :is(main, .page, .shell, .access-shell, .relearning-shell, .login-shell, #boss-home) h1:not(.training-mobile-title),
body header.topbar h1 {
  color: var(--training-ink);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.03em;
}
body :is(main, .page, .shell, .access-shell, .relearning-shell, .login-shell, #boss-home) h2,
body header.topbar h2 { color: var(--training-ink); font-size: 23px; font-weight: 800; line-height: 1.35; }
body :is(main, .page, .shell, .access-shell, .relearning-shell, .login-shell, #boss-home) h3,
body header.topbar h3 { color: var(--training-ink); font-size: 18px; font-weight: 750; line-height: 1.4; }

body a:not(.training-mobile-item):not(.button) {
  color: var(--training-red-dark);
  text-underline-offset: 3px;
}

body :is(header.topbar, .training-brand-header) {
  color: var(--training-ink);
  background: var(--training-paper);
  border-color: var(--training-line);
  font-family: var(--training-font);
}

body button:not(.choice),
body .button,
body input[type="button"],
body input[type="submit"] {
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--training-ink);
  background: var(--training-paper);
  border: 1px solid var(--training-line);
  border-radius: 999px;
  font-family: var(--training-font);
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
}

/* Only intentional actions are primary; answer choices and stateful controls
   retain their own page rules. */
body button[type="submit"]:not(.secondary):not(.cancel):not(.quiet-button),
body input[type="submit"],
body button.primary:not(.secondary),
body button.primary-button:not(.secondary),
body button.employee-primary:not(.secondary),
body button.prism-growth-path__open-course,
body a.button.primary,
body .training-login-entry,
body button[data-unit]:not(.advisor-trigger),
body button[data-followup-parent-case-id][data-unit-id],
body #send-review, body #batch-submit, body #training-manager-save,
body #pilot-install, body #remediation-open, body #exam-dialog-confirm,
body #confirm-answer, body #submit-paper {
  min-height: 48px;
  padding: 10px 18px;
  color: var(--training-paper);
  background: var(--training-red);
  border: 1px solid var(--training-red);
  border-radius: 999px;
  font-weight: 750;
  cursor: pointer;
}

body main button[data-unit]:not(.advisor-trigger),
body main button[data-followup-parent-case-id][data-unit-id] {
  min-height: 48px;
  padding: 10px 18px;
  color: var(--training-paper);
  background: var(--training-red);
  border: 1px solid var(--training-red);
  border-radius: 999px;
  font-weight: 750;
}

body button.cancel,
body button.secondary,
body button.quiet-button,
body button.advisor-trigger,
body button[data-font-step],
body button[data-filter],
body button[aria-pressed]:not(.choice),
body button.training-mobile-item,
body button.training-mobile-more,
body button.training-mobile-close,
body button.learning-guide-open,
body button.learning-guide-close,
body button.training-logout,
body button[id$="cancel"],
body button[id$="close"],
body button[id$="refresh"],
body .secondary,
body .quiet-button,
body .quiet-link,
body .copy-reply {
  color: var(--training-ink);
  background: var(--training-paper);
  border: 1px solid var(--training-line);
  border-radius: 999px;
  font-weight: 650;
}

body button[data-filter][aria-pressed="true"],
body button[aria-pressed="true"]:not(.choice):not([data-filter]) {
  color: var(--training-paper);
  background: var(--training-red);
  border-color: var(--training-red);
}

body button:disabled:not(.choice):not(.training-mobile-item),
body input:disabled:not([type="checkbox"]):not([type="radio"]),
body select:disabled,
body textarea:disabled {
  color: var(--training-muted);
  background: #ededed;
  border-color: var(--training-line);
  border-radius: 999px;
  opacity: .72;
  cursor: not-allowed;
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  box-sizing: border-box;
  max-width: 100%;
  color: var(--training-ink);
  background: var(--training-paper);
  border-color: var(--training-line);
  border-radius: 8px;
  font-family: var(--training-font);
  font-size: 16px;
  line-height: 1.5;
}

body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--training-line);
}

body :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--training-focus);
  outline-offset: 2px;
}

body :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

body :is(.card, .panel, .exam-card, .answer-panel, .review-panel,
         .access-shell, .relearning-shell, .login-shell, .recovery-panel) > :is(h2, h3) {
  color: var(--training-ink);
}

body [hidden] { display: none !important; }

body :is(dialog, .training-mobile-drawer) {
  color: var(--training-ink);
  background: var(--training-paper);
  border-color: var(--training-line);
}
body dialog::backdrop { background: rgb(17 17 17 / 48%); }

.training-shell-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;max-width:1160px;box-sizing:border-box;margin:12px auto;padding:0 16px;flex-wrap:wrap}
.training-shell-actions>button{font:inherit;font-weight:650;min-height:44px;padding:9px 14px;background:var(--training-paper);color:var(--training-ink);border:1px solid var(--training-line);border-radius:999px;cursor:pointer}
.training-shell-actions>button:focus-visible{outline:3px solid var(--training-focus);outline-offset:2px}
@media(max-width:600px){.training-shell-actions{padding:0 12px;margin:8px auto}.training-shell-actions>button{font-size:15px}}

.training-shell-actions > button { width: auto; }

.training-brand-header {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--training-line);
  background: var(--training-paper);
  color: var(--training-ink);
  font: 700 16px/1.5 var(--training-font);
  text-align: left;
}
.training-brand-header a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font: inherit; text-decoration: none; }
.training-brand-header a:focus-visible { outline: 2px solid var(--training-red); outline-offset: 3px; }
.training-brand-footer {
  box-sizing: border-box;
  position: static;
  clear: both;
  width: calc(100% - 32px);
  max-width: 1160px;
  margin: 24px auto 0;
  padding: 16px 0 calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-top: 1px solid var(--training-line);
  color: var(--training-muted);
  background: transparent;
  font: 400 12px/1.65 var(--training-font);
  text-align: center;
  overflow-wrap: anywhere;
}
.training-brand-footer p { margin: 0; padding: 0; color: inherit; font: inherit; }
[data-training-legacy-brand] { display: none !important; }
html[data-training-brand-embedded="true"] .training-brand-header,
html[data-training-brand-embedded="true"] .training-brand-footer { display: none !important; }