/* Induction Matching: its colours, graph cards, diagrams and tutor marks; the general look is in
   ui.css (shared by the apps). */
:root {
  --grid: #ebe8e1;
  /* one colour per pair, keyed by the flux graph A–D */
  --p1: #2b59c3;
  --p2: #c2410c;
  --p3: #0f766e;
  --p4: #8e3fb0;
  --q-flux: #1b7f3b;
  --q-volt: #c62828;
  --focus-band: rgba(43, 89, 195, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grid: #2c3035;
    --p1: #7aa2ff;
    --p2: #fb923c;
    --p3: #2dd4bf;
    --p4: #d19cf0;
    --q-flux: #5fd07e;
    --q-volt: #ff7b72;
    --focus-band: rgba(122, 162, 255, 0.12);
  }
}

/* four graphs in a row need more room than the other apps */
.wrap { max-width: 1180px; }

#board h3 { margin: 16px 0 8px; }
.actions { margin-top: 18px; }

/* graph cards */
.graphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1000px) { .graphs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gcard {
  position: relative;
  display: block;
  width: 100%;
  padding: 6px 6px 2px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  text-align: left;
}
.gcard:hover:not(:disabled) { border-color: var(--muted); }
.gcard:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gcard:disabled { cursor: default; opacity: 1; }
.gcard svg { display: block; width: 100%; height: auto; }
/* small graph cards (phones): fewer tick labels, so that the enlarged ones (fit.js) do not meet */
.gcard { container-type: inline-size; }
@container (max-width: 230px) { svg .tick.minor { display: none; } }
.gname { position: absolute; top: 5px; right: 12px; font-weight: 700; font-size: 1.05rem; }
.badge:empty { display: none; }
.badge {
  position: absolute; top: 7px; right: 34px;
  padding: 0 8px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--card);
}
.gcard.sel { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.gcard.p1 { border-color: var(--p1); } .gcard.p1 .badge { background: var(--p1); }
.gcard.p2 { border-color: var(--p2); } .gcard.p2 .badge { background: var(--p2); }
.gcard.p3 { border-color: var(--p3); } .gcard.p3 .badge { background: var(--p3); }
.gcard.p4 { border-color: var(--p4); } .gcard.p4 .badge { background: var(--p4); }
.gcard.ok { background: var(--ok-bg); }
.gcard.bad { background: var(--bad-bg); }
.gcard.ok .badge::after { content: " ✓"; }
.gcard.bad .badge::after { content: " ✗"; }

/* diagrams */
svg text { font-family: var(--serif); }
svg .grid { stroke: var(--grid); stroke-width: 1; }
svg .ax { stroke: var(--muted); stroke-width: 1.2; }
svg .tick { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
svg .axis { fill: var(--ink); font-size: 13px; }
svg .it { font-style: italic; }
svg .sub { font-size: 10px; }
svg .curve { stroke: var(--ink); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* quantity colours: flux green, voltage red */
.qc-flux { color: var(--q-flux); }
.qc-volt { color: var(--q-volt); }
svg.qc-flux .curve { stroke: var(--q-flux); }
svg.qc-volt .curve { stroke: var(--q-volt); }
svg.qc-flux .qlabel { fill: var(--q-flux); }
svg.qc-volt .qlabel { fill: var(--q-volt); }
svg .jump { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg .ann { fill: var(--accent); font-size: 11px; font-weight: 600; font-family: system-ui, sans-serif; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }

/* feedback and solution */
.feedback { margin: 6px 0 0; padding-left: 1.2em; }
.feedback:empty { display: none; }
.feedback li { margin: 4px 0; }
#sol-text p { margin: 8px 0; }
.pairs { margin: 8px 0; padding-left: 1.2em; }
.pairs li { margin: 4px 0; }

/* tutor mode */
.tgraphs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.tgraphs svg, #t-figure .gcard svg { display: block; width: 100%; height: auto; }
/* small graph cards (phones): fewer tick labels, so that the enlarged ones (fit.js) do not meet */
.gcard { container-type: inline-size; }
@container (max-width: 230px) { svg .tick.minor { display: none; } }
.tgraphs h3, #t-figure h3 { margin: 4px 0 2px; font-size: 0.95rem; }
#t-figure .graphs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#t-figure .gcard .gname { font-size: 0.95rem; }
#t-figure .gcard.trap { border-color: var(--bad); border-style: dashed; }
#t-figure .gcard.trap .badge { background: var(--bad); }
.tutor-text p { margin: 8px 0; }
.tutor-text ul { margin: 8px 0; padding-left: 1.2em; }
.tutor-text li { margin: 4px 0; }
.tutor-text .step-rule { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
.progress { margin-top: 10px; }
svg .tband { fill: var(--focus-band); }
svg .tri { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
svg .tangent { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
svg .vline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg .tdot { fill: var(--accent); stroke: var(--card); stroke-width: 1.2; }
svg .tdot.flat { fill: var(--card); stroke: var(--accent); stroke-width: 1.6; }
svg .tag { fill: var(--ink); font: 600 10px system-ui, sans-serif; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.k-band { background: var(--focus-band); border-radius: 3px; padding: 0 3px; }
@media (max-width: 640px) {
  .tgraphs { grid-template-columns: minmax(0, 1fr); }
  #t-figure .graphs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* arcade: manim's green and red for flux and voltage */
#arcade { --q-flux: #83c167; --q-volt: #fc6255; --grid: #1c1c1c; --focus-band: rgba(88, 196, 221, 0.15); }
#arcade #ar-figure .fig svg, #arcade .ar-explain .figs .fig svg { width: 320px; }
#arcade .ar-opt { padding: 24px 8px 6px; }
#arcade .ar-opt .val { width: 100%; }
#arcade .ar-opt .val svg { width: 100%; max-width: 270px; margin: 0 auto; }
#arcade .ar-explain .tgraphs { max-width: 640px; }
#arcade .ar-answers svg { width: 260px; display: block; }
.ar-hero .figs .fig svg { width: 300px; }
/* the start picture: first the flux, then its voltage */
#ar-hero.animate .fig:nth-child(2) .curve { animation-delay: 1.4s, 1.8s; }