/*
 * sls-ela-components.css — the component vocabulary the ELA 9A/9B lessons use.
 *
 * The vrschool-deepspace child theme styles the seven interaction widgets, the
 * hero, .sls-cando and .sls-standards-footer, and gives everything inside
 * .the-grind sane base typography. It does not style the blocks these courses
 * added: the licensed reading passage, the key-terms card, the assignment block
 * with its stage list and analytic rubric, and — in the teacher guides — the
 * protocol, look-fors table, exemplar and callout.
 *
 * Without this file those blocks render as unstyled semantic HTML on a dark
 * surface: readable, but a rubric table with no borders is not usable and a
 * reading passage that looks like body text loses the distinction the lesson
 * depends on.
 *
 * Everything is scoped under #grit-lesson-wrapper and uses the theme's own
 * variables, so it inherits the deep-space palette rather than fighting it. Load
 * AFTER deep-space-lab.css.
 *
 * Install: copy to the child theme's assets/css/ and enqueue with
 * tools/install_ela_components_snippet.php.
 */

#grit-lesson-wrapper {
  --ela-panel:   rgba(15, 23, 42, 0.72);
  --ela-panel-2: rgba(30, 41, 59, 0.60);
  --ela-line:    rgba(0, 242, 255, 0.18);
  --ela-line-mid: rgba(0, 242, 255, 0.32);
  --ela-ink:     #CBD5E1;
  --ela-ink-dim: #94A3B8;
  --ela-head:    #E0FBFF;
  --ela-amber:   #FBBF24;
  --ela-emerald: #34D399;
}

/* ── Reading passage ─────────────────────────────────────────────────────── */
/* The licence line rides with the passage rather than living only in a course
   credits block: a lesson can be printed or lifted into a district packet on its
   own, and the CC BY / public-domain notice has to survive that. */
#grit-lesson-wrapper .sls-reading-passage {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem 1rem;
  background: var(--ela-panel);
  border: 1px solid var(--ela-line);
  border-left: 3px solid var(--vr-cyan, #00F2FF);
  border-radius: 10px;
}
#grit-lesson-wrapper .sls-reading-passage > h2 {
  margin-top: 0;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}
#grit-lesson-wrapper .sls-reading-cite {
  font-size: 0.82rem;
  color: var(--ela-ink-dim) !important;
  margin: 0.2rem 0 0.6rem;
}
#grit-lesson-wrapper .sls-reading-note {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ela-ink-dim) !important;
  margin-bottom: 0.9rem;
}
#grit-lesson-wrapper .sls-passage blockquote {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 2px solid var(--ela-line-mid);
  font-size: 1.02rem;
  line-height: 1.75;
}
#grit-lesson-wrapper .sls-passage blockquote p { margin-bottom: 1rem; }
#grit-lesson-wrapper .sls-passage blockquote p:last-child { margin-bottom: 0; }

/* ── Key terms ───────────────────────────────────────────────────────────── */
#grit-lesson-wrapper .sls-key-terms {
  margin: 1.75rem 0;
  padding: 1.1rem 1.4rem;
  background: var(--ela-panel-2);
  border: 1px solid var(--ela-line);
  border-radius: 10px;
}
#grit-lesson-wrapper .sls-key-terms h3 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-cyan, #00F2FF) !important;
}
#grit-lesson-wrapper .sls-key-terms ul { margin: 0; padding-left: 1.1rem; }
#grit-lesson-wrapper .sls-key-terms li { margin-bottom: 0.45rem; }
#grit-lesson-wrapper .sls-key-terms strong { color: var(--ela-head) !important; }

/* ── Formative check intro ───────────────────────────────────────────────── */
#grit-lesson-wrapper .sls-check-intro {
  font-size: 0.92rem;
  color: var(--ela-ink-dim) !important;
  margin-bottom: 1.25rem;
}

/* ── Assignment block ────────────────────────────────────────────────────── */
#grit-lesson-wrapper .sls-assignment {
  margin: 2.25rem 0 1rem;
  padding: 1.35rem 1.6rem;
  background: var(--ela-panel);
  border: 1px solid var(--ela-line-mid);
  border-radius: 12px;
}
#grit-lesson-wrapper .sls-assignment > h2 {
  margin-top: 0;
  font-size: 1.2rem;
}
#grit-lesson-wrapper .sls-assignment h4 {
  margin: 1.4rem 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-cyan, #00F2FF) !important;
}
#grit-lesson-wrapper .sls-task-stages { margin: 0 0 0.5rem; padding-left: 1.3rem; }
#grit-lesson-wrapper .sls-task-stages li { margin-bottom: 0.7rem; }

