/* GENERATED by tools/build-assess.mjs — the find-your-kind charts. Axis inks are dna-render's AXIS_COLOUR,
   kind colours are brand/palette.json kind.<slug>.body. Do not hand-edit; change the sources and rebuild. */

/* ── the ring of five ──────────────────────────────────────────────────────── */
.ik-ring { display: grid; grid-template-columns: minmax(min(10rem, 100%), 16rem) 1fr; gap: var(--sp-m); align-items: center; }
.ik-ring-dial { position: relative; aspect-ratio: 1; width: 100%; max-width: 16rem; }
.ik-ring-arc { position: absolute; inset: 0; }
.ik-ring-arc svg { width: 100%; height: 100%; display: block; }
.ik-ring-arc circle { fill: none; stroke: currentColor; stroke-width: 2.344; stroke-linecap: round; }
.ik-ring-arc circle:not(.ik-ring-track) { stroke-dasharray: calc(var(--d) * var(--c) / 9) var(--c); }
.ik-ring-arc .ik-ring-track { opacity: .14; }
.ik-ring-legend { display: grid; gap: var(--sp-2xs); }
.ik-ring-row { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); }
.ik-ring-swatch { width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; }
.ik-ring-axis { font-weight: 600; color: var(--ik-ink, #2a2418); text-transform: capitalize; }
.ik-ring-digit { font-weight: 700; color: var(--ik-ink, #2a2418); }
.ik-ring-ends { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--t-micro); color: var(--ik-ink-muted, #9a8c70); }
.ik-ring-energy { color: #7fa05f; --c: 289.027; }
.ik-ring-energy circle { r: 46px; }
.ik-ring-heart { color: #6a9cc9; --c: 238.761; }
.ik-ring-heart circle { r: 38px; }
.ik-ring-mind { color: #e8a35c; --c: 188.496; }
.ik-ring-mind circle { r: 30px; }
.ik-ring-courage { color: #e896a8; --c: 138.230; }
.ik-ring-courage circle { r: 22px; }
.ik-ring-roots { color: #9b8ec4; --c: 87.965; }
.ik-ring-roots circle { r: 14px; }

/* ── the mix ───────────────────────────────────────────────────────────────── */
.ik-mix { display: grid; grid-template-columns: minmax(min(10rem, 100%), 16rem) 1fr; gap: var(--sp-m); align-items: center; }
.ik-mix-dial { position: relative; aspect-ratio: 1; width: 100%; max-width: 16rem; border-radius: 50%; background: var(--ik-cream-soft, #fff9ee); border: 1px solid var(--ik-rule, rgba(42, 36, 24, 0.10)); }
.ik-mix-slot { position: absolute; inset: 0; }
.ik-mix-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ik-mix-slot line { stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; }
.ik-mix-list { display: grid; gap: .3rem; }
.ik-mix-row { display: grid; grid-template-columns: .8rem 5.5rem 1fr; gap: .6rem; align-items: center; font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); }
.ik-mix-swatch { width: .8rem; height: .8rem; border-radius: 50%; background: currentColor; }
.ik-mix-name { text-transform: capitalize; color: var(--ik-ink, #2a2418); font-weight: 600; }
.ik-mix-bar { width: 100%; height: .5rem; display: block; }
.ik-mix-bar line { stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.ik-mix-bar .ik-mix-track { opacity: .14; }
.ik-mix-slot-0 { transform: rotate(0deg); }
.ik-mix-slot-1 { transform: rotate(30deg); }
.ik-mix-slot-2 { transform: rotate(60deg); }
.ik-mix-slot-3 { transform: rotate(90deg); }
.ik-mix-slot-4 { transform: rotate(120deg); }
.ik-mix-slot-5 { transform: rotate(150deg); }
.ik-mix-slot-6 { transform: rotate(180deg); }
.ik-mix-slot-7 { transform: rotate(210deg); }
.ik-mix-slot-8 { transform: rotate(240deg); }
.ik-mix-slot-9 { transform: rotate(270deg); }
.ik-mix-slot-10 { transform: rotate(300deg); }
.ik-mix-slot-11 { transform: rotate(330deg); }
.ik-mix-wisp { color: #a894d4; }
.ik-mix-spark { color: #ef8b3c; }
.ik-mix-pebble { color: #7aa6d6; }
.ik-mix-sprout { color: #a8bf5e; }
.ik-mix-root { color: #a9764c; }
.ik-mix-breeze { color: #7fb0a6; }
.ik-mix-gleam { color: #f2ca4e; }
.ik-mix-orbit { color: #3a4560; }
.ik-mix-fawn { color: #cba077; }
.ik-mix-slate { color: #9aa3ad; }
.ik-mix-cocoa { color: #8c5a3c; }
.ik-mix-zest { color: #7fd065; }

/* ── the science: five Big Five bars ───────────────────────────────────────── */
.ik-sci-row { display: grid; grid-template-columns: 9rem 1fr auto; gap: .6rem; align-items: center; font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); }
.ik-sci-name { text-transform: capitalize; color: var(--ik-ink, #2a2418); font-weight: 600; }
.ik-sci-bar { width: 100%; height: .5rem; display: block; color: var(--ik-sage, #6e8868); }
.ik-sci-bar line { stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.ik-sci-bar .ik-sci-track { opacity: .18; }
.ik-sci-pct { font-variant-numeric: tabular-nums; }

/* ── the landing: start, the twelve ───────────────────────────────────────── */
.ik-assess-hero { gap: var(--sp-xs); text-align: center; }
.ik-assess-start { gap: var(--sp-xs); margin-top: var(--sp-s); width: 100%; }
.ik-assess-go { min-height: 48px; min-width: min(100%, 18rem); font-size: var(--t-lead); }
.ik-assess-status { font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); margin: 0; }
.ik-assess-resume, .ik-assess-privacy-link, .ik-share-privacy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; color: var(--ik-sage-deep, #4a5d44); font-weight: 600; text-decoration: none; }
.ik-assess-resume:hover, .ik-assess-privacy-link:hover, .ik-share-privacy:hover { text-decoration: underline; }
.ik-assess-privacy { max-width: 36rem; margin-top: var(--sp-s); }
.ik-assess-kinds { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(6.5rem, 100%), 1fr)); gap: var(--sp-s) !important; margin-top: var(--sp-s); }
.ik-assess-kind { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: var(--ik-ink, #2a2418); padding: .5rem .2rem; border-radius: var(--r-card); }
.ik-assess-kind:hover { background: var(--ik-cream-soft, #fff9ee); }
.ik-assess-kind-art svg { width: 5rem; height: auto; display: block; }
.ik-assess-kind-name { font-size: var(--t-small); font-weight: 600; }

/* ── the questions ─────────────────────────────────────────────────────────── */
.ik-q { gap: var(--sp-s); margin-top: var(--sp-s); }
.ik-q-page { gap: var(--sp-xs); }
.ik-q-count { white-space: nowrap; }
.ik-q-bar { width: 100%; }
.ik-q-options { margin-top: .3rem; }
.ik-q-title { text-align: left; }
.ik-q-nosession { gap: var(--sp-xs); align-items: flex-start; }
.ik-q-progress { gap: .4rem; }
.ik-q-progress-row { display: flex; justify-content: space-between; gap: var(--sp-xs); flex-wrap: wrap; font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); }
.ik-q-test { font-weight: 600; color: var(--ik-ink, #2a2418); }
.ik-q-bar-svg { width: 100%; height: .5rem; display: block; }
.ik-q-bar-track, .ik-q-bar-fill { stroke: var(--ik-coral, #e07856); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ik-q-bar-track { opacity: .18; }
.ik-q-card { gap: var(--sp-xs); background: #fff; border: 1px solid var(--ik-rule, rgba(42, 36, 24, 0.10)); border-radius: var(--r-card); padding: var(--sp-s); }
.ik-q-text { font-family: "Fraunces", Georgia, serif; font-size: var(--t-h2); line-height: 1.2; margin: 0 0 .4rem; color: var(--ik-ink, #2a2418); }
.ik-q-help { font-size: var(--t-small); color: var(--ik-ink-soft, #6b5c44); margin: 0; }
.ik-q-opt { min-height: 48px; width: 100%; text-align: left; justify-content: flex-start; padding: .7rem 1.1rem; border-radius: var(--r-pill);
            border: 1.5px solid var(--ik-sage-soft, #cdd9c4); background: var(--ik-cream, #fef6e8); color: var(--ik-ink, #2a2418); font: inherit; font-weight: 600; cursor: pointer; }
.ik-q-opt:hover { border-color: var(--ik-sage, #6e8868); background: var(--ik-sage-soft, #cdd9c4); }
.ik-q-opt:focus-visible { outline: 2px solid var(--ik-coral, #e07856); outline-offset: 2px; }
.ik-q-opt:active { transform: translateY(1px); }
.ik-q-back { min-height: 44px; align-self: flex-start; background: none; border: 0; color: var(--ik-ink-muted, #9a8c70); font: inherit; font-size: var(--t-small); cursor: pointer; padding: .4rem .2rem; }
.ik-q-back:hover { color: var(--ik-ink, #2a2418); }
.ik-q-saving { font-size: var(--t-small); color: var(--ik-ink-muted, #9a8c70); margin: 0; min-height: 48px; display: flex; align-items: center; }
.ik-q-error { color: var(--ik-coral-deep, #b85432); font-size: var(--t-small); margin: 0; }
.ik-q-done { gap: var(--sp-xs); text-align: center; padding: var(--sp-s) 0; }
.ik-q-reveal, .ik-q-go-link { min-height: 48px; }
.ik-q-go { align-items: center; }

/* ── the result ────────────────────────────────────────────────────────────── */
.ik-assess-hero-text { gap: .25rem; }
.ik-assess-portrait { margin-inline: auto; }
.ik-assess-name { text-align: left; }
.ik-assess-shown { font-size: var(--t-small); color: var(--ik-ink-muted, #9a8c70); margin: 0; }
.ik-assess-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 700; letter-spacing: .06em; color: var(--ik-sage-deep, #4a5d44); margin: .3rem 0; }
.ik-assess-line { margin: .4rem 0 0; text-align: left; }
.ik-assess-runner { font-style: italic; color: var(--ik-ink-soft, #6b5c44); margin: 0; font-size: var(--t-lead); text-align: center; }
.ik-assess-tail-band { width: 100%; padding-block: var(--sp-s) 0; }
.ik-assess-tail { gap: var(--sp-xs); }
.ik-assess-section { gap: var(--sp-xs); }
.ik-assess-badcode { gap: var(--sp-xs); align-items: flex-start; }
.ik-assess-notfound { color: var(--ik-ink-soft, #6b5c44); font-size: var(--t-small); margin: 0; text-align: center; }
.ik-assess-nomix { gap: var(--sp-xs); align-items: flex-start; }
.ik-assess-nomix-line { color: var(--ik-ink-muted, #9a8c70); margin: 0; }
.ik-assess-ringwrap { width: 100%; }
.ik-assess-result { width: 100%; }
.ik-share-body { gap: var(--sp-xs); }
.ik-assess-ctas { margin-top: var(--sp-s); }
.ik-share { gap: var(--sp-xs); }
.ik-share-url { user-select: all; -webkit-user-select: all; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--t-small);
                background: #fff; border: 1px solid var(--ik-rule, rgba(42, 36, 24, 0.10)); border-radius: var(--r-sm); padding: .7rem .9rem; margin: 0; overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; }
.ik-ring-words { gap: .1rem; min-width: 0; }
.ik-ring-line { justify-content: space-between; gap: .6rem; }
.ik-sci { gap: var(--sp-xs); }
.ik-sci-body { gap: var(--sp-xs); }
.ik-sci-rows { margin-top: var(--sp-xs); }

/* ── phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  .ik-ring, .ik-mix { grid-template-columns: 1fr; justify-items: center; }
  .ik-ring-legend, .ik-mix-list { width: 100%; }
  .ik-sci-row { grid-template-columns: 1fr; gap: .2rem; }
  .ik-sci-pct { display: none; }
  .ik-assess-name, .ik-assess-line { text-align: center; }
  .ik-assess-hero-text { align-items: center; text-align: center; }
}