/* ============================================================
   Comprehend Reading — shared Reading Decoder stylesheet
   Extracted from the Hobbes & Locke reading (grades9_10),
   extended with media cards, section headings, key-idea boxes,
   Go Deeper sections, toolbar actions, and print rules.
   ============================================================ */
:root{
  --ink:#22303c;          /* body text */
  --navy:#1b3a5b;         /* headings */
  --sub:#5b6b78;          /* secondary text */
  --line:#e3e8ee;         /* borders */
  --who:#ffe28a;          /* WHO/WHAT highlight */
  --who-deep:#8a6d00;
  --do:#b9f0c6;           /* DO highlight */
  --do-deep:#1c6b3a;
  --vocab:#7c3aed;        /* vocabulary underline */
  --vocab-soft:#f3eefe;
  --flag:#b45309;         /* hard-paragraph flag */
  --flag-soft:#fff7ed;
  --card:#f7f9fb;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#ffffff; color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap{max-width:760px; margin:0 auto; padding:28px 18px 90px}

header h1{
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.85rem; line-height:1.2; margin:0 0 4px; color:var(--navy);
}
header .kicker{
  text-transform:uppercase; letter-spacing:.14em; font-size:.7rem;
  font-weight:700; color:var(--sub); margin-bottom:10px;
}
header .badge{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--navy); background:var(--card);
  border:1px solid var(--line); padding:4px 12px; border-radius:999px; margin-top:8px;
}
header .subtitle{font-size:.98rem; color:var(--sub); margin:8px 0 0}

