/* Reuses Typically You's existing palette and typography. No replacement theme. */
.zm-shell { padding-top: 42px; padding-bottom: 72px; min-height: 65vh; }
.zm-shell h1 { font-size: clamp(30px, 5vw, 44px); margin: 10px 0 14px; }
.zm-shell h2 { font-size: clamp(23px, 3.5vw, 30px); line-height: 1.45; margin: 12px 0 24px; }
.zm-back { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.zm-meta, .zm-footnote { color: var(--muted); font-size: 14px; }
.zm-status { border-left: 3px solid var(--rule-2); background: var(--surface); padding: 13px 16px; font-size: 14px; margin: 24px 0; }
.zm-status.ready { border-color: var(--accent); }
.zm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.zm-actions .start { margin: 0; display: inline-flex; justify-content: center; align-items: center; }
.zm-button { padding: 12px 18px; border: 1px solid var(--rule-2); border-radius: 7px; background: var(--card); }
.zm-button:hover { border-color: var(--accent); }
.zm-button:disabled, .zm-rank-move:disabled { opacity: .4; cursor: default; }
.zm-button.start { background: var(--accent); color: #fff; }
.zm-button.start:not(:disabled):hover { background: var(--text); }
.zm-button.start:disabled { background: var(--surface); color: var(--muted); border-color: var(--rule-2); opacity: 1; }
.zm-answer-details > summary { cursor: pointer; font-size: 22px; font-weight: 600; padding: 14px 0; }
.zm-answer-toggle { margin-left: 16px; font-size: 14px; color: var(--accent); }
.zm-answer-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.zm-field { display: grid; gap: 7px; max-width: 320px; margin: 22px 0; font-weight: 600; }
.zm-room-consent { display:block; margin:20px 0; line-height:1.7; }
.zm-room-consent input { accent-color:var(--accent); margin-right:7px; }
.zm-room-entry { display:inline-block; margin:12px 0; }
.zm-room-dialog { width:min(480px,calc(100vw - 28px)); max-height:85vh; overflow:auto; border:1px solid var(--rule); border-radius:12px; padding:24px; background:var(--card); color:var(--text); }
.zm-room-dialog::backdrop { background:rgba(20,24,22,.45); }
.zm-field input, .zm-field select, .zm-catalog-search { width: 100%; padding: 12px 14px; background: var(--card); color: var(--text); border: 1px solid var(--rule-2); border-radius: 7px; font: inherit; }
.zm-notice { padding: 12px 15px; background: var(--accent-soft); border-radius: 6px; color: var(--accent); }
.zm-progress { display: flex; justify-content: space-between; gap: 15px; align-items: center; color: var(--muted); font-size: 14px; }
.zm-text-button { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.zm-shell progress { width: 100%; height: 5px; margin: 15px 0 26px; border: 0; accent-color: var(--accent); background: var(--rule); }
.zm-shell progress::-webkit-progress-bar { background: var(--rule); border-radius: 8px; }
.zm-shell progress::-webkit-progress-value { background: var(--accent); border-radius: 8px; }
.zm-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.zm-option.selected .k { background: var(--accent); border-color: var(--accent); color: white; }
.zm-question-image { width: 100%; height: auto; max-height: 72vh; object-fit: contain; background: white; margin: 18px 0 24px; }
.zm-rank-row { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--rule-2); border-radius: 7px; background: var(--card); }
.zm-rank-label { flex: 1; min-width: 0; }
.zm-rank-number { color: var(--accent); width: 20px; }
.zm-rank-move { font-size: 13px; padding: 8px 5px; white-space: nowrap; text-decoration: underline; }
.zm-history { border-top: 1px solid var(--rule); margin-top: 35px; padding-top: 18px; }
.zm-history-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.zm-history-row a { color: var(--accent); text-decoration: underline; }
.zm-type-code { color: var(--accent); font-size: 22px; letter-spacing: .06em; }
.zm-dimensions { display: grid; gap: 17px; margin: 28px 0; }
.zm-dimension-title { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.zm-dimension meter { width: 100%; height: 12px; margin-top: 5px; accent-color: var(--accent); }
.zm-result-section { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 30px; }
.zm-result-section p { white-space: pre-line; line-height: 1.9; }
.zm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.zm-tags span { padding: 4px 10px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 13px; }
.zm-report-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, auto); gap: 12px 18px; padding: 16px 0; }
.zm-report-rows dt, .zm-report-rows dd { margin: 0; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.zm-report-rows dd { text-align: right; }
.zm-report-item { padding: 18px 0; border-top: 1px solid var(--rule); }
.zm-report-item h3 { font-size: 19px; }
.zm-report-image { margin: 20px 0; }
.zm-report-image img { width: 100%; max-height: 480px; object-fit: contain; background: var(--card); }
.zm-report-image figcaption { color: var(--muted); font-size: 13px; margin-top: 7px; }
.zm-poles { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; }
.zm-metric-description { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.zm-catalog-search { max-width: 420px; margin: 20px 0 10px; }
.zm-category { margin-top: 34px; }
.zm-category h2 { font-size: 24px; margin-bottom: 15px; }
.zm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zm-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: 9px; }
.zm-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.zm-card strong { font-size: 18px; }
.zm-card span { font-size: 13px; color: var(--muted); }
.zm-card .ready { color: var(--accent); }
.zm-grid [hidden], .zm-category[hidden] { display: none; }
.zm-tool-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 25px 0; }
.zm-tool-fields .zm-field { margin: 0; max-width: none; min-width: 0; }
.zm-checkbox-field { align-content: start; }
.zm-checkbox-field input { width: 24px; height: 24px; accent-color: var(--accent); }
.zm-tool-group { margin: 28px 0 0; padding: 0; border: 0; border-top: 1px solid var(--rule); min-width: 0; }
.zm-tool-group legend { font-size: 20px; font-weight: 600; padding-right: 14px; }
.zm-field input[type="range"] { padding: 0; accent-color: var(--accent); border: 0; }
.zm-music-cover { display: block; width: min(100%, 320px); aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin: 28px auto; }
.zm-music-wave { display: flex; align-items: center; justify-content: center; gap: 7px; height: 88px; margin: 12px 0; }
.zm-music-wave span { width: 7px; border-radius: 4px; background: var(--accent); opacity: .65; }
.zm-audio { width: 100%; margin: 10px 0; }
.zm-tarot-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 12px; margin: 30px 0; }
.zm-tarot-card { margin: 0; padding: 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); }
.zm-tarot-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; }
.zm-tarot-card figcaption { font-size: 13px; margin-top: 10px; line-height: 1.6; }
.zm-tarot-reverse { transform: rotate(180deg); }
.zm-share-cover { display: block; max-width: min(100%, 300px); max-height: 200px; object-fit: contain; margin: 15px 0; }
.zm-notice:empty { display: none; }
.zm-report-rows dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 500px) { .zm-tool-fields { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .zm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zm-shell { padding-top: 26px; } }
@media (max-width: 440px) { .zm-grid { grid-template-columns: 1fr; } .zm-rank-row { gap: 6px; padding: 10px; } .zm-rank-move { font-size: 12px; } .zm-actions .start { flex: 1; } }
.zm-room-gender{display:flex;flex-wrap:wrap;gap:16px;border:1px solid var(--rule);padding:18px;border-radius:8px;margin:20px 0}.zm-room-gender .zm-field{display:flex;align-items:center;gap:8px;margin:0}.zm-room-gender input[type=radio]{width:auto;accent-color:var(--accent)}
.zm-bipolar{position:relative;height:10px;margin:10px 0;background:var(--rule);border-radius:8px}.zm-bipolar-fill{position:absolute;top:0;height:100%;background:var(--accent);border-radius:6px}.zm-bipolar-midpoint{position:absolute;left:50%;top:-3px;width:1px;height:16px;background:var(--muted)}.zm-bipolar-marker{position:absolute;top:-3px;width:5px;height:16px;transform:translateX(-50%);background:var(--accent);border:1px solid var(--card);border-radius:4px}
.zm-report-radar{max-width:480px;margin:20px auto;text-align:center}.zm-report-radar svg{display:block;width:100%;height:auto}.zm-radar-grid,.zm-radar-axis{fill:none;stroke:var(--rule-2);stroke-width:1}.zm-radar-axis{opacity:.7}.zm-radar-data{fill-opacity:.18;stroke-width:2.4}.zm-radar-label{font:17px sans-serif;fill:var(--muted)}.zm-report-radar figcaption{color:var(--muted);font-size:13px}
.zm-report-headline{display:flex;align-items:baseline;gap:18px;margin:24px 0;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.zm-report-headline>span{color:var(--muted);font-size:15px}.zm-report-headline>strong{font-size:46px;line-height:1;color:var(--accent)}
.zm-report-lead{margin:8px 0;color:var(--muted);line-height:1.7}
.zm-radar-reference{fill-opacity:.08;stroke-width:2.4}.zm-radar-value{font-size:15px}.zm-report-curve{margin:20px 0;text-align:center}.zm-report-curve svg{display:block;width:100%;height:auto}.zm-curve-data{stroke-width:2.5}.zm-curve-label,.zm-curve-value{font:18px sans-serif;fill:var(--muted)}.zm-report-curve figcaption{font-size:13px;color:var(--muted)}
.zm-spectrum,.zm-threshold-track{position:relative;height:10px;margin:12px 0;background:var(--rule);border-radius:6px}.zm-spectrum{display:flex}.zm-spectrum-band{height:100%}.zm-spectrum-band-0{background:#2f9d62;border-radius:6px 0 0 6px}.zm-spectrum-band-1{background:#d9a21b}.zm-spectrum-band-2{background:#d64c57;border-radius:0 6px 6px 0}.zm-spectrum-marker{position:absolute;top:-4px;width:5px;height:18px;background:var(--text);border:1px solid var(--card);border-radius:3px;transform:translateX(-50%)}.zm-spectrum-labels{display:flex;gap:10px;color:var(--muted);font-size:12px}.zm-spectrum-labels>span{flex:1;text-align:center}.zm-threshold-fill{display:block;height:100%;border-radius:6px}.zm-threshold-marker{position:absolute;top:-3px;height:16px;border-left:1px dashed #9da5b1}.zm-result-section.zm-safety-note{border:1px solid #c9654a;border-radius:8px;padding:20px;background:var(--card)}.zm-safety-note h2{font-size:22px}
.zm-history-refresh{margin:14px 0 20px;padding:12px 0;border-bottom:1px solid var(--rule)}.zm-history-refresh p{margin:4px 0;line-height:1.6}.zm-history-refresh-actions{display:flex;gap:16px;flex-wrap:wrap}.zm-history-refresh button:disabled{opacity:.5}.zm-history-refresh summary{margin-top:10px;cursor:pointer}
.zm-holland-map,.zm-disc-map{margin:24px 0 30px;width:100%}.zm-holland-map svg,.zm-disc-map svg{display:block;width:100%;height:auto}.zm-holland-map figcaption,.zm-disc-map figcaption{font-size:12px;text-align:center;margin-top:16px;color:var(--muted)}.zm-holland-ring{stroke:#c8c2b8;stroke-width:3}.zm-holland-label{fill:#fff;font-size:23px;font-weight:600}.zm-map-background{fill:#f0ede7;stroke:#d7d0c6;stroke-width:2}.zm-map-label{fill:#566369;font-size:22px}.zm-map-label tspan{font-size:18px}.zm-map-vector{stroke:#2f6f63;stroke-width:3}.zm-map-point{fill:#2f6f63;stroke:white;stroke-width:4}.zm-source-track,.zm-color-track{position:relative;height:8px;background:#e9e4dc;margin:12px 0;border-radius:5px}.zm-source-fill,.zm-color-fill{display:block;height:100%;background:#2f6f63;border-radius:5px}.zm-source-marker{position:absolute;top:-5px;width:3px;height:18px;background:#263b36;transform:translateX(-50%)}.zm-source-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);gap:2px}.zm-age-stages{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));text-align:center}.zm-age-stages .active{color:#2f6f63;font-weight:700;border-bottom:2px solid #2f6f63}
.zm-enneagram-map,.zm-two-row-bars{margin:24px 0 30px;width:100%}.zm-enneagram-map svg,.zm-two-row-bars svg{display:block;width:100%;height:auto}.zm-enneagram-map figcaption{font-size:12px;text-align:center;margin-top:12px}.zm-bar-label,.zm-bar-value{font-size:20px;fill:#263b36}.zm-column-bars{margin:24px 0}.zm-column-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 10px}.zm-column-item{min-width:0;text-align:center}.zm-column-stage{height:178px;position:relative;border-bottom:2px solid #20242e;background:repeating-linear-gradient(to top,transparent 0,transparent 37px,rgba(86,96,118,.12) 37px,rgba(86,96,118,.12) 38px)}.zm-column-fill{position:absolute;bottom:0;left:20%;width:60%;border-radius:4px 4px 0 0}.zm-column-score{position:absolute;left:0;right:0;font-size:18px;font-weight:700}.zm-column-name{font-size:15px;font-weight:650;margin-top:8px}.zm-column-english{font-size:10px;color:#687084;overflow-wrap:anywhere}.zm-report-icon{width:64px!important;max-width:64px!important;margin:12px 0}.zm-report-icon img{width:64px!important;height:auto}.zm-zoned-track{height:14px;background:none}.zm-source-zone{position:absolute;top:0;height:100%}.zm-source-zone-0{background:rgba(83,111,169,.11)}.zm-source-zone-1{background:rgba(189,151,42,.11)}.zm-source-zone-2{background:hsla(9,61%,59%,.11)}.zm-zoned-track .zm-source-fill{position:absolute;top:4px;height:6px}.zm-zoned-track .zm-source-marker{top:-3px;height:20px}@media(max-width:600px){.zm-column-stage{height:89px;background-size:auto 19px}.zm-column-grid{gap:16px 6px}.zm-column-score{font-size:14px}.zm-column-name{font-size:12px}.zm-column-english{font-size:8px}.zm-report-icon,.zm-report-icon img{width:48px!important;max-width:48px!important}}

.zm-pizza-chart{margin:24px auto;max-width:710px;width:100%;text-align:center}.zm-pizza-chart canvas{display:block;width:100%;height:auto;background:white}.zm-pizza-chart figcaption{font-size:13px;color:var(--muted);margin-top:10px}.zm-alignment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}.zm-alignment-cell{padding:12px 6px;border:1px solid var(--rule);border-radius:10px;text-align:center;min-width:0}.zm-alignment-cell.active{border:3px solid var(--alignment-color);background:color-mix(in srgb,var(--alignment-color) 12%,var(--card))}.zm-alignment-cell .zm-report-icon{margin:4px auto 10px}.zm-alignment-cell strong{font-size:14px;color:var(--alignment-color)}

.zm-radar-series{fill-opacity:.16;stroke-width:3}.zm-radar-legend{display:flex;justify-content:center;gap:28px;font-size:13px;font-weight:650}.zm-metric-short{font-size:13px;color:var(--muted)}.zm-report-headline{flex-wrap:wrap}.zm-report-headline>strong{overflow-wrap:anywhere}

.zm-report-pie{width:100%;max-width:480px;margin:22px auto}.zm-report-pie svg{display:block;width:100%;height:auto}.zm-pie-percent{font-size:15px;font-weight:650;fill:#2f3447}.zm-pie-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;font-size:13px;margin-top:-24px}.zm-pie-legend>span{display:flex;align-items:center;gap:7px}.zm-pie-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

.zm-curve-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:12px}.zm-curve-range{fill-opacity:.3}

.zm-relationship-gauge{margin:24px 0 34px}.zm-relation-top-labels,.zm-relation-bottom-labels{height:22px;position:relative;font-size:12px}.zm-relation-top-labels{margin-bottom:27px}.zm-relation-bottom-labels{margin-top:20px}.zm-relation-top-labels>span,.zm-relation-bottom-labels>span{position:absolute;white-space:nowrap;transform:translateX(-50%)}.zm-relation-top-labels .active,.zm-relation-bottom-labels .active{font-weight:700}.zm-relation-track{display:flex;position:relative;height:14px;border-radius:20px}.zm-relation-segment{width:20%;height:100%}.zm-relation-segment:first-child{border-radius:20px 0 0 20px}.zm-relation-segment:nth-child(5){border-radius:0 20px 20px 0}.zm-relation-segment.active{background-image:linear-gradient(#ffffff38,#ffffff38)}.zm-relation-pointer{position:absolute;top:-28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}.zm-relation-heart{font-size:19px;line-height:19px}.zm-relation-pointer-line{width:2px;height:15px}.zm-relation-pointer-tip{width:0;height:0;border:5px solid transparent;border-bottom:0}.zm-relation-ring-wrap{width:184px;height:184px;padding:8px;margin:25px auto;border-radius:50%;box-sizing:border-box}.zm-relation-ring{width:168px;height:168px;padding:11px;box-sizing:border-box;border-radius:50%}.zm-relation-ring-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--card);border-radius:50%}.zm-relation-ring-inner strong{font-size:46px;line-height:1}.zm-relation-total{border-top:1px solid #8c93a047;color:#8c93a0;font-size:20px;margin-top:8px;padding-top:8px}

.zm-source-report-card{padding:18px;border:1px solid var(--rule);border-radius:10px}
/* English personality player.
   Motion vocabulary shared with the main quiz player: one strong ease-out,
   durations under 300ms, transform/opacity only, and every movement dropped
   under prefers-reduced-motion (colour stays, so state is still legible). */
.en-six{
 --en-ease:cubic-bezier(.23,1,.32,1);
 --en-accent:var(--accent,#2D6A5B);
 --en-accent-soft:var(--accent-soft,#E2ECE8);
 max-width:880px;margin:30px auto 80px;padding:0 22px;color:#23364a;
}
.en-crumb{font-size:13px;margin-bottom:30px}
.en-intro{display:flex;gap:30px;align-items:center}
/* width/height are set here because the tag carries the file's intrinsic
   1254x1254 in its attributes, not the size it is drawn at. */
.en-intro img{border-radius:24px;flex:none;width:180px;height:180px}
.en-intro h1{font-size:clamp(26px,4vw,42px);line-height:1.15;margin:8px 0 14px}
.en-intro p{line-height:1.65;margin:8px 0}
.en-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#637969}
.en-muted{font-size:13px;color:#6b7480}
.en-note{border-left:3px solid #bccdbd;padding:10px 18px;margin:28px 0;color:#596571;font-size:14px;line-height:1.7}
.en-question{background:#fff;border:1px solid #e2e7e8;border-radius:22px;padding:28px;margin-top:22px}
.en-question h2{font-size:23px;line-height:1.5;margin:20px 0}

/* The outgoing copy during a question swap: pinned over the host, inert, and
   removed as soon as it has faded. Its buttons are spans carrying .en-choice. */
.en-question.en-ghost{position:absolute;margin:0;z-index:2;pointer-events:none;-webkit-user-select:none;user-select:none}

/* Progress: a div bar so the fill can animate, like the main player's .bar. */
.en-bar{height:8px;border-radius:99px;background:var(--sunken,#e7e4de);overflow:hidden;margin:4px 0 2px}
.en-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--en-accent);transition:width .28s ease}

/* "Working out your result": the deliberate pause between the last answer and
   the report. Same box as a question, so the swap keeps its shape and the bar
   keeps the one progress language the quiz already uses. */
.en-analysis h2{margin:0 0 20px}
.en-analysis .en-bar{margin:0}
.en-analysis .en-bar i{transition:width .9s var(--en-ease)}
.en-steps{list-style:none;margin:24px 0 4px;padding:0;display:grid;gap:15px}
.en-step{
 display:flex;align-items:flex-start;gap:12px;
 font-size:15px;line-height:1.45;color:var(--faint,#918c85);transition:color .3s ease;
}
.en-step-mark{
 flex:none;position:relative;box-sizing:border-box;margin-top:1px;
 width:18px;height:18px;border-radius:50%;border:1.5px solid var(--sunken,#e7e4de);
 transition:border-color .3s ease,background-color .3s ease;
}
/* Active: the step being worked on, with the only moving thing on the screen. */
.en-step[data-state="active"]{color:inherit}
.en-step[data-state="active"] .en-step-mark{border-color:var(--en-accent)}
.en-step[data-state="active"] .en-step-mark::after{
 content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
 border-radius:50%;background:var(--en-accent);animation:en-pulse 1.1s var(--en-ease) infinite;
}
/* Done: settled, still readable, no longer asking for attention. */
.en-step[data-state="done"]{color:var(--muted,#63605a)}
.en-step[data-state="done"] .en-step-mark{border-color:var(--en-accent);background:var(--en-accent-soft)}
.en-step[data-state="done"] .en-step-mark::after{
 content:"";position:absolute;left:5.5px;top:2px;width:4px;height:8px;
 border:solid var(--en-accent);border-width:0 2px 2px 0;transform:rotate(45deg);
}
@keyframes en-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
/* Announced, never drawn: the step list's own text never changes, so this is
   the single thing a screen reader hears tick over. */
.en-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.en-options{display:grid;gap:12px}
.en-option,.en-ghost .en-choice{
 position:relative;width:100%;text-align:left;
 background:#fafbf9;border:1px solid #d6dfdc;border-radius:12px;
 padding:17px 46px 17px 20px;font:inherit;line-height:1.6;color:inherit;cursor:pointer;
 transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .08s var(--en-ease);
}
/* Hover is a hint, selection is a statement — and hover only where a real
   pointer exists, so a tap does not leave a sticky highlight behind. */
@media (hover:hover) and (pointer:fine){
 .en-option:hover{background:#f4f7f4;border-color:#bacfc6}
}
.en-option:active{transform:scale(.985)}
.en-option[aria-pressed="true"],.en-ghost .en-choice[aria-pressed="true"]{
 background:var(--en-accent-soft);border-color:var(--en-accent);
 box-shadow:inset 0 0 0 1px var(--en-accent);
}
.en-option[aria-pressed="true"]::after,.en-ghost .en-choice[aria-pressed="true"]::after{
 content:"";position:absolute;right:19px;top:50%;width:6px;height:11px;margin-top:-8px;
 border:solid var(--en-accent);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.en-option:focus-visible,.en-six button:focus-visible,.en-six select:focus-visible{outline:3px solid #608673;outline-offset:3px}

.en-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;align-items:center}
.en-button{
 padding:13px 23px;border-radius:99px;border:0;background:var(--en-accent);color:white;
 font:inherit;text-align:center;cursor:pointer;
 transition:background-color .16s ease,color .16s ease,transform .09s var(--en-ease);
}
.en-secondary{background:var(--en-accent-soft);color:var(--en-accent)}
.en-button:disabled,.en-ghost .en-button[data-off]{background:var(--surface,#f1efeb);color:#9b9891;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
 .en-button:hover:not(:disabled){background:#245549}
 .en-secondary:hover:not(:disabled){background:#d6e3dc}
}
.en-button:active:not(:disabled){transform:scale(.97)}

/* The share row under the report. One step quieter than .en-button: an outline
   pill with a 16px monochrome mark, wrapping onto a second line on a phone
   rather than scrolling sideways. Copy link keeps the accent, so the row has
   exactly one thing pulling the eye. The native Share… chip stays [hidden]
   until the player finds navigator.share, so the display rule exempts it. */
.en-share{margin-top:30px;border-top:1px solid #e2e7e8;padding-top:22px}
.en-share-head{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7480;margin:0 0 12px}
.en-share-row{display:flex;flex-wrap:wrap;gap:10px}
.en-chip{
 display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
 border:1px solid #d6dfdc;border-radius:99px;background:#fff;color:inherit;
 padding:11px 19px;font:inherit;font-size:14.5px;text-decoration:none;cursor:pointer;
 transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.en-chip[hidden]{display:none}
.en-chip svg{width:16px;height:16px;flex:none}
.en-chip-go{background:var(--en-accent);border-color:var(--en-accent);color:#fff}
@media (hover:hover) and (pointer:fine){
 .en-chip:hover{border-color:var(--en-accent);color:var(--en-accent)}
 .en-chip-go:hover{background:#245549;border-color:#245549;color:#fff}
}
@media (prefers-reduced-motion:reduce){
 .en-chip{transition-property:background-color,border-color,color}
}

.en-six select{padding:12px;font:inherit;min-width:180px;margin:12px}
.en-six progress{width:100%;accent-color:#608673;height:8px}
.en-six .zm-result-section{line-height:1.8}
.en-six .zm-result-section h3{line-height:1.4}
.en-six .zm-result-section img{max-height:200px;object-fit:contain}
.en-error{color:#8b3b32}
.en-six .zm-report-headline{margin:24px 0}
.en-six .zm-radar text{font-size:10px}
.en-result-hero{display:flex;align-items:center;gap:20px}
.en-result-hero img{border-radius:20px;width:110px;height:110px}
/* The type's own character: a 200px transparent PNG, so it gets breathing room inside a rounded
   square painted like the covers — cream ground, a blue and a pink blob in the lower corners. */
.en-result-hero.en-type-art img{width:168px;height:168px;padding:14px;border-radius:24px;object-fit:contain;border:1px solid #efe1d6;
 background:radial-gradient(circle at 18% 108%,#c4d0e7 0 30%,transparent 31%),radial-gradient(circle at 104% 96%,#f4c9c6 0 24%,transparent 25%),#fbeee7}
.en-save-note{font-size:12px;color:#6b7480}
.en-preview{margin-top:44px;border-top:1px solid #e2e7e8;padding-top:26px}
.en-preview h2{font-size:21px;margin:0 0 6px}
.en-preview summary{cursor:pointer;font-weight:600;color:var(--en-accent);margin-top:14px;padding:6px 0}
.en-preview ol{padding-left:1.5em;line-height:1.65}
.en-preview ol>li{margin:16px 0}
.en-preview ol>li p{margin:0 0 6px}
.en-preview ul{margin:0;padding-left:1.1em;color:#596571;font-size:14.5px;line-height:1.6}

@media(max-width:540px){
 .en-intro{align-items:flex-start;gap:16px}
 .en-intro img{width:90px;height:90px}
 .en-question{padding:20px}
 .en-intro h1{font-size:26px}
 .en-intro .en-eyebrow{display:none}
 .en-six{padding:0 16px}
 .en-option,.en-ghost .en-choice{padding:14px 40px 14px 16px}
 .en-result-hero.en-type-art img{width:128px;height:128px;padding:10px}
 .en-six .zm-radar{overflow:visible}
}

/* Fewer and gentler, not none: colour still carries the state change, only the
   movement goes. The JS pops and the box swap check the same media query. */
@media (prefers-reduced-motion:reduce){
 .en-option,.en-ghost .en-choice{transition-property:background-color,border-color,box-shadow}
 .en-button{transition-property:background-color,color}
 .en-option:active,.en-button:active:not(:disabled){transform:none}
 .en-bar i,.en-analysis .en-bar i{transition:none}
 /* The analysis still takes its full time and still ticks through its four
    steps — only the pulse and the sliding fill go. */
 .en-step,.en-step-mark{transition:none}
 .en-step[data-state="active"] .en-step-mark::after{animation:none}
}