/* ============ DESIGN TOKENS ============ */
:root, [data-theme='light'] {
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-border: #d4d1ca;
  --color-text: #28251d;
  --color-text-muted: #7a7974;
  --color-text-faint: #bab9b4;
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-primary-light: #dceeef;
  --color-gold: #d19900;
  --color-gold-light: #f8ecc9;
  --color-warning: #964219;
  --shadow-card: 0 2px 10px rgba(40, 37, 29, 0.06);
  --shadow-drawer: -8px 0 30px rgba(40, 37, 29, 0.12);
}
[data-theme='dark'] {
  --color-bg: #171614;
  --color-surface: #1c1b19;
  --color-surface-2: #201f1d;
  --color-border: #393836;
  --color-text: #cdccca;
  --color-text-muted: #797876;
  --color-text-faint: #5a5957;
  --color-primary: #4f98a3;
  --color-primary-hover: #227f8b;
  --color-primary-light: #1c3438;
  --color-gold: #e8af34;
  --color-gold-light: #3a3018;
  --color-warning: #bb653b;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-drawer: -8px 0 30px rgba(0, 0, 0, 0.4);
}

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;

  --font-display: 'Fraunces', 'Noto Sans SC', serif;
  --font-body: 'Work Sans', 'Noto Sans SC', sans-serif;
  --font-zh: 'Noto Sans SC', 'Work Sans', sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.5;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.zh { font-family: var(--font-zh); }

button { font-family: inherit; cursor: pointer; }

/* ============ HEADER ============ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand-mark { color: var(--color-primary); flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.brand-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.brand-updated { font-size: 10px; color: var(--color-text-faint); letter-spacing: .01em; }

.view-tabs { display: flex; gap: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; }
.tab-btn {
  border: none; background: transparent; color: var(--color-text-muted);
  font-size: var(--text-sm); font-weight: 500; padding: var(--space-2) var(--space-5);
  border-radius: 999px; transition: background .15s, color .15s;
}
.tab-btn.is-active { background: var(--color-primary); color: #fff; }
.tab-btn:not(.is-active):hover { color: var(--color-text); }

.theme-toggle {
  border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-moon { display: none; }
[data-theme='dark'] .icon-sun { display: none; }
[data-theme='dark'] .icon-moon { display: block; }

/* ============ MAIN / VIEWS ============ */
main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.view[hidden] { display: none !important; }

/* ---- Tree view ---- */
.tree-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); flex-wrap: wrap;
}
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1.5px solid var(--color-border); }
.dot-confirmed { background: var(--color-surface-2); }
.dot-direct { background: var(--color-primary-light); border-color: var(--color-primary); }
.dot-mamma { background: var(--color-gold-light); border-color: var(--color-gold); }
.dot-uncertain { background: var(--color-surface-2); border-style: dashed; }
.dot-gap { background: var(--color-surface); border-style: dotted; opacity: .8; }
.line { width: 22px; height: 0; display: inline-block; border-top: 2px solid var(--color-text-muted); }
.line-reconstructed { border-top-style: dashed; border-color: var(--color-primary); }
.line-uncertain { border-top-style: dotted; border-color: var(--color-text-faint); }
.legend-note { color: var(--color-text-faint); }
.legend-howto { color: var(--color-primary); }

/* sök i trädvyn */
.tree-search-wrap { position: relative; flex: 1 1 260px; max-width: 380px; }
.tree-search-wrap .tree-search-input { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); border-radius: 999px; }
.tree-search-results { z-index: 60; max-height: 60vh; }

.tree-controls { display: flex; gap: var(--space-2); }
.tree-controls button {
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
  font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--space-2);
}
.tree-controls button:hover { border-color: var(--color-primary); color: var(--color-primary); }

.tree-stage { flex: 1; overflow: hidden; cursor: grab; background:
  radial-gradient(circle at 1px 1px, var(--color-border) 1px, transparent 0) 0 0/22px 22px;
}
.tree-stage:active { cursor: grabbing; }
#tree-svg { width: 100%; height: 100%; display: block; }