/* ---- toggle legend / toolbar ---- */
.legend{
  position:sticky; top:0; z-index:40; 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(--line); margin-bottom:22px;
}
.chip{
  border:1.5px solid var(--line); background:#fff; color:var(--sub);
  font:inherit; font-size:.8rem; font-weight:700; padding:6px 14px;
  border-radius:999px; cursor:pointer; transition:all .15s ease;
}
.chip:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.chip[aria-pressed="true"].chip-who{background:var(--who); border-color:#e3c34e; color:var(--who-deep)}
.chip[aria-pressed="true"].chip-do{background:var(--do); border-color:#7fd39a; color:var(--do-deep)}
.chip[aria-pressed="true"].chip-vocab{background:var(--vocab-soft); border-color:#c9b3f5; color:var(--vocab)}
.legend .act{margin-left:auto; display:flex; gap:8px}
.legend .act .btn{margin-left:0}
.legend .hint{flex-basis:100%; font-size:.74rem; color:var(--sub); margin-top:-2px}

/* ---- passage ---- */
.para{margin-bottom:34px}
.pheading{
  font-family:Georgia, "Times New Roman", serif; font-weight:600;
  font-size:1.35rem; color:var(--navy); margin:0 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.pimgs{display:flex; gap:10px; margin:0 0 16px}
.pimgs img{width:100%; min-width:0; border-radius:10px; border:1px solid var(--line); display:block; height:auto}
.pimgs.two img{width:calc(50% - 5px)}
.ptext{
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.12rem; line-height:1.95; color:var(--ink);
}
.sent{cursor:pointer; border-radius:4px; transition:background .15s ease}
.sent:hover{background:#f2f5f8}
.sent.sel{background:#eaf1f7; box-shadow:0 0 0 2px #cfdeec}

.who,.do{border-radius:3px; padding:0 1px; transition:background .2s ease, box-shadow .2s ease}
body.show-who .who{background:var(--who); box-shadow:0 1px 0 #e3c34e}
body.show-do .do{background:var(--do); box-shadow:0 1px 0 #7fd39a}

.vocab{border-radius:2px}
body.show-vocab .vocab{
  border-bottom:2px dotted var(--vocab); cursor:help; padding-bottom:1px;
}
body.show-vocab .vocab.expr{border-bottom-style:dashed}

/* ---- media cards ---- */
.media-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:16px; margin:16px 0; text-align:center;
}
.media-card img, .media-card svg, .media-card video{
  width:100%; max-width:560px; height:auto; display:block; margin:0 auto; border-radius:8px;
}
.media-card .caption{margin-top:10px; font-size:.85rem; color:var(--sub); font-style:italic}
.wind-canvas{position:relative; width:100%; max-width:560px; margin:0 auto}
.wind-canvas canvas{width:100%; border-radius:8px; display:block}

/* ---- always-visible callout ---- */
.key-idea{
  background:var(--card); border-left:4px solid var(--navy);
  border-radius:0 10px 10px 0; padding:14px 16px; margin:14px 0;
  font-size:.95rem; line-height:1.7; color:var(--ink); text-align:left;
}
.key-idea strong{color:var(--navy)}

/* ---- go deeper ---- */
.go-deeper{margin:14px 0; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; text-align:left}
.go-deeper summary{
  padding:12px 16px; cursor:pointer; font-size:.85rem; font-weight:700;
  color:var(--navy); background:var(--card); list-style:none;
  display:flex; align-items:center; gap:8px;
}
.go-deeper summary::-webkit-details-marker{display:none}
.go-deeper summary::before{content:'🔬'; font-size:1rem}
.go-deeper summary::after{content:'▸'; margin-left:auto; transition:transform .2s}
.go-deeper[open] summary::after{transform:rotate(90deg)}
.go-deeper .deeper-content{
  padding:14px 18px; font-size:.92rem; line-height:1.75; color:var(--ink);
  border-top:1px solid var(--line);
}
.go-deeper .deeper-content p{margin:0 0 10px}
.go-deeper .deeper-content a{color:var(--navy); text-decoration:none; border-bottom:1px solid var(--navy)}

/* ---- paragraph footer ---- */
.pfoot{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
.ptype{
  font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--sub); background:#fff;
}
.ptype.hard{background:var(--flag-soft); border-color:#f1c48f; color:var(--flag)}
.ptype-note{font-size:.74rem; color:var(--sub)}
.btn{
  border:1.5px solid var(--line); background:#fff; color:var(--navy);
  font:inherit; font-size:.8rem; font-weight:700; padding:6px 14px;
  border-radius:8px; cursor:pointer; margin-left:auto;
}
.btn:hover{border-color:var(--navy)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}

/* ---- reveal cards ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-top:12px;
}
.card .label{
  font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sub); margin-bottom:6px;
}
.card .quote{
  font-family:Georgia, serif; font-size:.95rem; color:var(--sub);
  border-left:3px solid var(--line); padding-left:10px; margin-bottom:10px;
}
.card .prompt{font-size:.9rem; color:var(--ink); margin-bottom:10px}
.card .answer{font-size:1rem; line-height:1.6; color:var(--ink)}
.card .answer.mainidea{font-weight:700; color:var(--navy)}
.hidden{display:none}

/* ---- vocab tooltip ---- */
#tip{
  position:fixed; z-index:99; max-width:290px;
  background:var(--navy); color:#fff; padding:9px 13px; border-radius:9px;
  font-size:.85rem; 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}
#tip .kind{display:block; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-top:3px}

/* ---- footer ---- */
.reading-footer{
  text-align:center; padding-top:36px; margin-top:20px;
  border-top:1px solid var(--line); font-size:.85rem; color:var(--sub);
}
.reading-footer a{color:var(--navy)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}
@media (max-width:480px){
  .ptext{font-size:1.05rem; line-height:1.9}
  .btn{margin-left:0}
  .legend .act{margin-left:0; flex-basis:100%}
}

/* ---- print: flat reading only (no scaffolding, no Go Deeper) ---- */
@media print{
  body{background:#fff}
  .wrap{max-width:none; padding:0}
  .legend, #tip, .pfoot, .card, .go-deeper, .reading-footer{display:none !important}
  .sent{cursor:auto}
  .sent:hover, .sent.sel{background:none; box-shadow:none}
  body.show-who .who, body.show-do .do{background:none !important; box-shadow:none !important}
  body.show-vocab .vocab{border-bottom:none !important; cursor:auto; padding-bottom:0}
  .media-card{break-inside:avoid; border:none; padding:8px 0}
  .pheading{break-after:avoid}
}