/* StruXure.co product drawings, isometric (v4, 6 Nov 2026). Scoped to svg.sx-iso and .sx-isofig only;
   page backgrounds, type and buttons are untouched.
   1. Base: the home-port pilot's jobsite rules (site/pilot/style.css), prefixed .sx-iso instead of svg.
   2. Palette: STX['p7-crane'] from kinetech-scheme-lab qa/stx-pastel-1106/options.py, verbatim but scoped.
   3. Product-page pieces: documents, Gantt bars, boards, rooms (isokit.py class names).
   4. Labels, keynotes and screens on iso figures; draw-on for iso groups.
   Generated base + palette by qa/v4/make_iso_css.py; sections 3 and 4 are hand-written below the marker. */
.sx-iso { overflow: visible; }

/* ---- 1. base (pilot) */
.sx-iso polygon, .sx-iso path, .sx-iso line { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sx-iso .ft, .sx-iso .fl, .sx-iso .fr { stroke: #102d7b; stroke-width: .7; }
.sx-iso .ft { fill: #ffffff; } svg .fl { fill: #eef4f8; } svg .fr { fill: #d6e4ee; }
.sx-iso .ground { fill: #f2fafc; stroke: none; }
.sx-iso .ground-tile { fill: #f2fafc; stroke: none; }
.sx-iso .ft.slab { fill: #f7fbfd; } svg .fl.slab, .sx-iso .fr.slab { fill: #dde3e9; }
.sx-iso .wall.ft { fill: #c9d6df; } svg .wall.fl { fill: #f4f8fa; } svg .wall.fr { fill: #eaf1f5; }
.sx-iso .win { fill: #B3E3F6; stroke: #102d7b; stroke-width: .5; }
.sx-iso .door { fill: #e3ebf0; stroke: #102d7b; stroke-width: .6; } svg .slat { stroke: #9fb3c0; stroke-width: .5; }
.sx-iso .screen { fill: #102d7b; stroke: #102d7b; } svg .bar-run { fill: #00A1E0; stroke: none; } svg .bar-micro { fill: #ffffff; stroke: none; }
.sx-iso .zfloor { fill: transparent; stroke: none; transition: fill .2s ease; }
.sx-iso .aisle { stroke: #0090CC; stroke-width: .8; stroke-dasharray: 4 3; }
.sx-iso .upright.ft, .sx-iso .upright.fl, .sx-iso .upright.fr { fill: #102d7b; stroke-width: .4; }
.sx-iso .beam.fl { fill: #0090CC; } svg .beam.fr { fill: #0079AB; } svg .beam.ft { fill: #B3E3F6; }
.sx-iso .load.ft { fill: #fff; } svg .load.fl { fill: #f1eee8; } svg .load.fr { fill: #dcd7cc; }
.sx-iso .pallet.fl, .sx-iso .pallet.fr, .sx-iso .pallet.ft { fill: #c9d6df; stroke-width: .5; }
.sx-iso .ghost { fill: none !important; stroke: #0079AB !important; stroke-width: 1.2 !important; stroke-dasharray: 3 2; }
.sx-iso .gap-floor { fill: rgba(0,161,224,.35); stroke: none; }
.sx-iso .machine.ft { fill: #fff; } svg .machine.fl { fill: #e8f0f5; } svg .machine.fr { fill: #cddbe5; }
.sx-iso .cab.fl { fill: #dde6ec; } svg .cab.fr { fill: #c4d3dd; }
.sx-iso .hmi { fill: #102d7b; stroke: #102d7b; stroke-width: .5; }
.sx-iso .slot { fill: #2c3e47; stroke: none; }
.sx-iso .die.fl, .sx-iso .die.fr { fill: #8aa0ad; } svg .ram.fl { fill: #a9bcc8; } svg .ram.fr { fill: #93a9b6; }
.sx-iso .coil.fl { fill: #dfe7ec; } svg .coil.fr { fill: #b9c9d3; } svg .lap { fill: none; stroke: #8aa0ad; stroke-width: .5; } svg .ink-hole { fill: #2c3e47; stroke: #102d7b; stroke-width: .5; }
.sx-iso .sheet.fl { fill: #d6e1e8; } svg .sheet.fr { fill: #b9c9d3; } svg .sheet.ft { fill: #eef4f8; }
.sx-iso .conv.ft { fill: #f4f8fa; } svg .conv.fl { fill: #c9d6df; } svg .conv.fr { fill: #b3c4cf; } svg .roller { stroke: #9fb3c0; stroke-width: .5; }
.sx-iso .post { stroke: #102d7b; stroke-width: .8; }
.sx-iso .light .lamp { stroke-width: .5; transition: fill .25s ease; }
.sx-iso .s-run .lamp.ft { fill: #66C6EC; } svg .s-run .lamp.fl { fill: #0090CC; } svg .s-run .lamp.fr { fill: #0079AB; }
.sx-iso .s-micro .lamp.ft { fill: #fff; } svg .s-micro .lamp.fl { fill: #B3E3F6; } svg .s-micro .lamp.fr { fill: #00A1E0; }
.sx-iso .s-micro .lamp { stroke: #102d7b; stroke-width: 1.1; }
.sx-iso .s-idle .lamp.ft { fill: #dde3e9; } svg .s-idle .lamp.fl { fill: #c4cdd3; } svg .s-idle .lamp.fr { fill: #aab5bc; }
.sx-iso .fork-body.ft { fill: #fff; } svg .fork-body.fl { fill: #0090CC; } svg .fork-body.fr { fill: #0079AB; }
.sx-iso .tyre.fl, .sx-iso .tyre.fr, .sx-iso .tyre.ft { fill: #2c3e47; stroke: #21242c; }
.sx-iso .trailer.ft { fill: #fff; } svg .trailer.fl { fill: #f4f8fa; } svg .trailer.fr { fill: #dde6ec; }
.sx-iso .cabin.ft { fill: #fff; } svg .cabin.fl { fill: #0090CC; } svg .cabin.fr { fill: #0079AB; }
.sx-iso .plate.ft { fill: #c9d6df; }
.sx-iso .office.ft { fill: #ffffff; } svg .office.fl { fill: #eef4f8; } svg .office.fr { fill: #d6e4ee; }
.sx-iso .glass { fill: rgba(179,227,246,.28) !important; stroke: #0090CC !important; stroke-width: .6 !important; }
.sx-iso .lot { fill: #f7fbfd; stroke: #c6d6e0; stroke-width: .8; }
.sx-iso .road { fill: #e9eff3; stroke: none; }
.sx-iso .pad { fill: #fff; stroke: #c6d6e0; stroke-width: .8; }
.sx-iso .mat { fill: #fff; stroke: #c6d6e0; stroke-width: .8; stroke-dasharray: 4 3; }
.sx-iso .ln, .sx-iso .thin, .sx-iso .mull, .sx-iso .scf, .sx-iso .mast, .sx-iso .jib, .sx-iso .tie, .sx-iso .cable, .sx-iso .brace, .sx-iso .rebar, .sx-iso .rib, .sx-iso .fence, .sx-iso .fence-p, .sx-iso .post, .sx-iso .plan-l, .sx-iso .legs { fill: none; }
.sx-iso .thin { stroke: #8aa0ad; stroke-width: .5; }
.sx-iso .mull { stroke: #102d7b; stroke-width: .4; }
.sx-iso .ft.bld { fill: #fff; } svg .fl.bld { fill: #eef4f8; } svg .fr.bld { fill: #d6e4ee; }
.sx-iso .ft.slab { fill: #f7fbfd; } svg .fl.slab, .sx-iso .fr.slab { fill: #dde3e9; }
.sx-iso .ft.pour { fill: #B3E3F6; } svg .fl.pour { fill: #00A1E0; } svg .fr.pour { fill: #0079AB; }
.sx-iso .col.ft, .sx-iso .col.fl, .sx-iso .col.fr { fill: #102d7b; stroke-width: .4; }
.sx-iso .beam.fl { fill: #0090CC; } svg .beam.fr { fill: #0079AB; } svg .beam.ft { fill: #B3E3F6; }
.sx-iso .brace { stroke: #0079AB; stroke-width: .6; }
.sx-iso .scf { stroke: #0079AB; stroke-width: .8; }
.sx-iso .scf.thin { stroke: #66C6EC; stroke-width: .5; }
.sx-iso .plank.ft { fill: #fff; } svg .plank.fl, .sx-iso .plank.fr { fill: #c9d6df; stroke-width: .5; }
.sx-iso .mast { stroke: #102d7b; stroke-width: .8; } svg .mast.thin { stroke-width: .45; }
.sx-iso .jib { stroke: #102d7b; stroke-width: .8; } svg .jib.thin { stroke-width: .45; }
.sx-iso .tie { stroke: #102d7b; stroke-width: .5; } svg .cable { stroke: #2c3e47; stroke-width: .5; }
.sx-iso .cbase.ft { fill: #e9edf0; } svg .cbase.fl { fill: #c9d6df; } svg .cbase.fr { fill: #b9c4cb; }
.sx-iso .slew.ft, .sx-iso .ccab.ft, .sx-iso .trolley.ft, .sx-iso .hookb.ft { fill: #fff; }
.sx-iso .slew.fl, .sx-iso .ccab.fl, .sx-iso .trolley.fl, .sx-iso .hookb.fl { fill: #00A1E0; }
.sx-iso .slew.fr, .sx-iso .ccab.fr, .sx-iso .trolley.fr, .sx-iso .hookb.fr { fill: #0079AB; }
.sx-iso .cw.ft { fill: #e9edf0; } svg .cw.fl { fill: #b9c4cb; } svg .cw.fr { fill: #9eabb4; }
.sx-iso .hcar.ft { fill: #fff; } svg .hcar.fl { fill: #eef4f8; } svg .hcar.fr { fill: #d6e4ee; }
.sx-iso .tr.ft, .sx-iso .roof.ft { fill: #fff; } svg .tr.fl { fill: #f4f8fa; } svg .tr.fr { fill: #dde6ec; }
.sx-iso .roof.fl, .sx-iso .roof.fr { fill: #c9d6df; }
.sx-iso .scr { fill: #102d7b; stroke: none; }
.sx-iso .knob { fill: #102d7b; stroke: none; }
.sx-iso .step.fl, .sx-iso .step.fr, .sx-iso .blk.fl, .sx-iso .blk.fr, .sx-iso .ac.fl, .sx-iso .ac.fr { fill: #dde3e9; }
.sx-iso .leg.ft, .sx-iso .leg.fl, .sx-iso .leg.fr, .sx-iso .stand.ft, .sx-iso .stand.fl, .sx-iso .stand.fr { fill: #c9d6df; stroke-width: .5; }
.sx-iso .tbl.ft { fill: #fff; } svg .tbl.fl, .sx-iso .tbl.fr { fill: #d6e4ee; }
.sx-iso .sht.ft { fill: #fff; } svg .sht.fl, .sx-iso .sht.fr { fill: #e8eef2; stroke-width: .5; }
.sx-iso .plan { fill: #f2fafc; stroke: #0090CC; stroke-width: .7; }
.sx-iso .plan-l { stroke: #0090CC; stroke-width: .6; }
.sx-iso .tblock { fill: #e3f4fb; stroke: #0079AB; stroke-width: .5; }
.sx-iso .roll.fl { fill: #f7fbfd; } svg .roll.ft { fill: #fff; } svg .core { fill: #d6e4ee; stroke-width: .5; }
.sx-iso .mon.ft, .sx-iso .mon.fl, .sx-iso .mon.fr { fill: #212D3A; stroke: #102d7b; }
.sx-iso .mon-scr { fill: #102d7b; stroke: #102d7b; stroke-width: .5; }
.sx-iso .mon-bar { fill: #66C6EC; stroke: none; } svg .mon-bar.hi { fill: #00A1E0; }
.sx-iso .glass-edge { fill: none; stroke: #102d7b; stroke-width: .6; }
.sx-iso .cabinet.ft { fill: #fff; } svg .cabinet.fl { fill: #eef4f8; } svg .cabinet.fr { fill: #d6e4ee; }
.sx-iso .canopy { fill: rgba(179,227,246,.22); stroke: #0090CC; stroke-width: .7; }
.sx-iso .canopy-v.fl { fill: #B3E3F6; stroke: #0090CC; stroke-width: .6; }
.sx-iso .post { stroke: #102d7b; stroke-width: .8; }
.sx-iso .pallet.fl, .sx-iso .pallet.fr, .sx-iso .pallet.ft { fill: #c9d6df; stroke-width: .5; }
.sx-iso .stock.ft { fill: #fff; } svg .stock.fl { fill: #f1eee8; } svg .stock.fr { fill: #dcd7cc; }
.sx-iso .sleeper.ft, .sx-iso .sleeper.fl, .sx-iso .sleeper.fr { fill: #c9d6df; stroke-width: .5; }
.sx-iso .pipe.ft { fill: #fff; } svg .pipe.fr { fill: #d6e4ee; } svg .bore { fill: #8aa0ad; stroke-width: .4; }
.sx-iso .rebar { stroke: #5b6f7b; stroke-width: .7; }
.sx-iso .dump.fl { fill: #0090CC; } svg .dump.fr { fill: #0079AB; } svg .dump-top { fill: #c9d6df; }
.sx-iso .rib { stroke: #102d7b; stroke-width: .5; }
.sx-iso .pj.ft, .sx-iso .pj-roof.ft { fill: #fff; } svg .pj.fl { fill: #eef4f8; } svg .pj.fr { fill: #d6e4ee; } svg .pj-roof.fl, .sx-iso .pj-roof.fr { fill: #00A1E0; }
.sx-iso .gen.ft { fill: #fff; } svg .gen.fl { fill: #e8f0f5; } svg .gen.fr { fill: #cddbe5; } svg .grille { fill: #c9d6df; stroke-width: .5; }
.sx-iso .chassis.fl, .sx-iso .chassis.fr, .sx-iso .chassis.ft { fill: #c9d6df; }
.sx-iso .bed.fl, .sx-iso .bed.fr, .sx-iso .bed.ft { fill: #d6e4ee; }
.sx-iso .crate.ft { fill: #fff; } svg .crate.fl { fill: #f1eee8; } svg .crate.fr { fill: #dcd7cc; }
.sx-iso .cab.ft, .sx-iso .cab-l.ft { fill: #fff; } svg .cab.fl, .sx-iso .cab-l.fl { fill: #00A1E0; } svg .cab.fr, .sx-iso .cab-l.fr { fill: #0079AB; }
.sx-iso .tyre { fill: #2c3e47; stroke: #21242c; } svg .hub { fill: #c9d6df; stroke-width: .5; }
.sx-iso .fence { stroke: #8aa0ad; stroke-width: .6; stroke-dasharray: 3 3; } svg .fence-p { stroke: #8aa0ad; stroke-width: .6; }
.sx-iso .cone { fill: #fff; stroke: #102d7b; stroke-width: .6; } svg .cone-s { fill: none; stroke: #E6A700; stroke-width: 1.6; }
.sx-iso .cone-b.fl, .sx-iso .cone-b.fr, .sx-iso .cone-b.ft { fill: #e3ebf0; }
.sx-iso .bar.ft, .sx-iso .bar-b.ft { fill: #fff; } svg .bar.fl, .sx-iso .bar-b.fl { fill: #eef1f4; } svg .bar.fr, .sx-iso .bar-b.fr { fill: #dadfe4; }
.sx-iso .clip.ft, .sx-iso .clip.fl, .sx-iso .clip.fr { fill: #c9d6df; } svg .clamp.ft, .sx-iso .clamp.fl, .sx-iso .clamp.fr { fill: #102d7b; }
.sx-iso .binder.ft { fill: #fff; } svg .binder.fl { fill: #eef4f8; } svg .binder.fr { fill: #d6e4ee; } svg .binder.acc.fl, .sx-iso .binder.acc.fr { fill: #00A1E0; }
.sx-iso .chair.ft { fill: #fff; } svg .chair.fl { fill: #c9d6df; } svg .chair.fr { fill: #b9c4cb; }
.sx-iso .cab-f.ft { fill: #fff; } svg .cab-f.fl { fill: #eef4f8; } svg .cab-f.fr { fill: #d6e4ee; } svg .drawer { fill: #fff; stroke-width: .5; }
.sx-iso .dot-amber { fill: var(--st-amber); stroke: #fff; stroke-width: .6; }
.sx-iso .dot-green { fill: var(--st-green); stroke: #fff; stroke-width: .6; }
.sx-iso .dot-red { fill: var(--st-red); stroke: #fff; stroke-width: .6; }
.sx-iso .worker .shadow { fill: rgba(16,45,123,.12); stroke: none; }
.sx-iso .worker .legs { stroke: #102d7b; stroke-width: 1.4; }
.sx-iso .worker .vest { fill: #00A1E0; stroke: #102d7b; stroke-width: .6; }
.sx-iso .worker .shirt { fill: #fff; stroke: #102d7b; stroke-width: .6; }
.sx-iso .worker .head { fill: #fff; stroke: #102d7b; stroke-width: .6; }
.sx-iso .worker .hat { fill: #fff; stroke: #102d7b; stroke-width: .6; }
.sx-iso .worker .tab { fill: #102d7b; stroke: #102d7b; stroke-width: .5; }
.sx-iso .worker *, .sx-iso .scr-real image { vector-effect: non-scaling-stroke; }

/* ---- 2. palette p7-crane */
.sx-iso .worker .hat{fill:#fbecc4}
.sx-iso .worker .vest{fill:#fbd9bf}
.sx-iso .win:nth-of-type(6n+2){fill:#fbecc4}
.sx-iso .stock.ft{fill:#efdcc0}
.sx-iso .stock.fl{fill:color-mix(in srgb,#efdcc0,#102d7b 8%)}
.sx-iso .stock.fr{fill:color-mix(in srgb,#efdcc0,#102d7b 16%)}
.sx-iso .pallet.ft{fill:#efdcc0}
.sx-iso .pallet.fl{fill:color-mix(in srgb,#efdcc0,#102d7b 8%)}
.sx-iso .pallet.fr{fill:color-mix(in srgb,#efdcc0,#102d7b 16%)}
.sx-iso .fbox:not(.acc).ft{fill:#efdcc0}
.sx-iso .fbox:not(.acc).fl{fill:color-mix(in srgb,#efdcc0,#102d7b 8%)}
.sx-iso .fbox:not(.acc).fr{fill:color-mix(in srgb,#efdcc0,#102d7b 16%)}
.sx-iso .sht.ft{fill:#fbd9bf}
.sx-iso .sht.fl{fill:color-mix(in srgb,#fbd9bf,#102d7b 8%)}
.sx-iso .sht.fr{fill:color-mix(in srgb,#fbd9bf,#102d7b 16%)}
.sx-iso .bld.ft{fill:#d6dcf6}
.sx-iso .bld.fl{fill:color-mix(in srgb,#d6dcf6,#102d7b 8%)}
.sx-iso .bld.fr{fill:color-mix(in srgb,#d6dcf6,#102d7b 16%)}
.sx-iso .car.ft{fill:#d6dcf6}
.sx-iso .car.fl{fill:color-mix(in srgb,#d6dcf6,#102d7b 8%)}
.sx-iso .car.fr{fill:color-mix(in srgb,#d6dcf6,#102d7b 16%)}
.sx-iso .worker .vest{fill:#e4f1b6}
.sx-iso .slew.ft,.sx-iso .ccab.ft,.sx-iso .trolley.ft,.sx-iso .hookb.ft{fill:#fbecc4}
.sx-iso .slew.fl,.sx-iso .ccab.fl,.sx-iso .trolley.fl,.sx-iso .hookb.fl{fill:#F0C64D}
.sx-iso .slew.fr,.sx-iso .ccab.fr,.sx-iso .trolley.fr,.sx-iso .hookb.fr{fill:#E6A700}


/* ==== HAND: everything below is hand-written; make_iso_css.py keeps it ==================================== */
/* ---- 3. product-page pieces (isokit.py) */
.sx-iso polyline, .sx-iso circle, .sx-iso ellipse, .sx-iso rect { vector-effect: non-scaling-stroke; }
.sx-iso .tile { fill: #f2fafc; stroke: none; }
.sx-iso .rfloor { fill: #f7fbfd; stroke: #c6d6e0; stroke-width: .7; }
.sx-iso .rw.ft { fill: #c9d6df; } .sx-iso .rw.fl { fill: #f4f8fa; } .sx-iso .rw.fr { fill: #eaf1f5; }
.sx-iso .slab0 { fill: #eef2f5; stroke: #c6d6e0; stroke-width: .7; } .sx-iso .slabe.fl, .sx-iso .slabe.fr, .sx-iso .slabe.ft { fill: #dde3e9; }
.sx-iso .card { fill: #fff; stroke: #dde3e9; stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(16,45,123,.10)); }
.sx-iso .ground.nv { fill: rgba(255,255,255,.06); }
/* documents: white paper, a tint head band, grey writing; the sheet itself sits on a wall or a board */
.sx-iso .pp { fill: #fff; stroke: #102d7b; stroke-width: .5; }
.sx-iso .pp-hd { fill: #e3f4fb; stroke: none; }
.sx-iso .rule { fill: none; stroke: #dde3e9; stroke-width: .5; }
.sx-iso .rule-d { fill: none; stroke: #9fb3c0; stroke-width: .6; }
.sx-iso .tl { fill: none; stroke: #b9c4cb; stroke-width: 1.6; stroke-linecap: round; }
.sx-iso .wsheet.ft, .sx-iso .wsheet.fl, .sx-iso .wsheet.fr { fill: #fff; stroke-width: .5; }
.sx-iso .pinhead { fill: #E6A700; stroke: #102d7b; stroke-width: .4; }
.sx-iso .brd.ft { fill: #fff; } .sx-iso .brd.fl { fill: #dde6ec; } .sx-iso .brd.fr { fill: #c9d6df; }
/* Gantt: bars stand proud of the page; the critical path is the one cyan; done is navy */
.sx-iso .gb.ft { fill: #fff; } .sx-iso .gb.fl { fill: #d6dcf6; } .sx-iso .gb.fr { fill: #b9c1e8; }
.sx-iso .gb { stroke-width: .45; }
.sx-iso .gb.crit.ft { fill: #B3E3F6; } .sx-iso .gb.crit.fl { fill: #00A1E0; } .sx-iso .gb.crit.fr { fill: #0079AB; }
.sx-iso .gbd { fill: #102d7b; stroke: none; }
.sx-iso .gbd.k-final { fill: #102d7b; }
.sx-iso .mile { fill: #E6A700; stroke: #102d7b; stroke-width: .5; }
.sx-iso .today { fill: none; stroke: #0079AB; stroke-width: .9; stroke-dasharray: 3 2; }
.sx-iso .dep { fill: none; stroke: #102d7b; stroke-width: .6; }
.sx-iso .lk { fill: none; stroke: #0090CC; stroke-width: 1.1; stroke-dasharray: 3 3; }
.sx-iso .vt.ft, .sx-iso .vt.fl { fill: #fff; } .sx-iso .vt.fr { fill: #d6e4ee; } .sx-iso .vt { stroke-width: .5; }
.sx-iso .vt.on.fl, .sx-iso .vt.on.ft { fill: #B3E3F6; }
.sx-iso .vt-m { fill: none; stroke: #00A1E0; stroke-width: 1.6; } .sx-iso .vt-l { fill: none; stroke: #102d7b; stroke-width: .5; }
/* status: colour only where a document has a state */
.sx-iso .stamp { fill: rgba(255,255,255,.9); stroke-width: 1.4; } .sx-iso .stamp-i { fill: none; stroke-width: .6; } .sx-iso .stamp-m { fill: none; stroke-width: 1.6; }
.sx-iso .st-red { stroke: #C8362E; } .sx-iso .st-green { stroke: #1E7D4F; } .sx-iso .st-amber { stroke: #E6A700; }
.sx-iso .chip.st-green { fill: #1E7D4F; stroke: #fff; stroke-width: .4; } .sx-iso .chip.st-amber { fill: #E6A700; stroke: #fff; stroke-width: .4; } .sx-iso .chip.st-red { fill: #C8362E; stroke: #fff; stroke-width: .4; }
/* devices and furniture */
.sx-iso .lap.ft { fill: #e9edf0; } .sx-iso .lap.fl { fill: #c9d6df; } .sx-iso .lap.fr { fill: #b9c4cb; }
.sx-iso .kbz { fill: #dde3e9; stroke: #9fb3c0; stroke-width: .4; }
.sx-iso .lap-scr, .sx-iso .ph-scr { fill: #fff; stroke: #102d7b; stroke-width: .5; }
.sx-iso .ph.ft, .sx-iso .ph.fl, .sx-iso .ph.fr { fill: #212D3A; }
.sx-iso .rack.ft { fill: #fff; } .sx-iso .rack.fl { fill: #eef4f8; } .sx-iso .rack.fr { fill: #d6e4ee; }
.sx-iso .slotl { fill: #fff; stroke: #102d7b; stroke-width: .4; } .sx-iso .led { fill: #c9d6df; stroke: none; } .sx-iso .led.on { fill: #1E7D4F; }
.sx-iso .fun { fill: #eef4f8; stroke: #102d7b; stroke-width: .7; } .sx-iso .fun-in { fill: #fff; stroke: #102d7b; stroke-width: .7; } .sx-iso .fun-in2 { fill: #B3E3F6; stroke: #0090CC; stroke-width: .5; }
.sx-iso .fun-s.ft, .sx-iso .fun-s.fl { fill: #eef4f8; } .sx-iso .fun-s.fr { fill: #d6e4ee; }
.sx-iso .mag { fill: #fff; stroke: #102d7b; stroke-width: .7; } .sx-iso .mag-g { fill: rgba(179,227,246,.5); stroke: #0090CC; stroke-width: .5; }
.sx-iso .mag-h.ft, .sx-iso .mag-h.fl, .sx-iso .mag-h.fr { fill: #102d7b; }
.sx-iso .hh { fill: #fbecc4; stroke: #102d7b; stroke-width: .6; } .sx-iso .hh-b { fill: #F0C64D; stroke: #102d7b; stroke-width: .6; }
.sx-iso .stand.ft, .sx-iso .stand.fl, .sx-iso .stand.fr { fill: #c9d6df; stroke-width: .5; }
/* routes, nodes, leaders, the travelling sheet */
.sx-iso .k-route { stroke-width: 2.4; stroke-dasharray: 7 5; }
.sx-iso .k-node { fill: #00A1E0; stroke: #fff; stroke-width: 1.2; }
.sx-iso .k-leader { stroke: #102d7b; stroke-width: .8; } .sx-iso .k-leader-dot { fill: #102d7b; }
.sx-iso .tdoc { fill: #fbd9bf; stroke: #102d7b; stroke-width: .8; } .sx-iso .tdoc-l { stroke: #102d7b; stroke-width: .6; } .sx-iso .tdoc-sh { fill: rgba(16,45,123,.12); stroke: none; }
.sx-iso .k-final { transform-box: fill-box; transform-origin: center; }

/* ---- 4. labels, keynotes and screens on iso figures (the pilot's map pills and pins) */
.sx-isofig .sx-tag { padding: 5px 8px; background: rgba(255,255,255,.94); border: 0; border-radius: 6px; box-shadow: 0 0 0 1px #dde3e9; color: #2c3e47; font: 600 12px/1.15 var(--sans, Montserrat, sans-serif); }
.sx-isofig .sx-tag.on-edge { background: #102d7b; color: #fff; box-shadow: none; }
.sx-isofig .sx-tag.on-route { background: #102d7b; color: #fff; box-shadow: none; }
.sx-isofig .sx-tag.kn { min-width: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #102d7b; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(16,45,123,.3); font: 700 12px/1 var(--sans, Montserrat, sans-serif); }
.sx-isofig .iso-scr { position: absolute; z-index: 1; margin: 0; transform-origin: 0 0; }
.sx-isofig .iso-scr.ax-x { transform: matrix(.866, .5, 0, 1, 0, 0); }
.sx-isofig .iso-scr.ax-y { transform: matrix(.866, -.5, 0, 1, 0, 0); }
.sx-isofig .iso-scr img { display: block; width: 100%; height: auto; }
.sx-isofig .iso-scr .mp4 { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.sx-isofig .iso-scr.flat { transform: none; z-index: 5; box-shadow: 0 18px 40px -16px rgba(16,45,123,.45); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sx-isofig .iso-scr video { display: block; width: 100%; }
.sx-isofig .pz { border-radius: 10px; }
/* on the navy option-3 band */
.sec-deep .sx-isofig .sx-tag.on-edge { background: #00A1E0; color: #0a1f5c; }

/* ---- draw-on: an iso group settles into place as it fades in (lines don't draw on: solids arrive whole) */
.js:not(.rm) .sx-draw:not(.play) .sx-iso .ig { transform: translateY(-7px); }
.js:not(.rm) .sx-draw.play .sx-iso .ig.fd { transform: none; transition: opacity .45s ease-out calc(var(--d, 0) * 1ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1ms); }
@media (prefers-reduced-motion: reduce) { .sx-iso .ig { transform: none !important; } }

/* ---- the frames round iso drawings on iso pages: the pilot's soft card, not a drafting border */
body.iso .sx-sheet, body.iso .p1-det, body.iso .p2-place { border: 1px solid #dde3e9; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,45,123,.06), 0 22px 44px -28px rgba(16,45,123,.28); }
body.iso .sx-sheet::before { display: none; }
body.iso .sx-tb, body.iso .sx-tb > div { border-color: #dde3e9 !important; }
body.iso .p1-det figcaption { border-bottom-color: #dde3e9; }
body.iso .p1-det .bub { border: 0; background: #102d7b; color: #fff; }
.sx-iso .pour { fill: #B3E3F6; stroke: #0090CC; stroke-width: .6; }
/* the tile keynotes match the round pins on the drawings */
body.iso .kn-m { width: 28px; height: 28px; border-radius: 50%; clip-path: none; box-shadow: 0 2px 6px rgba(16,45,123,.25); }
/* phones: drawings render ~320px wide, so the pills shrink with them */
@media (max-width: 480px) {
  .sx-isofig .sx-tag { padding: 3px 6px; font-size: 10px; border-radius: 5px; }
  .sx-isofig .sx-tag.kn { width: 20px; height: 20px; padding: 0; font-size: 10px; border-width: 1.5px; }
}

/* ---- Punch List (6 Nov): the dropped map pin, status-coloured */
.sx-iso .pin-b.st-red { fill: #C8362E; } .sx-iso .pin-b.st-amber { fill: #E6A700; } .sx-iso .pin-b.st-green { fill: #1E7D4F; }
.sx-iso .pin-b { stroke: #102d7b; stroke-width: .6; }
.sx-iso .pin-h { fill: #fff; stroke: #102d7b; stroke-width: .5; }

/* ---- Daily Reports (6 Nov): weather glyphs (sun, rain cloud) and the hazard triangle */
.sx-iso .sun-c { fill: #F0C64D; stroke: #102d7b; stroke-width: .5; } .sx-iso .sun-r { stroke: #F0C64D; stroke-width: 1.2; }
.sx-iso .cloud { fill: #eef4f8; stroke: #102d7b; stroke-width: .6; } .sx-iso .rain { stroke: #0090CC; stroke-width: 1; }
.sx-iso .hazard-t { fill: #fbecc4; stroke: #102d7b; stroke-width: .6; } .sx-iso .hazard-m { stroke: #102d7b; stroke-width: 1; fill: none; }

/* ---- home + platform (core pages, 6 Nov): pilot hero/site-map classes the product pages never used
   (values from site/pilot/style.css; car cabs follow the p7-crane periwinkle cars) */
.sx-iso .car-c.ft { fill: #fff; } .sx-iso .car-c.fl { fill: #eef4f8; } .sx-iso .car-c.fr { fill: #d6e4ee; }
.sx-iso .board.ft { fill: #fff; } .sx-iso .board.fl { fill: #f1eee8; } .sx-iso .board.fr { fill: #dcd7cc; }
.sx-iso .eq.ft, .sx-iso .eq-c.ft { fill: #fff; } .sx-iso .eq.fl { fill: #00A1E0; } .sx-iso .eq.fr { fill: #0079AB; } .sx-iso .eq-c.fl, .sx-iso .eq-c.fr { fill: #eef4f8; }
.sx-iso .bucket.ft, .sx-iso .bucket.fl, .sx-iso .bucket.fr { fill: #c9d6df; }
.sx-iso .lane { fill: #fff; stroke: #c6d6e0; stroke-width: .6; } .sx-iso .lane-stripe { fill: #eef4f8; stroke: none; }

/* 6 Nov night (story review): desk top under the intro device (isokit.device_fig) */
.sx-iso .deskt { fill: #f2f6f9; stroke: #c9d6df; stroke-width: .5; }
/* the play button stays upright on the skewed intro screen */
.p-dev .iso-scr.ax-x:not(.flat) .mp4 .play { transform: matrix(1.1547, -.5774, 0, 1, 0, 0); }
.p-dev .iso-scr.ax-x:not(.flat) .mp4:hover .play { transform: matrix(1.1547, -.5774, 0, 1, 0, 0) scale(1.06); }

/* 6 Nov night: the route reveal mask must scale with the drawing, or pathLength=1 reveals only 1/scale of each route */
.sx-iso .k-rmask { vector-effect: none; }