.node-box rect {
  fill: var(--color-surface-2);
  stroke: var(--color-border);
  stroke-width: 1.3;
  rx: 9;
  transition: stroke .15s, fill .15s;
}
.node-box.confidence-direct rect { fill: var(--color-primary-light); stroke: var(--color-primary); stroke-width: 1.8; }
.node-box.confidence-uncertain rect { stroke-dasharray: 4 3; color: var(--color-text-faint); }
.node-box.confidence-gap rect { stroke-dasharray: 2 3; fill: var(--color-surface); opacity: 0.7; }
.node-box.highlight-mamma rect, .node-box.highlight-you rect { fill: var(--color-gold-light); stroke: var(--color-gold); stroke-width: 2.2; }
.node-box { cursor: pointer; }
.node-box:hover rect { stroke: var(--color-primary); }
.node-box text { font-family: var(--font-body); fill: var(--color-text); pointer-events: none; }
.node-box .n-pinyin { font-weight: 600; }
.node-box .n-hanzi { font-family: var(--font-zh); fill: var(--color-text-muted); font-size: 11px; }
.node-box .n-western { font-style: italic; fill: var(--color-text-muted); font-size: 11px; }
.node-box .n-gen { fill: var(--color-primary); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; }
.node-box.confidence-uncertain text { fill: var(--color-text-faint); }
.node-box.confidence-gap text { fill: var(--color-text-faint); font-style: italic; }
.node-box .n-toggle { fill: var(--color-surface); stroke: var(--color-border); }
.node-box .n-toggle-label { font-size: 11px; fill: var(--color-text-muted); font-weight: 600; }

.tree-link { fill: none; stroke: var(--color-border); stroke-width: 1.4; }
.tree-link.link-reconstructed { stroke: var(--color-primary); stroke-dasharray: 6 4; opacity: .75; }
.tree-link.link-ambiguous { stroke-dasharray: 2 3; }
.tree-link.link-gap { stroke: var(--color-text-faint); stroke-dasharray: 1 4; stroke-linecap: round; stroke-width: 1.8; }
.tree-link.link-more { stroke-dasharray: 3 3; }

/* grupp-noder (grenar utan fastställd koppling) och "+N till"-noder */
.node-box.is-group rect { fill: var(--color-bg); stroke-width: 1.6; }
.node-box.is-group text { fill: var(--color-text-muted); font-style: normal; }
.node-box.is-group .n-pinyin { fill: var(--color-text); }
.node-box.is-found rect { stroke: var(--color-gold); stroke-width: 3; filter: drop-shadow(0 0 6px var(--color-gold)); }
.node-box .n-info circle { fill: var(--color-surface); stroke: var(--color-border); }
.node-box .n-info text { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 11px; fill: var(--color-text-muted); }
.node-box .n-info { cursor: pointer; }
.node-box .n-info:hover circle { stroke: var(--color-primary); }
.node-box .n-info:hover text { fill: var(--color-primary); }
.node-box .n-pill { cursor: pointer; }
.node-box .n-pill rect { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.2; }
.node-box .n-pill text { font-size: 10.5px; font-weight: 600; fill: var(--color-primary); font-style: normal; }
.node-box .n-pill-main:not(.is-open) rect { fill: var(--color-primary); }
.node-box .n-pill-main:not(.is-open) text { fill: var(--color-surface); }
.node-box .n-pill:hover rect { stroke-width: 2; }
.node-box.confidence-gap .n-pill text, .node-box.confidence-uncertain .n-pill text { font-style: normal; }
.node-more { cursor: pointer; }
.node-more rect { fill: var(--color-surface); stroke: var(--color-border); stroke-dasharray: 3 3; }
.node-more text { font-family: var(--font-body); font-size: 12px; fill: var(--color-primary); font-weight: 600; pointer-events: none; }
.node-more:hover rect { stroke: var(--color-primary); }

/* ---- Timeline view ---- */
#view-timeline { overflow-y: auto; padding: var(--space-10) 0 var(--space-20); }
.timeline-intro { max-width: 640px; margin: 0 auto var(--space-12); padding: 0 var(--space-6); text-align: center; }
.timeline-intro h1 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.timeline-intro p { color: var(--color-text-muted); margin: 0; }

.timeline-track { position: relative; max-width: 860px; margin: 0 auto; padding: 0 var(--space-6); }
.timeline-track::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--color-border); transform: translateX(-50%);
}
.timeline-item { position: relative; width: 50%; padding: 0 var(--space-10) var(--space-12) 0; }
.timeline-item:nth-child(even) { left: 50%; padding: 0 0 var(--space-12) var(--space-10); }
.timeline-item::before {
  content: ''; position: absolute; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-primary); border: 3px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-item:nth-child(odd)::before { right: -8px; }
