:root {
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --panel: #ffffff;
  --amber: #b45309;
  --amber-bg: #fffbeb;
  --amber-line: #fcd34d;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; }

.top {
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; background: #fff; border-bottom: 1px solid var(--line);
}
h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
#subtitle { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.banner {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber);
  font-size: 13px; font-weight: 600;
}
.banner-dot { width: 8px; height: 8px; background: #f59e0b; display: inline-block; }

.bar {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 8px 20px; background: #fff; border-bottom: 1px solid var(--line);
}
.jump { display: flex; flex-wrap: wrap; gap: 6px; }
.jump button, .tools button {
  background: #fff; border: 1px solid #cbd5e1; padding: 5px 10px; font-size: 12.5px; cursor: pointer; min-height: 30px;
}
.jump button:hover, .tools button:hover { background: #f1f5f9; border-color: #94a3b8; }
.jump button:focus-visible, .tools button:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.tools { display: flex; align-items: center; gap: 6px; }
.tools button { min-width: 30px; }
.tools .wide { padding: 5px 12px; }
#zoom-level { font-size: 12px; color: var(--muted); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 20px; background: #fff;
  border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.legend[hidden] { display: none; }
.legend .item { display: inline-flex; align-items: center; gap: 8px; color: #334155; }
.legend svg { display: block; flex: none; }

.layout { flex: 1; position: relative; display: flex; min-height: 0; }
.stage {
  flex: 1; position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none;
  background-color: var(--bg);
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 24px 24px;
  min-height: 460px;
}
.stage.dragging { cursor: grabbing; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none; }
.hint {
  position: absolute; left: 12px; bottom: 10px; margin: 0; font-size: 11.5px; color: var(--muted);
  background: rgba(255,255,255,.85); padding: 3px 8px; border: 1px solid var(--line); pointer-events: none;
}
.noscript { padding: 20px; }

/* SVG parts */
.node { cursor: pointer; outline: none; }
.node .box { transition: filter .12s; }
.node.card:hover .box, .node.card:focus-visible .box { filter: brightness(0.96); }
.focus-ring { fill: none; opacity: 0; pointer-events: none; stroke: #2563eb; stroke-width: 3; }
.node:focus-visible .focus-ring { opacity: 1; }
.sel-ring { fill: none; stroke: #0f172a; stroke-width: 4; opacity: 0; pointer-events: none; }
.node.selected .sel-ring { opacity: 1; }
.edge { fill: none; stroke-linejoin: miter; stroke-linecap: butt; transition: opacity .12s; pointer-events: none; }
.elabel { font-size: 12px; font-weight: 600; fill: #334155; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; transition: opacity .12s; font-family: var(--font); }
.dim .edge { opacity: .12; }
.dim .elabel { opacity: .15; }
.dim .node.card { opacity: .35; }
.dim .node.frame { opacity: .6; }
.dim .edge.hl { opacity: 1; stroke-width: 3.4; }
.dim .elabel.hl { opacity: 1; }
.dim .node.hl, .dim .node.selected { opacity: 1; }
text { font-family: var(--font); }

/* Panel: floats over the canvas on desktop */
.panel {
  position: absolute; right: 14px; top: 14px; bottom: 14px; width: 360px; z-index: 10;
  background: var(--panel); border: 1px solid #cbd5e1; box-shadow: 0 10px 30px rgba(15,23,42,.18);
  overflow-y: auto; padding: 20px 18px 28px;
}
.panel.empty-state { display: none; }
.panel .empty { color: var(--muted); font-size: 14px; line-height: 1.5; }
.panel .empty h2 { color: var(--ink); font-size: 16px; margin: 0 0 6px; }
.panel .kicker { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.panel .swatch { width: 10px; height: 10px; flex: none; }
.panel h2.name { margin: 8px 0 2px; font-size: 22px; letter-spacing: -0.01em; }
.panel .role { margin: 0 0 10px; color: #475569; font-size: 14px; }
.panel .tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border: 1px solid #cbd5e1; color: #334155; background: #f8fafc; margin: 0 6px 10px 0; }
.panel .tag.planned { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.panel .summary { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.panel h3 { margin: 16px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li { position: relative; padding: 5px 0 5px 14px; font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid #f1f5f9; }
.panel li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--c, #94a3b8); }
.panel .links { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .links button { border: 1px solid #cbd5e1; background: #fff; padding: 4px 9px; font-size: 12.5px; cursor: pointer; border-left: 4px solid var(--c, #94a3b8); }
.panel .links button:hover { background: #f1f5f9; }
.panel .close { display: block; position: absolute; right: 10px; top: 10px; border: 1px solid #cbd5e1; background: #fff; width: 32px; height: 32px; font-size: 18px; cursor: pointer; }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 20px; font-size: 12px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.foot a { color: #2563eb; }

/* Desktop fills viewport; the page itself does not scroll */
@media (min-width: 901px) {
  body { height: 100vh; height: 100dvh; overflow: hidden; }
}

/* Tablet and phone: panel becomes a bottom sheet */
@media (max-width: 900px) {
  .layout { display: block; }
  .stage { height: 68vh; height: 68dvh; min-height: 380px; }
  .panel {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh; z-index: 20;
    border-width: 1px 0 0; border-top: 1px solid #94a3b8; box-shadow: 0 -8px 24px rgba(15,23,42,.18);
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .top, .bar, .legend, .foot { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 18px; }
  .hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }