/* =========================================================================
   Network Disconnection Mapper — tool-specific styling
   -------------------------------------------------------------------------
   Shared page furniture comes from components/tool-kit.css. Specific here:
   the node-and-edge diagram and the four task chips beneath it.

   Damage is always carried by TWO cues: a broken outline and a printed cross.
   Task outcomes are carried by a word ("Normal", "Impaired", "Fails") and a
   left border, never by fill alone.
   ========================================================================= */

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

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

.preset-buttons {
  display: grid;
  gap: var(--space-2);
}

.preset-buttons .button {
  font-size: var(--text-xs);
  padding: 0.35rem 0.7rem;
  min-height: 2.75rem;
  text-align: left;
}

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

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

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

.net__figure {
  justify-items: center;
}

.net__figure [data-diagram] {
  /* A near-square viewBox stretched across the stage column would be over
     400px tall on its own; capping the width keeps the pinned block small. */
  max-width: 21rem;
}

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

.net__node--damaged {
  fill: var(--colour-status-bg);
  stroke: var(--colour-status-border);
  stroke-width: 3;
  stroke-dasharray: 5 4;
}

.net__node-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  fill: var(--colour-text);
}

.net__edge {
  stroke: var(--colour-neuropsychology);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.net__edge--cut {
  stroke: var(--colour-border-strong);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

/* The break marker: a filled disc carrying a cross, drawn over the midpoint
   of a cut pathway. Two cues, neither of them hue. */
.net__break {
  fill: var(--colour-page);
  stroke: var(--colour-text);
  stroke-width: 2;
}

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

/* -------------------------------------------------------------------------
   Task chips
   ---------------------------------------------------------------------- */

.net__chips {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
}

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

.net__chip-task {
  display: block;
  color: var(--colour-text-muted);
  font-size: var(--text-xs);
}

.net__chip-state {
  display: block;
  font-weight: 700;
}

.net__chip[data-mark="ok"] { border-left-color: var(--colour-neuropsychology); }
.net__chip[data-mark="part"] { border-left-color: var(--colour-cognitive); }
.net__chip[data-mark="no"] { border-left-color: var(--colour-social-critical-psychology); }

/* The outcome column of the task table carries the same three states. The
   word is always present, so the tint is redundant. */
.data-table td[data-mark="part"] { background-color: var(--colour-accent-soft); }
.data-table td[data-mark="no"] { background-color: var(--colour-status-bg); }

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

@media (forced-colors: active) {
  .net__node {
    fill: Canvas;
    stroke: CanvasText;
  }

  .net__node--damaged {
    stroke: CanvasText;
    stroke-dasharray: 5 4;
  }

  .net__node-label,
  .net__break-mark {
    fill: CanvasText;
  }

  .net__edge {
    stroke: CanvasText;
  }

  .net__edge--cut {
    stroke: GrayText;
  }

  .net__break {
    fill: Canvas;
    stroke: CanvasText;
  }

  .net__chip {
    border: 1px solid CanvasText;
    border-left-width: 5px;
  }

  .data-table td[data-mark="part"],
  .data-table td[data-mark="no"] {
    background-color: Canvas;
  }
}