.timeline-item:nth-child(even)::before { left: -8px; }
.timeline-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--space-3);
  padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card);
}
.timeline-year { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); font-weight: 600; }
.timeline-year .approx-tag { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-faint); font-weight: 400; margin-left: var(--space-2); }
.timeline-era { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-2); }
.timeline-card h3 { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-base); font-weight: 600; }
.timeline-card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.timeline-place-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-primary); background: none; border: none; padding: 0; text-decoration: underline; }

@media (max-width: 720px) {
  .timeline-track::before { left: 8px; }
  .timeline-item, .timeline-item:nth-child(even) { width: 100%; left: 0; padding: 0 0 var(--space-10) var(--space-8); }
  .timeline-item::before, .timeline-item:nth-child(even)::before { left: 1px; right: auto; }
}

/* ---- Map view ---- */
#view-map { flex-direction: row; }
#map { flex: 1; min-width: 0; }
.map-panel {
  width: 320px; flex-shrink: 0; background: var(--color-surface); border-left: 1px solid var(--color-border);
  padding: var(--space-6); overflow-y: auto;
}
.map-panel h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.map-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.place-card {
  border: 1px solid var(--color-border); border-radius: var(--space-2); padding: var(--space-4);
  margin-bottom: var(--space-3); cursor: pointer; transition: border-color .15s;
  background: var(--color-surface-2);
}
.place-card:hover, .place-card.is-active { border-color: var(--color-primary); }
.place-card h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; }
.place-card p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.place-approx { font-size: 10px; color: var(--color-text-faint); font-style: italic; }

.maplibregl-popup-content {
  background: var(--color-surface) !important; color: var(--color-text) !important;
  font-family: var(--font-body) !important; border-radius: var(--space-2) !important;
  box-shadow: var(--shadow-card) !important; padding: var(--space-4) !important;
}
.maplibregl-popup-tip { border-top-color: var(--color-surface) !important; }
.popup-title { font-weight: 600; margin-bottom: var(--space-1); font-size: var(--text-sm); }
.popup-desc { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

@media (max-width: 720px) {
  #view-map { flex-direction: column; }
  .map-panel { width: 100%; height: 40%; border-left: none; border-top: 1px solid var(--color-border); }
}

/* ============ DETAIL DRAWER ============ */
.detail-drawer {
  position: fixed; top: 0; right: -420px; width: 400px; max-width: 90vw; height: 100vh;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-drawer); z-index: 100; transition: right .25s ease;
  padding: var(--space-8) var(--space-6); overflow-y: auto;
}
.detail-drawer.is-open { right: 0; }
.drawer-close {
  position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px;
  border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--color-text-muted);
}
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.d-badge {
  display: inline-block; font-size: var(--text-xs); padding: 2px var(--space-3); border-radius: 999px;
  border: 1px solid var(--color-border); color: var(--color-text-muted); margin-bottom: var(--space-4);
}
.d-badge.confidence-confirmed { }
.d-badge.confidence-direct { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-hover); }
.d-badge.confidence-documented { }
.d-badge.confidence-uncertain { border-style: dashed; }
.d-badge.confidence-gap { border-style: dotted; color: var(--color-text-faint); }
.d-badge.highlight { background: var(--color-gold-light); border-color: var(--color-gold); color: var(--color-warning); }

.d-hanzi { font-family: var(--font-zh); font-size: 2rem; line-height: 1; margin-bottom: var(--space-2); }
.d-pinyin { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--space-1); }
.d-western { color: var(--color-text-muted); font-style: italic; margin: 0 0 var(--space-1); }
.d-generated-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--color-warning); border: 1px solid var(--color-warning); border-radius: 4px; padding: 1px 5px; margin-left: var(--space-2); vertical-align: middle; text-transform: uppercase; }
.d-generation { color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; margin: 0 0 var(--space-1); }
.d-years { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); }

