*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f8f9fa;
  --bg-canvas: #ffffff;
  --surface: #ffffff;
  --surface2: #eaecf0;
  --border: #a2a9b1;
  --border-light: #c8ccd1;
  --text: #202122;
  --text-dim: #54595d;
  --text-muted: #a2a9b1;
  --accent: #3366cc;
  --accent-dim: #eaf3fb;
  --accent-hover: #2a4b8d;
  --node-label: #202122;
  --link-line: #c8ccd1;
  --link-line-focus: #a2a9b1;
  --infobox-border: #a2a9b1;
  --map-grey: #cbcdd0;
}
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-canvas: #0d1117;
  --surface: #161b22;
  --surface2: #21262d;
  --border: #30363d;
  --border-light: #21262d;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --text-muted: #484f58;
  --accent: #58a6ff;
  --accent-dim: #0d1f33;
  --accent-hover: #79c0ff;
  --node-label: #c9d1d9;
  --link-line: #3d444d;
  --link-line-focus: #545d68;
  --infobox-border: #30363d;
  --map-grey: #2d333b;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'Linux Libertine', Georgia, serif;
  overflow: hidden;
}

/* ── Footer ── */
#footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: 32px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 12px; gap: 4px;
}
.fb {
  background: none; border: none;
  color: var(--text-dim); font-family: inherit;
  font-size: 0.78rem; height: 32px; padding: 0 10px;
  cursor: pointer; transition: color 0.12s, background 0.12s;
  white-space: nowrap; line-height: 32px;
  border-right: 1px solid var(--border);
}
.fb:first-child { border-left: 1px solid var(--border); }
.fb:hover { color: var(--text); background: var(--surface2); }
.fb.active { color: var(--text); font-weight: 600; background: var(--surface2); }
.fb-icon {
  background: none; border: none;
  color: var(--text-dim); font-family: inherit;
  font-size: 1rem; height: 32px; width: 32px; padding: 0;
  cursor: pointer; transition: color 0.12s, background 0.12s;
  line-height: 32px; text-align: center;
  border-right: 1px solid var(--border);
}
.fb-icon:first-child { border-left: 1px solid var(--border); }
.fb-icon:hover { color: var(--text); background: var(--surface2); }
#footer-link {
  margin-left: auto;
  font-size: 0.72rem; color: var(--text-muted);
  text-decoration: none;
  transition: color 0.12s;
}
#footer-link:hover { color: var(--text-dim); }

/* ── Canvas (desktop) ── */
#canvas-wrap {
  position: fixed; inset: 0; top: 0; bottom: 32px;
  background: var(--bg-canvas);
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: default;
}
#tree-svg { width: 100%; display: block; }

/* SVG nodes */
.node-group { cursor: pointer; }
.node-label {
  font-family: -apple-system, 'Linux Libertine', Georgia, serif;
  fill: var(--text);
  pointer-events: none;
  dominant-baseline: middle;
}
.link { fill: none; stroke: var(--link-line); stroke-width: 1; }
.link-focused { stroke: var(--link-line-focus); stroke-width: 1.2; }

/* ── Detail Panel (desktop) ── */
#detail {
  position: fixed; right: 16px; top: 16px;
  width: 420px;
  background: var(--surface);
  border: 1px solid var(--infobox-border);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  transform: translateX(8px);
  z-index: 40;
}
#detail.visible { opacity: 1; pointer-events: auto; visibility: visible; transform: translateX(0); }

/* minimap sits at top, full width */
#d-map {
  width: 100%; display: none;
  border-bottom: 1px solid var(--border-light);
  line-height: 0;
}
#d-map canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }

/* text content below map */
#detail .d-content { padding: 14px 16px 16px; }
#detail .d-breadcrumb {
  font-size: 0.7rem; color: var(--text-dim);
  margin-bottom: 6px; line-height: 1.3;
}
#detail .d-name {
  font-family: 'Linux Libertine', Georgia, serif;
  font-size: 1.25rem; font-weight: 600; color: var(--text);
  line-height: 1.2; margin-bottom: 2px;
}
#detail .d-level {
  font-style: italic; color: var(--text-dim);
  font-size: 0.82rem; margin-bottom: 12px;
}
.d-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
}
.d-row:last-child { border-bottom: none; }
.d-row .key { color: var(--text-dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.d-row .val { color: var(--text); text-align: right; max-width: 65%; }

/* ── Description inside infobox ── */
#d-desc-row {
  padding: 8px 0 2px;
  font-style: italic; font-size: 0.82rem;
  color: var(--text-dim); line-height: 1.5;
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  display: none;
}
#d-desc-row.visible { display: block; }

/* ── Loader ── */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#loader p { display: none; }
#loader.hidden { display: none; }

/* ── Sunburst ── */
#sunburst-wrap {
  position: fixed; inset: 0; top: 0; bottom: 32px;
  display: none; align-items: center; justify-content: center;
  overflow: hidden; background: var(--bg-canvas);
}
#sunburst-wrap.visible { display: flex; }
#sunburst-svg { overflow: visible; }
.sb-arc { cursor: pointer; transition: opacity 0.12s; }
.sb-arc:hover { opacity: 0.80; }
.sb-label {
  font-family: -apple-system, 'Linux Libertine', Georgia, serif;
  pointer-events: none;
  dominant-baseline: middle;
  text-anchor: middle;
}

/* ── Mobile layout ── */
@media (max-width: 640px) {
  /* Infobox: full-width bar at top when visible */
  #detail {
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    max-height: 45vh;
    overflow-y: auto;
    border: none;
    border-bottom: 1px solid var(--infobox-border);
    transform: translateY(-8px);
    z-index: 40;
    visibility: hidden;
  }
  #detail.visible { transform: translateY(0); visibility: visible; }

  /* Canvas and sunburst stay full height — infobox floats over the top */
  #canvas-wrap {
    top: 0;
    bottom: 32px;
  }
  #sunburst-wrap {
    top: 0;
    bottom: 32px;
  }

  /* Slightly narrower infobox text */
  #detail .d-name { font-size: 1.05rem; }
  #detail .d-content { padding: 10px 12px 12px; }

  /* Footer: compress label text */
  .fb { font-size: 0.72rem; padding: 0 8px; }
  #footer-link { font-size: 0.65rem; }
}