/* Design tokens: design review 15A/17A. Eng review 10A: category colours are defined here and nowhere else.
   Each category id (from data/words.json) has three shades:
     700 → category ring, white label   200 → trait ring, ink label   50 → word ring, ink label
   Every label/fill pair is ≥ 4.5:1 (checked by test/unit/palette.test.mjs). */
:root {
  --ink: #111827;
  --ink-hover: #1f2937;
  --ink-quiet: #4b5563;
  --surface: #ffffff;
  --hairline: #e5e7eb;

  --cat-character-700: #047857;   --cat-character-200: #a7f3d0;   --cat-character-50: #ecfdf5;
  --cat-wisdom-700: #0f766e;      --cat-wisdom-200: #99f6e4;      --cat-wisdom-50: #f0fdfa;
  --cat-resilience-700: #be123c;  --cat-resilience-200: #fecdd3;  --cat-resilience-50: #fff1f2;
  --cat-intellect-700: #1d4ed8;   --cat-intellect-200: #bfdbfe;   --cat-intellect-50: #eff6ff;
  --cat-humanity-700: #7e22ce;    --cat-humanity-200: #e9d5ff;    --cat-humanity-50: #faf5ff;
  --cat-discipline-700: #4338ca;  --cat-discipline-200: #c7d2fe;  --cat-discipline-50: #eef2ff;
  --cat-drive-700: #b45309;       --cat-drive-200: #fde68a;       --cat-drive-50: #fffbeb;
  --cat-sociability-700: #be185d; --cat-sociability-200: #fbcfe8; --cat-sociability-50: #fdf2f8;
  --cat-agility-700: #c2410c;     --cat-agility-200: #fed7aa;     --cat-agility-50: #fff7ed;
  --cat-leadership-700: #0e7490;  --cat-leadership-200: #a5f3fc;  --cat-leadership-50: #ecfeff;
}

/* Bundled typeface (design review 16A): one variable woff2 that covers every weight.
   swap, not block: on slow workshop wifi the text shows at once in the fallback face instead of staying
   invisible for up to 3 s. The A4 sheet embeds its own @font-face and waits for the font, so it is unaffected. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* Wheel labels, shared by the A4 sheet and the preview. Sizes are SVG user units on the 900-unit wheel;
   on the 190 mm sheet they print at 14 / 10 / 8.5 / 7 pt (scripts/build_sheet.mjs checks the 7 pt minimum). */
/* geometricPrecision: exact, unhinted glyph widths, so label proportions (and the no-overlap check) hold at every size. */
svg text { font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; text-rendering: geometricPrecision; }
svg text.depth-0 { font-size: 23.4px; font-weight: 700; }
svg text.depth-1 { font-size: 16.8px; font-weight: 700; }
svg text.depth-2 { font-size: 14.3px; font-weight: 600; }
svg text.depth-3 { font-size: 11.7px; font-weight: 400; }
svg path { stroke: var(--surface); stroke-width: 1.5px; }

/* Browser surfaces: the focus ring from design review 6A; selection in the featured category's 200 tint (17A). */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--selection, var(--hairline)); color: var(--ink); }

html, body { margin: 0; background: var(--surface); color: var(--ink); font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif; }