.d-section-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-faint); margin: var(--space-5) 0 var(--space-2); }
.d-spouse { font-size: var(--text-sm); }
.d-note { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.d-caveat { border-left: 3px solid var(--color-warning); padding-left: var(--space-3); }
.d-alias-reason { font-size: var(--text-xs); color: var(--color-text-faint); }
.d-badge.link-reconstructed { border-style: dashed; border-color: var(--color-primary); color: var(--color-primary); }
.d-badge.link-ambiguous, .d-badge.link-gap { border-style: dotted; color: var(--color-warning); border-color: var(--color-warning); }
.d-badge.link-family { }
.d-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.d-action { border: 1px solid var(--color-primary); color: var(--color-primary); background: var(--color-surface-2); border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.d-action:hover { background: var(--color-primary-light); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }

/* ============ CUSTOMS / RULES VIEW ============ */
#view-customs { overflow-y: auto; padding: var(--space-10) var(--space-6) var(--space-20); display: flex; flex-direction: column; align-items: center; }
.customs-intro { max-width: 680px; text-align: center; margin-bottom: var(--space-10); }
.customs-intro h1 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.customs-intro p { color: var(--color-text-muted); margin: 0; line-height: 1.6; }

.customs-groups { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: var(--space-4); }

.customs-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}
.customs-group summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.customs-group summary::-webkit-details-marker { display: none; }
.cg-title-block h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: var(--text-lg); display: flex; align-items: baseline; gap: var(--space-2); }
.cg-hanzi { font-size: var(--text-base); color: var(--color-primary); }
.cg-subtitle { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cg-chevron { font-size: 1.4rem; color: var(--color-text-muted); transition: transform 0.2s ease; flex-shrink: 0; }
.customs-group[open] .cg-chevron { transform: rotate(180deg); }

.cg-body { padding: 0 var(--space-6) var(--space-6); border-top: 1px solid var(--color-border); }
.customs-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-gold);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-5) 0 var(--space-2);
  border-radius: 0 8px 8px 0;
  line-height: 1.6;
}

.customs-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.customs-item { padding-top: var(--space-1); }
.ci-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.ci-head h3 { margin: 0; font-size: var(--text-base); font-weight: 600; }
.ci-hanzi { color: var(--color-primary); font-size: var(--text-sm); }
.customs-item p { margin: 0; font-size: var(--text-sm); line-height: 1.65; color: var(--color-text); }

.customs-source { max-width: 680px; text-align: center; font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-10); line-height: 1.6; }

/* ============ FULL CLAN VIEW ============ */
#view-clan { overflow-y: auto; padding: var(--space-10) var(--space-6) var(--space-20); display: flex; flex-direction: column; align-items: center; }
.cl-stats { margin-top: var(--space-2) !important; font-size: var(--text-xs); color: var(--color-text-faint); }

.cl-search-wrap { position: relative; width: 100%; max-width: 560px; margin-bottom: var(--space-12); }
.cl-search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-5);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.cl-search-input:focus { outline: none; border-color: var(--color-primary); }
.cl-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  z-index: 20;
  padding: var(--space-2);
}
.cl-search-hit, .cl-child-row, .cl-crumb, .cl-branch-card {
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--color-text);
}
.cl-search-hit {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-3);
  border-radius: 8px;
  font-size: var(--text-sm);
}
.cl-search-hit:hover { background: var(--color-surface-2); }
.cl-count { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; margin-left: var(--space-3); }

.cl-section-title { width: 100%; max-width: 1040px; font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-5); }

.cl-branches {
  width: 100%; max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.cl-branch-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cl-branch-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.cl-branch-hanzi { font-size: var(--text-lg); color: var(--color-primary); }
.cl-branch-pinyin { font-size: var(--text-sm); color: var(--color-text-muted); }
.cl-branch-count { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); }

/* Drawer content specific to clan browsing */
.cl-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-4); font-size: var(--text-xs); }
.cl-crumb { text-decoration: underline; color: var(--color-primary); padding: 2px 0; }
.cl-crumb-current { color: var(--color-text-muted); }
.cl-crumb-sep { color: var(--color-text-faint); }

.cl-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.cl-badge {
  font-size: var(--text-xs);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.cl-badge-heir { color: var(--color-warning); border-color: currentColor; }

.cl-children { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.cl-child-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: var(--space-3);
  border-radius: 8px;
  font-size: var(--text-sm);
}
.cl-child-row:hover { background: var(--color-surface-2); }
.cl-child-name { font-weight: 500; }

.cl-bridge {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--color-primary-light);
  border-radius: 10px;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}
.cl-bridge-link { color: var(--color-primary); text-decoration: underline; font-weight: 600; cursor: pointer; border: none; background: none; font-family: var(--font-body); font-size: inherit; padding: 0; }

