/*
 * Question visuals (web/visuals/, ADR 0007). Every fill and stroke is a
 * theme-contract token from the :root block in style.css, so a retint there
 * retints every figure; there is no colour value in this file.
 *
 * Contrast (ADR 0007 §3): figure text is --color-ink (13:1 or more) or
 * --color-bg on --color-ink-soft (7:1); lines that carry meaning are
 * --color-ink-soft or --color-muted (4.9:1 or more); --color-line and
 * --color-line-strong are never used for a line that means something.
 */

.qv {
  margin: var(--sp-3) 0 0;
}

.qv__frame {
  max-width: 100%;
  overflow: hidden;
  container-type: inline-size;
}

/* Scales down to the card on a phone, never up past its natural size. */
.qv__svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: var(--font-sans);
}

/* Captions often carry the point ("a[1, 1] is row 1, column 1"), so they
   are in the body's ink, at the meta size. */
.qv__caption {
  margin-top: var(--sp-2);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.qv__describe {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.qv__describe summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-deep);
  cursor: pointer;
}

.qv__describe p {
  margin: var(--sp-2) 0 0;
  color: var(--color-ink-soft);
}

/* ---------- Shared marks ---------- */

.qv-axis {
  fill: var(--color-muted);
  font-size: 13px;
}

.qv-cell {
  stroke: var(--color-muted);
  stroke-width: 1.5;
}

.qv-cell--open {
  fill: var(--color-bg);
}

.qv-cell--mark {
  fill: var(--color-accent-soft);
}

.qv-cell--wall,
.qv-cell--dark {
  fill: var(--color-ink-soft);
  stroke: var(--color-ink);
}

.qv-cell__letter {
  fill: var(--color-ink);
  font-size: 20px;
  font-weight: 700;
}

.qv-cell__text {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
}

.qv-cell__text--on-dark {
  fill: var(--color-bg);
}

/* Long box text steps down so it fits its box (cells.js layout). */
.qv-cell__text--15 {
  font-size: 15px;
}

.qv-cell__text--13 {
  font-size: 13px;
}

/* ---------- Array ---------- */

.qv-arr-cell {
  stroke: var(--color-muted);
  stroke-width: 1;
}

/* The size comes from array.js's font-size attribute, set to fit the cells. */
.qv-arr-text {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 600;
}

.qv-arr-text--on-dark {
  fill: var(--color-bg);
}

.qv-arr-name {
  fill: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
}

.qv-arr-region {
  fill: none;
  stroke: var(--color-accent-deep);
  stroke-width: 3;
}