/* Public site (index.html): neutral ink UI, the wheel owns all the colour (design review 13A). */
.site { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.site-header { display: flex; align-items: center; height: 72px; font-size: 18px; font-weight: 700; }
/* Two columns for the first screen: the wordmark, headline, path and choices on the left; the wheel on the right,
   from the top of the page, sized to the screen with 24 px to spare above and below (up to 860 px, where even the
   outer words clear the 11 px floor) and centred in it. Whatever a click changes stays in view without scrolling.
   The hero pulls up under the header (-72 px) so the wheel column starts beside the wordmark; the header keeps its
   place in the page, so it is still the site's banner. */
.hero {
  --wheel: clamp(420px, calc(100vh - 48px), 860px);
  display: grid;
  grid-template-columns: minmax(22rem, 1fr) minmax(0, var(--wheel));
  grid-template-rows: auto 1fr;
  grid-template-areas: "text wheel" "panel wheel";
  gap: 32px 48px;
  align-items: start;
  box-sizing: border-box;
  min-height: 100vh;
  margin-top: -72px;
  padding: 24px 0;
}
@supports (height: 100svh) { .hero { --wheel: clamp(420px, calc(100svh - 48px), 860px); min-height: 100svh; } }
.hero-text { grid-area: text; padding-top: 72px; }
.hero h1 { margin: 0 0 16px; font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 700; text-wrap: balance; }
.lede { margin: 0 0 24px; font-size: 20px; line-height: 1.5; color: var(--ink-quiet); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.button { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 12px 20px; border-radius: 6px; background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none; }
.button:hover { background: var(--ink-hover); }
.button-outline { font: inherit; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
.button-outline:hover { background: var(--hairline); }
.text-link, .groups a { color: var(--ink); text-underline-offset: 3px; }
.text-link:hover, .groups a:hover { text-decoration-thickness: 2px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; }
.draft-note { max-width: 44ch; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-quiet); }

/* The hero wheel: a neutral outline until it loads (6A), then the wheel with one path highlighted. */
/* Top-aligned, not centred: when the left column runs taller than the screen, a centred wheel would slide below the fold. */
.hero-wheel { grid-area: wheel; align-self: start; margin: 0; }
.wheel-frame { position: relative; aspect-ratio: 1; }
.wheel-frame [data-wheel], .wheel-frame svg { display: block; width: 100%; height: 100%; }
.wheel-placeholder circle { fill: none; stroke: var(--hairline); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wheel-frame svg path.wheel-path-outline { fill: none; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.wheel-frame svg .segment { cursor: pointer; }
.wheel-frame svg .wheel-centre { fill: var(--surface); }
.wheel-frame svg.is-zoomed .wheel-centre { cursor: zoom-out; }
.wheel-frame svg.has-choice .wheel-centre { cursor: pointer; }
/* The centre label: the shown quality's name, plus its description once the centre is 150px or wider. */
/* The wheel is one tab stop; round, so its focus ring follows the circle. */
.wheel-frame [data-wheel] { position: relative; border-radius: 50%; }
.wheel-centre-label { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: calc(var(--centre-size, 25%) * 0.78); aspect-ratio: 1; transform: translate(-50%, -50%); text-align: center; pointer-events: none; container-type: inline-size; transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1); }
.wheel-centre-label.is-moving { opacity: 0; transition: none; }
/* The name may use more of the disc than the description block (92% of its width, not 78%), so a word like
   "Unflappable" stays whole in a phone-sized centre; long ones hyphenate at a real break. */
.centre-name { width: calc(100% / 0.78 * 0.92); font-size: clamp(11px, 15cqi, 28px); font-weight: 700; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
.centre-definition { font-size: clamp(12px, 7.5cqi, 16px); line-height: 1.35; text-wrap: balance; }
.centre-definition:empty { display: none; }
/* Where clicking the centre leads: quiet and underlined, like a link, though the whole disc is the target. */
.centre-back { margin-top: 4px; font-size: clamp(12px, 5.5cqi, 14px); text-decoration: underline; text-underline-offset: 3px; }
.centre-back:empty { display: none; }
@container (max-width: 129px) { .centre-definition, .centre-back { display: none; } }
/* wheel.js hides a label that can't fit its segment at 11 px or more, and fades labels out while it zooms. */
.wheel-frame svg text { pointer-events: none; transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1); }
.wheel-frame svg text.is-hidden { visibility: hidden; }
.wheel-frame svg.is-moving text, .wheel-frame svg.is-moving .wheel-path-outline { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .wheel-frame svg text, .wheel-centre-label { transition: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wheel-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 0 16px; font-size: 16px; line-height: 1.5; text-align: center; color: var(--ink-quiet); }
.wheel-status:empty { display: none; }
.wheel-status.is-error { color: var(--ink); }
.wheel-status.is-ready { inset: auto; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.status-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }

/* The path caption names the chosen segments and which ring each one is. The static swatch classes below are
   the no-JavaScript example's shades: they must match data-example in index.html. */
.wheel-path { grid-area: panel; display: flex; flex-direction: column; align-items: flex-start; overflow-anchor: none; }
/* The line always sits last in the panel, below the chips, with its height reserved, so a preview never moves the
   chips under the pointer. When the centre shows the description, it only appears while a chip is previewed. */
.wheel-path .wheel-definition { order: 9; }
.hero:has([data-centre-fits="true"]) .wheel-definition { visibility: hidden; }
.hero:has([data-centre-fits="true"]) .wheel-path.show-definition .wheel-definition { visibility: visible; }
.path-steps { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.path-steps li { display: flex; align-items: flex-end; gap: 12px; }
.path-steps li + li::before { content: "›" / ""; font-size: 20px; line-height: 1.3; color: var(--ink-quiet); }
.path-item { display: flex; flex-direction: column; justify-content: flex-end; }
button.path-item { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.path-item:not([aria-current]):hover .path-word { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.path-ring { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-quiet); }
.path-word { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; }
/* The outline keeps even the palest wash swatch visible on white. */
.swatch { width: 12px; height: 12px; box-sizing: border-box; border: 1px solid rgb(17 24 39 / 0.4); }
/* Search sits at the top of the panel and stays put while the panel below it is redrawn. */
.wheel-search { order: -3; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 22rem; margin-bottom: 16px; }
.wheel-search label { font-size: 14px; color: var(--ink-quiet); }
.search-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ink-quiet); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; caret-color: var(--ink); }
.wheel-panel-body { display: contents; }
/* Landing on a word: the sentence it's for, in the method's own step-3 words. */
.say-it { max-width: 40ch; margin: 16px 0 0; font-size: 18px; line-height: 1.45; }
.say-it-label { display: block; margin-bottom: 4px; font-size: 14px; color: var(--ink-quiet); }
.swatch-category { background: var(--cat-resilience-700); }
.swatch-trait { background: var(--cat-resilience-200); }
.swatch-word { background: var(--cat-resilience-50); }
/* One line saying what the shown quality means; two lines of room so hovering doesn't shift the page. */
.wheel-definition { max-width: 46ch; min-height: 3em; margin: 12px 0 0; font-size: 16px; line-height: 1.5; text-wrap: balance; }
/* What to pick next: the focused quality's traits or words (or its siblings), as buttons. */
.wheel-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
.wheel-next-label { margin: 0; font-size: 14px; color: var(--ink-quiet); }
.chip-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.quality-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.quality-chip:hover { border-color: var(--ink-quiet); }
button.text-link { padding: 0; border: 0; background: none; font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; }

.how, .qualities, .groups { padding: 48px 0; border-top: 1px solid var(--hairline); }

/* All 200 qualities as text (built from data/words.json): one folded section per category. */
.qualities-intro { max-width: 65ch; margin: 0 0 24px; font-size: 18px; line-height: 1.55; }
.quality-group { border-bottom: 1px solid var(--hairline); }
.quality-group summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; padding: 12px 0; cursor: pointer; }
.quality-group summary .swatch { align-self: center; width: 14px; height: 14px; }
/* A flex summary loses the browser's disclosure marker, so say it in words (screen readers already hear the state). */
.quality-group summary { list-style: none; }
.quality-group summary::-webkit-details-marker { display: none; }
.quality-group summary::after { content: "Show" / ""; margin-left: auto; font-size: 14px; color: var(--ink-quiet); text-decoration: underline; text-underline-offset: 3px; }
.quality-group[open] summary::after { content: "Hide" / ""; }
.group-name { font-size: 20px; font-weight: 700; }
.group-definition { font-size: 16px; color: var(--ink-quiet); }
.trait-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 24px 32px; margin: 8px 0 32px; padding: 0; list-style: none; }
.trait-list h3 { margin: 0 0 4px; font-size: 18px; }
.trait-list p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--ink-quiet); }
.word-list { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.5; }
.word-list li { margin-bottom: 4px; }
.trait-list a { color: var(--ink); text-underline-offset: 3px; }
.word-list a { font-weight: 700; }
.cat-character { background: var(--cat-character-700); }
.cat-wisdom { background: var(--cat-wisdom-700); }
.cat-resilience { background: var(--cat-resilience-700); }
.cat-intellect { background: var(--cat-intellect-700); }
.cat-humanity { background: var(--cat-humanity-700); }
.cat-discipline { background: var(--cat-discipline-700); }
.cat-drive { background: var(--cat-drive-700); }
.cat-sociability { background: var(--cat-sociability-700); }
.cat-agility { background: var(--cat-agility-700); }
.cat-leadership { background: var(--cat-leadership-700); }
.site h2 { margin: 0 0 24px; font-size: 28px; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li::before { counter-increment: step; content: counter(step); font-weight: 700; color: var(--ink-quiet); }
.steps h3 { margin: 8px 0; font-size: 20px; }
.steps p, .groups p { max-width: 65ch; margin: 0 0 12px; font-size: 18px; line-height: 1.55; }
.groups h3 { margin: 24px 0 8px; font-size: 20px; }
.round-steps { max-width: 65ch; margin: 0 0 24px; padding-left: 1.5em; font-size: 18px; line-height: 1.55; }
.round-steps li { margin-bottom: 4px; }
.round-steps li::marker { font-weight: 700; color: var(--ink-quiet); }
.site-footer { padding: 32px 0 48px; border-top: 1px solid var(--hairline); font-size: 14px; color: var(--ink-quiet); }
/* A 44px tap target without making the footer taller. */
.site-footer a { display: inline-block; padding-block: 13px; margin-block: -13px; color: inherit; text-underline-offset: 3px; }
/* Between 900 and 1100px the two columns hold with a smaller wheel. Below 900px the page stacks: headline, the
   wheel (as big as fits the screen), then the panel, centred, with the description right under the path so a
   tapped quality's meaning sits just below the wheel. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "text" "wheel" "panel"; min-height: 0; margin-top: 0; padding: 24px 0 64px; }
  .hero-text { padding-top: 0; }
  /* The wheel sticks to the top while the panel scrolls up beneath it, so every tap shows on the wheel. It takes
     at most 55% of the screen's height, leaving room for the chips. */
  .hero-wheel { position: sticky; top: 0; z-index: 1; box-sizing: border-box; width: 100%; max-width: min(860px, 55vh); padding-block: 8px; background: var(--surface); justify-self: center; }
  .wheel-path, .wheel-next { align-items: center; }
  .path-steps, .chip-list { justify-content: center; }
  .wheel-definition, .say-it { margin-inline: auto; text-align: center; }
  .wheel-path .example-label { order: -1; }
  .wheel-path .wheel-definition { order: 1; }
  .wheel-path .say-it { order: 2; }
  .wheel-path .wheel-next { order: 3; }
}
@supports (height: 100svh) { @media (max-width: 900px) { .hero-wheel { max-width: min(860px, 55svh); } } }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
}
/* Keeps the three-step path on one line on a 390 px phone. */
@media (max-width: 480px) {
  .path-steps, .path-steps li { gap: 8px; }
  .path-word, .path-steps li + li::before { font-size: 17px; }
}