/* Emotiscale design tokens: the v2 rebrand (2026-08-23).
   A cream ground, a purple primary field, a coral accent, pill buttons and soft
   shadows, implemented from the owner's Claude Design homepage. It borrows the
   proven category rhythm of purple plus a warm accent without copying a
   competitor's exact trade dress.

   Token names are inherited from the forked codebase and deliberately remain
   stable so the whole product, including the test and private report, retunes
   from this block. --blue now means the purple action colour and --marker means
   the coral accent. The semantic names are historical, the values are the brand.

   Type: Plus Jakarta Sans (self-hosted, one variable cut 400 to 800) for
   everything, IBM Plex Mono for figures. Self-hosting keeps the GDPR rationale
   (no visitor IP reaches Google). The retired Schibsted / Instrument Serif /
   Newsreader faces are still declared in fonts.css but unreferenced. */
:root {
  /* Rebrand to the v2 Claude Design (2026-08-23): cream ground, purple primary,
     coral accent, Plus Jakarta Sans, pill buttons and soft shadows. Only this
     file names a colour; every other sheet goes through these tokens, so the
     whole site re-skins from here. Token NAMES are historical (--blue is now
     purple, --marker is now coral) so no downstream rule had to move. */
  --paper: #FFFBF4;
  --card: #FFFFFF;
  --card-tint: #FFF4E9;
  --ink: #241F2E;
  --ink-2: #17121F;
  --pencil: #45405A;
  /* Secondary label greys, tuned to clear WCAG AA on paper and card. */
  --muted: #57506B;
  --faint: #8B84A0;
  --rule: rgba(36, 31, 46, .08);
  --rule-strong: rgba(36, 31, 46, .14);
  --fill: #F5F0F8;
  /* Purple primary: links, focus, primary buttons. Hover lands on ink. */
  --blue: #453C8C;
  --blue-deep: #342E6B;
  --blue-hover: #241F2E;
  --blue-tint: #F1EBFA;
  --blue-badge: #E9E3F7;
  /* Coral accent, its soft peach tint, and a readable ink for text on the tint. */
  --marker: #EE7F5F;
  --marker-soft: #FFF0E7;
  --marker-ink: #9A4E30;
  /* Plotted data and outcome marks: a green that never reads as an alarm. */
  --good: #2F7D5F;
  --good-border: #3E8E6F;
  --good-tint: #E7F2EC;
  --good-bright: #5FC2A4;
  --bad: #B4432E;
  --bad-border: #D06B54;
  --bad-tint: #FBE7E0;
  /* Boundary for unlabelled interactive controls: needs 3:1, unlike the
     decorative --rule hairlines. */
  --control-line: rgba(36, 31, 46, .55);
  /* Amber, reused as the Composure facet hue. */
  --gold: #D9A32F;
  --gold-bright: #E7B94A;
  --gold-soft: #FDF3DF;
  --gold-line: #EAD9A8;
  --gold-ink: #96731F;
  /* Dark panels: the Track B card, the final CTA, the footer, the announcement bar. */
  --ink-panel: #241F2E;
  --paper-on-dark: #FFFBF4;
  --red: #B4432E;
  --red-tint: #FBE7E0;
  --data-cool: #1F6E6E;
  --data-warm: #EE7F5F;
  /* Per-facet hues, their soft card tints, and a readable label ink on each. */
  --facet-self: #E8845E;       --facet-self-soft: #FFF0E7;       --facet-self-ink: #A5644A;
  --facet-composure: #D9A32F;  --facet-composure-soft: #FDF3DF;  --facet-composure-ink: #96731F;
  --facet-attunement: #3E8E6F; --facet-attunement-soft: #E7F2EC; --facet-attunement-ink: #2E6B53;
  --facet-repair: #3D6FA8;     --facet-repair-soft: #E7EFFA;     --facet-repair-ink: #2F5580;
  --facet-drive: #453C8C;      --facet-drive-soft: #F1EBFA;      --facet-drive-ink: #5B51A8;
  /* The graduated Likert scale (v2 quiz design). Five ring hues running amber to
     indigo, a darker parallel ramp for the labels (so 14px text clears AA on
     cream where a ring border need not), and a low-alpha halo for the selected
     ring. A perceptual sequence to separate the five points, NOT a good-to-bad
     valence: no point is the "right" answer. */
  --scale-1: oklch(0.585 0.115 50);   --scale-1-ink: oklch(0.545 0.115 50);   --scale-1-halo: oklch(0.585 0.115 50 / 0.20);
  --scale-2: oklch(0.555 0.118 20);   --scale-2-ink: oklch(0.515 0.118 20);   --scale-2-halo: oklch(0.555 0.118 20 / 0.20);
  --scale-3: oklch(0.525 0.120 350);  --scale-3-ink: oklch(0.490 0.120 350);  --scale-3-halo: oklch(0.525 0.120 350 / 0.20);
  --scale-4: oklch(0.495 0.122 318);  --scale-4-ink: oklch(0.460 0.122 318);  --scale-4-halo: oklch(0.495 0.122 318 / 0.20);
  --scale-5: oklch(0.460 0.125 285);  --scale-5-ink: oklch(0.425 0.125 285);  --scale-5-halo: oklch(0.460 0.125 285 / 0.20);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
  /* Outfit, the quiz page's own type (from the EI Test Page design). Applied on
     the sitting only, by re-pointing --sans/--display within the quiz surface. */
  --sans-quiz: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Rounder shapes for the rebrand: a medium control radius, generous card
     radii, and a full pill for buttons. */
  --radius: 12px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  /* Soft drop shadows (the rebrand look), replacing the old hairline rings.
     --shadow-cta is the coloured glow under a primary button. */
  --shadow: 0 6px 18px -12px rgba(36, 31, 46, .4);
  --shadow-lg: 0 24px 44px -24px rgba(36, 31, 46, .42);
  --shadow-cta: 0 16px 32px -14px rgba(69, 60, 140, .55);
  /* The purple field on the home page's coloured cards: translucent white for
     the glass tiles and ghost pill that sit on it, and the soft ivory for
     secondary text. Page-relative greys would read wrong on purple. */
  --glass: rgba(255, 255, 255, .13);
  --glass-line: rgba(255, 255, 255, .28);
  --on-blue-soft: rgba(255, 251, 244, .84);
}

