/* Embedded unit-report preview (variants C + D) — a cross-section of the
   app's real unit report (src/components/teacher/unit-report/), faithful to
   its two-material rule: MACHINE (mono labels, status pills, typed marks
   that get counted) vs PAPER (body prose, handwritten student words).
   Tokens beyond styles.css are defined in each variant's scoped :root. */

.report-band .band-inner {
  max-width: 920px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* the mono strip that frames the artifact as an exhibit */
.specimen-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-mustard);
  margin-bottom: 14px;
}
.specimen-bar .quiet { color: rgba(244, 241, 232, 0.6); }
.specimen-caption {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.6);
  margin-top: 14px;
  max-width: 70ch;
}

/* ---- the report sheet itself: solid paper, no grid — the document
   is the one place on the page where nothing competes with the text ---- */
.report {
  position: relative;
  background: var(--fs-card);
  color: var(--fs-ink);
  border: 1px solid var(--fs-edge);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 40px -12px rgba(0, 0, 0, 0.5);
  padding: clamp(20px, 3.6vw, 38px);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
}
/* tape swatch, same gesture as the wordmark/signup card */
.report::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 42px;
  width: 84px;
  height: 20px;
  background: rgba(217, 162, 59, 0.4);
  transform: rotate(-2deg);
  pointer-events: none;
}

/* ---- header ---- */
.rp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.rp-microlabel {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin-bottom: 6px;
}
.rp-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.7vw, 1.8rem);
  line-height: 1.15;
  margin-bottom: 6px;
}
.rp-sub {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
}
.rp-stamp {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--fs-card);
  background: var(--fs-olive);
  border-radius: 4px;
  padding: 5px 10px;
  transform: rotate(2deg);
}

/* the machine overview line — the unit at a glance */
.rp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
  border-top: 1px dashed var(--fs-hair);
  border-bottom: 1px dashed var(--fs-hair);
  padding: 9px 0;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.rp-stats b { color: var(--fs-olive); font-weight: 700; }

/* the brief — a paper card sitting directly above the map it produced */
.rp-brief {
  position: relative;
  background: var(--fs-paper, #fbf9f1);
  border: 1px solid var(--fs-hair);
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(38, 36, 31, 0.1);
  padding: 14px 18px 15px;
  max-width: 620px;
  transform: rotate(-0.4deg);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.rp-brief .rp-microlabel { color: var(--fs-teal); margin-bottom: 4px; }
.rp-brief p {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
}

/* ---- section scaffolding (mirrors .fs-microlabel + .fs-rule) ---- */
.rp-section { margin-bottom: clamp(26px, 4vw, 38px); }
.rp-section:last-child { margin-bottom: 0; }
.rp-sechead {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.rp-sechead .tag {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
  white-space: nowrap;
}
.rp-sechead .rule { flex: 1; border-top: 1px dashed rgba(38, 36, 31, 0.3); }
.rp-sechead .note {
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  white-space: nowrap;
}

/* handwritten material — the student's own words (Caveat: hand-made
   but built to be read; sized up because script needs the room) */
.rp-hand {
  font-family: var(--f-hand);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--fs-pencil, #3a3733);
}

/* ---- process map: a left→right timeline of typed actions ---- */
.rp-tree {
  position: relative;
  border: 1px solid var(--fs-edge);
  border-radius: 8px;
  background: var(--fs-paper, #fbf9f1);
  padding: clamp(10px, 2vw, 18px);
  overflow-x: auto;
}
.rp-tree svg { display: block; width: 100%; min-width: 660px; height: auto; }

/* hoverable action marks */
.tnode { cursor: pointer; outline: none; }
.tnode .hit { fill: transparent; }
.tnode:hover .hit,
.tnode:focus .hit { fill: rgba(217, 162, 59, 0.22); }

/* the tooltip: the student's words on a paper card */
.rp-tip {
  position: absolute;
  z-index: 3;
  width: 230px;
  background: var(--fs-card);
  border: 1px solid rgba(38, 36, 31, 0.3);
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(38, 36, 31, 0.12), var(--fs-shadow-soft);
  padding: 10px 12px 9px;
  transform: rotate(-0.4deg);
  pointer-events: none;
}
.rp-tip[hidden] { display: none; }
.rp-tip-quote {
  font-family: var(--f-hand);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--fs-pencil, #3a3733);
  margin-bottom: 6px;
}
.rp-tip-meta {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
}

.rp-maplegend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
}
.rp-maplegend .lg { white-space: nowrap; }
.lg-q { color: var(--fs-exploring); }
.lg-r { color: var(--fs-committing); }
.lg-f { color: var(--fs-refining); }
.lg-x { color: var(--fs-reflection); }
.lg-p { color: var(--fs-pivotmark); }
.lg-c { color: var(--fs-causal); }
.rp-mapnote {
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
}

/* ---- competencies: dropdowns of standard → description → evidence ---- */
.rp-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rp-chip {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fs-ink-soft);
  border: 1px solid var(--fs-hair);
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--fs-card);
}

.rp-comp {
  border: 1px solid var(--fs-edge);
  border-radius: 8px;
  background: var(--fs-panel);
  margin-bottom: 8px;
}
.rp-comp summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
}
.rp-comp summary::-webkit-details-marker { display: none; }
.rp-comp .rp-compname {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  flex: 1;
}
.rp-comp .chev {
  font-family: var(--f-mono);
  color: var(--fs-ink-faint);
  transition: transform 140ms ease;
}
.rp-comp[open] .chev { transform: rotate(180deg); }
.rp-comp-body {
  border-top: 1px dashed var(--fs-hair);
  padding: 12px 14px 14px;
}
.rp-compdesc {
  font-family: var(--f-body);
  font-size: 0.98rem;
  color: var(--fs-ink);
  max-width: 58ch;
  margin-bottom: 12px;
}
.rp-status {
  flex: none;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-card);
  background: var(--fs-olive);
  border-radius: 3px;
  padding: 3px 8px;
}
.rp-comp.is-partial { border-style: dashed; border-color: var(--fs-hair); }
.rp-comp.is-partial .rp-status { background: var(--fs-mustard); }
.rp-comp blockquote {
  border-left: 3px solid var(--fs-mustard);
  padding-left: 12px;
  margin: 0;
  max-width: 58ch;
}
.rp-comp blockquote .rp-hand { display: block; }
.rp-comp cite {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-ink-faint);
  margin-top: 5px;
}

@media (max-width: 640px) {
  .rp-head { flex-direction: column; }
  .rp-stamp { align-self: flex-start; transform: rotate(-1deg); }
}