/* railbed.io industry pages: the hero stage's drawing. site/src/industry-figures.js draws it with the site/src/iso.js
   kernel and the page's scene (site/src/figures/<slug>.js). The stage itself (slate, texture, layout, the caption)
   is styled in industries.css; this file styles only the SVG inside [data-fig-art]. The engine prefixes every class
   in the drawing with i- (scenes write "face top", the page gets "i-face i-top"), so the site's own class names
   never reach it. Every colour the drawing uses is defined here. Copied to site/public by scripts/industrygen.py. */
[data-figure] {
  /* Paper objects: three tones so form reads on slate (top lightest, faces toward the lower left in the middle,
     faces toward the lower right darkest); ink hairlines; grey secondary lines */
  --fig-top: #FFFFFF; --fig-front: #F6F5F1; --fig-side: #E4E2DB;
  --fig-ink: #0E0E0D; --fig-ink-top: #2E2D2A; --fig-detail: #6A6964;
  --fig-stone-top: #ECEBE5; --fig-stone-front: #D6D4CD; --fig-stone-side: #B4B2AB;
  /* The ground everything stands on: the set's platform, the rail's causeway and the vault's pad */
  --fig-base-top: #D6D4CD; --fig-base-front: #BAB8B1; --fig-base-side: #9F9D96;
  /* Navy leads every scene and is Railbed's own part (the rail's sleepers, the gate's band, the vault and the USDC
     slip); its soft tint is the vault's cool paper. Brass is only the buyer's card. Green is only money arriving
     (the vault's light). Forest is only for things green in life (a leaf, a plant). */
  --fig-navy: #23345C; --fig-navy-soft: #DDE2EC; --fig-brass: #B08A4E; --fig-green: #1F7A4D; --fig-forest: #1F4D3A;
  --fig-focus: #7FD6A0;
  /* A page's own small subject accent (data-accent); navy unless the page names another */
  --fig-oxblood: #6B2A2A;
  --fig-acc: var(--fig-navy);
}
[data-figure][data-accent="forest"] { --fig-acc: var(--fig-forest); }
[data-figure][data-accent="oxblood"] { --fig-acc: var(--fig-oxblood); }
[data-figure][data-accent="brass"] { --fig-acc: var(--fig-brass); }