/* Light only, by decision (2026-08-19). The site is modelled on products
   that have no dark mode, and neither does this one any more: the dark
   token blocks were removed rather than left dormant, because a palette
   nothing renders is a palette that silently rots. The rule they protected
   still stands for a different reason: only THIS file may name a colour, so
   the palette can be re-tuned in one block without a hunt. */

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

/* The UA's [hidden] rule loses to any class that sets display (the quiz intro
   is a display:flex column, and quiz.js hides it with the hidden attribute),
   so without this the "hidden" intro keeps its 1400px of layout and the
   runner renders beneath it. Deleted once in a dead-CSS sweep and restored
   the same day, by a browser, not by the suite: every test was green while
   the page was broken. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keyboard skip link: off-screen until focused, then pinned top-left. Lets
   keyboard/screen-reader users jump the header nav straight to the content. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--blue); color: #fff; padding: 10px 16px;
  border-radius: 8px; text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
#main-content:focus { outline: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  /* Sticky footer, site-wide: every shell is a full-height column and the
     middle grows, so short pages (retake, verify, unsubscribe, 404) keep the
     footer at the bottom of the screen instead of floating mid-page. Chrome
     pages grow #main-content; the v3/results shells grow their <main>. dvh
     tracks the iOS toolbar; the vh line is the fallback for older engines.
     The certificate page has its own standalone shell and never loads this
     file, so its print layout is untouched. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

body > main, body > #main-content { flex: 1 0 auto; }


a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--blue-deep); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
::selection { background: #FFD9C7; }
h1 em, h2 em { font-style: italic; color: var(--blue); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
h1 { font-size: clamp(40px, 6.2vw, 68px); line-height: 1.03; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.015em; line-height: 1.1; }
h3 { font-size: 22px; letter-spacing: -0.01em; line-height: 1.2; }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--pencil); max-width: 56ch; }
.mono { font-family: var(--mono); }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 24px; margin-bottom: 12px;
}
.faq summary {
  font-weight: 600; font-size: 16.5px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--pencil); margin-top: 14px; max-width: 72ch; line-height: 1.68; font-size: 15px; }

.report-note {
  margin-top: 32px; padding: 20px 24px; background: var(--paper);
  border-left: 3px solid var(--rule); font-size: 14.5px; color: var(--pencil);
}

/* ---------- content pages ---------- */
.content-main { padding: 56px 0 40px; }
.content-main h1 { font-size: clamp(30px, 4vw, 42px); margin: 10px 0 16px; }
.content-main .prose { max-width: 720px; }
.prose p { margin: 16px 0; }
.prose h2 { margin: 40px 0 12px; }
.prose ul, .prose ol { margin: 16px 0 16px 24px; }
.prose li { margin: 6px 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 15.5px; }
.prose th, .prose td { text-align: left; border-bottom: 1px solid var(--rule); padding: 10px 14px 10px 0; }
.prose th { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--pencil); }
.prose .note { font-size: 14px; color: var(--pencil); }


/* Public certificate verification (/verify/:code) — where a scanned QR lands.
   This also shipped with no rules, so every row rendered as "Estimated IQ117"
   with the label welded to the value. It is the page whose entire job is to
   look like a credible check, so it gets a proper ledger treatment. */
.verify-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 4px 22px; margin: 22px 0 30px; }
.verify-row { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.verify-row:last-child { border-bottom: 0; }
.verify-row .k { color: var(--pencil); font-size: 14.5px; }
.verify-row .v { font-weight: 600; }
.verify-row .v.big { font: 500 30px/1 var(--serif); font-variant-numeric: lining-nums; }
.verify-row .v.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; }