/* ── Tables: rubrics, pacing, look-fors ──────────────────────────────────── */
/* One table treatment for every table these lessons emit. A rubric with no rules
   is a wall of text, and the teacher guides are largely tables. */
#grit-lesson-wrapper .sls-rubric {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0 1rem;
  font-size: 0.92rem;
}
#grit-lesson-wrapper .sls-rubric th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: rgba(0, 242, 255, 0.10);
  color: var(--ela-head) !important;
  border-bottom: 1px solid var(--ela-line-mid);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
#grit-lesson-wrapper .sls-rubric td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--ela-line);
  vertical-align: top;
  color: var(--ela-ink) !important;
}
#grit-lesson-wrapper .sls-rubric tr:last-child td { border-bottom: 0; }
#grit-lesson-wrapper .sls-rubric strong { color: var(--ela-head) !important; }
#grit-lesson-wrapper .sls-rubric code { font-size: 0.85em; }

/* Tables scroll rather than overflow on a phone. */
#grit-lesson-wrapper .sls-pd-table,
#grit-lesson-wrapper .sls-lookfors { overflow-x: auto; margin: 1.5rem 0; }
#grit-lesson-wrapper .sls-pd-table > h3,
#grit-lesson-wrapper .sls-lookfors > h3,
#grit-lesson-wrapper .sls-protocol > h3 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
}
#grit-lesson-wrapper .sls-table-note {
  font-size: 0.85rem;
  color: var(--ela-ink-dim) !important;
  margin-top: -0.4rem;
}

/* ── Teacher guide: protocol ─────────────────────────────────────────────── */
#grit-lesson-wrapper .sls-protocol {
  margin: 1.75rem 0;
  padding: 1.2rem 1.5rem;
  background: var(--ela-panel-2);
  border: 1px solid var(--ela-line);
  border-left: 3px solid var(--ela-emerald);
  border-radius: 10px;
}
#grit-lesson-wrapper .sls-protocol-why {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ela-ink-dim) !important;
  margin-bottom: 0.9rem;
}
#grit-lesson-wrapper .sls-protocol-steps { margin: 0; padding-left: 1.3rem; }
#grit-lesson-wrapper .sls-protocol-steps li { margin-bottom: 0.7rem; }

/* ── Teacher guide: exemplar ─────────────────────────────────────────────── */
/* The band label is the first thing a scorer needs, so it sits ahead of the
   heading and carries the colour weight. */
#grit-lesson-wrapper .sls-exemplar {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--ela-panel);
  border: 1px solid var(--ela-line);
  border-radius: 12px;
}
#grit-lesson-wrapper .sls-ex-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
#grit-lesson-wrapper .sls-ex-head h3 { margin: 0; font-size: 1.02rem; }
#grit-lesson-wrapper .sls-ex-level {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 100px;
  background: rgba(0, 242, 255, 0.12);
  border: 1px solid var(--ela-line-mid);
  color: var(--vr-cyan, #00F2FF);
}
#grit-lesson-wrapper .sls-ex-text {
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(2, 6, 23, 0.55);
  border-left: 2px solid var(--ela-line-mid);
  border-radius: 0 8px 8px 0;
  font-size: 0.97rem;
}
#grit-lesson-wrapper .sls-ex-text p:last-child { margin-bottom: 0; }
#grit-lesson-wrapper .sls-ex-commentary h4,
#grit-lesson-wrapper .sls-ex-feedback h4 {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ela-ink-dim) !important;
}
#grit-lesson-wrapper .sls-ex-feedback {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--ela-line);
}
#grit-lesson-wrapper .sls-ex-feedback h4 { color: var(--ela-amber) !important; }

/* ── Local knowledge slot (BIE track) ────────────────────────────────────── */
/* Styled to look deliberately unfinished, because it is. An empty slot that looks
   like a finished component reads as an omission; one that announces itself reads
   as a design, and tells the student who is supposed to fill it. */