/* ============ RESPONSIVE (mobile) ============ */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
  }
  .brand-sub { display: none; }
  .brand-updated { display: none; }
  .brand-title { font-size: var(--text-base); }
  .view-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .view-tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; padding: var(--space-2) var(--space-3); font-size: var(--text-xs); text-align: center; white-space: nowrap; }
  .theme-toggle { width: 30px; height: 30px; flex-shrink: 0; }
  .brand { flex: 1; min-width: 0; }
  .brand-mark { display: none; }

  .tree-toolbar { padding: var(--space-2) var(--space-4); }
  .legend { display: none; }
  .tree-search-wrap { max-width: none; flex-basis: 100%; }
  .tree-controls { width: 100%; justify-content: space-between; }
  .tree-controls button { flex: 1; padding: var(--space-2) var(--space-1); }

  .timeline-intro h1 { font-size: var(--text-xl); }

  .detail-drawer { width: 100%; max-width: 100%; }

  .customs-item-grid { grid-template-columns: 1fr; }
  .customs-group summary { padding: var(--space-4); }
  .cg-body { padding: 0 var(--space-4) var(--space-4); }
}

/* ---- Kartans etiketter (platsmarkeringar + ortnamn på reservkartan) ---- */
.place-marker { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.place-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-bg); box-shadow: 0 0 0 1.5px var(--color-primary); flex-shrink: 0; }
.place-label {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px;
  padding: 1px 6px; white-space: nowrap; box-shadow: var(--shadow-card);
}
.place-marker:hover .place-label { border-color: var(--color-primary); color: var(--color-primary); }
.ctx-label { pointer-events: none; white-space: nowrap; font-family: var(--font-body); color: var(--color-text-muted);
  text-shadow: 0 0 3px var(--color-bg), 0 0 3px var(--color-bg), 0 0 2px var(--color-bg); }
.ctx-country { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); }
.ctx-sea { font-family: var(--font-display); font-style: italic; font-size: 13px; letter-spacing: .05em; color: var(--color-primary); opacity: .75; }
.ctx-region { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.ctx-city { font-size: 11px; display: flex; align-items: center; gap: 4px; }
.ctx-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); }
.ctx-label[hidden] { display: none; }
.timeline-namenote { margin: var(--space-6) auto 0; padding: 0 var(--space-6); }

/* ---- Kartlager: grannbyar och utvandring ---- */
.village-marker { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.village-dot { display: block; border-radius: 50%; background: color-mix(in srgb, var(--color-gold) 35%, transparent); border: 1.5px solid var(--color-gold); }
.village-marker:hover .village-dot { background: color-mix(in srgb, var(--color-gold) 60%, transparent); }
.village-label { position: absolute; top: 100%; margin-top: 2px; white-space: nowrap; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--color-text);
  text-shadow: 0 0 3px var(--color-bg), 0 0 3px var(--color-bg), 0 0 2px var(--color-bg); pointer-events: none; }
.village-label[hidden], [data-maplayer][hidden] { display: none; }
.abroad-marker .place-dot { background: var(--color-surface); border-color: var(--color-primary); }
.popup-counts { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); margin: var(--space-2) 0; }
.pp-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: var(--space-2) 0; border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.pp-person { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; text-align: left; border: none; background: transparent; color: var(--color-text);
  font-family: var(--font-body); font-size: 12px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.pp-person:hover, .pp-person:focus-visible { background: var(--color-primary-light); }
.pp-name { font-weight: 600; }
.pp-rel { color: var(--color-text-muted); font-size: 11px; white-space: nowrap; }
.popup-desc a { color: var(--color-primary); }
.map-layers { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: var(--space-4); font-size: var(--text-xs); }
.map-layer-toggle { display: flex; gap: var(--space-2); align-items: center; cursor: pointer; }
.map-section { font-family: var(--font-display); font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); }
.place-count { float: right; font-size: 11px; font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); border-radius: 999px; padding: 0 7px; }
.place-card.no-coords { opacity: .75; }
.d-places { display: flex; flex-direction: column; gap: var(--space-1); }
.d-place { align-self: flex-start; border: 1px solid var(--color-gold); background: var(--color-gold-light); color: var(--color-text); border-radius: 999px; padding: 2px 10px; font-size: var(--text-xs); cursor: pointer; font-family: var(--font-body); }
.d-place:hover { border-color: var(--color-primary); }
.d-place-quote { font-size: var(--text-xs); margin: 2px 0 var(--space-2); }
.timeline-people { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin-top: var(--space-3); }
.timeline-people-label { font-size: var(--text-xs); color: var(--color-text-faint); margin-right: var(--space-1); }
.timeline-person-link { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); border-radius: 999px; padding: 2px 10px; font-size: var(--text-xs); cursor: pointer; font-family: var(--font-body); }
.timeline-person-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
.map-far .village-marker { display: none; }