/* ==========================================================================
   cost-of-ebooks.css  —  scoped styles for /research/cost-of-ebooks/ (OC-006)
   Interactive companion to Follow the Dollar. Warm-a11y palette, no framework.
   Every module degrades to readable content with JS off; color is never the
   only signal (labels + patterns accompany it). Respects data-nd-motion.
   ========================================================================== */

/* --ce-owned is a FIXED green used only as a bar fill behind white text, so it
   must read in both light and dark themes; owned *text* uses neutral tokens. */
.ce { --ce-owned:#3f7d52; --ce-rented:var(--rust); }

/* generic module card ---------------------------------------------------- */
.ce-card{
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  padding:1.25rem 1.25rem 1.4rem; margin:1.4rem 0;
}
.ce-card > h3{ margin:.1rem 0 .2rem; font-family:var(--serif); }
.ce-card .ce-sub{ margin:.1rem 0 1rem; color:var(--dim); font-size:.92rem; }

/* stat strip (intro) ----------------------------------------------------- */
.ce-stats{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.1rem 0 .4rem; }
.ce-stat{
  flex:1 1 160px; text-align:center; background:var(--card);
  border:1px solid var(--rule); border-radius:10px; padding:1.1rem .8rem;
}
.ce-stat b{ display:block; font-family:var(--mono); font-size:2.2rem; line-height:1;
  font-weight:700; color:var(--rust); }
.ce-stat.neutral b{ color:var(--ink); }
.ce-stat span{ display:block; margin-top:.5rem; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); font-weight:700; }

/* metaphor row ----------------------------------------------------------- */
.ce-metaphor{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.ce-meta-cell{ display:flex; gap:.7rem; align-items:flex-start; padding:.8rem;
  border:1px solid var(--rule); border-radius:8px; background:var(--bg); }
.ce-meta-cell h4{ margin:0 0 .2rem; font-size:.95rem; }
.ce-meta-cell p{ margin:0; font-size:.82rem; color:var(--dim); line-height:1.4; }
.ce-meta-ico{ flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--rule);
  background:var(--card); }
.ce-meta-ico svg{ width:24px; height:24px; }

/* range control ---------------------------------------------------------- */
.ce-control{ margin:0 0 1.2rem; }
.ce-control .ce-row{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:.45rem; }
.ce-control label{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:700; color:var(--dim); }
.ce-control output{ font-family:var(--mono); font-weight:700; font-size:1rem;
  color:var(--ink); background:var(--bg); border:1px solid var(--rule);
  border-radius:6px; padding:.15rem .55rem; }
.ce-control input[type=range]{ width:100%; accent-color:var(--rust); height:1.6rem; }
.ce-scale{ display:flex; justify-content:space-between; font-size:.68rem;
  color:var(--dim); margin-top:.15rem; }

/* result cards (calculator) --------------------------------------------- */
.ce-result{ display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem;
  border:1px solid var(--rule); border-left-width:5px; border-radius:8px;
  background:var(--bg); margin-top:.7rem; }
.ce-result.owned{ border-left-color:var(--ce-owned); }
.ce-result.rented{ border-left-color:var(--ce-rented); }
.ce-result .ce-lab{ flex:1; }
.ce-result .ce-lab .ce-name{ font-weight:700; font-size:.9rem; display:flex;
  align-items:center; gap:.4rem; }
.ce-result .ce-tag{ font-size:.64rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border:1px solid var(--rule); border-radius:999px;
  padding:.1rem .5rem; }
.ce-result.owned .ce-tag{ color:var(--dim); }
.ce-result.rented .ce-tag{ color:var(--ce-rented); }
.ce-result .ce-big{ font-family:var(--mono); font-size:1.9rem; font-weight:700;
  line-height:1; margin-top:.25rem; }
.ce-result .ce-big small{ font-size:.6rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--dim); margin-left:.35rem; }
.ce-verdict{ text-align:center; margin-top:.9rem; padding:.6rem; border-radius:8px;
  border:1px solid var(--rule); background:var(--card); font-size:.9rem; }
.ce-verdict b{ color:var(--rust); font-family:var(--mono); }

/* horizontal comparison bars -------------------------------------------- */
.ce-bars{ list-style:none; margin:0; padding:0; }
.ce-bars li{ margin:0 0 .7rem; }
.ce-bars .ce-blab{ display:flex; justify-content:space-between; gap:1rem;
  font-size:.82rem; margin-bottom:.2rem; }
