/* Code-native illustration kit — shared by every page that draws with inline
   SVG (architecture, home, the account screens). Put .tb-art on the element
   that wraps an illustration; its SVG shapes use the .a-* classes below and
   take their colours from the --art-* properties, which follow the theme tokens
   on light surfaces and switch to fixed deck colours inside the command deck
   (.deck). Sprite glyphs are drawn inside illustrations with
   <use href="#i-name" class="a-ico" x y width height/>. Motion is decorative
   and stops under prefers-reduced-motion. Load it before the page bundle:
   $page_styles = [..., 'art', '<page>']. See docs/WEBSITE_DESIGN_SPEC.md §12.3. */

/* ═══════════ Illustration palette ═══════════ */
.tb-art {
    --art-ink: var(--text-muted);
    --art-line: var(--text-dim);
    --art-surface: var(--surface);
    --art-surface-2: var(--surface-2);
    --art-surface-3: var(--surface-3);
    --art-primary: var(--series-1);
    --art-cyan: var(--series-2);
    --art-glow: var(--accent-bright);
    --art-soft: var(--primary-soft);
    --art-cyan-soft: var(--accent-soft);
    --art-chip: #1e293b;
    --art-chip-ink: #cbd5e1;
    --art-pcb: #e3ecf9;
    /* Real-world colour, so the drawings are not only blue: the bike has a
       bike colour, the tracker is a dark unit with its LED, maps have green
       parks, blue water and pale roads, and outdoor scenes have sky, sun,
       lamplight, trees and ground. Each value changes with the theme below. */
    --art-bike: #ea580c;        --art-bike-2: #c2410c;     --art-bike-hi: #fdba74;
    --art-tracker: #334155;     --art-tracker-edge: #64748b;   --art-tracker-ink: #cbd5e1;
    --art-land: #f4f1ea;        --art-park: #cfe8c6;           --art-park-edge: #9ccf94;
    --art-water: #bfe0f3;       --art-water-edge: #8fc6e6;     --art-road: #ffffff;   --art-road-edge: #d6d0c4;
    --art-sky: #e0f2fe;         --art-sky-2: #bae6fd;          --art-sun: #f59e0b;    --art-sun-soft: rgba(251, 191, 36, 0.24);
    --art-lamp: #fde68a;        --art-leaf: #6aab6d;           --art-leaf-2: #4f8f57; --art-trunk: #8b6b4e;
    --art-ground: #e6e2d8;      --art-hill: #dcebd3;
    --art-moon: #f3efe0;        --art-moon-soft: rgba(243, 239, 224, 0.16);
}
:root[data-theme="dark"] .tb-art {
    --art-chip: #0a1224; --art-pcb: #13233f;
    --art-bike: #fb923c;        --art-bike-2: #f97316;     --art-bike-hi: #fed7aa;
    --art-tracker: #273449;     --art-tracker-edge: #7e8ea6;   --art-tracker-ink: #cbd5e1;
    --art-land: #101a2e;        --art-park: #17352b;           --art-park-edge: #2f6b4a;
    --art-water: #12395a;       --art-water-edge: #1f5d8a;     --art-road: #2a3a5c;   --art-road-edge: #3d4d70;
    --art-sky: #0f1e3a;         --art-sky-2: #16294d;          --art-sun: #fcd34d;    --art-sun-soft: rgba(252, 211, 77, 0.18);
    --art-lamp: #fde68a;        --art-leaf: #3f7f52;           --art-leaf-2: #2f6440; --art-trunk: #7a5c43;
    --art-ground: #1a2438;      --art-hill: #16302a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tb-art {
        --art-chip: #0a1224; --art-pcb: #13233f;
        --art-bike: #fb923c;        --art-bike-2: #f97316;     --art-bike-hi: #fed7aa;
        --art-tracker: #273449;     --art-tracker-edge: #7e8ea6;   --art-tracker-ink: #cbd5e1;
        --art-land: #101a2e;        --art-park: #17352b;           --art-park-edge: #2f6b4a;
        --art-water: #12395a;       --art-water-edge: #1f5d8a;     --art-road: #2a3a5c;   --art-road-edge: #3d4d70;
        --art-sky: #0f1e3a;         --art-sky-2: #16294d;          --art-sun: #fcd34d;    --art-sun-soft: rgba(252, 211, 77, 0.18);
        --art-lamp: #fde68a;        --art-leaf: #3f7f52;           --art-leaf-2: #2f6440; --art-trunk: #7a5c43;
        --art-ground: #1a2438;      --art-hill: #16302a;
    }
}
:root .deck .tb-art {
    --art-ink: var(--deck-muted);
    --art-line: #94a3b8;
    --art-surface: #0f1a33;
    --art-surface-2: rgba(255, 255, 255, 0.06);
    --art-surface-3: rgba(255, 255, 255, 0.1);
    --art-primary: #3b82f6;
    --art-cyan: #22d3ee;
    --art-glow: #67e8f9;
    --art-soft: rgba(96, 165, 250, 0.16);
    --art-cyan-soft: rgba(103, 232, 249, 0.14);
    --art-chip: #0a1224;
    --art-chip-ink: #a5f3fc;
    --art-bike: #fb923c;        --art-bike-2: #f97316;     --art-bike-hi: #fed7aa;
    --art-tracker: #1e293b;     --art-tracker-edge: #7e8ea6;   --art-tracker-ink: #cbd5e1;
    --art-land: #0f1a33;        --art-park: #173729;           --art-park-edge: #2c6a47;
    --art-water: #113a5c;       --art-water-edge: #1f5d8a;     --art-road: #2b3d60;   --art-road-edge: #435577;
    --art-sky: #0a1224;         --art-sky-2: #13224a;          --art-sun: #fcd34d;    --art-sun-soft: rgba(252, 211, 77, 0.18);
    --art-lamp: #fde68a;        --art-leaf: #3f7f52;           --art-leaf-2: #2c5f3f; --art-trunk: #7a5c43;
    --art-ground: #131e35;      --art-hill: #14302a;
}