#grit-lesson-wrapper .sls-local-slot {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(52, 211, 153, 0.06);
  border: 2px dashed var(--ela-emerald);
  border-radius: 12px;
}
#grit-lesson-wrapper .sls-slot-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ela-emerald) !important;
  margin-bottom: 0.5rem;
}
#grit-lesson-wrapper .sls-local-slot > h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: var(--ela-emerald) !important;
}
#grit-lesson-wrapper .sls-slot-what { margin-bottom: 0.9rem; }
#grit-lesson-wrapper .sls-slot-student {
  padding: 0.8rem 1rem;
  background: rgba(2, 6, 23, 0.5);
  border-left: 2px solid var(--ela-emerald);
  border-radius: 0 8px 8px 0;
}
#grit-lesson-wrapper .sls-slot-student p { margin: 0; }
#grit-lesson-wrapper .sls-slot-protocol {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(52, 211, 153, 0.35);
}
#grit-lesson-wrapper .sls-slot-protocol h4 {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ela-ink-dim) !important;
}
#grit-lesson-wrapper .sls-slot-who { font-size: 0.9rem; margin-bottom: 0.6rem; }
#grit-lesson-wrapper .sls-slot-protocol ol { margin: 0; padding-left: 1.3rem; }
#grit-lesson-wrapper .sls-slot-protocol li {
  margin-bottom: 0.5rem;
  font-size: 0.92rem;
}

/* ── Callouts ────────────────────────────────────────────────────────────── */
#grit-lesson-wrapper .sls-callout {
  margin: 1.75rem 0;
  padding: 1.1rem 1.4rem;
  background: var(--ela-panel-2);
  border: 1px solid var(--ela-line);
  border-left: 3px solid var(--vr-cyan, #00F2FF);
  border-radius: 10px;
}
#grit-lesson-wrapper .sls-callout > h3 { margin: 0 0 0.5rem; font-size: 1rem; }
#grit-lesson-wrapper .sls-callout p:last-child { margin-bottom: 0; }
#grit-lesson-wrapper .sls-callout-warning { border-left-color: var(--ela-amber); }
#grit-lesson-wrapper .sls-callout-warning > h3 { color: var(--ela-amber) !important; }

/* ── Teacher guide: supports line and downloads ──────────────────────────── */
#grit-lesson-wrapper .sls-pd-supports {
  margin: 0 0 1.5rem;
  padding: 0.6rem 1rem;
  background: rgba(0, 242, 255, 0.06);
  border-radius: 8px;
  font-size: 0.88rem;
}
#grit-lesson-wrapper .sls-pd-supports p { margin: 0; }
#grit-lesson-wrapper .sls-download {
  margin: 1.75rem 0;
  padding: 1rem 1.3rem;
  border: 1px dashed var(--ela-line-mid);
  border-radius: 10px;
}
#grit-lesson-wrapper .sls-download > h3 { margin: 0 0 0.4rem; font-size: 0.98rem; }
#grit-lesson-wrapper .sls-dl-note { font-size: 0.9rem; margin-bottom: 0.4rem; }
#grit-lesson-wrapper .sls-dl-link {
  display: inline-block;
  margin: 0.2rem 0 0.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  background: rgba(0, 242, 255, 0.12);
  border: 1px solid var(--ela-line-mid);
  color: var(--vr-cyan, #00F2FF) !important;
  font-weight: 600;
  text-decoration: none;
}
#grit-lesson-wrapper .sls-dl-link:hover,
#grit-lesson-wrapper .sls-dl-link:focus-visible {
  background: rgba(0, 242, 255, 0.2);
  border-color: var(--vr-cyan, #00F2FF);
}
#grit-lesson-wrapper .sls-dl-where {
  font-size: 0.82rem;
  color: var(--ela-ink-dim) !important;
  margin: 0;
}

/* ── Phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #grit-lesson-wrapper .sls-reading-passage,
  #grit-lesson-wrapper .sls-assignment,
  #grit-lesson-wrapper .sls-exemplar,
  #grit-lesson-wrapper .sls-protocol,
  #grit-lesson-wrapper .sls-callout,
  #grit-lesson-wrapper .sls-key-terms { padding: 0.9rem 1rem; }
  #grit-lesson-wrapper .sls-rubric { font-size: 0.85rem; }
  #grit-lesson-wrapper .sls-rubric th,
  #grit-lesson-wrapper .sls-rubric td { padding: 0.45rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  #grit-lesson-wrapper .sls-exemplar,
  #grit-lesson-wrapper .sls-callout { transition: none; }
}