/* Bulb Brightness: its colours, circuit diagrams and answer rows; the general look is in ui.css
   (shared by the apps). */
:root {
  --glow: #ffc21a;
  --zone-light: rgba(43, 89, 195, 0.06);
  --zone-light-line: rgba(43, 89, 195, 0.45);
  --zone-strong: rgba(43, 89, 195, 0.16);
  --zone-strong-line: rgba(43, 89, 195, 0.6);
  --vnote: #1f5fd6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glow: #ffd23f;
    --zone-light: rgba(122, 162, 255, 0.07);
    --zone-light-line: rgba(122, 162, 255, 0.45);
    --zone-strong: rgba(122, 162, 255, 0.2);
    --zone-strong-line: rgba(122, 162, 255, 0.65);
    --vnote: #74a7ff;
  }
}

/* diagrams */
.figs { gap: 16px 36px; align-items: flex-end; }
.fig { margin: 0; text-align: center; }
.fig svg { margin: 0 auto; }
.fig.ref svg { width: 190px; }
figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
svg .w { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; }
svg .w.thin { stroke-width: 1.2; }
svg .w.thick { stroke-width: 5; stroke-linecap: butt; }
svg .dot { fill: var(--ink); }
svg .bulb { fill: var(--card); stroke: var(--ink); stroke-width: 1.8; }
svg .bulb.lit { fill: var(--glow); }
svg .halo { fill: var(--glow); }
svg .lbl { fill: var(--ink); font: italic 15px var(--serif); }
svg .lbl .sub { font-size: 70%; font-style: normal; }
svg .plus { fill: var(--ink); font: 13px system-ui, sans-serif; }

/* answers: one row per bulb */
#fields { display: grid; gap: 8px; margin-bottom: 16px; }
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.field .name { min-width: 2.2em; font: italic 17px var(--serif); }
.choices { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: block; padding: 6px 12px; border-left: 1px solid var(--line); font-size: 0.95rem; }
.choices label:first-child span { border-left: 0; }
.choices input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
.choices input:disabled { cursor: default; }
.field.ok .choices { border-color: var(--ok); }
.field.ok .fb::before { content: "✓ correct"; }
.field.bad .choices { border-color: var(--bad); }
.field.bad .fb::before { content: "✗ not correct"; }
html:lang(de) .field.ok .fb::before { content: "✓ richtig"; }
html:lang(de) .field.bad .fb::before { content: "✗ nicht richtig"; }

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

@media (max-width: 560px) {
  .choices span { padding: 6px 9px; }
}

/* tutor: the parts a step is about */
.tutor-text p { margin: 8px 0; }
.tutor-text ul { margin: 8px 0; padding-left: 1.2em; }
svg .zone { stroke-width: 1.2; }
svg .zone.light { fill: var(--zone-light); stroke: var(--zone-light-line); stroke-dasharray: 4 3; }
svg .zone.strong { fill: var(--zone-strong); stroke: var(--zone-strong-line); }
svg .ring { fill: none; stroke: var(--accent); stroke-width: 2.4; }
svg .cap { fill: var(--vnote); font: italic 600 14px var(--serif); }
svg .note { fill: var(--ink); font: 600 14px system-ui, sans-serif; }
svg .note.v { fill: var(--vnote); font: italic 600 14px var(--serif); }
.k-strong { background: var(--zone-strong); border: 1px solid var(--zone-strong-line); border-radius: 3px; padding: 0 3px; }
.k-light { background: var(--zone-light); border: 1px dashed var(--zone-light-line); border-radius: 3px; padding: 0 3px; }

/* arcade: lit bulbs in manim's yellow */
#arcade { --glow: #ffff00; --vnote: #58c4dd; --asked: #58c4dd; }
/* the bulb the question is about, in manim's blue */
#arcade svg .bulb.asked, #arcade svg .w.asked { stroke: var(--asked); stroke-width: 2.6; }
#arcade svg .lbl.asked { fill: var(--asked); font-weight: 700; }
#arcade .fig.ref svg { width: 160px; }
#arcade .ar-opt { font-size: 1.15rem; }

/* the introductions (practice and arcade): a plain paragraph on wide screens; on small screens one
   line to open, and while folded the reference circuit is hidden too (class folded, app.js) */
details.intro > summary { display: none; }
details.intro > p { margin: 0 0 4px; }
@media (max-width: 640px) {
  details.intro > summary { display: list-item; cursor: pointer; color: var(--accent); margin: 2px 0 6px; }
  #task.folded .fig.ref, #ar-play.folded #ar-figure .fig.ref { display: none; }
}
.field .name sub, .steps sub, #hint-list sub { font-style: normal; }