/* A readable, local evidence specimen in the established graphite palette. */
.result-explainer{--explain-ink:#edf1ef;--explain-muted:#a4aead;--explain-line:#ffffff17;--explain-accent:#bda6fa;--explain-warning:#ff95a7;color:var(--explain-ink)}
.explain-heading{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end;margin-bottom:32px}
.explain-heading h2{font-size:clamp(32px,3.6vw,52px);font-weight:400;letter-spacing:-1.3px;line-height:1.15;margin:0;text-wrap:balance}
.explain-heading h2 span{color:var(--explain-muted)}
.explain-heading>p{color:var(--explain-muted);font-size:15px;line-height:1.8;max-width:38ch;margin:0 0 3px}
.explain-selectors{display:flex;border-bottom:1px solid var(--explain-line);gap:30px;margin-bottom:26px}
.explain-selectors>button{position:relative;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--explain-muted);padding:15px 0 17px;display:flex;align-items:center;gap:9px;min-height:48px;font:inherit;font-size:14px;cursor:pointer;transition:color .16s ease,border-color .16s ease}
.explain-selectors>button[aria-pressed=true]{color:var(--explain-accent);border-bottom-color:var(--explain-accent)}
.explain-selectors>button:hover{color:var(--explain-ink)}
.explain-selectors>button:focus-visible{outline:2px solid var(--explain-accent);outline-offset:4px;border-radius:2px}
.explain-selector-mark{display:flex}.explain-selector-mark .icon{width:17px;height:17px}
.explain-workbench{display:grid;grid-template-columns:.88fr 1.12fr;background:#141a1d;border:1px solid var(--explain-line);border-radius:14px;overflow:hidden;min-height:320px}
.explain-source{padding:28px 32px;background:#0d1214;display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.explain-source-top{display:flex;gap:11px;align-items:center;min-width:0}
.explain-source-icon{color:var(--explain-accent);display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;background:#bda6fa11;border-radius:10px}
.explain-source-icon .icon{width:19px;height:19px}
.explain-source-top>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.explain-source-top strong{font-size:14px;font-weight:500}
.explain-source-top small{color:var(--explain-muted);font-size:11px}
.explain-example{margin-inline-start:auto;font-size:10px;color:var(--explain-muted);padding:4px 7px;border:1px solid var(--explain-line);border-radius:4px}
.explain-message{font-size:16px;line-height:1.85;margin:25px 0 22px;max-width:36ch;color:var(--explain-ink)}
.explain-message mark{background:transparent;color:inherit;box-shadow:inset 0 -.12em transparent;transition:color .2s,box-shadow .2s}
[data-explain-selected="0"] .explain-message mark{color:var(--explain-warning);box-shadow:inset 0 -.12em #ff95a722}
.explain-destination{display:flex;align-items:center;gap:10px;min-width:0;color:var(--explain-accent);font-size:13px;padding-block:11px;border-block:1px solid var(--explain-line)}
.explain-destination>.icon{width:17px;height:17px;flex:none}
.explain-destination bdi{overflow-wrap:anywhere;min-width:0;line-height:1.6}
.explain-destination bdi span{opacity:.7}
[data-explain-selected="0"] .explain-destination{color:var(--explain-warning)}
.explain-source-caption{font-size:11px;line-height:1.65;color:var(--explain-muted);margin:13px 0 0;max-width:38ch}
.explain-result{padding:28px 32px;border-inline-start:1px solid var(--explain-line);min-width:0}
.explain-result-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:25px}
.explain-result-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--explain-warning)}
.explain-result-status .icon{width:16px;height:16px}
.explain-result-top>small{font-size:10px;color:var(--explain-muted);flex:none}
.explain-response h3{font-size:23px;line-height:1.3;font-weight:500;letter-spacing:-.4px;margin:0 0 7px}
.explain-response-lead{font-size:13px;line-height:1.75;color:var(--explain-muted);margin:0 0 21px;max-width:48ch}
.explain-evidence-list{display:grid;gap:17px}
.explain-evidence-list>div{display:flex;gap:12px;align-items:flex-start}
.explain-evidence-list>div>.icon{width:17px;height:17px;flex:none;color:var(--explain-warning);margin-top:2px}
.explain-evidence-list strong,.explain-official strong{font-size:13px;font-weight:500;line-height:1.5}
.explain-evidence-list p,.explain-official p{font-size:12px;line-height:1.7;color:var(--explain-muted);margin:4px 0 0;max-width:47ch}
.explain-meaning>p{font-size:14px;line-height:1.85;margin:0 0 18px;max-width:51ch}
.explain-caution{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.75;color:#ffc0cb;border-block-start:1px solid #ff95a727;padding-top:13px}
.explain-caution>.icon{width:16px;height:16px;flex:none;margin-top:2px}
.explain-official{display:flex;gap:12px;align-items:flex-start}
.explain-official>.icon{width:21px;height:21px;flex:none;color:var(--explain-accent)}
.explain-next ol{margin:17px 0 0;padding-inline-start:20px;font-size:12px;line-height:1.8;color:var(--explain-muted)}
.explain-next li+li{margin-top:5px}.explain-next li::marker{color:var(--explain-accent)}
.explain-footnote{font-size:10px;line-height:1.7;color:var(--explain-muted);margin:13px 0 0}
@media(min-width:761px){.explain-workbench{min-height:332px}.explain-response{min-height:208px}}
@media(max-width:1000px){.explain-heading{gap:40px}.explain-source,.explain-result{padding:25px}.explain-result-top{gap:8px}.explain-result-top>small{display:none}.explain-source-caption{max-width:29ch}}
@media(max-width:760px){.explain-heading{grid-template-columns:1fr;gap:19px;margin-bottom:20px}.explain-heading h2{font-size:36px;letter-spacing:-1px}.explain-heading>p{font-size:14px;max-width:43ch}.explain-selectors{gap:20px;margin-bottom:20px;justify-content:space-between}.explain-selectors>button{font-size:12px;gap:6px;padding:13px 0;white-space:nowrap}.explain-selector-mark .icon{width:14px;height:14px}.explain-workbench{grid-template-columns:1fr;border-radius:12px}.explain-source{padding:23px}.explain-result{padding:23px;border-inline-start:0;border-block-start:1px solid var(--explain-line)}.explain-message{font-size:15px;margin-block:20px 17px;max-width:100%}.explain-source-caption{max-width:100%;font-size:10px;margin-top:10px}.explain-result-top{margin-bottom:20px}.explain-result-top>small{display:block}.explain-response h3{font-size:22px}.explain-response{min-height:235px}.explain-response-lead{font-size:12px;margin-bottom:18px}.explain-meaning>p{font-size:13px}.explain-footnote{font-size:10px}.explain-destination{font-size:12px}}
@media(max-width:350px){.explain-heading h2{font-size:31px}.explain-heading>p{font-size:13px}.explain-selectors{gap:10px}.explain-selectors>button{font-size:10px;gap:5px}.explain-selector-mark .icon{width:13px;height:13px}.explain-source,.explain-result{padding:20px}.explain-source-top strong{font-size:13px}.explain-example{font-size:9px}.explain-result-top>small{display:none}.explain-response{min-height:276px}.explain-message{font-size:14px}.explain-destination{font-size:11px}.explain-response h3{font-size:21px}.explain-response-lead{font-size:12px}}
@media(prefers-reduced-motion:reduce){.result-explainer *{transition:none!important}}
/* Compact enough to read as one specimen; phone controls keep readable type. */
@media(min-width:761px){.explain-heading{margin-bottom:24px}.explain-heading h2{font-size:clamp(32px,3.2vw,44px)}.explain-selectors{margin-bottom:20px}.explain-selectors>button{padding-block:13px 14px}.explain-workbench{min-height:320px}}
@media(max-width:420px){.explain-selectors{gap:12px}.explain-selectors>button{flex:1;min-width:0;font-size:12px;white-space:normal;line-height:1.4;text-align:start;justify-content:flex-start}.explain-selector-mark{display:none}}

/* Keep DOM, keyboard and visual sequence aligned with the active locale. */
.explain-selectors{flex-direction:row}
html[dir=rtl] .explain-selectors [data-value="2"] .explain-selector-mark>.icon{transform:scaleX(-1)}