/* =========================================================================
   Face Recognition Detective — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the two-route flow diagram, the schematic faces, and the compact list of
   seven task outcomes that sits inside the pinned block.

   Every outcome prints its own word ("within range", "impaired", "not
   administered"), so no fill or border is load-bearing. The affected
   component in the diagram is crossed through as well as labelled.
   ========================================================================= */

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

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

#faces .control--choice {
  font-size: var(--text-sm);
  line-height: 1.3;
  align-items: flex-start;
  padding: 0.3rem 0;
}

#faces .control--choice input {
  margin-top: 0.55rem;
}

/* Each stage's control block holds several fieldsets, so the grid gap has to
   be restated inside them. */
#faces [data-stage-one-controls],
#faces [data-stage-two-controls] {
  display: grid;
  gap: 1.25rem;
}

/* -------------------------------------------------------------------------
   The flow diagram
   ---------------------------------------------------------------------- */

/* A wide-but-short viewBox, capped so the pinned block stays inside its
   budget when the seven outcomes are stacked underneath it. */
.face__figure [data-model] {
  max-width: 25rem;
}

.face__node {
  fill: var(--colour-surface);
  stroke: var(--colour-border-strong);
  stroke-width: 1.5;
}

.face__node--hit {
  fill: var(--colour-accent-soft);
  stroke: var(--colour-text);
  stroke-width: 3;
}

.face__nodelabel {
  font-family: var(--font-body);
  fill: var(--colour-text);
  font-size: 12px;
}

.face__link {
  stroke: var(--colour-text);
  stroke-width: 2;
  stroke-linecap: round;
}

/* The affected component is crossed through: a shape, not a colour. */
.face__strike {
  fill: none;
  stroke: var(--colour-text);
  stroke-width: 1.5;
  opacity: 0.55;
}

.face__sound {
  fill: var(--colour-surface);
  stroke: var(--colour-text);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.face__wave {
  fill: none;
  stroke: var(--colour-text);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* -------------------------------------------------------------------------
   Schematic faces
   ---------------------------------------------------------------------- */

.face__outline {
  fill: var(--colour-surface);
  stroke: var(--colour-text);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.face__feature {
  fill: var(--colour-text);
}

.face__stroke {
  fill: none;
  stroke: var(--colour-text);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.face__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.face__card {
  margin: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.face__portrait {
  max-width: 4.5rem;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   Text around the figures
   ---------------------------------------------------------------------- */

.face__legend {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  line-height: 1.45;
}

.face__subheading {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-text-muted);
}

/* -------------------------------------------------------------------------
   The seven outcomes, kept compact so the pinned block stays small
   ---------------------------------------------------------------------- */

.face__outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem 1.25rem;
  font-size: var(--text-sm);
}

@media (min-width: 40em) {
  .face__outcomes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.face__outcomes > li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  align-items: baseline;
  padding: 0.1rem 0 0.1rem 0.6rem;
  border-left: 3px solid var(--colour-border-strong);
  margin: 0;
}

.face__outcomes > li[data-outcome="impaired"] {
  border-left-color: var(--colour-neuropsychology);
  border-left-style: solid;
}

.face__outcomes > li[data-outcome="nottested"] {
  border-left-style: dotted;
}

.face__outcome-name {
  flex: 1 1 10rem;
  min-width: 0;
}

.face__outcome-value {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.face__outcomes > li[data-mismatch="yes"] {
  background-color: var(--colour-status-bg);
}

.face__alternatives {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
}

.face__alternatives > li + li {
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   Forced colours
   ---------------------------------------------------------------------- */

@media (forced-colors: active) {
  .face__node,
  .face__sound,
  .face__outline {
    fill: Canvas;
    stroke: CanvasText;
  }

  .face__node--hit {
    stroke: Highlight;
    stroke-width: 3;
  }

  .face__link,
  .face__wave,
  .face__stroke,
  .face__strike {
    stroke: CanvasText;
  }

  .face__feature {
    fill: CanvasText;
  }

  .face__outcomes > li {
    border-left-color: CanvasText;
  }

  .face__outcomes > li[data-outcome="impaired"] {
    border-left-color: Highlight;
  }

  .face__outcomes > li[data-mismatch="yes"] {
    background-color: Canvas;
    outline: 2px solid Highlight;
  }
}