.qv-arr-stop {
  stroke: var(--color-ink);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

/* Side labels (indices, stops, row labels) are 16 units: a figure up to 360
   units wide, drawn 332px wide on a 390px phone, keeps them at 14px or more. */
.qv-array .qv-axis,
.qv-cells .qv-axis {
  font-size: 16px;
}

.qv-arr-stoplabel {
  fill: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
}

.qv-rowlabel {
  fill: var(--color-ink-soft);
  font-size: 16px;
  font-weight: 600;
}

.qv-shape {
  fill: var(--color-ink-soft);
  stroke: var(--color-ink);
  stroke-width: 1;
}

.qv-edge {
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 2;
}

.qv-arrowhead {
  fill: var(--color-ink-soft);
}

.qv-edge__label {
  fill: var(--color-accent-deep);
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Graph ---------- */

.qv-node {
  fill: var(--color-surface-2);
  stroke: var(--color-ink-soft);
  stroke-width: 2;
}

.qv-node__text {
  fill: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
}

.qv-chip {
  fill: var(--color-bg);
  stroke: var(--color-accent-deep);
  stroke-width: 1.5;
}

.qv-chip__text {
  fill: var(--color-accent-deep);
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Flowchart ---------- */

.qv-box {
  fill: var(--color-bg);
  stroke: var(--color-ink-soft);
  stroke-width: 1.5;
}

.qv-box--terminal {
  fill: var(--color-accent-soft);
}

.qv-box--decision {
  fill: var(--color-surface-2);
}

/* 15 units: 15px at a one-column flowchart's natural size, 14px or more for
   a two-column one drawn 332px wide on a 390px phone. */
.qv-box__text {
  fill: var(--color-ink);
  font-size: 15px;
}

/* ---------- Table ---------- */

.qv-table {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  max-width: 100%;
}

.qv-table th,
.qv-table td {
  overflow-wrap: break-word;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-muted);
  text-align: left;
  vertical-align: top;
}

.qv-table thead th {
  background: var(--color-surface-2);
  color: var(--color-ink);
}

.qv-table td {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
}

.qv-table tbody th {
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- Illustration ---------- */

/* Beside the title, small, so it never pushes the options down. */
.qv--illustration {
  float: right;
  margin: 0 0 var(--sp-2) var(--sp-3);
}

.qv-illustration {
  display: block;
  height: 120px;
  width: auto;
  max-width: 40vw;
  border-radius: var(--r-ctl);
  border: 1px solid var(--color-line);
}

@media (max-width: 560px) {
  .qv-illustration {
    height: 96px;
  }
}

/* ---------- Breakdown and teacher preview ---------- */

.qv-recall {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.qv-recall summary {
  color: var(--color-accent-deep);
  cursor: pointer;
}

.qv-recall .qv--illustration {
  float: none;
  margin: var(--sp-2) 0 0;
}

/* Whatever follows the prompt starts below a floated scene. */
.qv-clear {
  clear: both;
}

/* ---------- Plot ---------- */

.qv-plot .qv-axis {
  font-size: 16px;
}

.qv-pl-axis {
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 2;
}

.qv-pl-axis--tick {
  stroke-width: 1.5;
}

.qv-pl-tick {
  fill: var(--color-ink-soft);
  font-size: 16px;
}

.qv-pl-legend {
  fill: var(--color-ink);
  font-size: 16px;
}

/* The colour follows the order of the series; the dash follows its style. */
.qv-pl-line {
  fill: none;
  stroke-linejoin: round;
}

.qv-pl-line--1 {
  stroke: var(--color-accent-deep);
  stroke-width: 3;
}

.qv-pl-line--2 {
  stroke: var(--color-ink-soft);
  stroke-width: 2.5;
}

.qv-pl-line--3 {
  stroke: var(--color-muted);
  stroke-width: 2.5;
}

.qv-pl-dash--dashed {
  stroke-dasharray: 8 5;
}

.qv-pl-dash--dotted {
  stroke-dasharray: 2 5;
}

/* Dots differ by fill and size as well as colour. */
.qv-pl-dot--1 {
  fill: var(--color-accent-deep);
}

.qv-pl-dot--2 {
  fill: var(--color-bg);
  stroke: var(--color-ink-soft);
  stroke-width: 2;
}

.qv-pl-dot--3 {
  fill: var(--color-muted);
}

.qv-pl-bar {
  fill: var(--color-accent-soft);
  stroke: var(--color-accent-deep);
  stroke-width: 1.5;
}

.qv-pl-zero {
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1.5;
}

.qv-pl-marker {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
}

.qv-pl-marker__text {
  fill: var(--color-ink);
  font-size: 16px;
  font-weight: 600;
  /* A halo keeps the label readable where another marker's line passes it. */
  paint-order: stroke;
  stroke: var(--color-bg);
  stroke-width: 4;
}

/* ---------- Sketch ---------- */

.qv-sk-shape {
  stroke-width: 2;
  stroke-linejoin: round;
}

.qv-sk-tone--ink {
  stroke: var(--color-ink-soft);
}

.qv-sk-tone--accent {
  stroke: var(--color-accent-deep);
  stroke-width: 3;
}

.qv-sk-tone--muted {
  stroke: var(--color-muted);
}

.qv-sk-fill--none {
  fill: none;
}

.qv-sk-fill--light {
  fill: var(--color-surface-2);
}

.qv-sk-fill--dark {
  fill: var(--color-ink-soft);
}

.qv-sk-fill--accent {
  fill: var(--color-accent-soft);
}

.qv-sk-dash {
  stroke-dasharray: 7 5;
}

.qv-arrowhead--accent {
  fill: var(--color-accent-deep);
}

.qv-arrowhead--muted {
  fill: var(--color-muted);
}

.qv-sk-label {
  fill: var(--color-ink);
  font-size: 14px;
}

.qv-sk-label--on-dark {
  fill: var(--color-bg);
}

.qv-sk-text--ink {
  fill: var(--color-ink);
}

.qv-sk-text--accent {
  fill: var(--color-accent-deep);
}

.qv-sk-text--muted {
  fill: var(--color-muted);
}

/* A label that has to sit on a line is drawn last, with a halo in the page's
   colour, so the line stops short of its letters (after-render.js). */
.qv-sk-text--halo {
  paint-order: stroke;
  stroke: var(--color-surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.qv-sk-text--sm {
  font-size: 13px;
}

.qv-sk-text--md {
  font-size: 15px;
}

.qv-sk-text--lg {
  font-size: 18px;
  font-weight: 700;
}

/* ---------- Wide columns ---------- */

/* A figure drawn 300 units wide or more (qv-grow, set by plot, and by array
   and sketch when they are that wide; an array 240 to 299 wide gets qv-grow--sm) grows to 520px where its column is
   480px or more (a Chromebook, a desktop), instead of staying at 310 to 360.
   Cells, lines and shapes scale with it. The labels are set smaller in figure
   units, so they come out near 15 to 19px rather than 20 to 27. Narrower
   columns, phones and small sketches are as before. */
@container (min-width: 480px) {
  .qv__svg.qv-grow {
    width: min(100%, 520px);
    max-width: 520px;
  }

  /* An array between 240 and 300 units wide grows to 420px, about 1.5 times. */
  .qv__svg.qv-grow--sm {
    width: min(100%, 420px);
    max-width: 420px;
  }

  .qv-grow.qv-plot .qv-axis,
  .qv-grow.qv-array .qv-axis,
  .qv-grow .qv-pl-tick,
  .qv-grow .qv-pl-legend,
  .qv-grow .qv-pl-marker__text,
  .qv-grow .qv-arr-name {
    font-size: 11px;
  }

  .qv-grow .qv-arr-stoplabel,
  .qv-grow .qv-rowlabel,
  .qv-grow .qv-sk-label {
    font-size: 10px;
  }

  .qv-grow .qv-sk-text--sm {
    font-size: 9.5px;
  }

  .qv-grow .qv-sk-text--md {
    font-size: 11px;
  }

  .qv-grow .qv-sk-text--lg {
    font-size: 13px;
  }
}