/* © 2026 Radha Prabhakaran. All rights reserved. See LICENSE. */
/* ChainReaction: Quick check and Full assessment (the 2026 redesign).
   Generated from the approved design preview, then maintained by hand.
   Everything is scoped under .assess so it cannot leak into other pages,
   and the preview's colour names are mapped onto the site tokens in styles.css. */

.assess, .answitch {
  --bg-2: var(--bg-recess); --card: var(--bg-card); --line: var(--border-soft); --line-strong: var(--border);
  --dim: var(--text-dim); --faint: var(--text-faint);
  --safe: var(--success); --safe-soft: var(--success-soft); --on-safe: var(--on-success);
  --s-initial_access: var(--stage-initial_access); --s-credential: var(--stage-credential); --s-exposure: var(--stage-exposure);
  --s-iot: var(--stage-iot); --s-behavior: var(--stage-behavior);
  --paper: var(--note-paper); --paper-ink: var(--note-ink); --paper-dim: var(--note-dim);
  --veil: var(--chrome-veil); --font-quirk: "Fraunces", var(--font-display);
}
.assess-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 44px 72px; }
.assess h1, .assess h2, .assess h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.assess p { margin: 0; }
.assess button { font: inherit; color: inherit; }
.answitch[hidden] { display: none !important; }
@media (max-width: 1080px) { .assess-wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 480px) { .assess-wrap { padding-left: 16px; padding-right: 16px; } }

