:root { --ink:#111827; --muted:#6B7280; --line:#E5E7EB; --blue:#2563EB; --bg:#fff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif; }
.site-nav {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 12px; border-bottom:1px solid var(--line); background:#F8FAFC;
  position:sticky; top:0; z-index:30;
}
.site-nav .nav-label {
  font:700 10px/1 Inter,Segoe UI,Helvetica,Arial,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#9CA3AF; margin-right:2px;
}
.site-nav a {
  display:inline-block; padding:5px 9px; border-radius:999px;
  border:1px solid #D1D5DB; background:#fff; color:var(--ink);
  text-decoration:none; font:600 12px Inter,Segoe UI,Helvetica,Arial,sans-serif;
}
.site-nav a:hover { border-color:var(--blue); color:var(--blue); }
.site-nav a.current { background:#EFF6FF; border-color:#93C5FD; color:#1D4ED8; }
.layout {
  display:flex; flex-direction:column; max-width:1588px; margin:0 auto;
  min-height:calc(100vh - 44px);
}
.diagram-wrap { overflow:auto; padding:8px 16px 8px; flex:0 0 auto; }
.diagram-wrap svg { display:block; width:100%; max-width:1588px; height:auto; }
aside:not(#panel) {
  flex:0 0 auto; width:100%; max-width:1588px; margin:0 auto;
  padding:10px 14px 14px; background:#F8FAFC; border-top:1px solid var(--line);
  max-height:220px; overflow:auto;
}
aside#panel {
  /* floating card — never inherit the bottom-strip 220px cap */
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  height: auto;
  overflow-x: clip;
  overflow-y: auto;
  padding: 12px 14px 14px;
  background: #F8FAFC;
  border-top: none;
}
aside h2 { margin:0 0 4px; font-size:15px; }
aside .blurb { margin:0 0 6px; color:var(--muted); font-size:12px; line-height:1.35; }
aside .more { margin:0 0 8px; font-size:13px; line-height:1.4; }
aside .hint { margin:0 0 8px; font-size:12px; color:var(--muted); }
aside .empty { color:var(--muted); font-size:13px; line-height:1.35; }
aside .sources { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; }
aside .sources li { margin:0; font-size:11px; line-height:1.3; }
aside .sources a { color:var(--blue); text-decoration:none; }
aside .sources a:hover { text-decoration:underline; }
aside .sources .sec { color:var(--muted); }
aside .sources-label { margin:8px 0 4px; font-size:10px; font-weight:700; letter-spacing:.06em; color:#9CA3AF; text-transform:uppercase; width:100%; }
aside a.open,
#panel a.open {
  display:inline-flex; align-items:center; justify-content:center;
  margin:4px 0 8px; padding:8px 12px; border-radius:8px;
  background:#2563EB; color:#fff !important; text-decoration:none !important;
  font:700 12px Inter,Segoe UI,Helvetica,Arial,sans-serif;
}
aside a.open:hover { background:#1D4ED8; }
aside .jump-list { margin:0 0 8px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:5px; }
aside .jump-list a {
  display:inline-block; padding:5px 8px; border-radius:6px;
  border:1px solid #BFDBFE; background:#EFF6FF; color:#1D4ED8;
  text-decoration:none; font:600 11px Inter,Segoe UI,Helvetica,Arial,sans-serif;
}
aside .jump-list a:hover { background:#DBEAFE; }
aside button.close {
  display:inline-block; margin-top:6px; border:1px solid #D1D5DB; background:#fff;
  border-radius:8px; padding:6px 10px; cursor:pointer; font:500 12px inherit;
}
.page-sources { max-width:1588px; margin:0 auto 24px; padding:0 16px; font-size:12px; color:var(--muted); }
.page-sources h3 { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#9CA3AF; }
.page-sources a { color:var(--blue); }
a.open[hidden], #panel-body[hidden], #panel-empty[hidden], #panel-sources[hidden], #panel-jumps[hidden] { display: none !important; }
.hot { cursor: pointer; }
a.hot-link { text-decoration: none; }
html:not([data-theme="dark"]) .hot.active .fixture { stroke: #1D4ED8; stroke-width: 2.5; fill: #EEF2FF; }

#always-jumps { display: none; }

/* Atlas overview chrome (Electronics and peers that use .atlas-main). */
.atlas-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0 12px 12px; }
.page-head { margin: 10px 0 8px; }
.page-head h1 { margin: 0 0 2px; font: 700 22px/1.2 Inter, Segoe UI, Helvetica, Arial, sans-serif; }
.page-head .sub { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.page-head .crumbs { margin: 0 0 4px; font: 500 13px Inter, Segoe UI, Helvetica, Arial, sans-serif; }
.page-head .crumbs a { color: var(--blue); text-decoration: none; }
.page-head .hint, .hint { color: var(--muted); font-size: 14px; margin: 0 0 8px; line-height: 1.45; }
.page-head .hint a, .hint a { color: var(--blue); }
.diagram-shell { width: 100%; }
svg.diagram { display: block; width: 100%; height: auto; max-width: none; }
.theme-toggle {
  margin-left: auto;
  display: inline-block; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #D1D5DB; background: #fff; color: var(--ink);
  font: 600 12px Inter, Segoe UI, Helvetica, Arial, sans-serif;
}
/* Floating info panel — default top-right; draggable; no horizontal scroll. */
#panel {
  position: fixed; top: 72px; right: 16px; left: auto; bottom: auto; z-index: 50;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: fit-content;
  max-height: calc(100vh - 96px);
  overflow-x: hidden !important;
  overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  background: #F8FAFC; padding: 12px 14px 14px;
  flex: none; margin: 0; border-top: none;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
#panel.panel-dragging { user-select: none; cursor: grabbing; }
#panel .panel-drag {
  cursor: grab; touch-action: none;
  margin: -2px -2px 8px; padding: 6px 32px 8px 4px;
  border-radius: 8px;
  font: 700 13px/1.2 Inter, Segoe UI, Helvetica, Arial, sans-serif;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  min-height: 24px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel .panel-drag:active { cursor: grabbing; }
#panel .panel-drag:empty::before { content: "⋮⋮ Drag"; color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
/* Closed = nothing selected: keep the diagram + legend unobstructed. */
#panel:has(#panel-body[hidden]) { display: none; }
/* Floating open state: only the selected body — no jump strip / hint clutter. */
#panel .hint,
#panel #always-jumps { display: none !important; }
#panel > *,
#panel #panel-body,
#panel #panel-body > * {
  max-width: 100%;
  box-sizing: border-box;
}
#panel h2 {
  margin: 0 0 6px; font-size: 16px; padding-right: 28px;
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
#panel .blurb, #panel .more {
  overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
#panel .sources,
#panel .sources li,
#panel .sources a,
#panel .sources .sec {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#panel .sources { display: block; }
#panel .sources li { display: block; margin: 0 0 6px; }
#panel a.open {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
#panel .close {
  position: absolute; top: 8px; right: 8px; margin: 0; padding: 0;
  width: 28px; height: 28px; border-radius: 8px; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #D1D5DB; background: #fff; color: #6B7280; cursor: pointer;
  z-index: 2;
}
html[data-theme="dark"] #panel .close {
  background: #1A2438; border-color: #475569; color: #CBD5E1;
}
/* Kill any aside inheritance that causes a horizontal scrollbar. */
aside#panel {
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 96px) !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}
aside#panel #panel-body {
  overflow-x: clip;
  max-width: 100%;
}
aside#panel .sources {
  display: block !important;
  flex-wrap: unset !important;
  gap: 0 !important;
}


