/* Interactive widgets — the demonstrations that make ideas tangible.
   Shared shell styles; each widget adds its own pieces below. */

.widget {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-block: var(--sp-4);
}
.widget__head {
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--sp-2);
}
.widget__head .glyph { color: var(--accent); }
.widget__head h4 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 600; }
.widget__head .tag {
  margin-left: auto; font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.widget__body { padding: var(--sp-4) var(--sp-5); }
.widget__hint { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3); }

/* ---- Flashcards ---- */
.flashcard {
  perspective: 1000px; cursor: pointer; margin-inline: auto; max-width: 26rem;
}
.flashcard__inner {
  position: relative; transition: transform .5s; transform-style: preserve-3d;
  min-height: 11rem;
}
.flashcard.flipped .flashcard__inner { transform: rotateY(180deg); }
.flashcard__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--radius); display: grid; place-items: center;
  padding: var(--sp-5); text-align: center;
}
.flashcard__face--front { background: var(--accent-soft); border: 2px solid var(--accent); }
.flashcard__face--back {
  background: var(--surface-2); border: 2px solid var(--line-2);
  transform: rotateY(180deg);
}
.flashcard__face .term { font-family: var(--font-display); font-size: var(--step-2); }
.flashcard__face .def { font-size: var(--step-0); color: var(--ink-2); }
.flashcard__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-3); }

/* ---- Timeline ---- */
.timeline { position: relative; padding-left: var(--sp-5); }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px;
  background: var(--line-2);
}
.tl-event { position: relative; padding-bottom: var(--sp-4); }
.tl-event__dot {
  position: absolute; left: calc(-1 * var(--sp-5) + 1px); top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent);
}
.tl-event.is-open .tl-event__dot { background: var(--accent); }
.tl-event__btn {
  background: none; border: none; cursor: pointer; font: inherit; text-align: left;
  padding: 0; color: var(--ink); width: 100%;
}
.tl-event__date { font-weight: 700; color: var(--accent); font-size: var(--step--1); }
.tl-event__title { font-family: var(--font-display); font-size: var(--step-1); }
.tl-event__body { font-size: var(--step--1); color: var(--ink-2); margin-top: var(--sp-2); }
.tl-event__body img { border-radius: var(--radius-sm); margin-top: var(--sp-2); }

/* ---- Image hotspots ---- */
.hotspots { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.hotspots__stage {
  position: relative; background: var(--surface-2);
  border-radius: var(--radius-sm); aspect-ratio: 16 / 10;
}
.hotspots__stage img { width: 100%; height: 100%; object-fit: cover; }
.hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; border: 2px solid #fff;
  font-weight: 700; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  display: grid; place-items: center;
}
.hotspot:hover, .hotspot.is-active { transform: translate(-50%,-50%) scale(1.18); }
.hotspot.is-found { background: var(--good); }
.hotspot-readout {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-radius: var(--radius-sm);
  min-height: 4rem; border: 1px solid var(--line);
}
.hotspot-readout h5 { font-size: var(--step-0); color: var(--accent); }

/* ---- Sorter ---- */
.sorter__pool { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); min-height: 2.5rem; }
.sorter__bins { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.sorter__bin {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  padding: var(--sp-3); min-height: 6rem;
}
.sorter__bin.is-target { border-color: var(--accent); background: var(--accent-soft); }
.sorter__bin h5 { font-size: var(--step-0); margin-bottom: var(--sp-2); text-align: center; }
.sorter__item {
  padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line-2);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--ink);
  margin: 3px;
}
.sorter__item.is-selected { border-color: var(--accent); box-shadow: var(--ring); }
.sorter__item.ok { border-color: var(--good); background: var(--good-soft); }
.sorter__item.no { border-color: var(--think); background: var(--think-soft); }

/* ---- Lab / explorer (sliders driving a visual) ---- */
.lab__controls { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lab__control label { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--step--1); }
.lab__control input[type=range] { width: 100%; accent-color: var(--accent); }
.lab__stage {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: var(--sp-4); border: 1px solid var(--line);
}
.lab__readout {
  display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3);
  font-size: var(--step--1);
}
.lab__readout b { color: var(--accent); font-family: var(--font-display); font-size: var(--step-1); display: block; }

/* ---- Source card (primary sources, artefacts) ---- */
.source-card {
  display: flex; gap: var(--sp-4); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: var(--sp-4); margin-block: var(--sp-3);
}
.source-card img { width: 7.5rem; flex: none; border-radius: var(--radius-sm); object-fit: cover; }
.source-card__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.source-card h5 { font-size: var(--step-1); font-family: var(--font-display); margin: 2px 0; }
.source-card p { font-size: var(--step--1); color: var(--ink-2); }

/* ---- Content media ---- */
.content-figure { margin-block: var(--sp-4); }
.content-figure img { border-radius: var(--radius-sm); width: 100%; }
.content-figure figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-2); }
.content-figure .credit { font-size: .72rem; color: var(--ink-3); opacity: .8; }

.did-you-know {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  margin-block: var(--sp-3); font-size: var(--step--1);
}
.did-you-know strong { color: var(--accent); }

@media (max-width: 540px) {
  .source-card { flex-direction: column; }
  .source-card img { width: 100%; height: 8rem; }
}

/* ---- English: drag-and-drop sentence builder ---- */
.sb-zone {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  min-height: 3.4rem; padding: var(--sp-3);
  border-radius: var(--radius); transition: background .12s ease, border-color .12s ease;
}
.sb-line { border: 2px dashed var(--line-2); background: var(--surface-2); }
.sb-pool { margin-top: var(--sp-3); }
.sb-zone.sb-over { border-color: var(--accent); background: var(--accent-soft); }
.sb-chip {
  font: inherit; font-size: var(--step-0); cursor: grab; touch-action: none;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
  user-select: none;
}
.sb-line .sb-chip { background: var(--accent-soft); border-color: var(--accent); }
.sb-chip:hover { border-color: var(--accent); }
.sb-chip.sb-dragging { opacity: .35; }
.sb-ghost {
  position: fixed; z-index: 999; pointer-events: none; transform: translate(-50%, -50%);
  box-shadow: var(--shadow-lg); cursor: grabbing; opacity: .95;
}
.sb-hint { color: var(--ink-3); font-size: var(--step--1); }
.sb-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

/* ---- Phonics: sound blender ---- */
.blend-word { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin: var(--sp-4) 0; }
.grapheme {
  font: inherit; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600;
  min-width: 2.6rem; padding: var(--sp-2) var(--sp-3); cursor: pointer;
  border-radius: var(--radius); border: 2px solid var(--line-2);
  background: var(--surface); color: var(--ink);
}
.grapheme.lit { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.08); }
.grapheme.vowel { color: var(--clay-dark); }
.grapheme.lit.vowel { color: #fff; }
.blend-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.blend-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.blend-pick button {
  font: inherit; cursor: pointer; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.blend-pick button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- Phonics / morphology: word builder ---- */
.wb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.wb-col h5 { text-align: center; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: var(--sp-2); }
.wb-col button {
  display: block; width: 100%; font: inherit; cursor: pointer; margin-bottom: 6px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.wb-col button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.wb-result {
  text-align: center; margin-top: var(--sp-4); padding: var(--sp-4);
  background: var(--surface-2); border-radius: var(--radius);
}
.wb-result .wbw { font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; }
.wb-result .wbm { color: var(--ink-2); font-size: var(--step--1); margin-top: var(--sp-1); }