/* assessment.css / 00-foundation.css — ordered CSS owner. */
/* ==========================================================
   FILE — ASSESSMENT CSS
   ========================================================== */

/* ==========================================================
   SECTION GROUP — SHARED SHELL TOKENS
   ========================================================== */

/* ----------------------------------------------------------
   SECTION — SHARED LAYOUT CONTRACT
   ---------------------------------------------------------- */

:root {
  --content-max-width: 86rem;
  --main-content-offset: var(--header-height);
  --main-content-spacing: 0.0625rem;
  --motion-fast: 200ms;
  --layout-max-width: 90rem;
  --header-height: 11.875rem;
  --assessment-page-background: var(--axel-color-assessment-teal);
}

/* ----------------------------------------------------------
   SECTION — CANONICAL HEADER TOKENS
   ---------------------------------------------------------- */

.siteHeader {
  --charcoal: var(--axel-color-teal-deep);
  --ink: var(--axel-color-teal-ink);
  --champagne-light: var(--axel-color-champagne-light);
  --white: var(--axel-color-white);
  --line-strong: var(--axel-color-teal-line-strong);
  --ink-strong: var(--axel-color-ink-strong);
  --gold-shadow: var(--axel-color-gold-strong);
  --page: var(--surface);
  --main-content-max-width: 84rem;
  --type-small: clamp(0.96rem, 1vw, 1.06rem);
  --type-meta: clamp(0.86rem, 0.9vw, 0.94rem);
  --motion-fast: 200ms;
}

/* ----------------------------------------------------------
   SECTION — CANONICAL FOOTER TOKENS
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   SECTION — RESPONSIVE HEADER OWNERSHIP
   ---------------------------------------------------------- */

@media (max-width: 64rem) {
  :root {
    --main-content-offset: 0rem;
    --main-content-spacing: 0rem;
  }
}

/* ==========================================================
   SECTION GROUP — ASSESSMENT TOKENS
   ========================================================== */

/* ----------------------------------------------------------
   SECTION — ASSESSMENT COMPONENT TOKENS
   ---------------------------------------------------------- */

/* ==========================================================
   SECTION GROUP — FOUNDATION AND DOCUMENT
   ========================================================== */

/* ----------------------------------------------------------
   SECTION — BOX SIZING AND RESET
   ---------------------------------------------------------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------
   SECTION — HTML BASELINE
   ---------------------------------------------------------- */

html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--main-content-offset) + 1.125rem);
  background: var(--assessment-page-background);
}

/* ----------------------------------------------------------
   SECTION — BODY BASELINE
   ---------------------------------------------------------- */

body {
  min-width: 20rem;
  background: var(--assessment-page-background);
  color: var(--assessment-primary-text);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.8;
}

/* ----------------------------------------------------------
   SECTION — ASSESSMENT TEXT SELECTION OWNERSHIP
   ---------------------------------------------------------- */