.ce-bars .ce-blab .ce-terms{ color:var(--dim); font-size:.72rem; }
.ce-bar{ height:1.4rem; border-radius:0 4px 4px 0; background:var(--rust);
  min-width:2px; display:flex; align-items:center; justify-content:flex-end;
  padding-right:.4rem; color:#fff; font-family:var(--mono); font-size:.72rem;
  font-weight:700; }
.ce-bar.owned{ background:var(--ce-owned); }
.ce-bars li.is-consumer .ce-blab b::after{ content:" · owned"; color:var(--dim);
  font-weight:400; font-size:.72rem; }

/* receipt (where the money goes) ---------------------------------------- */
.ce-receipt{ max-width:22rem; margin:1rem auto 0; background:var(--bg);
  border:1px dashed var(--dim); border-radius:6px; padding:1.1rem 1.2rem;
  font-family:var(--mono); font-size:.82rem; }
.ce-receipt h4{ text-align:center; font-family:var(--mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.8rem; margin:0 0 .8rem; padding-bottom:.6rem;
  border-bottom:1px dashed var(--dim); }
.ce-receipt .ce-line{ display:flex; justify-content:space-between; padding:.28rem 0; }
.ce-receipt .ce-line .ce-share{ color:var(--dim); }
.ce-receipt .ce-total{ border-top:1px dashed var(--dim); margin-top:.5rem;
  padding-top:.5rem; font-weight:700; }
.ce-receipt .ce-foot{ margin-top:.7rem; padding-top:.6rem;
  border-top:1px dashed var(--dim); font-size:.66rem; color:var(--dim);
  text-align:center; font-family:var(--body); }

/* donut + budget bars ---------------------------------------------------- */
.ce-budget{ display:grid; grid-template-columns:150px 1fr; gap:1.2rem; align-items:center; }
.ce-donut{ width:150px; height:150px; }
.ce-budget .ce-bars li{ margin-bottom:.5rem; }
.ce-budget .ce-bar{ background:var(--dim); }
.ce-budget .ce-bar.digital{ background:var(--rust); }
.ce-impact{ margin-top:1rem; text-align:center; border:1px solid var(--rule);
  border-radius:8px; padding:.6rem; background:var(--bg); }
.ce-impact b{ text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; }
/* severity is carried by the word (Sustainable/Warning/Collapse); color is a
   theme-safe reinforcement, not the only signal. */
.ce-impact.lv-ok b{ color:var(--ink); }
.ce-impact.lv-warn b{ color:var(--rust); }
.ce-impact.lv-bad b{ color:var(--rust); }
.ce-impact.lv-ok{ border-color:var(--rule); }
.ce-impact.lv-warn{ border-color:var(--rust); }
.ce-impact.lv-bad{ border-color:var(--rust); border-width:2px; }
.ce-impact p{ margin:.2rem 0 0; font-size:.78rem; color:var(--dim); }

/* line chart ------------------------------------------------------------- */
.ce-chart-wrap{ position:relative; }
.ce-chart{ width:100%; height:auto; display:block; }
.ce-chart .ce-axis{ stroke:var(--rule); stroke-width:1; }
.ce-chart .ce-grid{ stroke:var(--rule); stroke-dasharray:3 3; stroke-width:1; }
.ce-chart .ce-area{ fill:var(--rust); fill-opacity:.10; }
.ce-chart .ce-line{ fill:none; stroke:var(--rust); stroke-width:2.5; }
.ce-chart .ce-covid{ stroke:var(--dim); stroke-dasharray:3 3; stroke-width:1; }
.ce-chart text{ font-family:var(--body); fill:var(--dim); font-size:11px; }
.ce-dot{ fill:#fff; stroke:var(--rust); stroke-width:2.5; cursor:pointer; }
.ce-dot:hover, .ce-dot:focus{ fill:var(--rust); outline:none; }
.ce-dot:focus-visible{ outline:2px solid var(--focus,var(--ink)); outline-offset:2px; }
.ce-tip{ position:absolute; z-index:5; max-width:15rem; background:#241d13;
  color:#f4ecdb; border-radius:6px; padding:.5rem .6rem; font-size:.76rem;
  line-height:1.35; pointer-events:none; transform:translate(-50%,-115%);
  box-shadow:0 6px 18px rgba(0,0,0,.25); }
.ce-tip[hidden]{ display:none; }
.ce-tip b{ color:#fff; display:block; font-family:var(--mono); }
.ce-tip .ce-ctx{ display:block; margin-top:.3rem; padding-top:.3rem;
  border-top:1px solid rgba(255,255,255,.2); color:#e7d9c3; font-size:.7rem; }

/* case files ------------------------------------------------------------- */
.ce-cases{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1rem; }
.ce-case{ border:1px solid var(--rule); border-radius:8px; padding:1rem;
  background:var(--bg); }
.ce-case h4{ margin:0; font-family:var(--serif); font-size:1.02rem; }
.ce-case .ce-file{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); font-weight:700; margin:.15rem 0 .6rem; }
.ce-case p{ margin:.4rem 0 0; font-size:.86rem; line-height:1.45; }

/* tabs (history) --------------------------------------------------------- */
.ce-tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--rule);
  margin-bottom:1rem; }
.ce-tabs button{ flex:1; padding:.7rem .5rem; border:1px solid transparent;
  border-bottom:none; background:none; font:inherit; font-weight:700; font-size:.86rem;
  color:var(--dim); border-radius:8px 8px 0 0; cursor:pointer; }
.ce-tabs button[aria-selected=true]{ background:var(--card); color:var(--ink);
  border-color:var(--rule); }
.ce-tabpanel[hidden]{ display:none; }

/* vertical timeline ------------------------------------------------------ */
.ce-timeline{ list-style:none; margin:.4rem 0 0; padding:0 0 0 1.4rem;
  border-left:2px solid var(--rule); }
.ce-timeline > li{ position:relative; padding:0 0 1.3rem .4rem; }
.ce-timeline > li::before{ content:""; position:absolute; left:calc(-1.4rem - 6px);
  top:.35rem; width:11px; height:11px; border-radius:50%; background:var(--card);
  border:2px solid var(--dim); }
.ce-timeline > li.key::before{ background:var(--rust); border-color:var(--rust); }
.ce-timeline .ce-yr{ font-family:var(--mono); font-weight:700; font-size:.78rem;
  color:var(--dim); }
.ce-timeline h4{ margin:.1rem 0 .2rem; font-size:.95rem; font-family:var(--serif); }
.ce-timeline p{ margin:0; font-size:.85rem; color:var(--dim); line-height:1.45; }
/* policy timeline uses <details> for expand */
.ce-timeline details > summary{ cursor:pointer; list-style:none; }
.ce-timeline details > summary::-webkit-details-marker{ display:none; }
.ce-timeline details[open] > summary .ce-more{ display:none; }
.ce-timeline .ce-more{ font-size:.72rem; color:var(--rust); font-weight:700; }
.ce-timeline .ce-tag-prog{ color:var(--ce-owned); }
.ce-timeline .ce-tag-set{ color:var(--rust); }

/* print action ----------------------------------------------------------- */
.ce-print-row{ text-align:center; margin:2rem 0 1rem; }
.ce-print-btn{ font:inherit; font-weight:700; font-size:.85rem; letter-spacing:.03em;
  border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  border-radius:999px; padding:.7rem 1.6rem; cursor:pointer; }
.ce-print-btn:hover{ background:var(--rust); border-color:var(--rust); }

/* faq / sources ---------------------------------------------------------- */
.ce-faq{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.ce-faq h4{ margin:0 0 .2rem; font-size:.9rem; }
.ce-faq p{ margin:0; font-size:.82rem; color:var(--dim); line-height:1.5; }
.ce-noscript{ border:1px solid var(--rust); background:var(--card);
  border-radius:8px; padding:.7rem 1rem; font-size:.85rem; }

/* responsive ------------------------------------------------------------- */
@media (max-width:640px){
  .ce-metaphor, .ce-cases, .ce-faq{ grid-template-columns:1fr; }
  .ce-budget{ grid-template-columns:1fr; justify-items:center; }
}

/* reduced motion: kill metaphor animation ------------------------------- */
html[data-nd-motion="reduce"] .ce-anim,
@media (prefers-reduced-motion:reduce){ .ce-anim{ animation:none !important; } }

/* print ------------------------------------------------------------------ */
@media print{
  .topbar, .ce-print-row, .nav-toggle, .ce-tabs{ display:none !important; }
  .ce-tabpanel[hidden]{ display:block !important; }
  .ce-card{ break-inside:avoid; border-color:#999; }
  .ce-tip{ display:none !important; }
  a[href]::after{ content:""; }
}