/* Autonatomy v260 — Automotive Illustration System
   Reusable technical component illustrations. Additive learner-facing presentation only. */
:root{
  --ax260-bg:#07191f;--ax260-panel:#0a222a;--ax260-panel2:#0d2932;--ax260-line:#355760;
  --ax260-ink:#eef6f7;--ax260-muted:#87a0a7;--ax260-accent:var(--ax-course,#f2a43a);
  --ax260-data:#2fc4cf;--ax260-energy:#f2a43a;--ax260-mech:#d4dde0;--ax260-fluid:#60b9e5;
  --ax260-stop:#ec6f66;--ax260-hv:#9d91ee;--ax260-good:#69ca8a;
}
.ax260-illustration{position:relative;isolation:isolate;overflow:hidden;margin:16px 0 20px;border:1px solid var(--ax260-line);border-radius:12px;background:linear-gradient(180deg,#0b252e,#07191f);box-shadow:0 18px 42px rgba(1,14,19,.16);color:var(--ax260-ink)}
.ax260-illustration:before{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(74,151,163,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(74,151,163,.045) 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(#000 0 70%,transparent 96%)}
.ax260-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 14px;border-bottom:1px solid #294851;background:linear-gradient(180deg,#0e2c36,#09212a)}
.ax260-title{min-width:0}.ax260-kicker{display:flex;align-items:center;gap:8px;color:var(--ax260-accent);font:900 9px/1 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase}.ax260-kicker i{width:13px;height:13px;border:1.5px solid currentColor;border-radius:3px;position:relative;transform:rotate(45deg)}.ax260-kicker i:after{content:"";position:absolute;inset:3px;border:1px solid currentColor;border-radius:50%}
.ax260-title h2{margin:5px 0 0;color:#f4f9fa;font:850 clamp(15px,2vw,20px)/1.15 system-ui,sans-serif;letter-spacing:-.01em}.ax260-title p{margin:5px 0 0;color:#8da5ab;font:650 10px/1.45 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.035em;text-transform:uppercase}
.ax260-badge{flex:0 0 auto;padding:6px 8px;border:1px solid #3a6069;border-radius:5px;color:#9ab2b8;background:#071b22;font:850 8px/1 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase}
.ax260-canvas{padding:8px 10px 4px}.ax260-canvas svg{display:block;width:100%;height:auto;min-height:210px;max-height:365px;overflow:visible}
.ax260-line{fill:none;stroke:#c5d1d4;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.ax260-line.soft{stroke:#6f8b92;stroke-width:1.6}.ax260-line.data{stroke:var(--ax260-data)}.ax260-line.energy{stroke:var(--ax260-energy)}.ax260-line.fluid{stroke:var(--ax260-fluid)}.ax260-line.stop{stroke:var(--ax260-stop)}.ax260-line.hv{stroke:var(--ax260-hv)}.ax260-line.dash{stroke-dasharray:6 6}.ax260-fill{fill:#0c2831;stroke:#6b8990;stroke-width:1.7}.ax260-fill.dark{fill:#071b22}.ax260-fill.energy{fill:rgba(242,164,58,.10);stroke:var(--ax260-energy)}.ax260-fill.data{fill:rgba(47,196,207,.08);stroke:var(--ax260-data)}.ax260-fill.fluid{fill:rgba(96,185,229,.08);stroke:var(--ax260-fluid)}.ax260-fill.stop{fill:rgba(236,111,102,.08);stroke:var(--ax260-stop)}.ax260-fill.hv{fill:rgba(157,145,238,.09);stroke:var(--ax260-hv)}
.ax260-dot{fill:#06191f;stroke:var(--ax260-accent);stroke-width:2}.ax260-dot.data{stroke:var(--ax260-data)}.ax260-dot.energy{stroke:var(--ax260-energy)}.ax260-dot.fluid{stroke:var(--ax260-fluid)}.ax260-dot.stop{stroke:var(--ax260-stop)}.ax260-dot.hv{stroke:var(--ax260-hv)}
.ax260-label{fill:#e8f2f3;font:800 11px system-ui,sans-serif}.ax260-mini{fill:#829ca3;font:750 8px var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.055em}.ax260-number{fill:#06191f;font:950 8px var(--ax-font-tech,ui-monospace,monospace)}
.ax260-callout-line{fill:none;stroke:#56747c;stroke-width:1.15;stroke-dasharray:3 4}.ax260-arrow{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:7 6}.ax260-arrow.energy{stroke:var(--ax260-energy)}.ax260-arrow.data{stroke:var(--ax260-data)}.ax260-arrow.fluid{stroke:var(--ax260-fluid)}.ax260-arrow.hv{stroke:var(--ax260-hv)}
.ax260-callouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #294851;background:#071b22}.ax260-callout{min-width:0;padding:10px 11px;border-right:1px solid #294851}.ax260-callout:last-child{border-right:0}.ax260-callout small{display:flex;align-items:center;gap:6px;color:#718e96;font:850 8px/1.2 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase}.ax260-callout small b{display:grid;place-items:center;width:15px;height:15px;border:1px solid var(--ax260-accent);border-radius:50%;color:var(--ax260-accent);font-size:7px}.ax260-callout strong{display:block;margin-top:5px;color:#f1f7f8;font:800 11px/1.25 system-ui,sans-serif}.ax260-callout span{display:block;margin-top:3px;color:#839ea5;font:650 9px/1.35 system-ui,sans-serif}
.ax260-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:7px 12px 9px;border-top:1px solid rgba(52,89,99,.6);color:#7f9aa1;font:800 8px/1.2 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.055em;text-transform:uppercase}.ax260-footer span{display:inline-flex;align-items:center;gap:5px}.ax260-footer i{width:12px;height:3px;border-radius:2px;background:#c5d1d4}.ax260-footer .energy i{background:var(--ax260-energy)}.ax260-footer .data i{background:var(--ax260-data)}.ax260-footer .fluid i{background:var(--ax260-fluid)}.ax260-footer .stop i{background:var(--ax260-stop)}.ax260-footer .hv i{background:var(--ax260-hv)}
.ax260-illustration:hover .ax260-line.energy,.ax260-illustration:focus-within .ax260-line.energy{filter:drop-shadow(0 0 4px rgba(242,164,58,.35))}.ax260-illustration:hover .ax260-line.data,.ax260-illustration:focus-within .ax260-line.data{filter:drop-shadow(0 0 4px rgba(47,196,207,.32))}
.ax260-atlas-chip{display:inline-flex;align-items:center;gap:6px;margin:4px 4px 0 0;padding:5px 7px;border:1px solid #355760;border-radius:5px;background:#092029;color:#9bb0b5;font:800 8px/1 var(--ax-font-tech,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase}.ax260-atlas-chip svg{width:16px;height:16px;color:var(--ax260-accent)}
/* course family accent reinforcement */
body[data-course="03"] .ax260-illustration{--ax260-accent:#f0a33b}body[data-course="06"] .ax260-illustration{--ax260-accent:#ef7b3b}body[data-course="07"] .ax260-illustration{--ax260-accent:#e98a45}body[data-course="09"] .ax260-illustration{--ax260-accent:#65afe0}body[data-course="11"] .ax260-illustration{--ax260-accent:#d8a34c}body[data-course="13"] .ax260-illustration{--ax260-accent:#e06b61}body[data-course="05"] .ax260-illustration{--ax260-accent:#a68ae7}body[data-course="16"] .ax260-illustration{--ax260-accent:#978be9}
@media(max-width:760px){.ax260-head{padding:10px 11px}.ax260-badge{display:none}.ax260-canvas{padding:4px}.ax260-canvas svg{min-height:180px}.ax260-callouts{grid-template-columns:1fr 1fr}.ax260-callout:nth-child(2){border-right:0}.ax260-callout:nth-child(-n+2){border-bottom:1px solid #294851}.ax260-label{font-size:10px}.ax260-mini{font-size:7px}}
@media(max-width:460px){.ax260-canvas svg{min-height:160px}.ax260-title p{display:none}.ax260-callout{padding:9px}.ax260-callout strong{font-size:10px}.ax260-callout span{font-size:8px}}
@media print{.ax260-illustration{background:#fff;color:#172a33;box-shadow:none}.ax260-illustration:before{display:none}.ax260-head,.ax260-callouts{background:#fff}.ax260-title h2,.ax260-callout strong{color:#172a33}.ax260-label{fill:#172a33}.ax260-line{stroke:#273c45}.ax260-fill{fill:#fff}.ax260-footer{color:#4d646c}}