/* Oscillations: its colours, graphs, equations and answer fields; the general look is in ui.css
   (shared by the apps). */
:root {
  --grid: #ebe8e1;
  --grid-major: #d9d5cb;
  /* the colour of the displacement, as s in Motion Graphs */
  --q-y: #c62828;
  --band: #fdf0c4;
  --motion: #1f5fd6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grid: #2a2e33;
    --grid-major: #3a3f45;
    --q-y: #ff7b72;
    --band: #3a3320;
    --motion: #74a7ff;
  }
}

#prompt p { margin: 6px 0; }

/* an equation, large and centred */
.eqbox { font-size: 1.2rem; margin: 6px 0 2px; overflow-x: auto; }
.eqbox .katex-display { margin: 0.4em 0; }
.eqlist { margin: 6px 0; padding-left: 1.2em; }
.eqlist li { margin: 6px 0; }

/* graphs y(t) */
svg text { font-family: var(--serif); }
svg.ygraph { display: block; width: 100%; max-width: 440px; height: auto; }
#figure .fig svg.ygraph, #sol-figure .fig svg.ygraph, #t-figure .fig svg.ygraph { width: 440px; }
svg .grid { stroke: var(--grid); stroke-width: 1; }
svg .grid.major { stroke: var(--grid-major); }
svg .ax { stroke: var(--muted); stroke-width: 1.2; }
svg .tick { fill: var(--muted); font-size: 12px; font-family: system-ui, sans-serif; }
svg .axis { fill: var(--ink); font-size: 14px; }
svg .it { font-style: italic; }
svg .band { fill: var(--band); }
svg .vline { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
svg .qc-y { --qc: var(--q-y); }
svg .qlabel { fill: var(--qc); }
svg .curve { stroke: var(--qc); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .tdot { fill: var(--qc); stroke: var(--card); stroke-width: 1.5; }
svg .pname { fill: var(--ink); font: italic 600 15px var(--serif); paint-order: stroke; stroke: var(--card); stroke-width: 4px; }

/* answers that are no numbers: a choice of words, equations (one below the other) or graphs */
.field.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.field.choice .what { margin-right: 4px; }
.field.choice.wide { flex-direction: column; align-items: stretch; }
/* every answer part on its own row of the grid of fields (ui.css) */
.fields > .field.choice { grid-column: 1 / -1; }
.choices { flex-wrap: wrap; }
.choices.stack { flex-direction: column; align-items: stretch; }
.choices.stack > label > span { border-left: 0; border-top: 1px solid var(--line); text-align: left; padding: 6px 12px; }
.choices.stack > label:first-child > span { border-top: 0; }
.choices.pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; background: none; }
.choices.pics > label > span { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.choices.pics svg.ygraph { max-width: none; }
@media (max-width: 560px) { .choices.pics { grid-template-columns: minmax(0, 1fr); } }


/* arcade: manim's colours */
#arcade { --q-y: #fc6255; --grid: #1c1c1c; --grid-major: #333; --band: #222; --motion: #58c4dd; }
#arcade .ar-opt .val svg.ygraph { max-width: 100%; }

/* a result in the text of a step (in formulas, KaTeX marks it: see ui.css) */
span.result { background: var(--ok-bg); border-radius: 3px; padding: 0.05em 0.25em; }