/* Interactive encyclopedia widgets (progressive enhancement over reader markdown).
   SELF-CONTAINED theme tokens (--rw-*): the reader pages define NO CSS custom
   properties, so widgets must not rely on --accent/--card/etc. Light is default;
   dark via prefers-color-scheme + the toggle's :root[data-theme="dark"].
   Hydrated by js/reader-widgets.js; without JS the .rw block shows a plain fallback. */

.reader-body .rw{
  --rw-card:#fff; --rw-card2:#eef2f6; --rw-ink:#16181c; --rw-ink-soft:#3a4149;
  --rw-muted:#6b727b; --rw-line:#dce2e8; --rw-accent:#1b3cb2; --rw-brass:#9a7f2c;
  --rw-good:#3f7d68; --rw-bad:#b0402f;
  --rw-serif:"Prata",Georgia,serif; --rw-sans:"Golos Text",system-ui,sans-serif;
  margin:30px 0;border:1px solid var(--rw-line);border-radius:16px;
  background:var(--rw-card2);padding:clamp(16px,3vw,26px);
  font-family:var(--rw-sans);color:var(--rw-ink)}
@media(prefers-color-scheme:dark){
  .reader-body .rw{--rw-card:#20242c;--rw-card2:#181b20;--rw-ink:#eef1f4;--rw-ink-soft:#cdd5dd;
    --rw-muted:#99a1ab;--rw-line:#262b32;--rw-accent:#5470ff;--rw-brass:#c9a24e;
    --rw-good:#4f9e7f;--rw-bad:#e0774f}}
:root[data-theme="light"] .reader-body .rw{--rw-card:#fff;--rw-card2:#eef2f6;--rw-ink:#16181c;--rw-ink-soft:#3a4149;
  --rw-muted:#6b727b;--rw-line:#dce2e8;--rw-accent:#1b3cb2;--rw-brass:#9a7f2c;--rw-good:#3f7d68;--rw-bad:#b0402f}
:root[data-theme="dark"] .reader-body .rw{--rw-card:#20242c;--rw-card2:#181b20;--rw-ink:#eef1f4;--rw-ink-soft:#cdd5dd;
  --rw-muted:#99a1ab;--rw-line:#262b32;--rw-accent:#5470ff;--rw-brass:#c9a24e;--rw-good:#4f9e7f;--rw-bad:#e0774f}

.reader-body .rw-title{font-family:var(--rw-serif);font-size:1.15rem;color:var(--rw-ink);margin:0 0 4px}
.reader-body .rw-sub{color:var(--rw-muted);font-size:.9rem;margin:0 0 18px}
.reader-body .rw-fallback{color:var(--rw-muted);font-size:.9rem}
.reader-body .rw.ready .rw-fallback{display:none}

/* ---- hotspot (anatomy) ---- */
.rw-anat{display:grid;grid-template-columns:minmax(0,210px) 1fr;gap:clamp(16px,3vw,30px);align-items:center}
@media(max-width:560px){.rw-anat{grid-template-columns:1fr}}
.rw-anat svg{width:100%;height:auto;display:block}
.rw-anat .vessel{fill:var(--rw-card);stroke:var(--rw-ink);stroke-width:2.2;stroke-linejoin:round}
.rw-anat .foot,.rw-anat .rim{fill:none;stroke:var(--rw-ink);stroke-width:2.2}
.rw-hot{cursor:pointer}
.rw-hot circle{fill:var(--rw-accent);stroke:var(--rw-card2);stroke-width:2.5;transition:r .15s,fill .15s}
.rw-hot:hover circle,.rw-hot.on circle,.rw-hot:focus-visible circle{fill:var(--rw-brass);r:9}
.rw-hot:focus-visible{outline:none}
.rw-anat .name{font-family:var(--rw-serif);font-size:1.45rem;color:var(--rw-accent)}
.rw-anat .en{font-size:.8rem;color:var(--rw-muted);font-style:italic;margin-top:2px}
.rw-anat .desc{margin-top:10px;font-size:.94rem;line-height:1.6;color:var(--rw-ink-soft)}

/* ---- flip-cards (myths) ---- */
.rw-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px}
.rw-card{perspective:1200px;height:172px;border:none;background:none;padding:0;font:inherit;text-align:left;cursor:pointer}
.rw-card:focus-visible{outline:2px solid var(--rw-accent);outline-offset:3px;border-radius:14px}
.rw-card-in{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d}
.rw-card.flip .rw-card-in{transform:rotateY(180deg)}
.rw-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;padding:16px;display:flex;flex-direction:column;border:1px solid var(--rw-line)}
.rw-face .lbl{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rw-front{background:var(--rw-card)}
.rw-front .lbl{color:var(--rw-brass)}
.rw-front .q{font-family:var(--rw-serif);font-size:1.08rem;line-height:1.25;margin:auto 0 0;color:var(--rw-ink)}
.rw-back{background:var(--rw-accent);color:#fff;transform:rotateY(180deg)}
.rw-back .lbl{color:rgba(255,255,255,.72)}
.rw-back .a{font-size:.88rem;line-height:1.42;margin-top:8px;overflow:auto}
.rw-hint{font-size:.62rem;color:var(--rw-muted);margin-top:8px}
.rw-front .q+.rw-hint{color:var(--rw-muted)}
.rw-back .rw-hint{color:rgba(255,255,255,.6)}

/* ---- picker (care) ---- */
.rw-pickrow{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.rw-chip{font:inherit;font-size:.9rem;background:var(--rw-card);color:var(--rw-ink);border:1px solid var(--rw-line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.15s}
.rw-chip:hover{border-color:var(--rw-accent)}
.rw-chip[aria-pressed="true"]{background:var(--rw-accent);color:#fff;border-color:var(--rw-accent)}
.rw-chip:focus-visible{outline:2px solid var(--rw-accent);outline-offset:2px}
.rw-verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media(max-width:520px){.rw-verdicts{grid-template-columns:1fr}}
.rw-verdict{background:var(--rw-card);border:1px solid var(--rw-line);border-radius:12px;padding:13px}
.rw-vh{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;color:var(--rw-ink)}
.rw-mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.78rem;flex:none}
.rw-mark.y{background:var(--rw-good)} .rw-mark.n{background:var(--rw-bad)} .rw-mark.m{background:var(--rw-brass)}
.rw-vt{font-size:.8rem;color:var(--rw-muted);margin-top:7px;line-height:1.42}
.rw-empty{color:var(--rw-muted);font-size:.9rem}

/* ---- compare (materials) ---- */
.rw-seg{display:inline-flex;background:var(--rw-card);border:1px solid var(--rw-line);border-radius:999px;padding:4px;margin-bottom:20px;flex-wrap:wrap}
.rw-seg button{font:inherit;font-size:.87rem;border:none;background:none;color:var(--rw-muted);padding:8px 15px;border-radius:999px;cursor:pointer}
.rw-seg button[aria-pressed="true"]{background:var(--rw-accent);color:#fff}
.rw-seg button:focus-visible{outline:2px solid var(--rw-accent);outline-offset:2px}
.rw-cmp{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:center}
@media(max-width:520px){.rw-cmp{grid-template-columns:1fr}}
.rw-swatch{width:104px;height:104px;border-radius:14px;border:1px solid var(--rw-line);transition:background .3s}
.rw-meters{display:flex;flex-direction:column;gap:11px}
.rw-meter .ml{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:4px}
.rw-meter .ml b{font-weight:600;color:var(--rw-ink)} .rw-meter .ml span{color:var(--rw-muted)}
.rw-bar{height:8px;border-radius:99px;background:var(--rw-line);overflow:hidden}
.rw-bar i{display:block;height:100%;border-radius:99px;background:var(--rw-accent);width:0;transition:width .5s cubic-bezier(.4,.1,.2,1)}
.rw-cmpnote{margin-top:16px;font-size:.87rem;color:var(--rw-muted);line-height:1.5;border-top:1px solid var(--rw-line);padding-top:12px}

@media(prefers-reduced-motion:reduce){.rw *{transition:none!important}}