body.assessmentPage {
  --assessment-charcoal: var(--axel-color-assessment-ink);
  --assessment-primary-text: var(--axel-color-ink-strong);
  --assessment-border: var(--axel-color-assessment-border);
  --assessment-gold: var(--axel-color-gold);
  --assessment-gold-deep: var(--axel-color-gold-deep);
  --assessment-priority-label: color-mix(in srgb, var(--assessment-gold-deep) 62%, var(--assessment-charcoal));
  --assessment-white: var(--axel-color-white);
  --assessment-muted-text: var(--axel-color-reading-secondary);
  --assessment-border-strong: var(--axel-color-assessment-border-strong);
  --assessment-surface: var(--axel-color-white);
  --assessment-surface-soft: var(--axel-color-white);
  --assessment-questionnaire-surface: var(--axel-color-white);
  --assessment-item-divider: var(--axel-color-assessment-divider);
  --assessment-content-max: 86rem;
  --assessment-scale-1: var(--axel-color-assessment-teal);
  --assessment-scale-2: var(--axel-color-assessment-teal-medium);
  --assessment-scale-3: var(--axel-color-assessment-teal-light);
  --assessment-scale-4: var(--axel-color-assessment-neutral);
  --assessment-scale-5: var(--axel-color-assessment-gold-light);
  --assessment-scale-6: var(--axel-color-assessment-gold-medium);
  --assessment-scale-7: var(--axel-color-gold);
  --assessment-scale-text-light: var(--axel-color-white);
  --assessment-scale-text-dark: var(--axel-color-ink-strong);
  --assessment-focus: var(--axel-color-gold-deep);
  --assessment-teal-dark: var(--assessment-page-background);
  --assessment-error: var(--axel-color-assessment-error);
  --assessment-error-surface: var(--axel-color-error-surface);
  --assessment-hero-text: var(--axel-color-ivory);
  --assessment-hero-supporting-text: rgba(255, 255, 255, .72);
  --assessment-hero-status-border: rgba(212, 175, 55, .38);
  --assessment-hero-status-text: rgba(255, 255, 255, .95);
  --assessment-answer-caption-text: rgba(20, 20, 20, .75);
  --assessment-contact-divider: color-mix(in srgb, var(--axel-color-assessment-teal) 34%, transparent);
  --assessment-placeholder-text: var(--axel-color-assessment-placeholder);
  --assessment-print-background: var(--assessment-white);
  --assessment-print-foreground: var(--assessment-primary-text);
  --assessment-reading-size: 1.1875rem;
  --assessment-reading-line-height: 1.62;
  --type-h2: clamp(2rem, 2.7vw, 2.85rem);
  --type-h3: clamp(1.45rem, 1.7vw, 1.7rem);
  --type-body: clamp(1.18rem, 1.22vw, 1.26rem);
  -webkit-user-select: none;
  user-select: none;
}

body.assessmentPage input:is([type="text"], [type="email"], [type="tel"]),
body.assessmentPage textarea,
body.assessmentPage [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL ANCHOR PRIMITIVE
   ---------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL FORM FONT INHERITANCE
   ---------------------------------------------------------- */

button,
input,
textarea {
  font: inherit;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL IMAGE PRIMITIVE
   ---------------------------------------------------------- */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL BUTTON PRIMITIVE
   ---------------------------------------------------------- */

button {
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL FOCUS RESET
   ---------------------------------------------------------- */

button:focus,
input:focus,
textarea:focus,
a:focus {
  outline: none;
  box-shadow: none;
}

/* ----------------------------------------------------------
   SECTION — GLOBAL HIDDEN STATE
   ---------------------------------------------------------- */

[hidden] {
  display: none;
}

/* ----------------------------------------------------------
   SECTION — SHARED SCREEN READER UTILITY
   ---------------------------------------------------------- */

.srOnly {
  position: absolute;
  width: .0625rem;
  height: .0625rem;
  padding: 0;
  margin: -.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   SECTION — SHARED FOCUS VISIBLE
   ---------------------------------------------------------- */

:focus-visible {
  outline: .125rem solid var(--assessment-focus);
  outline-offset: .1875rem;
}

/* ----------------------------------------------------------
   SECTION — ASSESSMENT PAGE LAYOUT PRIMITIVES
   ---------------------------------------------------------- */

.container {
  width: min(calc(100% - 2.5rem), var(--assessment-content-max));
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
}

.rowCenter {
  justify-content: center;
}

.stack {
  display: grid;
  gap: clamp(3rem, 5vw, 4.5rem);
}

.textStrong {
  font-weight: 600;
}

/* ----------------------------------------------------------
   SECTION — ASSESSMENT PAGE SHELL
   ---------------------------------------------------------- */
.mainShell {
  padding-top: calc(var(--main-content-offset) + var(--main-content-spacing));
  padding-bottom: 2.5rem;
}

.contentWrap {
  width: 100%;
  margin-inline: auto;
  padding-bottom: 1.5rem;
}

.card {
  background: var(--assessment-surface);
  border: .0625rem solid var(--assessment-border);
}