/* =========================================================================
   Thematic Analysis Coding Laboratory — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. What is
   particular here is the extract block that stays pinned while it is coded,
   and the three coding passes set beneath it.
   ========================================================================= */

#coding .interactive__controls,
#coding .interactive__stage {
  min-width: 0;
}

#coding .interactive__stage > * {
  min-width: 0;
}

@media (min-width: 52em) {
  #coding .interactive__body {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  }
}

/* -------------------------------------------------------------------------
   The extract
   ---------------------------------------------------------------------- */

.extract {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--colour-research-methods);
  background-color: var(--colour-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 1.6;
}

.extract__speaker {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}

.own-echo {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--colour-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.own-echo[data-empty="yes"] {
  color: var(--colour-text-muted);
  font-style: italic;
}

/* -------------------------------------------------------------------------
   Code bank
   ---------------------------------------------------------------------- */

.codebank {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--colour-border);
  font-size: var(--text-sm);
  line-height: 1.4;
  cursor: pointer;
}

.codebank:first-child {
  border-top: 0;
}

.codebank input {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.55rem;
  accent-color: var(--colour-accent);
}

.codebank__text {
  padding-top: 0.35rem;
}

.codebank__level {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   Coding passes
   -------------------------------------------------------------------------
   Each pass names itself and prints what it foregrounds and what it puts in
   the background, so nothing is carried by the border alone.
   ---------------------------------------------------------------------- */

.pass {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--colour-surface);
  font-size: var(--text-sm);
}

.pass:last-child {
  margin-bottom: 0;
}

.pass[data-level="semantic"] { border-left-color: var(--colour-neuropsychology); }
.pass[data-level="latent"] { border-left-color: var(--colour-cognitive); }
.pass[data-level="critical"] { border-left-color: var(--colour-social-critical-psychology); }

.pass__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.pass__codes {
  margin: 0 0 var(--space-2);
  padding-left: 1.2rem;
}

.pass__codes li + li {
  margin-top: 0.15rem;
}

.pass__note {
  margin: 0;
}

.pass__note + .pass__note {
  margin-top: var(--space-2);
}

.pass__note strong {
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Bank notes and the reflexive block
   ---------------------------------------------------------------------- */

.banknote {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--colour-border-strong);
  background-color: var(--colour-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.banknote:last-child {
  margin-bottom: 0;
}

.banknote__name {
  margin: 0 0 0.2rem;
  font-weight: 700;
}

.banknote__body {
  margin: 0;
}

.reflexive {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.reflexive > * {
  min-width: 0;
}

@media (forced-colors: active) {
  .extract,
  .own-echo,
  .codebank,
  .pass,
  .banknote {
    border-color: CanvasText;
  }
}