/* Koala icon set (graphics/icons.js): colour tokens + the shared stroke style.
   --i-line outline · --i-fill body (mint) · --i-blue second fill (koala fur) · --i-acc hard-hat yellow · --i-bg holes */
:root { --i-line: #1f3a68; --i-fill: #bfeee3; --i-blue: #b9d2f3; --i-acc: #f6bd33; --i-bg: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --i-line: #cfe3f7; --i-fill: #1f5f56; --i-blue: #2f4c78; --i-acc: #e6b64f; --i-bg: #16262f; }
}
:root[data-theme="dark"] { --i-line: #cfe3f7; --i-fill: #1f5f56; --i-blue: #2f4c78; --i-acc: #e6b64f; --i-bg: #16262f; }

svg.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.28em; overflow: visible;
  fill: none; stroke: var(--i-line); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.ik-f { fill: var(--i-fill); } .ik-b { fill: var(--i-blue); } .ik-a { fill: var(--i-acc); }
.ik-w { fill: var(--i-bg); } .ik-n { fill: var(--i-line); stroke: none; }
.ik-thin { stroke-width: 1.5; } .ik-bold { stroke-width: 2.8; }
.ik-okc { fill: var(--ok-soft); stroke: var(--ok); } .ik-okl { stroke: var(--ok); }
.ik-badc { fill: var(--bad-soft); stroke: var(--bad); } .ik-badl { stroke: var(--bad); }

/* icon + text: a small gap after the icon (buttons are flex with their own gap) */
svg.ic { margin-right: .3em; }
.btn svg.ic { width: 1.2em; height: 1.2em; margin-right: 0; }
h1 svg.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
/* icon alone in its own box: centred, no gap */
.ico > svg.ic, .big > svg.ic, .t-say > svg.ic, .t-tip > span > svg.ic, .t-check-head > span > svg.ic { margin: 0; }
nav button .ico svg.ic { width: 22px; height: 22px; }
.mode-card .ico svg.ic { width: 28px; height: 28px; }
.g-det .big svg.ic { width: 34px; height: 34px; }
.t-say svg.ic { width: 18px; height: 18px; }
.t-tip > span > svg.ic { width: 22px; height: 22px; }
/* racetrack stops draw the symbol with <use class="g-ic"> inside the track's own svg */
use.g-ic { fill: none; stroke: var(--i-line); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* on a filled (accent) background: white outline, translucent body */
nav button.on svg.ic, .btn.primary svg.ic {
  --i-line: #fff; --i-fill: rgba(255,255,255,.28); --i-blue: rgba(255,255,255,.14); --i-acc: #ffd66b; --i-bg: var(--accent); }
:root[data-theme="dark"] nav button.on svg.ic, :root[data-theme="dark"] .btn.primary svg.ic {
  --i-line: #062520; --i-fill: rgba(255,255,255,.35); --i-blue: rgba(255,255,255,.2); --i-acc: #fff1c4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav button.on svg.ic, :root:not([data-theme="light"]) .btn.primary svg.ic {
    --i-line: #062520; --i-fill: rgba(255,255,255,.35); --i-blue: rgba(255,255,255,.2); --i-acc: #fff1c4; }
}
/* "Tiếp: <icon> step" labels: keep icon and text on one line */
.g-bubble > span { white-space: nowrap; }
.g-bubble > span { display: inline-flex; align-items: center; gap: .3em; }
.g-bubble > span > svg.ic { margin: 0; }
/* the current stop is always white: keep the light-theme colours there */
.g-stop.now use.g-ic { --i-line: #1f3a68; --i-fill: #bfeee3; --i-blue: #b9d2f3; --i-acc: #f6bd33; --i-bg: #fff; }