/* ============================================================
   Comprehend Reading — shared scaffolding layer (polish tier)
   For article pages that keep their own design (fonts, palette,
   layout) but adopt the Reading Decoder's interaction quality:
   chip toggles, smart tooltip, key-idea reveals, copy/print.
   Works with the existing inline markup: .who / .does / .vtip
   (or .vocab with a nested .vocab-tip definition).
   All variables are prefixed --sc- to avoid page collisions.
   ============================================================ */
:root{
  --sc-navy:#1b3a5b;
  --sc-sub:#5b6b78;
  --sc-line:#e3e8ee;
  --sc-who:#ffe28a;
  --sc-who-deep:#8a6d00;
  --sc-do:#b9f0c6;
  --sc-do-deep:#1c6b3a;
  --sc-vocab:#7c3aed;
  --sc-vocab-soft:#f3eefe;
  --sc-card:#f7f9fb;
}

/* ---- sticky legend / toolbar ---- */
.legend{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96);
  backdrop-filter:blur(4px);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 0;
  border-bottom:1px solid var(--sc-line); margin-bottom:22px;
}
.legend .chip{
  border:1.5px solid var(--sc-line); background:#fff; color:var(--sc-sub);
  font:inherit; font-size:.8rem; font-weight:700; padding:6px 14px;
  border-radius:999px; cursor:pointer; transition:all .15s ease;
}
.legend .chip:focus-visible{outline:2px solid var(--sc-navy); outline-offset:2px}
.legend .chip[aria-pressed="true"].chip-who{background:var(--sc-who); border-color:#e3c34e; color:var(--sc-who-deep)}
.legend .chip[aria-pressed="true"].chip-do{background:var(--sc-do); border-color:#7fd39a; color:var(--sc-do-deep)}
.legend .chip[aria-pressed="true"].chip-vocab{background:var(--sc-vocab-soft); border-color:#c9b3f5; color:var(--sc-vocab)}
.legend .act{margin-left:auto; display:flex; gap:8px}
.legend .hint{flex-basis:100%; font-size:.74rem; color:var(--sc-sub); margin-top:-2px}
.sc-btn{
  border:1.5px solid var(--sc-line); background:#fff; color:var(--sc-navy);
  font:inherit; font-size:.8rem; font-weight:700; padding:6px 14px;
  border-radius:8px; cursor:pointer;
}
.sc-btn:hover{border-color:var(--sc-navy)}
.sc-btn:focus-visible{outline:2px solid var(--sc-navy); outline-offset:2px}

/* ---- highlights (decoder treatment, independent toggles) ---- */
.who, .does, .vtip, .vocab{border-radius:3px; padding:0 1px; transition:background .2s ease, box-shadow .2s ease, border-color .2s ease}
body.show-who .who{background:var(--sc-who); box-shadow:0 1px 0 #e3c34e}
body.show-do .does{background:var(--sc-do); box-shadow:0 1px 0 #7fd39a}
body.show-vocab .vtip,
body.show-vocab .vocab{
  border-bottom:2px dotted var(--sc-vocab); cursor:help; padding-bottom:1px;
}

/* ---- shared fixed tooltip ---- */
#tip{
  position:fixed; z-index:999; max-width:290px;
  background:var(--sc-navy); color:#fff; padding:9px 13px; border-radius:9px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:.85rem; font-weight:400; font-style:normal; line-height:1.5;
  box-shadow:0 6px 24px rgba(27,58,91,.28);
  pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .12s ease, transform .12s ease;
}
#tip.show{opacity:1; transform:translateY(0)}
#tip b{color:#ffe28a}

/* ---- key idea reveal (replaces hidden key-idea-toggle) ---- */
.sc-foot{display:flex; align-items:center; gap:10px; margin:14px 0 4px}
.sc-card{
  background:var(--sc-card); border:1px solid var(--sc-line); border-radius:12px;
  padding:14px 16px; margin-top:10px;
}
.sc-card .label{
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sc-sub); margin-bottom:6px;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.sc-card .answer{font-size:1rem; line-height:1.7; color:var(--sc-navy); font-weight:700}
.sc-hidden{display:none}

@media (prefers-reduced-motion: reduce){
  .legend .chip, .who, .does, .vtip, .vocab, #tip{transition:none !important}
}
@media (max-width:600px){
  .legend{padding:10px 0}
  .legend .act{margin-left:0; flex-basis:100%}
}

/* ---- print: flat reading only (no scaffolding, no Go Deeper) ---- */
@media print{
  .legend, #tip, .go-deeper, .sc-foot, .sc-card, .reading-footer, .scaffold-toggle{display:none !important}
  body.show-who .who, body.show-do .does{background:none !important; box-shadow:none !important}
  body.show-vocab .vtip, body.show-vocab .vocab{border-bottom:none !important; cursor:auto; padding-bottom:0}
  .media-card{break-inside:avoid; box-shadow:none; border:none; padding:8px 0}
  h2{break-after:avoid}
}