[data-fig-art] > svg.iso { display: block; width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Faces take their material's top, front and side tones (--t, --f, --s); a material class on a <g> colours every
   solid inside it. Paper is the default. */
.iso .i-face { fill: var(--f, var(--fig-front)); stroke: var(--fig-ink); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.iso .i-face.i-top { fill: var(--t, var(--fig-top)); }
.iso .i-face.i-side { fill: var(--s, var(--fig-side)); }
.iso .i-face.i-bare { stroke: none; }
.iso .i-face.i-rim { fill: none; }
.iso .i-face.i-screen { fill: var(--fig-top); }
.iso .i-face.i-glass { fill: var(--fig-stone-top); }
.iso .i-face.i-display { fill: color-mix(in srgb, var(--fig-navy), var(--fig-ink) 50%); }
.iso .i-stone { --t: var(--fig-stone-top); --f: var(--fig-stone-front); --s: var(--fig-stone-side); }
.iso .i-base { --t: var(--fig-base-top); --f: var(--fig-base-front); --s: var(--fig-base-side); }
.iso .i-ink { --t: var(--fig-ink-top); --f: var(--fig-ink); --s: var(--fig-ink); }
.iso .i-navy { --t: color-mix(in srgb, var(--fig-navy), var(--fig-top) 16%); --f: var(--fig-navy); --s: color-mix(in srgb, var(--fig-navy), var(--fig-ink) 30%); }
.iso .i-cool { --t: color-mix(in srgb, var(--fig-navy-soft), var(--fig-top) 55%); --f: var(--fig-navy-soft); --s: color-mix(in srgb, var(--fig-navy-soft), var(--fig-navy) 16%); }
.iso .i-acc { --t: color-mix(in srgb, var(--fig-acc), var(--fig-top) 16%); --f: var(--fig-acc); --s: color-mix(in srgb, var(--fig-acc), var(--fig-ink) 30%); }
.iso .i-brass { --t: color-mix(in srgb, var(--fig-brass), var(--fig-top) 12%); --f: var(--fig-brass); --s: color-mix(in srgb, var(--fig-brass), var(--fig-ink) 24%); }
.iso .i-forest { --t: color-mix(in srgb, var(--fig-forest), var(--fig-top) 12%); --f: var(--fig-forest); --s: color-mix(in srgb, var(--fig-forest), var(--fig-ink) 28%); }
.iso .i-steel { --t: var(--fig-stone-side); --f: var(--fig-detail); --s: color-mix(in srgb, var(--fig-detail), var(--fig-ink) 35%); }
.iso .i-face.i-navy { stroke: color-mix(in srgb, var(--fig-navy), var(--fig-ink) 45%); }

/* Marks drawn on faces */
.iso .i-line, .iso .i-detail, .iso .i-line-paper, .iso .i-line-navy, .iso .i-line-acc, .iso .i-detail-cool, .iso .i-rib {
  fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.iso .i-line { stroke: var(--fig-ink); }
.iso .i-detail { stroke: var(--fig-detail); }
.iso .i-line-paper { stroke: var(--fig-top); }
.iso .i-line-navy { stroke: var(--fig-navy); }
.iso .i-line-acc { stroke: var(--fig-acc); }
.iso .i-detail-cool { stroke: color-mix(in srgb, var(--fig-navy-soft), var(--fig-navy) 55%); }
.iso .i-rib { stroke: color-mix(in srgb, var(--fig-navy), var(--fig-top) 45%); }
.iso .i-bold { stroke-width: 2; }
.iso .i-fill-ink { fill: var(--fig-ink); }
.iso .i-fill-paper { fill: var(--fig-top); }
.iso .i-fill-stone { fill: var(--fig-stone-top); }
.iso .i-fill-navy { fill: var(--fig-navy); }
.iso .i-fill-acc { fill: var(--fig-acc); }
.iso .i-chip { fill: color-mix(in srgb, var(--fig-brass), var(--fig-top) 62%); stroke: var(--fig-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* The vault's balance, its unit and its light */
.iso .i-balance, .iso .i-unit { font-family: var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; }
.iso .i-balance { font-weight: 500; fill: var(--fig-top); }
.iso .i-unit { font-weight: 400; letter-spacing: .06em; fill: color-mix(in srgb, var(--fig-navy-soft), var(--fig-navy) 20%); }
.iso .i-lamp { fill: var(--fig-stone-front); stroke: var(--fig-ink); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .3s ease-out; }
.iso .i-lamp.i-on { fill: var(--fig-green); }

/* Parts you can press: a pointer, a small lift on hover, the 4px press-down, and a focus ring */
.iso .i-press { cursor: pointer; outline: none; }
.iso .i-press[aria-disabled="true"] { cursor: default; }
.iso .i-hit { fill: rgb(0 0 0 / 0); stroke: none; pointer-events: all; }
.iso .i-ring { fill: none; stroke: none; pointer-events: none; }
.iso .i-press:focus-visible .i-ring { stroke: var(--fig-focus); stroke-width: 2; vector-effect: non-scaling-stroke; }
.iso .i-lift { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .iso .i-press:not([aria-disabled="true"]):hover .i-lift { transform: translateY(-3px); }
}
.iso .i-press.i-down .i-lift, .iso .i-press.i-down:hover .i-lift { transform: translateY(4px); transition-duration: 60ms; }
@media (prefers-reduced-motion: reduce) { .iso .i-lift, .iso .i-lamp { transition: none; } }

/* Ambient touches, as slow and slight as the landing's industry cards: only while the stage is on screen
   (industries.js adds .play) and never with reduced motion */
.iso .i-m-bob, .iso .i-m-pulse, .iso .i-m-twinkle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .play .iso .i-m-bob { animation: figBob 5s ease-in-out var(--d, 0s) infinite alternate; }
  .play .iso .i-m-pulse { animation: figPulse 1.6s ease-in-out var(--d, 0s) infinite; }
  .play .iso .i-m-twinkle { animation: figTwinkle 6s ease-in-out var(--d, 0s) infinite; }
}
@keyframes figBob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes figPulse { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
@keyframes figTwinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .75; } }