.assess .an { display: none; }
body.analyst .assess .an { display: revert; }
body.analyst .assess .an-flex { display: flex; }
.assess .code { font: 500 11px var(--font-mono); color: var(--s-iot); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; white-space: nowrap; text-decoration: none; }
.assess a.code:hover { background: var(--bg-2); }
.assess .anline { font: 12px/1.5 var(--font-mono); color: var(--dim); border-left: 2px solid var(--s-iot); padding-left: 8px; margin-top: 4px; }
.assess .anline b { color: var(--s-iot); font-weight: 700; }
.assess .anline .code { margin-right: 2px; }
.assess .code.gap { color: var(--dim); border-style: dashed; }
body.analyst .assess .tacstrip { display: flex; }
.assess .tacstrip { flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font: 12px var(--font-mono); }
.assess .tacstrip .tac-lbl { color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; margin-right: 4px; }
.assess .tacstrip .tac { color: var(--s-iot); border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px; }
.assess .tacstrip .tac-arr { color: var(--dim); }
.answitch { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-size: 13px; color: var(--dim); }
.answitch .knob { width: 34px; height: 20px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-strong); position: relative; transition: background .2s; }
.answitch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); transition: transform .2s, background .2s; }
.answitch[aria-pressed="true"] { color: var(--text); border-color: var(--s-iot); }
.answitch[aria-pressed="true"] .knob { background: color-mix(in srgb, var(--s-iot) 30%, transparent); }
.answitch[aria-pressed="true"] .knob::after { transform: translateX(14px); background: var(--s-iot); }
.answitch small { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }
.assess .gstep[aria-current="step"] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.assess .gstep[aria-current="step"] span { background: var(--accent); color: var(--on-accent); }
.assess .kicker { font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.assess .intro { display: grid; gap: 8px; max-width: 700px; margin-bottom: 22px; }
.assess .intro h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 600; }
.assess .intro p { color: var(--dim); }
.assess .youget { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 22px; overflow: hidden; }
.assess .youget div { padding: 10px 14px; font-size: 14px; color: var(--dim); }
.assess .youget div + div { border-left: 1px solid var(--line); }
.assess .youget b { display: block; font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.assess .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.assess .a-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 18px; cursor: pointer; font-size: 15px; font-weight: 600; border: 1px solid var(--line-strong); background: none; color: var(--text); }
.assess .a-btn:hover:not(:disabled) { border-color: var(--accent); }
.assess .a-btn.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.assess .a-btn.solid:hover:not(:disabled) { filter: brightness(1.08); }
.assess .a-btn:disabled { opacity: .45; cursor: not-allowed; }
.assess .a-btn.safe { border-color: var(--safe); color: var(--safe); }
.assess .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.assess .stick { width: 70px; height: 96px; overflow: visible; }
.assess .stick .body { fill: none; stroke: var(--skin); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.assess .stick .head { fill: var(--bg); stroke: var(--skin); stroke-width: 3; }
.assess .stick .s-ink { fill: none; stroke: var(--skin); stroke-width: 2.2; stroke-linecap: round; }
.assess .stick .eye { fill: var(--skin); transition: r .15s; }
.assess .stick .blush { fill: var(--accent); opacity: .45; }
.assess .stick .extra { opacity: 0; transition: opacity .15s; }
.assess .stick .all, .assess .stick .headgrp, .assess .stick .eyes, .assess .stick .arm, .assess .stick .leg { transform-box: view-box; }
.assess .stick .all { transform-origin: 35px 90px; }
.assess .stick .headgrp { transform-origin: 35px 40px; transition: transform .25s ease; }
.assess .stick .eyes { transition: transform .25s ease; }
.assess .stick .arm { transform-origin: 35px 46px; transition: transform .25s ease, opacity .15s; }
.assess .stick .leg { transform-origin: 35px 64px; }
.assess .stick.idle .all { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.assess .stick.panic .arm { opacity: 0; }
.assess .stick.panic .parm, .assess .stick.panic .omouth, .assess .stick.panic .sweat, .assess .stick.panic .bang, .assess .stick.panic .wide { opacity: 1; }
.assess .stick.panic .smile, .assess .stick.panic .eyes { opacity: 0; }
.assess .stick.panic .headgrp { transform: rotate(9deg); }
.assess .stick.panic .all { animation: shake .12s linear infinite; }
@keyframes shake { 25% { transform: translateX(-1.6px); } 75% { transform: translateX(1.6px); } }
.assess .stick.happy .arm-l { transform: rotate(135deg); }
.assess .stick.happy .arm-r { transform: rotate(-135deg); }
.assess .stick.happy .all { animation: hop .45s ease 2; }
.assess .stick.happy .blush { opacity: .7; }
@keyframes hop { 50% { transform: translateY(-8px); } }
.assess .stick.walk .leg-l, .assess .stick.walk .arm-r { animation: swA .45s ease-in-out infinite alternate; }
.assess .stick.walk .leg-r, .assess .stick.walk .arm-l { animation: swB .45s ease-in-out infinite alternate; }
@keyframes swA { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes swB { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }
.assess .stick.fallen .all { transform: rotate(80deg) translate(30px, -10px); transition: transform .4s ease-in; }
.assess .stick.fallen .omouth { opacity: 1; }
.assess .stick.fallen .smile { opacity: 0; }
.assess .stick.hood .hoodie, .assess .stick.hood .mask { opacity: 1; }
.assess .stick.hood .blush, .assess .stick.hood .glint { opacity: 0; }
.assess .stick.hood .eye { fill: var(--bg); }
.assess .stick.sneak .all { animation: sneak 3.2s ease-in-out infinite; }
@keyframes sneak { 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
.assess .stick.gotcha .arm-l { transform: rotate(140deg); }
.assess .stick.gotcha .arm-r { transform: rotate(-140deg); }
.assess .stick.gotcha .all { animation: hop .4s ease 3; }
.assess .stick.gotcha .smile { transform: scale(1.25); transform-origin: 35px 30px; transform-box: view-box; }
.assess .stick.shrug .arm-l { transform: rotate(62deg); }
.assess .stick.shrug .arm-r { transform: rotate(-62deg); }
.assess .stick.shrug .headgrp { transform: rotate(-8deg); }
.assess .qfig .stick { width: 54px; height: 74px; flex: none; }
.assess .bubble { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; padding: 5px 9px; font-size: 12.5px; color: var(--text); max-width: 220px; }
.assess .bubble::after { content: ""; position: absolute; left: 18px; bottom: -6px; width: 10px; height: 10px; background: var(--card); border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
.assess .emap { width: 100%; height: auto; display: block; }
.assess .emap .road { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; }
.assess .emap .link { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset .6s ease; }
.assess .emap .link.is-on { stroke-dashoffset: 0; }
.assess .emap .area circle { fill: var(--card); stroke-width: 2.5; transition: fill .3s; }
.assess .emap .area.is-on circle { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.assess .emap .area text { font: 600 12px var(--font-sans); fill: var(--text); text-anchor: middle; }
.assess .emap .area text.n { font: 700 13px var(--font-mono); fill: var(--faint); }
.assess .emap .area.is-on text.n { fill: var(--accent); }
.assess .emap .you circle { fill: var(--bg); stroke: var(--text); stroke-width: 2.5; }
.assess .emap .you text { font: 800 12px var(--font-sans); fill: var(--text); text-anchor: middle; letter-spacing: .06em; }
.assess .emap .hop { stroke: var(--accent); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.assess .emap .hop.is-broken { stroke: var(--line-strong); stroke-dasharray: 6 8; opacity: .6; }
.assess .emap .wall { opacity: 0; transition: opacity .3s; }
.assess .emap .wall.is-on { opacity: 1; }
.assess .moments { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.assess .moment { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: var(--bg-2); text-align: left; cursor: pointer; min-width: 0; }
.assess .moment b { display: block; font: 500 11px var(--font-mono); color: var(--faint); }
.assess .moment span { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assess .moment[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.assess .moment.yes b { color: var(--accent); }
.assess .moment.no b { color: var(--safe); }
.assess .moment:disabled { cursor: default; opacity: .55; }
.assess .scene { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.assess .scene svg { width: 150px; height: 110px; display: block; }
.assess .scene .when { font: 500 12px var(--font-mono); color: var(--accent); letter-spacing: .04em; }
.assess .board { position: relative; border-radius: 12px; background-color: var(--cork); background-image: radial-gradient(var(--cork-dot) 1px, transparent 1.4px); background-size: 9px 9px; box-shadow: inset 0 0 0 6px var(--cork-rim); transition: height .2s; }
.assess .board svg.strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.assess .board .string { stroke: var(--string); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.assess .board .string.slack { stroke-dasharray: 3 7; opacity: .5; }
.assess .note { position: absolute; width: var(--nw, 128px); padding: 10px 10px 9px; background: var(--paper); color: var(--paper-ink); font-size: 12.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 6px 14px rgba(0,0,0,.28); transition: transform .3s, opacity .3s, box-shadow .2s; }
.assess .note::before { content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--string); box-shadow: 0 2px 3px rgba(0,0,0,.35); }
.assess .note small { display: block; font: 500 9.5px var(--font-mono); color: var(--paper-dim); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }
.assess .note.mine small { color: var(--string); }
.assess .note.goal { background: var(--paper-ink); color: var(--paper); }
.assess .note.goal small { color: var(--string); }
.assess .note.goal .code { color: var(--paper); opacity: 0.85; }
.assess .note.now { box-shadow: 0 0 0 3px var(--string), 0 8px 18px rgba(0,0,0,.35); }
.assess .note.pulled { opacity: .35; transform: translateY(18px) rotate(0deg) !important; }
.assess .note.pulled::before { background: var(--line-strong); }
.assess .note .an { font-size: 10px; margin-top: 4px; }
.assess .tstrip { display: none; margin: 16px 0 0; background: var(--term-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font: 13px/1.55 var(--font-mono); color: var(--text); }
body.analyst .assess .tstrip { display: block; }
.assess .ts-head { display: flex; justify-content: space-between; gap: 10px; font: 600 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-iot); margin-bottom: 6px; }
.assess .ts-head small { color: var(--faint); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.assess .ts-lines { display: grid; gap: 2px; min-height: 1.55em; }
.assess .ts-lines .ln { display: flex; gap: 10px; align-items: baseline; opacity: .55; }
.assess .ts-lines .ln:last-child { opacity: 1; }
.assess .ts-lines .pr { color: var(--safe); white-space: nowrap; }
.assess .ts-lines .pr.is-atk { color: var(--accent); }
.assess .ts-lines .txt { min-width: 0; overflow-wrap: anywhere; }
.assess .ts-lines .txt.warn { color: var(--accent); }
.assess .ts-lines .txt.is-ok { color: var(--safe); }
.assess .ts-lines .ln:last-child .txt::after { content: "\258C"; animation: blink 1s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
.assess .attcov { border-top: 1px solid var(--line); padding-top: 10px; }
.assess .attcov-h { display: block; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s-iot); }
.assess .attcov-sub { font-size: 12.5px; color: var(--faint); margin: 2px 0 8px; }
.assess .attcov table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.assess .attcov td { padding: 5px 6px 5px 0; border-top: 1px dashed var(--line); vertical-align: top; color: var(--dim); }
.assess .attcov td:first-child { white-space: nowrap; width: 1%; }
.assess .attcov td:last-child { color: var(--text); }
.assess .casebar { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 22px; overflow: hidden; }
.assess .casebar > * { padding: 10px 14px; min-width: 0; }
.assess .casebar > * + * { border-left: 1px solid var(--line); }
.assess .casebar .cb-label { display: grid; place-items: center; background: var(--bg-2); font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); writing-mode: horizontal-tb; }
.assess .casebar dt { font: 500 10.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.assess .casebar dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assess .casebar dd.hot { color: var(--accent); }
.assess .casebar dd.cool { color: var(--safe); }
.assess details.why-drawer { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--bg-2); }
.assess details.why-drawer summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--dim); }
.assess details.why-drawer[open] summary { margin-bottom: 10px; color: var(--text); }
.assess details.why-drawer > p { font-size: 14px; color: var(--dim); max-width: 75ch; }
.assess .pgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.assess .areacard { padding: 20px; display: grid; gap: 14px; align-content: start; }
.assess .atabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.assess .atab { border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: var(--bg-2); text-align: left; cursor: pointer; min-width: 0; border-top: 3px solid var(--tc); }
.assess .atab b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assess .atab span { font: 500 11px var(--font-mono); color: var(--faint); }
.assess .atab[aria-current="true"] { background: color-mix(in srgb, var(--tc) 16%, var(--card)); border-color: var(--tc); }
.assess .aname { font-size: 24px; margin-top: 2px; }
.assess .hlist { display: grid; gap: 6px; }
.assess .hrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; font-size: 14px; }
.assess .hrow:hover { border-color: var(--line-strong); }
.assess .hrow .box { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; color: transparent; }
.assess .hrow[aria-pressed="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, var(--card)); }
.assess .hrow[aria-pressed="true"] .box { background: var(--tc); border-color: var(--tc); color: var(--bg); }
.assess .emap .area.focus circle { stroke-width: 5; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { stroke-opacity: .45; } }
.assess .caption { padding: 14px 16px; margin-top: 12px; display: grid; gap: 4px; }
.assess .caption .tagline { font: 600 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.assess .caption .tagline.mine { color: var(--accent); }
.assess .caption p { font-size: 15px; }
.assess .note { cursor: pointer; }
.assess .note.sel { outline: 2px dashed var(--string); outline-offset: 3px; }
.assess .pullrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.assess .pullrow .lbl { font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.assess .pins { display: flex; gap: 6px; flex-wrap: wrap; }
.assess .pin { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-strong); background: var(--card); border-radius: 999px; padding: 5px 12px 5px 8px; cursor: pointer; font-size: 13px; }
.assess .pin::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--string); }
.assess .pin small { font: 500 11px var(--font-mono); color: var(--faint); }
.assess .pin[aria-pressed="true"] { border-color: var(--safe); background: var(--safe-soft); }
.assess .pin[aria-pressed="true"]::before { background: var(--line-strong); }
.assess .pullrow + .result { margin-top: 12px; }
.assess .suspect { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 14px; }
.assess .suspect svg { width: 64px; height: 64px; }
.assess .suspect .kicker { display: block; }
.assess .suspect h3 { font-size: 18px; margin: 2px 0; }
.assess .suspect p { font-size: 14px; color: var(--dim); }
.assess .chainbar { position: relative; padding: 16px 18px; margin-bottom: 14px; overflow: hidden; }
.assess .links { display: flex; flex-wrap: wrap; gap: 4px 0; align-items: flex-start; min-height: 40px; padding-right: 150px; }
.assess .link-w { display: grid; grid-template-rows: 28px 34px 28px; justify-items: center; align-items: center; margin-right: -12px; }
.assess .link-w .link-i { grid-row: 2; }
.assess .link-w small { grid-row: 3; align-self: start; }
.assess .link-w:nth-child(even) small { grid-row: 1; align-self: end; }
.assess .link-w small { font: 500 10.5px var(--font-mono); color: var(--faint); max-width: 84px; text-align: center; line-height: 1.2; transition: color .3s; }
.assess .link-w.snap small { color: var(--safe); text-decoration: line-through; }
.assess .links.loose .link-i { border-color: var(--line-strong); opacity: .45; transform: translateY(8px) rotate(var(--rot, 8deg)); }
.assess .link-i { width: 72px; height: 30px; border: 4px solid var(--accent); border-radius: 14px; margin-right: -12px; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .5s, border-color .3s; }
.assess .link-w:nth-child(even) .link-i { height: 20px; }
.assess .link-w.snap .link-i { border-color: var(--safe); border-style: dashed; opacity: .7; transform: translateY(14px) rotate(24deg); }
.assess .a-chain-meta { margin-top: 10px; font: 500 15px var(--font-sans); }
.assess .a-chain-meta b { color: var(--accent); }
.assess .a-chain-meta b.cool { color: var(--safe); }
.assess .stamp { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) rotate(-10deg); font: 700 24px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--safe); border: 3px solid var(--safe); border-radius: 8px; padding: 4px 14px; animation: stampIn .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes stampIn { from { transform: translateY(-50%) rotate(-10deg) scale(2.2); opacity: 0; } }
.assess .recover { padding: 18px 20px; display: grid; gap: 8px; max-width: 820px; }
.assess .recover h3 { font-size: 19px; }
.assess .recover ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.assess .recover li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; }
.assess .recover li b { flex-basis: 100%; font-weight: 600; }
.assess .recover li a { color: var(--safe); font: 500 13px var(--font-mono); }
.assess .recover li span { color: var(--dim); flex-basis: 100%; }
@media (max-width: 900px) {
.assess .pgrid { grid-template-columns: minmax(0, 1fr); }
.assess .casebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.assess .casebar .cb-label { grid-column: 1 / -1; }
.assess .casebar > * + * { border-left: 0; border-top: 1px solid var(--line); }
.assess .atabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.assess .stamp { position: static; transform: rotate(-6deg); display: inline-block; margin-top: 10px; }
}
.assess .qgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.assess .qleft { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.assess .qleft .qcard { min-height: 0; }
.assess .atk { flex: 1; padding: 16px 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-height: 190px; }
.assess .atk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.assess .atk-head h3 { font-size: 15px; }
.assess .atk-head span { font: 500 12px var(--font-mono); color: var(--accent); }
.assess .atk-scene { display: flex; align-items: flex-end; gap: 14px; min-height: 96px; }
.assess .atk-scene .phil { width: 64px; height: 88px; flex: none; overflow: visible; }
.assess .phil .ph-body, .assess .phil .ph-hood { fill: var(--hood); stroke: var(--hood-edge); stroke-width: 1.5; }
.assess .phil .ph-face { fill: #000; opacity: .78; }
.assess .phil .ph-eyes path { fill: var(--accent); }
.assess .phil .ph-eyes { filter: drop-shadow(0 0 3px var(--accent)); transform-box: view-box; transform-origin: 35px 35px; animation: glare 4.5s infinite; }
@keyframes glare { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.assess .phil .arms path { fill: none; stroke: var(--hood); stroke-width: 6; stroke-linecap: round; }
.assess .phil .arms circle { fill: var(--hood); }
.assess .phil .g-arms, .assess .phil .s-arms, .assess .phil .ph-smirk { opacity: 0; }
.assess .phil .ph-smirk { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.assess .phil .pall { transform-box: view-box; transform-origin: 35px 94px; }
.assess .phil.sneak .pall { animation: lurk 3.4s ease-in-out infinite; }
@keyframes lurk { 50% { transform: translateX(3px); } }
.assess .phil.gotcha .i-arms { opacity: 0; }
.assess .phil.gotcha .g-arms { opacity: 1; animation: rub .18s ease-in-out infinite alternate; }
.assess .phil.gotcha .ph-smirk { opacity: 1; }
.assess .phil.gotcha .ph-eyes { filter: drop-shadow(0 0 7px var(--accent)); }
@keyframes rub { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
.assess .phil.shrug .i-arms { opacity: 0; }
.assess .phil.shrug .s-arms { opacity: 1; }
.assess .phil.shrug .pall { transform: rotate(-6deg); }
.assess .phil.shrug .ph-eyes path { transform: scaleY(.45); transform-box: view-box; transform-origin: 35px 35px; }
.assess .desk { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.assess .clues { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-end; min-height: 34px; }
.assess .clue { font: 600 11.5px var(--font-sans); background: var(--paper); color: var(--paper-ink); padding: 5px 8px 4px; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.22); position: relative; }
.assess .clue::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--string); }
.assess .clue.new { animation: fly .6s cubic-bezier(.2,.8,.3,1.2); }
@keyframes fly { from { transform: translate(-60px, -30px) rotate(-18deg) scale(.6); opacity: 0; } }
.assess .desk-top { height: 6px; border-radius: 3px; background: var(--line-strong); margin-top: 6px; opacity: .6; }
.assess .atk-say { font-size: 13px; color: var(--dim); font-style: italic; }
.assess .qside { grid-template-rows: auto auto 1fr auto; }
.assess .qside .emap { align-self: center; }
.assess .qcard { padding: 22px; display: grid; gap: 14px; align-content: start; }
.assess .qprog { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.assess .qprog span { font: 600 13px var(--font-mono); color: var(--faint); }
.assess .dots { display: flex; gap: 6px; }
.assess .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-strong); }
.assess .dots i.yes { background: var(--accent); border-color: var(--accent); }
.assess .dots i.no { background: var(--safe); border-color: var(--safe); }
.assess .dots i.cur { outline: 2px solid var(--text); outline-offset: 2px; }
.assess .qq { font: 600 clamp(20px, 2.4vw, 26px)/1.25 var(--font-display); letter-spacing: -0.02em; min-height: 5em; }
.assess .qhint { color: var(--faint); font-size: 14px; }
.assess .yn { display: flex; gap: 12px; }
.assess .yn button { flex: 1; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--bg-2); cursor: pointer; font-size: 17px; font-weight: 700; }
.assess .yn button:hover { border-color: var(--text); }
.assess .yn button[aria-pressed="true"][data-a="yes"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.assess .yn button[aria-pressed="true"][data-a="no"] { border-color: var(--safe); background: var(--safe-soft); color: var(--safe); }
.assess .a-why { background: var(--bg-2); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--dim); animation: rise .3s ease; }
.assess .a-why.idle { animation: none; color: var(--faint); }
.assess #qWhy .a-why { min-height: 104px; }
.assess .qleft .scene { min-height: 168px; }
.assess .a-why b { color: var(--text); display: block; font-size: 12px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.assess .qside { padding: 18px; display: grid; gap: 10px; }
.assess .qside h3 { font-size: 17px; }
.assess .qside p { font-size: 13px; color: var(--faint); }
.assess .qfig { display: flex; align-items: flex-start; gap: 10px; min-height: 76px; }
.assess .qfig .bubble { margin-top: 2px; }
.assess .qfig .bubble::after { left: -6px; top: 11px; bottom: auto; border-right: 0; border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.assess .dwrap { padding: 22px; display: grid; gap: 16px; }
.assess .dtitle { font-size: clamp(22px, 2.6vw, 28px); }
.assess .dsub { color: var(--dim); max-width: 70ch; }
.assess .lane { position: relative; display: flex; align-items: flex-end; gap: 10px; padding: 26px 10px 14px; overflow-x: auto; border-bottom: 3px solid var(--line-strong); }
.assess .domino { flex: 0 0 auto; width: 92px; height: 150px; border-radius: 10px; background: var(--card); border: 2px solid var(--line-strong); display: flex; flex-direction: column; justify-content: space-between; padding: 8px; text-align: left; cursor: default; transform-origin: 100% 100%; transition: transform .38s cubic-bezier(.5,0,.75,0), opacity .3s; position: relative; }
.assess .domino .num { font: 700 12px var(--font-mono); color: var(--faint); }
.assess .domino .lbl { font-size: 13px; font-weight: 700; line-height: 1.25; }
.assess .domino .pip { width: 10px; height: 10px; border-radius: 50%; }
.assess .domino .an { font-size: 10px; }
.assess .domino.mine { border-color: var(--accent); cursor: pointer; }
.assess .domino.mine::before { content: "your habit"; position: absolute; top: -20px; left: 0; font: 700 10px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.assess .domino.mine:hover { transform: translateY(-4px); }
.assess .domino.final { border-style: dashed; }
.assess .domino.fallen { transform: rotate(72deg); }
.assess .domino.pulled { transform: translateY(-34px); opacity: .35; border-style: dashed; }
.assess .domino.hl { box-shadow: 0 0 0 3px var(--accent-soft); }
.assess .lane .stick { flex: 0 0 auto; }
.assess .dmsg { font-size: 15px; color: var(--dim); min-height: 1.6em; }
.assess .dmsg b { color: var(--text); }
.assess .dmsg.is-ok b { color: var(--safe); }
.assess details.story { border-top: 1px solid var(--line); padding-top: 10px; }
.assess details.story summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--dim); }
.assess .story ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; color: var(--dim); }
.assess .story li.hl { color: var(--text); }
.assess .take { padding: 22px; display: grid; gap: 12px; border-color: var(--safe); background: linear-gradient(var(--safe-soft), var(--safe-soft)), var(--card); }
.assess .take .kicker { color: var(--safe); }
.assess .take h3 { font-size: 22px; }
.assess .take p { color: var(--dim); }
.assess .take .act { color: var(--text); font-weight: 600; }
.assess .copied { font-size: 13px; color: var(--safe); }
.assess .tabpanel[hidden] { display: none !important; }
.assess .bigmap { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "acc expo cred" "beh you iot"; gap: 18px; }
.assess .bigmap svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.assess .bigmap svg.lines line { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 6; transition: stroke .3s; }
.assess .bigmap svg.lines line.is-on { stroke: var(--accent); stroke-dasharray: none; stroke-width: 3; }
.assess .zone { position: relative; z-index: 1; padding: 14px; border-radius: 14px; background: var(--card); border: 2px solid var(--line); display: grid; gap: 10px; align-content: start; transition: border-color .3s; min-width: 0; }
.assess .zone.is-on { border-color: var(--zc); }
.assess .zone h3 { font: 700 14px var(--font-sans); display: flex; justify-content: space-between; gap: 8px; }
.assess .zone h3 span { font: 600 12px var(--font-mono); color: var(--faint); }
.assess .zone .zwhy { font-size: 12px; color: var(--faint); }
.assess .tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.assess .tok { display: inline-flex; gap: 6px; align-items: center; text-align: left; font-size: 12.5px; line-height: 1.3; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
.assess .tok:hover { border-color: var(--line-strong); }
.assess .tok[aria-pressed="true"] { background: color-mix(in srgb, var(--zc) 20%, var(--card)); border-color: var(--zc); color: var(--text); }
.assess .tok[aria-pressed="true"]::before { content: "\2713"; color: var(--zc); font-weight: 700; }
.assess .tok .code { font-size: 10px; }
.assess .you { grid-area: you; z-index: 1; display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.assess .you .disc { width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--text); background: var(--bg); display: grid; place-items: center; font: 800 15px var(--font-sans); letter-spacing: .08em; }
.assess .you .live { font: 600 13px var(--font-mono); color: var(--dim); }
.assess .you .live b { color: var(--accent); }
.assess .z-acc { grid-area: acc; }
.assess .z-expo { grid-area: expo; }
.assess .z-cred { grid-area: cred; }
.assess .z-beh { grid-area: beh; }
.assess .z-iot { grid-area: iot; }
.assess .samples { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; font-size: 13px; color: var(--faint); }
.assess .samples button { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; cursor: pointer; }
.assess .samples button:hover { border-color: var(--accent); }
.assess .foot-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.assess .ptabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.assess .ptab { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 13px; max-width: 260px; }
.assess .ptab b { display: block; font-size: 14px; }
.assess .ptab small { color: var(--faint); font-family: var(--font-mono); font-size: 11px; }
.assess .ptab[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.assess .agrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.assess .amap { padding: 14px; position: relative; }
.assess .a-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.assess .a-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--dim); transition: border-color .2s, color .2s; }
.assess .a-steps li .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-mono); background: var(--bg-2); color: var(--faint); }
.assess .a-steps li.yours { color: var(--text); }
.assess .a-steps li.yours .n { background: var(--accent); color: var(--on-accent); }
.assess .a-steps li.now { border-color: var(--accent); }
.assess .a-steps li.final { border-style: dashed; }
.assess .a-steps .tagline { font: 700 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 2px; }
.assess .a-steps li.yours .tagline { color: var(--accent); }
.assess .sev { display: inline-flex; gap: 8px; align-items: center; font: 600 13px var(--font-mono); color: var(--dim); }
.assess .sev b { color: var(--accent); font-size: 15px; }
.assess .fixes { display: grid; gap: 10px; }
.assess .a-fix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.assess .a-fix:hover { border-color: var(--line-strong); }
.assess .a-fix[aria-pressed="true"] { border-color: var(--safe); background: linear-gradient(var(--safe-soft), var(--safe-soft)), var(--card); }
.assess .a-fix .dom { width: 22px; height: 36px; border-radius: 4px; border: 2px solid var(--accent); }
.assess .a-fix[aria-pressed="true"] .dom { border-style: dashed; border-color: var(--safe); transform: translateY(-6px); opacity: .6; }
.assess .a-fix b { display: block; font-size: 15px; }
.assess .a-fix small { color: var(--faint); font-size: 13px; }
.assess .a-fix .hits { text-align: right; font: 700 18px var(--font-mono); color: var(--accent); }
.assess .a-fix .hits small { display: block; font: 400 11px var(--font-mono); color: var(--faint); }
.assess .result { padding: 14px 16px; font-size: 15px; color: var(--dim); }
.assess .result b { color: var(--safe); }
.assess details.more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.assess details.more summary { cursor: pointer; font-weight: 600; color: var(--dim); font-size: 14px; }
.assess .brk { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; max-width: 420px; }
.assess .brk div { display: flex; justify-content: space-between; color: var(--dim); }
.assess .brk div b { font-family: var(--font-mono); color: var(--text); }
.assess .chars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.assess .char { padding: 18px; display: grid; gap: 10px; align-content: start; position: relative; }
.assess .char.top { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.assess .char.none { opacity: .6; }
.assess .char .badge { position: absolute; top: -11px; left: 16px; background: var(--accent); color: var(--on-accent); font: 700 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.assess .char svg { width: 90px; height: 90px; }
.assess .char h3 { font-size: 20px; }
.assess .char dl { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.assess .char dt { font: 700 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.assess .char dd { margin: 0; color: var(--dim); }
.assess .char dd.yourhabits { color: var(--text); }
.assess .chip { display: inline-block; font-size: 12px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; margin: 2px 4px 2px 0; }
.assess .plan { display: grid; gap: 14px; max-width: 820px; }
.assess .psum { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.assess .psum-line { font: 500 18px/1.45 var(--font-sans); color: var(--text); margin-top: 4px; letter-spacing: -0.01em; }
.assess .psum-line b { color: var(--accent); }
.assess .pmeter { display: flex; flex-wrap: wrap; gap: 5px; }
.assess .pmeter i { width: 18px; height: 26px; border-radius: 4px; background: var(--accent); transition: background .3s, transform .3s; }
.assess .pmeter i.closed { background: var(--safe-soft); outline: 1.5px dashed var(--safe); transform: translateY(-4px); }
.assess .pleft { font: 600 13px var(--font-mono); color: var(--dim); margin-top: 6px; }
.assess .pleft span { color: var(--accent); font-size: 16px; }
.assess .pleft.zero span { color: var(--safe); }
.assess .pitem { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; padding: 18px 20px; align-items: start; transition: opacity .2s; }
.assess .pnum { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 17px var(--font-mono); background: var(--accent-soft); color: var(--accent); }
.assess .pbody { display: grid; gap: 8px; min-width: 0; }
.assess .pbody h3 { font: 700 18px/1.3 var(--font-sans); }
.assess .pmeta { display: flex; flex-wrap: wrap; gap: 6px; }
.assess .pmeta span { font: 600 11.5px var(--font-mono); color: var(--dim); background: var(--bg-2); border-radius: 999px; padding: 2px 9px; }
.assess .pmeta span:first-child { color: var(--safe); }
.assess .phow { color: var(--dim); font-size: 14.5px; }
.assess .a-res { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; text-decoration: none; color: inherit; border: 1px solid var(--line); border-left: 3px solid var(--safe); border-radius: 8px; padding: 8px 12px; background: var(--bg-2); }
.assess .a-res:hover { border-color: var(--safe); }
.assess .a-res span { font: 700 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--safe); white-space: nowrap; }
.assess .a-res b { font-size: 14px; font-weight: 600; color: var(--text); }
.assess .a-res small { font: 12px var(--font-mono); color: var(--faint); white-space: nowrap; }
.assess .res-row { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.assess .pdone { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font: 600 11px var(--font-mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.assess .pdone input { width: 24px; height: 24px; accent-color: var(--safe); }
.assess .pitem.is-done { opacity: .6; }
.assess .pitem.is-done h3 { text-decoration: line-through; }
.assess .pitem.is-done .pnum { background: var(--safe-soft); color: var(--safe); }
.assess .pmore { padding: 14px 18px; }
.assess .pmore summary { cursor: pointer; font-weight: 600; color: var(--dim); }
.assess .pmore ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.assess .pmore li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.assess .pmore li small { color: var(--faint); font-family: var(--font-mono); font-size: 11.5px; }
.assess .pmore a { color: var(--safe); font: 12px var(--font-mono); white-space: nowrap; }
.assess .empty { padding: 26px; color: var(--dim); text-align: center; }
@media (max-width: 900px) {
.assess .qgrid, .assess .agrid { grid-template-columns: minmax(0, 1fr); }
.assess .moments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.assess .chars { grid-template-columns: minmax(0, 1fr); }
.assess .bigmap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "you" "expo" "cred" "acc" "beh" "iot"; }
.assess .bigmap svg.lines { display: none; }
.assess .you .disc { width: 84px; height: 84px; }
}
@media (max-width: 560px) {
.assess .youget { grid-template-columns: minmax(0, 1fr); }
.assess .youget div + div { border-left: 0; border-top: 1px solid var(--line); }
.answitch small { display: none; }
.assess .scene { grid-template-columns: minmax(0, 1fr); }
.assess .scene svg { width: 120px; height: 88px; }
.assess .domino { width: 78px; height: 132px; }
.assess .a-fix { grid-template-columns: auto minmax(0, 1fr); }
.assess .a-fix .hits { grid-column: 2; text-align: left; }
.assess .psum { grid-template-columns: minmax(0, 1fr); }
.assess .pitem { grid-template-columns: 36px minmax(0, 1fr); }
.assess .pdone { grid-column: 2; flex-direction: row; justify-self: start; }
.assess .a-res { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: the header action row gained the analyst switch, so let it swipe like the nav
   and shorten the switch label. */
@media (max-width: 720px) {
  .topbar-inner .topbar-actions { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .topbar-inner .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-inner .topbar-actions > * { flex: none; }
  .answitch { margin-left: 0; }
}
@media (max-width: 560px) {
  .answitch { font-size: 0; gap: 0; padding: 4px 10px 4px 4px; }
  .answitch::after { content: "Analyst"; font-size: 13px; margin-left: 8px; }
}
.assess .share-note { margin-top: 8px; font-size: 12px; }