/* =========================================================================
   Visual Field Defect Mapper — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the schematic pathway and the two field charts.

   A lost quadrant carries a printed cross as well as a fill; a predicted
   quadrant carries a dot; the damage marker is a circled cross. Nothing
   depends on hue, and the quadrant table repeats every cell in words.
   ========================================================================= */

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

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

/* Eight prediction checkboxes would be a very long column in one line each,
   so each eye's four quadrants sit in a two-by-two grid. The targets keep
   their full 2.75rem height. */
.fields__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-3);
}

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

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

/* -------------------------------------------------------------------------
   The pathway
   ---------------------------------------------------------------------- */

/* Two graphics stacked in one pinned block, so both are capped tightly enough
   to keep the block inside the viewport-local budget. */
.fields__pathway [data-pathway] {
  max-width: 22rem;
}

.fields__charts [data-fieldchart] {
  max-width: 21rem;
}

/* The pathway drawing's visible text equivalent. Kept to one line at most
   widths so the pinned block stays inside its budget. */
.fields__legend {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  line-height: 1.4;
}

.fields__eye {
  fill: var(--colour-surface);
  stroke: var(--colour-text);
  stroke-width: 2;
}

.fields__tract {
  fill: none;
  stroke: var(--colour-neuropsychology);
  stroke-width: 3;
  stroke-linecap: round;
}

/* The crossing fibres are drawn thicker and dashed, so the chiasm reads as a
   crossing rather than as a junction. */
.fields__cross-fibre {
  stroke: var(--colour-accent);
  stroke-width: 3;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
}

.fields__relay,
.fields__cortex {
  fill: var(--colour-surface);
  stroke: var(--colour-border-strong);
  stroke-width: 2;
}

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

.fields__damage {
  fill: var(--colour-page);
  stroke: var(--colour-text);
  stroke-width: 2.5;
}

.fields__damage-mark {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--colour-text);
}

/* -------------------------------------------------------------------------
   The field charts
   ---------------------------------------------------------------------- */

.fields__quadrant {
  fill: var(--colour-page);
}

.fields__quadrant--lost {
  fill: var(--colour-text-muted);
}

.fields__outline {
  fill: none;
  stroke: var(--colour-text);
  stroke-width: 2;
}

.fields__divider {
  stroke: var(--colour-text);
  stroke-width: 1.5;
}

/* The spared centre, drawn over a lost half. */
.fields__spared {
  fill: var(--colour-page);
  stroke: var(--colour-text);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.fields__predicted {
  fill: var(--colour-accent);
  stroke: var(--colour-page);
  stroke-width: 1.5;
}

.fields__lost-mark {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  fill: var(--colour-page);
}

/* -------------------------------------------------------------------------
   Tables
   ---------------------------------------------------------------------- */

.fields__miss > td {
  background-color: var(--colour-status-bg);
}

.fields__current > th,
.fields__current > td {
  background-color: var(--colour-accent-soft);
  font-weight: 650;
}

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

@media (forced-colors: active) {
  .fields__eye,
  .fields__relay,
  .fields__cortex,
  .fields__damage,
  .fields__spared {
    fill: Canvas;
    stroke: CanvasText;
  }

  .fields__tract,
  .fields__divider,
  .fields__outline {
    stroke: CanvasText;
  }

  .fields__cross-fibre {
    stroke: Highlight;
  }

  .fields__side,
  .fields__damage-mark {
    fill: CanvasText;
  }

  .fields__quadrant {
    fill: Canvas;
  }

  .fields__quadrant--lost {
    fill: CanvasText;
  }

  .fields__lost-mark {
    fill: Canvas;
  }

  .fields__predicted {
    fill: Highlight;
    stroke: Canvas;
  }

  .fields__miss > td {
    background-color: Canvas;
    border: 2px solid Highlight;
  }

  .fields__current > th,
  .fields__current > td {
    background-color: Canvas;
    border: 2px solid Highlight;
  }
}