aside .sources a, .page-sources a, footer a {
  text-decoration: underline;
}
aside a.open, #panel a.open { text-decoration: none !important; color: #fff !important; }
.site-nav a, .site-nav a:hover { text-decoration: none; }

/* Dark = Pi A navy canvas + white diagram text. Wire strokes stay locked. */
html[data-theme="dark"] {
  --ink: #F8FAFC; --muted: #CBD5E1; --line: #334155; --blue: #60A5FA; --bg: #151E30;
  --diagram-ink: #F8FAFC;
}
html[data-theme="dark"] body { background: #151E30; color: #F8FAFC; }
html[data-theme="dark"] .site-nav { background: #0B1220; border-bottom-color: #334155; }
html[data-theme="dark"] .site-nav a {
  background: #1A2438; border-color: #475569; color: #F8FAFC; text-decoration: none;
}
html[data-theme="dark"] .site-nav a.current { background: #1E3A5F; border-color: #60A5FA; color: #F8FAFC; }
html[data-theme="dark"] .theme-toggle { background: #1A2438; border-color: #475569; color: #F8FAFC; }
html[data-theme="dark"] aside,
html[data-theme="dark"] #panel { background: #1A2438; border-color: #334155; }
html[data-theme="dark"] aside .sources a,
html[data-theme="dark"] .page-sources a,
html[data-theme="dark"] footer a { color: #60A5FA; text-decoration: underline; }
html[data-theme="dark"] aside a.open,
html[data-theme="dark"] #panel a.open {
  background: #2563EB;
  color: #fff !important;
  text-decoration: none !important;
}
html[data-theme="dark"] footer, html[data-theme="dark"] .page-sources { color: #CBD5E1; }
html[data-theme="dark"] svg.diagram { background: #0B1220; fill: #0B1220; }
html[data-theme="dark"] .wall { fill: #151E30; stroke: #64748B; }
html[data-theme="dark"] .zonebox { fill: #151E30; stroke: #334155; }
html[data-theme="dark"] .box,
html[data-theme="dark"] .box-hi,
html[data-theme="dark"] .tap,
html[data-theme="dark"] .end,
html[data-theme="dark"] .gland,
html[data-theme="dark"] .dim,
html[data-theme="dark"] .spare,
html[data-theme="dark"] .fixture { fill: #1A2438; }
html[data-theme="dark"] .box, html[data-theme="dark"] .tap { stroke: #475569; }
html[data-theme="dark"] .box-hi { stroke: #64748B; }
html[data-theme="dark"] .end, html[data-theme="dark"] .gland { stroke: #64748B; }
html[data-theme="dark"] .dim, html[data-theme="dark"] .spare { stroke: #94A3B8; }
html[data-theme="dark"] .island { stroke: #64748B; }
html[data-theme="dark"] .fixture { stroke: #64748B; }
html[data-theme="dark"] .deleted { fill: #0B1220; stroke: #334155; }
html[data-theme="dark"] .hull-fill { fill: #151E30; stroke: #64748B; }
html[data-theme="dark"] .hull, html[data-theme="dark"] .thin { stroke: #94A3B8; }
html[data-theme="dark"] .keel { fill: #1A2438; stroke: #64748B; }
html[data-theme="dark"] .cluster { stroke: #475569; }
html[data-theme="dark"] .dash { stroke: #475569; }
html[data-theme="dark"] .arrow { stroke: #64748B; }
html[data-theme="dark"] .mark { fill: #94A3B8; }
html[data-theme="dark"] .title,
html[data-theme="dark"] .label,
html[data-theme="dark"] .small,
html[data-theme="dark"] .zone,
html[data-theme="dark"] .bus,
html[data-theme="dark"] .leg,
html[data-theme="dark"] .legend,
html[data-theme="dark"] .dim-label,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .back,
html[data-theme="dark"] .view { fill: #F8FAFC; }
html[data-theme="dark"] .hot.active .box,
html[data-theme="dark"] .hot.active .box-hi,
html[data-theme="dark"] .hot.active .tap,
html[data-theme="dark"] .hot.active .fixture,
html[data-theme="dark"] .hot.active .gland,
html[data-theme="dark"] .hot.active .end { fill: #243044; stroke: #93C5FD; stroke-width: 2.5; }

/* Lock wire colours — do not recolor in dark. */
html[data-theme="dark"] .canh { stroke: #DC2626; }
html[data-theme="dark"] .canl { stroke: #2563EB; }
html[data-theme="dark"] .pwr { stroke: #D97706; }
html[data-theme="dark"] .usb { stroke: #7C3AED; }
html[data-theme="dark"] .eth { stroke: #059669; }
html[data-theme="dark"] .uart, html[data-theme="dark"] .serial { stroke: #0E7490; }
html[data-theme="dark"] .gpio { stroke: #4338CA; }
html[data-theme="dark"] .i2c { stroke: #DB2777; }
html[data-theme="dark"] .spi { stroke: #C026D3; }
html[data-theme="dark"] .rf { stroke: #EA580C; }
html[data-theme="dark"] .coax { stroke: #92400E; }
html[data-theme="dark"] .sig { stroke: #6B7280; }
html[data-theme="dark"] .trunk { stroke: #B45309; }
html[data-theme="dark"] .steer { stroke: #6B7280; }
html[data-theme="dark"] .drop { stroke: #6B7280; }
html[data-theme="dark"] .offbus { stroke: #D97706; }
html[data-theme="dark"] .phase { stroke: #0F766E; }
html[data-theme="dark"] .alive { stroke: #4338CA; }