/* Shared diagram strokes + typography floors. Light fills are scoped so dark mode can win. */
.title { font: 700 28px Inter, Segoe UI, Helvetica, Arial, sans-serif; }
.sub { font: 400 14px Inter, Segoe UI, Helvetica, Arial, sans-serif; }
.label { font: 600 14px Inter, Segoe UI, Helvetica, Arial, sans-serif; pointer-events: none; }
.small, .zone, .leg, .legend, .bus, .dim-label {
  font-size: calc(12px + 1pt);
  font-family: Inter, Segoe UI, Helvetica, Arial, sans-serif;
  pointer-events: none;
}
.small { font-weight: 400; }
.zone, .bus { font-weight: 700; letter-spacing: 0.06em; }
.leg, .legend, .dim-label { font-weight: 500; }

html:not([data-theme="dark"]) .title,
html:not([data-theme="dark"]) .label { fill: #111827; }
html:not([data-theme="dark"]) .sub,
html:not([data-theme="dark"]) .small { fill: #6B7280; }
html:not([data-theme="dark"]) .zone,
html:not([data-theme="dark"]) .bus { fill: #374151; }
html:not([data-theme="dark"]) .leg,
html:not([data-theme="dark"]) .legend { fill: #4B5563; }
html:not([data-theme="dark"]) .dim-label { fill: #64748B; }

html:not([data-theme="dark"]) .wall { fill: #FFFFFF; stroke: #94A3B8; stroke-width: 2.5; }
html:not([data-theme="dark"]) .box,
html:not([data-theme="dark"]) .tap { fill: #FFFFFF; stroke: #D1D5DB; stroke-width: 1.5; }
html:not([data-theme="dark"]) .box-hi { fill: #F8FAFC; stroke: #64748B; stroke-width: 1.6; }
html:not([data-theme="dark"]) .gland,
html:not([data-theme="dark"]) .end { fill: #F3F4F6; stroke: #9CA3AF; stroke-width: 1.25; }
html:not([data-theme="dark"]) .zonebox { fill: #F8FAFC; stroke: #E5E7EB; stroke-width: 1; }
html:not([data-theme="dark"]) .dim {
  fill: #F3F4F6; stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 4 3;
}
html:not([data-theme="dark"]) .island { fill: none; stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 6 4; }
html:not([data-theme="dark"]) .fixture { fill: #EEF2FF; stroke: #A5B4FC; stroke-width: 1.25; }
html:not([data-theme="dark"]) .spare { fill: #F3F4F6; stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 4 3; }
html:not([data-theme="dark"]) .deleted { fill: #111827; stroke: #111827; }
html:not([data-theme="dark"]) .hull-fill { fill: #F8FAFC; stroke: #334155; stroke-width: 2.2; }
html:not([data-theme="dark"]) .keel { fill: #E5E7EB; stroke: #334155; }
html:not([data-theme="dark"]) .view { fill: #374151; }

.wall { stroke: #94A3B8; stroke-width: 2.5; }
.box, .tap { stroke: #D1D5DB; stroke-width: 1.5; }
.box-hi { stroke: #64748B; stroke-width: 1.6; }
.gland, .end { stroke: #9CA3AF; stroke-width: 1.25; }
.zonebox { stroke: #E5E7EB; stroke-width: 1; }
.dim { stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 4 3; }
.island { fill: none; stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 6 4; }

/* Wire strokes — locked identical in light and dark. */
.canh { stroke: #DC2626; stroke-width: 2.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.canl { stroke: #2563EB; stroke-width: 2.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pwr { stroke: #D97706; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.usb { stroke: #7C3AED; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.eth { stroke: #059669; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.uart, .serial { stroke: #0E7490; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gpio { stroke: #4338CA; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-dasharray: 2 4; }
.i2c { stroke: #DB2777; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 6 5; }
.spi { stroke: #C026D3; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 6 5; }
.rf { stroke: #EA580C; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-dasharray: 3 14; }
/* .rf = wireless RF (LoRa etc): short dash, wide gap — wider than .spi/.i2c */
.coax { stroke: #92400E; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-dasharray: 8 3 2 3; }
.sig { stroke: #6B7280; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.phase { stroke: #0F766E; stroke-width: 2; fill: none; stroke-linecap: round; }
.trunk { stroke: #B45309; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-dasharray: 7 5; }
.steer { stroke: #6B7280; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-dasharray: 5 5; }
.drop { stroke: #6B7280; stroke-width: 1.5; fill: none; stroke-linecap: round; }
/* .offbus = off-CAN 24 V (Central drives Ewellix). Amber + wide dash — not grey passive. */
.offbus { stroke: #D97706; stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-dasharray: 10 6; }
.alive { stroke: #4338CA; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-dasharray: 2 4; }
.fixture { stroke: #A5B4FC; stroke-width: 1.25; }
.spare { stroke: #94A3B8; stroke-width: 1.5; stroke-dasharray: 4 3; }
.deleted { stroke: #111827; }
.hull-fill { stroke: #334155; stroke-width: 2.2; stroke-linejoin: round; }
.hull, .thin { fill: none; stroke: #6B7280; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.keel { stroke: #334155; stroke-width: 1.5; }
.cluster { fill: none; stroke: #94A3B8; stroke-width: 1.2; stroke-dasharray: 4 3; }
.dash { fill: none; stroke: #D1D5DB; stroke-width: 1; stroke-dasharray: 4 4; }
.arrow { fill: none; stroke: #94A3B8; stroke-width: 1.1; }
.mark { fill: #9CA3AF; stroke: none; }
.view { font: 700 calc(12px + 1pt) Inter, Segoe UI, Helvetica, Arial, sans-serif; letter-spacing: 0.06em; pointer-events: none; }

.back { font: 500 13px Inter, Segoe UI, Helvetica, Arial, sans-serif; fill: #2563EB; }
.hot { cursor: pointer; }
.hot:hover .box,
.hot:hover .box-hi,
.hot:hover .gland,
.hot:hover .end,
.hot:hover .dim,
.hot:hover .tap,
.hot:hover .island { stroke: #2563EB; stroke-width: 2.5; }
.hot.active .box,
.hot.active .box-hi,
.hot.active .gland,
.hot.active .end,
.hot.active .tap { stroke: #1D4ED8; stroke-width: 2.75; }
html:not([data-theme="dark"]) .hot.active .box,
html:not([data-theme="dark"]) .hot.active .box-hi,
html:not([data-theme="dark"]) .hot.active .tap { fill: #EFF6FF; }
.navbadge { font: 600 10px Inter, Segoe UI, Helvetica, Arial, sans-serif; fill: #2563EB; pointer-events: none; }