/* /comprehensible-input-spanish — explainer + "Is this text right for you?" tool (coverage.js).
   Uses only site.css tokens, so light and dark mode both work. Yellow (--marker) = words the reader marks. */

.narrow .eyebrow + h2 { margin-top: 0; }

/* ---------- head: jump links ---------- */
.ci-head h1 { max-width: 18em; }
.ci-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ci-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--on-slate-muted); border-radius: 999px; color: var(--on-slate); text-decoration: none; font-size: 15px; }
.ci-toc a:hover { background: rgba(252, 245, 231, 0.12); }
[id] { scroll-margin-top: 16px; }

/* ---------- 1 · meaning first ---------- */
.ci-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center; }
.ci-split .narrow { max-width: none; }
.ctx-card { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 26px 24px 22px; box-shadow: 0 24px 50px -36px rgba(30,42,51,.45); }
.ctx-es { color: var(--ink); }
.ctx-gap { background: var(--marker); color: #1E2A33; border-radius: 5px; padding: 0 5px; }
.ctx-arrow { width: 22px; height: 36px; display: block; margin: 12px 0 8px 6px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ctx-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--ink-soft); }
.ctx-steps li { padding-left: 18px; position: relative; }
.ctx-steps li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.ctx-reveal { margin: 16px 0 12px; }
.ctx-reveal p { margin: 0; }
.ctx-card figcaption { font-size: 15px; }