.tb-art svg:not(.ic) { display: block; width: 100%; height: auto; overflow: visible; }
.tb-art .a-line { fill: none; stroke: var(--art-line); stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-line--thin { stroke-width: 1.25; }
.tb-art .a-line--faint { stroke-opacity: 0.28; }
.tb-art .a-body { fill: var(--art-surface); stroke: var(--art-line); stroke-opacity: 0.55; stroke-width: 1.5; }
.tb-art .a-fill-2 { fill: var(--art-surface-2); }
.tb-art .a-fill-3 { fill: var(--art-surface-3); }
.tb-art .a-soft { fill: var(--art-soft); }
.tb-art .a-cyan-soft { fill: var(--art-cyan-soft); }
.tb-art .a-primary { fill: var(--art-primary); }
.tb-art .a-cyan { fill: var(--art-cyan); }
.tb-art .a-glow { fill: var(--art-glow); }
.tb-art .a-chip { fill: var(--art-chip); stroke: var(--art-line); stroke-opacity: 0.4; stroke-width: 1; }
.tb-art .a-pcb { fill: var(--art-pcb); stroke: var(--art-primary); stroke-opacity: 0.35; stroke-width: 1.5; }
.tb-art .a-trace { fill: none; stroke: var(--art-primary); stroke-opacity: 0.45; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-pins { fill: none; stroke: var(--art-line); stroke-opacity: 0.7; stroke-width: 5; stroke-dasharray: 3 5; }
.tb-art .a-edge { fill: none; stroke: var(--art-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--art-primary); }
.tb-art .a-ico--glow { color: var(--art-glow); }
.tb-art .a-ico--ink { color: var(--art-ink); }
.tb-art .a-ico--white { color: #fff; }
.tb-art .a-cloud { fill: var(--art-soft); stroke: var(--art-primary); stroke-width: 0.32; stroke-linejoin: round; }
.tb-art .a-text { fill: var(--art-ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.tb-art .a-text--lg { font-size: 16px; }
.tb-art .a-mono { fill: var(--art-ink); font-family: var(--font-mono); font-size: 11px; }
.tb-art .a-chip-text { fill: var(--art-chip-ink); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; }
.tb-art .a-num circle { fill: var(--primary); stroke: var(--art-surface); stroke-width: 3; }
.tb-art .a-num text { fill: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.tb-art .a-shadow { filter: drop-shadow(0 4px 10px rgba(11, 21, 38, 0.12)); }

/* Parts: bike, tracker, phone, board */
.tb-art .a-tire { fill: none; stroke: var(--art-line); stroke-opacity: 0.6; stroke-width: 7; }
.tb-art .a-hub, .tb-art .a-saddle { fill: var(--art-line); fill-opacity: 0.8; }
.tb-art .a-frame { fill: none; stroke: var(--art-bike); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-device { fill: var(--art-surface); stroke: var(--art-glow); stroke-opacity: 0.75; stroke-width: 1.5; }
.tb-art .a-bar { fill: var(--art-line); fill-opacity: 0.55; }
.tb-art .a-bar--dim { fill-opacity: 0.32; }
.tb-art .a-screen { fill: var(--art-surface-2); }
.tb-art .a-route { fill: none; stroke: var(--art-glow); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-ring { fill: none; stroke: var(--art-glow); stroke-width: 2; }
.tb-art .a-note { fill: var(--art-cyan-soft); stroke: var(--art-glow); stroke-opacity: 0.45; stroke-width: 1; }
.tb-art .a-tube { fill: none; stroke: var(--art-bike); stroke-width: 16; stroke-linecap: round; }
.tb-art .a-tube-hi { fill: none; stroke: var(--art-bike-hi); stroke-opacity: 0.7; stroke-width: 3; stroke-linecap: round; }
.tb-art .a-strap { fill-opacity: 0.55; }
.tb-art .a-case { fill: var(--art-surface-2); }
.tb-art .a-can { fill: var(--art-surface-3); }
.tb-art .a-chip-dot { fill: var(--art-chip-ink); }
.tb-art .a-chip-text--dim { font-size: 9px; font-weight: 500; opacity: 0.75; }
.tb-art .bc-stop-top { stop-color: var(--art-primary); stop-opacity: 0.26; }
.tb-art .bc-stop-bottom { stop-color: var(--art-primary); stop-opacity: 0.02; }

/* Real-world colour: the tracker unit, maps, outdoors */
.tb-art .a-tracker { fill: var(--art-tracker); stroke: var(--art-tracker-edge); stroke-width: 1.5; }
.tb-art .a-tracker-bar { fill: var(--art-tracker-ink); fill-opacity: 0.8; }
.tb-art .a-tracker-bar--dim { fill-opacity: 0.45; }
.tb-art .a-helmet { fill: var(--art-bike-2); }
.tb-art .a-ico--bike { color: var(--art-bike); }
/* Maps: land under everything, then parks and water, then roads (a casing
   under a lighter ribbon), then the route and pins from the kit. */
.tb-art .a-land { fill: var(--art-land); }
.tb-art .a-park { fill: var(--art-park); stroke: var(--art-park-edge); stroke-opacity: 0.7; stroke-width: 1; stroke-linejoin: round; }
.tb-art .a-water { fill: var(--art-water); stroke: var(--art-water-edge); stroke-opacity: 0.7; stroke-width: 1; stroke-linejoin: round; }
.tb-art .a-road-case { fill: none; stroke: var(--art-road-edge); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-road { fill: none; stroke: var(--art-road); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tb-art .a-road--minor { stroke-width: 3; }
.tb-art .a-road-case--minor { stroke-width: 5; }
/* Outdoors: sky (a rect, or the two gradient stops), sun and lamplight
   (fills and gradient stops), trees, hills and ground. */
.tb-art .a-sky { fill: var(--art-sky); }
.tb-art .a-stop-sky { stop-color: var(--art-sky); }
.tb-art .a-stop-sky-2 { stop-color: var(--art-sky-2); }
.tb-art .a-sun { fill: var(--art-sun); }
.tb-art .a-sun-soft { fill: var(--art-sun-soft); }
.tb-art .a-ray { fill: none; stroke: var(--art-sun); stroke-opacity: 0.8; stroke-width: 2; stroke-linecap: round; }
.tb-art .a-ico--sun { color: var(--art-sun); }
.tb-art .a-stop-sun { stop-color: var(--art-sun); }
.tb-art .a-lamp { fill: var(--art-lamp); }
.tb-art .a-stop-lamp { stop-color: var(--art-lamp); }
.tb-art .a-leaf { fill: var(--art-leaf); }
.tb-art .a-leaf--2 { fill: var(--art-leaf-2); }
.tb-art .a-ico--leaf { color: var(--art-leaf-2); }
.tb-art .a-trunk { fill: var(--art-trunk); }
.tb-art .a-ground { fill: var(--art-ground); }
.tb-art .a-hill { fill: var(--art-hill); }
/* Day and night: a scene draws both a sun (in a .a-day group) and a moon
   with stars (in a .a-night group); the surface shows the right one. Light
   surfaces in the light theme are day; the dark theme and the command deck
   (always dark) are night. A lamp's glow belongs in the night group. */
.tb-art .a-moon { fill: var(--art-moon); }
.tb-art .a-moon-soft { fill: var(--art-moon-soft); }
.tb-art .a-star { fill: var(--art-moon); }
.tb-art .a-ico--moon { color: var(--art-moon); }
.tb-art .a-stop-moon { stop-color: var(--art-moon); }
.tb-art .a-night { display: none; }
:root[data-theme="dark"] .tb-art .a-day, :root .deck .tb-art .a-day { display: none; }
:root[data-theme="dark"] .tb-art .a-night, :root .deck .tb-art .a-night { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tb-art .a-day { display: none; }
    :root:not([data-theme="light"]) .tb-art .a-night { display: inline; }
}

/* Motion: flowing links, pulses, radio waves, travelling packets */
.tb-art .a-flow { fill: none; stroke: var(--art-glow); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; animation: art-flow 1.1s linear infinite; }
.tb-art .a-flow--quiet { stroke-opacity: 0.55; }
@keyframes art-flow { to { stroke-dashoffset: -22; } }
.tb-art .a-pulse { transform-box: fill-box; transform-origin: center; animation: art-pulse 2.4s var(--ease-standard) infinite; }
.tb-art .a-pulse--late { animation-delay: 1.2s; }
@keyframes art-pulse { 0% { transform: scale(0.5); opacity: 0.85; } 100% { transform: scale(2.6); opacity: 0; } }
.tb-art .a-blink { animation: art-blink 2s ease-in-out infinite; }
@keyframes art-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tb-art .a-wave { fill: none; stroke: var(--art-glow); stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: art-wave 2.4s ease-out infinite; }
.tb-art .a-wave--2 { animation-delay: 0.4s; }
.tb-art .a-wave--3 { animation-delay: 0.8s; }
@keyframes art-wave { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }
.tb-art .a-spin { transform-box: fill-box; transform-origin: center; animation: art-spin 40s linear infinite; }
@keyframes art-spin { to { transform: rotate(360deg); } }
.tb-art .a-packet { fill: var(--art-glow); filter: drop-shadow(0 0 4px var(--art-glow)); }

/* ═══════════ HTML companions ═══════════ */
/* A figure card that frames an illustration on a light surface. */
.art-panel {
    margin: 0; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
}
.art-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); }
.art-panel__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 700; }
.art-panel__title .ic { color: var(--accent); }
/* A small label pill for a drawing (opt-in through tb_portal_frame's 'tag'; no page uses one now). */
.art-tag {
    flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text-dim); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* Numbered badge matching an SVG .a-num callout, and a key list of them. */
.art-num {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 700;
}
.art-keys { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.art-keys li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-muted); }
.art-keys li strong { color: var(--text); font-weight: 600; }
@media (max-width: 620px) {
    .art-keys { grid-template-columns: 1fr; }
    .art-panel { padding: var(--sp-4); border-radius: var(--radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-art .a-flow, .tb-art .a-pulse, .tb-art .a-blink, .tb-art .a-spin { animation: none; }
    .tb-art .a-pulse { opacity: 0.35; transform: scale(1.6); }
    .tb-art .a-wave { animation: none; opacity: 0.7; }
    .tb-art .a-packet { display: none; }
}