/* ---------- 2 · evidence ---------- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 28px 0 40px; }
.ev { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px 18px; }
.ev h3 { font-size: 19px; margin: 0 0 8px; }
.ev p { margin: 0; color: var(--ink-soft); font-size: 16px; }
.ev .ev-level { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 12.5px/1.2 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.meter { flex: none; }
.meter .on { fill: var(--ink); }
.meter .off { fill: none; stroke: var(--muted); stroke-width: 1; opacity: .6; }
.ci-takeaway { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--marker); border-radius: 14px; padding: 22px 24px; }
.ci-takeaway .q-big { font-size: 22px; margin-bottom: 10px; }
.ci-takeaway p:last-child { margin: 0; }
.ci-aside-h { margin-top: 36px; }

/* ---------- 3 · coverage pictures ---------- */
.cov-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 30px; }
.cov-panel { margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 20px 20px 16px; }
.cov-svg { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.cov-svg .k { fill: var(--muted); opacity: .38; }
.cov-svg .u { fill: var(--marker); }
.cov-panel figcaption { font-size: 15px; line-height: 1.45; }
.cov-pct { font: 700 28px/1 var(--display); display: inline-block; margin-right: 6px; vertical-align: -2px; }

/* ---------- 4 · the tool ---------- */
.ci-tool { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px; align-items: start; margin: 28px 0 8px; }
.ci-text-card { background: var(--card); border: 1px solid var(--rule); border-radius: 22px; overflow: clip; box-shadow: 0 24px 50px -36px rgba(30,42,51,.45); }
.ci-pic { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.ci-text-body { padding: 18px 24px 8px; }
.ci-text-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.ci-text-top .reader-sub { margin: 0; }
.ci-play { min-width: 104px; }
.ci-words .ci-p { color: var(--ink); font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.tk { white-space: nowrap; }
.cw { font: inherit; color: inherit; background: transparent; border: 0; margin: 0; padding: 8px 1px; min-height: 44px; min-width: 24px; display: inline-block; vertical-align: baseline; cursor: pointer; border-radius: 6px; line-height: 28px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.cw:hover { background: var(--tint); }
.cw:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.cw[aria-pressed="true"] { background: linear-gradient(transparent 22%, var(--marker) 22%, var(--marker) 80%, transparent 80%); color: #1E2A33; }
.cs.now .cw { text-decoration: underline 2px; text-decoration-color: var(--muted); text-underline-offset: 6px; }
.ci-kbd { font-size: 14px; margin: 6px 0 12px; }

.ci-panel { position: sticky; top: 20px; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 22px 22px 20px; }
.ci-panel .eyebrow { margin-bottom: 6px; }
.ci-pct { font: 700 64px/1 var(--display); letter-spacing: -0.02em; margin: 0 0 14px; color: var(--ink); }
.ci-pct-sign { font-size: 34px; margin-left: 2px; }
.ci-bar { margin: 0 0 6px; }
.ci-bar-track { position: relative; height: 14px; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule); overflow: hidden; }
.ci-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 999px; transition: width .25s ease; }
.ci-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--card); opacity: .9; }
.ci-bar-labels { position: relative; height: 20px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ci-bar-labels span { position: absolute; transform: translateX(-50%); }
.ci-bar-labels span:first-child { transform: none; }
.ci-counts { font-size: 15px; color: var(--ink-soft); margin: 10px 0 6px; }
.ci-marked { font-size: 15px; color: var(--muted); margin: 0 0 6px; }
.ci-marked-list { font-family: var(--story); color: var(--ink); }
.ci-verdict { border-left: 4px solid var(--rule); padding: 4px 0 4px 14px; margin: 14px 0 16px; }
.ci-verdict p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.ci-verdict .ci-verdict-h { font: 700 19px/1.25 var(--display); color: var(--ink); margin-bottom: 6px; }
[data-band="easy"] .ci-verdict, [data-band="learn"] .ci-verdict { border-left-color: var(--marker); }
[data-band="hard"] .ci-verdict, [data-band="tooHard"] .ci-verdict { border-left-color: var(--ink); }
.ci-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ci-en { margin-top: 24px; }
.ci-note { font-size: 15px; }

/* compact meter that stays in view while tapping on phones */
.ci-mini { display: none; }
@media (max-width: 880px) {
  .ci-tool { grid-template-columns: 1fr; gap: 20px; }
  .ci-panel { position: static; }
  .ci-mini { display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--rule); padding: 10px 16px 12px; font-size: 14px; color: var(--ink-soft); z-index: 2; }
  .ci-mini-pct { font: 700 20px/1 var(--display); color: var(--ink); min-width: 3.4em; }
  .ci-mini-bar { flex: 0 0 72px; height: 10px; border-radius: 999px; background: var(--tint); border: 1px solid var(--rule); overflow: hidden; position: relative; }
  .ci-mini-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .25s ease; }
  .ci-mini-label { flex: 1; min-width: 0; line-height: 1.25; }
  .ci-split { grid-template-columns: 1fr; gap: 32px; }
  .cov-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- 5 · routine ---------- */
.tl-fig { margin: 32px 0 8px; }
.tl-svg { width: 100%; max-width: 560px; height: auto; display: block; }
.tl-line { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 5; }
.tl-dot circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.tl-dot.big circle { fill: var(--marker); stroke: var(--ink); }
.tl-t { fill: var(--ink); font: 600 12.5px var(--ui); }
.tl-s { fill: var(--muted); font: 11.5px var(--ui); }
.tl-fig figcaption { font-size: 15px; margin-top: 4px; }
.ci-stories { padding-left: 1.2em; }
.ci-stories li { margin: 8px 0; }
.ci-stories a { font-weight: 600; color: var(--ink); }

/* ---------- keep going ---------- */
.kg-svg { width: 100%; aspect-ratio: 2 / 1; height: auto; border-radius: 10px; margin-bottom: 10px; display: block; }
.kg-svg .kg-bg { fill: var(--paper); }
.kg-svg .on { fill: var(--ink); }
.kg-svg .off { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.kg-svg .mark { fill: var(--marker); }
.kg-links .story-link { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 10px 10px 16px; }
.kg-links .story-link .es, .kg-links .story-link .en { padding: 0 4px; display: block; }

@media (max-width: 600px) {
  .ci-text-body { padding: 14px 14px 4px; }
  .ci-words .ci-p { font-size: 19px; }
  .ci-pct { font-size: 52px; }
  .ctx-card { padding: 22px 18px 18px; }
  .ci-toc a { padding: 0 13px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ci-bar-fill, .ci-mini-fill { transition: none; } }