/* ================================================================
   PORTS FERRY — Narrative GIS Stylesheet
   Scholarly research tool: dark map, light panels, academic type.
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  /* Typography */
  --font-serif:  'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  /* Panel palette — warm off-white, not clinical white */
  --panel-bg:          #f6f3ee;
  --panel-bg-dark:     #edeae3;
  --panel-border:      #d6d1c8;
  --panel-border-soft: #e4e0d8;

  /* Text */
  --text-primary:   #252018;
  --text-secondary: #504940;
  --text-muted:     #8a8070;

  /* Chrome — dark header/footer */
  --chrome-bg:     #1a2030;
  --chrome-border: #28354a;
  --chrome-text:   #bcc6d4;

  /* ── Affiliation color system ─────────────────────────────────
     Ten-category taxonomy replacing the binary Loyalist/Patriot.
     Values match PIN_COLORS in js/map.js exactly.
     ─────────────────────────────────────────────────────────── */

  /* Patriot side — blue spectrum, dark → light by formality */
  --continental-army:    #1a3a6b;   /* deep navy — professional establishment */
  --state-line:          #2e6da4;   /* medium blue — state regulars */
  --patriot-militia:     #5b9bd5;   /* mid blue — county irregulars */
  --patriot-volunteer:   #a8c8e8;   /* pale blue — self-organized */

  /* Loyalist / British side — red spectrum, dark → light by formality */
  --british-regular:     #6b1a1a;   /* deep crimson — Crown regulars */
  --provincial-corps:    #a43232;   /* medium red — Loyalist establishment */
  --loyalist-militia:    #c45c5c;   /* warm red — county irregulars */
  --associated-loyalist: #d89090;   /* pale red — raiders, loosely organized */

  /* Neutral / Unknown */
  --unknown:             #888888;
  --neutral:             #b8a882;   /* tan — documented non-participant */

  /* Church pins — unchanged */
  --church:              #6b5528;

  /* Accent — institutional slate blue */
  --accent:       #3d5a7a;
  --accent-light: #5e7fa0;
  --accent-dim:   #2a3f58;

  /* Layout dims */
  --header-h:      50px;
  --timeline-h:    62px;
  --panel-left-w:  284px;
  --panel-right-w: 364px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #1a2030; }
button { font-family: inherit; cursor: pointer; }

/* ── App shell ─────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ── Header ────────────────────────────────────────────────────── */
#site-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  height: var(--header-h);
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-border);
  flex-shrink: 0;
  z-index: 900;
}

#site-title {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-shrink: 0;
}

#site-title h1 {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--chrome-text);
  letter-spacing: 0.025em;
  white-space: nowrap;
}

#site-subtitle {
  font-size: 0.7rem;
  color: #6a7e98;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* View buttons */
#view-controls {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.view-btn {
  padding: 0.28rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: transparent;
  color: #6a7e98;
  border: 1px solid var(--chrome-border);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.view-btn:hover  { background: #202c40; color: #bbb; border-color: #3a4f68; }
.view-btn.active { background: var(--accent); color: #f5f2ec; border-color: var(--accent); }

/* Header right controls */
#header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#layer-toggle {
  padding: 0.28rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #202c40;
  color: #7a8fa8;
  border: 1px solid var(--chrome-border);
  transition: color 0.12s, background 0.12s;
}
#layer-toggle:hover { background: #283a52; color: #bcc8d8; }

#loading-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: #6a7e98;
}
.loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ── Main layout ───────────────────────────────────────────────── */
#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Panels — shared ───────────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.panel-header {
  padding: 0.7rem 1rem 0.55rem;
  background: var(--panel-bg-dark);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.panel-header h2 {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
}

/* ── Left panel ────────────────────────────────────────────────── */
#panel-left {
  width: var(--panel-left-w);
  border-right: 1px solid var(--panel-border);
}

#entity-search {
  display: block;
  width: 100%;
  padding: 0.32rem 0.6rem;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: #fff;
  border: 1px solid #ccc8be;
  outline: none;
  transition: border-color 0.12s;
}
#entity-search:focus { border-color: var(--accent); }

.panel-body { overflow-y: auto; flex: 1; }

.panel-section { border-bottom: 1px solid var(--panel-border-soft); }

.section-label {
  padding: 0.4rem 1rem 0.28rem;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: #eae7df;
  border-bottom: 1px solid var(--panel-border-soft);
}

.entity-list { list-style: none; }

.entity-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--panel-border-soft);
  cursor: pointer;
  transition: background 0.1s;
  line-height: 1.3;
}
.entity-list li:last-child { border-bottom: none; }
.entity-list li:hover  { background: #e8e4db; color: var(--text-primary); }
.entity-list li.active { background: #dedad0; color: var(--text-primary); font-weight: 500; }

.entity-meta {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Entity dots */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Patriot side */
.dot-continental-army    { background: var(--continental-army); }
.dot-state-line          { background: var(--state-line); }
.dot-patriot-militia     { background: var(--patriot-militia); }
.dot-patriot-volunteer   { background: var(--patriot-volunteer); }

/* Loyalist / British side */
.dot-british-regular     { background: var(--british-regular); }
.dot-provincial-corps    { background: var(--provincial-corps); }
.dot-loyalist-militia    { background: var(--loyalist-militia); }
.dot-associated-loyalist { background: var(--associated-loyalist); }

/* Neutral / Unknown */
.dot-unknown  { background: var(--unknown); }
.dot-neutral  { background: var(--neutral); }

/* Legacy aliases — support old seed data values during transition */
.dot-loyalist { background: var(--loyalist-militia); }
.dot-patriot  { background: var(--patriot-militia); }

/* Church diamond — shape applied separately */
.dot-church { background: var(--church); border-radius: 2px; transform: rotate(45deg); }

/* ── Map ───────────────────────────────────────────────────────── */
#map-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
#map { width: 100%; height: 100%; }

#map-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26,32,48,0.75);
  color: #aaa;
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 500;
}

/* ── Historical map tile treatment ─────────────────────────────────
   Apply sepia/parchment filter to tile layer only — markers and
   overlays (in separate Leaflet panes) remain unaffected.
   ─────────────────────────────────────────────────────────────── */
.leaflet-tile-pane {
  filter: sepia(0.55) contrast(0.82) brightness(1.12) saturate(0.55);
}

/* Leaflet overrides */
.leaflet-popup-content-wrapper {
  background: var(--panel-bg);
  border-radius: 0;
  border: 1px solid var(--panel-border);
  box-shadow: 0 3px 14px rgba(0,0,0,0.45);
}
.leaflet-popup-content {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-primary);
  margin: 0.55rem 0.75rem;
}
.leaflet-popup-content strong {
  font-family: var(--font-serif);
  font-size: 0.92rem;
}
.leaflet-popup-tip { background: var(--panel-bg); }

.pf-tooltip {
  background: #1a2030 !important;
  border: 1px solid #2e3f58 !important;
  border-radius: 0 !important;
  color: #ddd !important;
  font-size: 0.78rem !important;
  font-family: var(--font-sans) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
}
.pf-tooltip::before { display: none; }

/* ── Right panel — story panel ─────────────────────────────────── */
#panel-right {
  width: var(--panel-right-w);
  border-left: 1px solid var(--panel-border);
  position: relative;
}

#panel-right .panel-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
#panel-right .panel-header h2 {
  flex: 1;
  font-size: 1rem;
  margin-bottom: 0;
}

#story-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  line-height: 1;
  padding: 0 0.1rem;
  flex-shrink: 0;
  transition: color 0.1s;
}
#story-close:hover { color: var(--text-primary); }

#story-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem 1.2rem 1.5rem;
}

/* Default intro text */
.story-intro {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1em;
}
.src-ref-demo {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-light);
  cursor: default;
}

/* Entity heading */
.story-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 0.12rem;
}
.story-role {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

/* Affiliation badge */
.affil-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 0.5rem;
  vertical-align: middle;
}
/* Patriot side badges */
.badge-continental-army    { background: #e8ecf5; color: var(--continental-army);  border: 1px solid #a8b8d8; }
.badge-state-line          { background: #eaf0f8; color: var(--state-line);         border: 1px solid #9fc0df; }
.badge-patriot-militia     { background: #eef5fc; color: #3a7ab8;                   border: 1px solid #b0cfe8; }
.badge-patriot-volunteer   { background: #f4f8fd; color: #5a90c0;                   border: 1px solid #c0d8ec; }

/* Loyalist / British side badges */
.badge-british-regular     { background: #f5e8e8; color: var(--british-regular);    border: 1px solid #d8a8a8; }
.badge-provincial-corps    { background: #f8eeee; color: var(--provincial-corps);   border: 1px solid #e0b0b0; }
.badge-loyalist-militia    { background: #faf2f2; color: #a44040;                   border: 1px solid #e8c0c0; }
.badge-associated-loyalist { background: #fdf7f7; color: #b06060;                   border: 1px solid #f0d0d0; }

/* Neutral / Unknown badges */
.badge-unknown  { background: #f0f0f0; color: #666;                                 border: 1px solid #d0d0d0; }
.badge-neutral  { background: #f5f2eb; color: #7a6a48;                              border: 1px solid #d8cca8; }

/* Legacy aliases — support old seed data values during transition */
.badge-loyalist { background: #faf2f2; color: #a44040; border: 1px solid #e8c0c0; }
.badge-patriot  { background: #eef5fc; color: #3a7ab8; border: 1px solid #b0cfe8; }

/* Exception tier — not an affiliation, marks non-military significance */
.badge-exception { background: #f9f4e8; color: var(--accent); border: 1px solid #d8c090; }

/* Story sections */
.story-section {
  margin-bottom: 1.2rem;
}
.story-section-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.3rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--panel-border-soft);
}

/* Authored narrative prose */
.story-prose {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-primary);
  margin-bottom: 0.75em;
}
.story-prose em { font-style: italic; }

/* Data lines */
.data-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
  line-height: 1.4;
}
.data-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 88px;
  flex-shrink: 0;
  padding-top: 0.05rem;
}

/* Source references (inline) */
.src-ref {
  font-size: 0.76rem;
  font-family: var(--font-sans);
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-light);
  cursor: pointer;
  transition: color 0.1s;
}
.src-ref:hover { color: var(--accent-dim); }

/* Network / member lists */
.conn-list { list-style: none; margin-top: 0.3rem; }
.conn-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--panel-border-soft);
  cursor: pointer;
  transition: color 0.1s;
}
.conn-list li:last-child { border-bottom: none; }
.conn-list li:hover { color: var(--text-primary); }
.conn-rel {
  margin-left: auto;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Action button */
.story-action-btn {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.42rem 0;
  background: var(--accent);
  color: #f5f2ec;
  border: none;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s;
}
.story-action-btn:hover { background: var(--accent-dim); }

/* Source tray (bottom of right panel) */
#source-tray {
  border-top: 2px solid var(--accent);
  background: var(--panel-bg-dark);
  max-height: 230px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
#source-tray-header {
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
#source-tray-title {
  flex: 1;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#source-tray-close {
  background: none; border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1;
  padding: 0;
  transition: color 0.1s;
}
#source-tray-close:hover { color: var(--text-primary); }
#source-tray-body {
  overflow-y: auto;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.src-doc-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.src-doc-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.src-doc-link {
  font-size: 0.76rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-light);
  transition: color 0.1s;
}
.src-doc-link:hover { color: var(--accent-dim); }

/* ── Timeline bar ──────────────────────────────────────────────── */
#timeline-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  height: var(--timeline-h);
  background: var(--chrome-bg);
  border-top: 1px solid var(--chrome-border);
  flex-shrink: 0;
  z-index: 900;
}

#timeline-controls {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}
#timeline-controls button {
  background: #202c40;
  border: 1px solid var(--chrome-border);
  color: #7a8fa8;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  transition: color 0.1s, background 0.1s;
}
#timeline-controls button:hover { color: #d0d8e4; background: #283a52; }

#timeline-slider-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.tl-bound-label {
  font-size: 0.68rem;
  color: #6a7e98;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
#tl-slider-container { flex: 1; }
#tl-range {
  width: 100%;
  cursor: pointer;
  accent-color: var(--accent-light);
}

#timeline-resolution {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: #6a7e98;
  flex-shrink: 0;
}
#timeline-resolution select {
  font-size: 0.7rem;
  background: #202c40;
  color: #8a9ab8;
  border: 1px solid var(--chrome-border);
  padding: 0.18rem 0.35rem;
  font-family: var(--font-sans);
}

#tl-date-display {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--accent-light);
  letter-spacing: 0.04em;
  min-width: 52px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Community origin — unit story panel ───────────────────────── */

/* The argument section — subtle warm accent to distinguish */
.community-origin {
  border-left: 3px solid var(--church);
  padding-left: 0.75rem;
  margin-top: 0.4rem;
}

/* Interpretive lead sentence */
.community-origin-lede {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-style: italic;
}

.community-origin-lede strong { font-style: normal; }

/* Church entry within community origin */
.community-church-entry {
  margin-bottom: 0.75rem;
}

.community-church-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
}
.community-church-header:hover .community-church-name {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.community-church-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--panel-border);
  transition: color 0.1s, border-color 0.1s;
  flex: 1;
}

.community-church-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  background: var(--panel-bg-dark);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--panel-border);
}

.community-member-list {
  list-style: none;
  padding-left: 1rem;
}

.community-member-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.22rem 0;
  border-bottom: 1px solid var(--panel-border-soft);
  cursor: pointer;
  transition: color 0.1s;
}
.community-member-list li:last-child { border-bottom: none; }
.community-member-list li:hover { color: var(--text-primary); }

.community-member-rank {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}

/* Property entries — same structure as church but smaller */
.community-property-entry {
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--panel-border);
}

/* Empty state */
.community-origin-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Organizational context — command chain diagram ────────────── */

.cmd-chain {
  display: flex;
  flex-direction: column;
  margin: 0.5rem 0 0.25rem;
}

/* Each node in the chain */
.cmd-chain-node {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.6rem;
  background: var(--panel-bg-dark);
  border: 1px solid var(--panel-border);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
}
.cmd-chain-node:hover { background: #e4e1d9; color: var(--text-primary); }

/* Individual's immediate context node — slightly distinguished */
.cmd-chain-node.cmd-chain-primary {
  border-left: 3px solid var(--accent);
}

.cmd-unit-name {
  flex: 1;
  font-weight: 500;
}

.cmd-unit-affil {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
}

.cmd-unit-dates {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Vertical connector line between chain nodes */
.cmd-chain-connector {
  width: 1px;
  height: 14px;
  background: var(--panel-border);
  margin-left: 1.1rem;
  position: relative;
}
.cmd-chain-connector::after {
  content: '↑';
  position: absolute;
  left: -5px;
  top: -1px;
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1;
}

/* No unit membership */
.cmd-chain-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem 0;
}

/* Lateral coordination list */
.lateral-list {
  list-style: none;
  margin-top: 0.3rem;
}
.lateral-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding: 0.28rem 0;
  border-bottom: 1px dotted var(--panel-border-soft);
  cursor: pointer;
  transition: color 0.1s;
}
.lateral-list li:last-child { border-bottom: none; }
.lateral-list li:hover { color: var(--text-primary); }

.lateral-rel-type {
  margin-left: auto;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Affiliation timeline */
.affil-timeline {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.affil-timeline-entry {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.affil-timeline-period {
  font-size: 0.7rem;
  color: var(--text-muted);
  min-width: 80px;
  flex-shrink: 0;
}

/* ── Order of Battle — left panel hierarchy ────────────────────── */

/* Affiliation group — top-level collapsible */
.tob-group {
  border-bottom: 1px solid var(--panel-border);
}

/* Remove default <details> triangle */
.tob-group > summary,
.tob-unit  > summary { list-style: none; }
.tob-group > summary::-webkit-details-marker,
.tob-unit  > summary::-webkit-details-marker { display: none; }

/* Affiliation header bar */
.tob-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 1rem 0.38rem;
  background: var(--panel-bg-dark);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--panel-border-soft);
}
.tob-group-header:hover { background: #e4e1d9; }

.tob-affil-swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tob-affil-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}

.tob-chevron {
  font-size: 0.6rem;
  color: var(--text-muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.tob-group[open] > summary .tob-chevron { transform: rotate(90deg); }

/* Unit block within a group */
.tob-unit {
  border-bottom: 1px solid var(--panel-border-soft);
}
.tob-unit:last-child { border-bottom: none; }

.tob-unit-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.36rem 1rem 0.32rem 1.6rem;
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
}
.tob-unit-header:hover { background: #edeae3; }

.tob-unit-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
}
.tob-unit[open] > summary .tob-chevron { transform: rotate(90deg); }

/* Individual rows within a unit */
.tob-members { list-style: none; }

.tob-ind-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 1rem 0.28rem 2.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--panel-border-soft);
  cursor: pointer;
  transition: background 0.1s;
  line-height: 1.3;
}
.tob-ind-row:last-child { border-bottom: none; }
.tob-ind-row:hover  { background: #e8e4db; color: var(--text-primary); }
.tob-ind-row.active { background: #dedad0; color: var(--text-primary); font-weight: 500; }

.tob-ind-name { flex: 1; }

.tob-ind-rank {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  flex-shrink: 0;
  text-align: right;
  max-width: 110px;
}

/* Exception individuals section */
.tob-exception-section {
  border-bottom: 1px solid var(--panel-border);
}

.tob-exception-header {
  padding: 0.42rem 1rem 0.38rem;
  background: var(--panel-bg-dark);
  border-bottom: 1px solid var(--panel-border-soft);
}

.tob-exception-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tob-exception-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.34rem 1rem 0.3rem 1.6rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--panel-border-soft);
  cursor: pointer;
  transition: background 0.1s;
  line-height: 1.3;
}
.tob-exception-row:last-child { border-bottom: none; }
.tob-exception-row:hover  { background: #e8e4db; color: var(--text-primary); }
.tob-exception-row.active { background: #dedad0; color: var(--text-primary); font-weight: 500; }

.tob-exception-name { flex: 1; }

.tob-exception-reason {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.1rem;
}

/* ══════════════════════════════════════════════════════════════
   BATTLE MODE
   ══════════════════════════════════════════════════════════════ */

/* ── Battle bar — single-row footer, exactly matches timeline bar height ── */
#battle-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #131c2d;             /* slightly darker than chrome-bg */
  border-top: 2px solid var(--accent);
  height: var(--timeline-h);
  padding: 0 1rem;
  flex-shrink: 0;
  z-index: 900;
}

/* Vertical separator between logical groups */
.bb-sep {
  width: 1px;
  height: 22px;
  background: #2e3f58;
  flex-shrink: 0;
}

#bb-back-btn {
  padding: 0.22rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #243448;
  color: #8ab8d4;
  border: 1px solid #3a5878;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  height: 26px;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
#bb-back-btn:hover { background: #304a6a; color: #c8e0f0; }

#bb-battle-title {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: #c8d4e0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 300px;
}

.bb-confidence {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.bb-conf-high     { background: #1a3a2a; color: #7acc98; border: 1px solid #3a6a4a; }
.bb-conf-medium   { background: #352e14; color: #c8b870; border: 1px solid #5a4e28; }
.bb-conf-low      { background: #361818; color: #c07070; border: 1px solid #5a2828; }
.bb-conf-inferred { background: #1e2238; color: #8a9abb; border: 1px solid #303858; }

/* ◄ / ► phase step buttons */
.bb-nav-arrow {
  background: #243448;
  border: 1px solid #3a5878;
  color: #8ab8d4;
  width: 26px;
  height: 26px;
  font-size: 0.6rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  border-radius: 2px;
}
.bb-nav-arrow:hover:not(:disabled) { background: #304a6a; color: #d0e8f4; }
.bb-nav-arrow:disabled { opacity: 0.25; cursor: default; }

/* Phase dot track */
#bb-phase-track {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  gap: 0;
}

/* Connecting line threaded behind the dots */
#bb-phase-track::before {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  background: #3a5878;
  pointer-events: none;
  z-index: 0;
}

.bb-phase-node {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0 6px;
}

.bb-phase-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #5080a8;       /* clearly visible on #131c2d bar */
  background: #304060;             /* distinct dark blue — not invisible */
  color: #a0c4dc;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
  font-family: var(--font-sans);
  line-height: 1;
}
.bb-phase-node:hover .bb-phase-dot {
  border-color: #80b0d0;
  background: #3a5878;
  color: #d0e8f4;
}
.bb-phase-node.active .bb-phase-dot {
  border-color: #90c0e0;
  background: #4a80b0;             /* bright steel blue — unmistakable active state */
  color: #ffffff;
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(74, 128, 176, 0.38);
}

/* Phase label — takes remaining space */
#bb-phase-label-float {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: #b8ccd8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Battle story panel ─────────────────────────────────────────── */

.battle-confidence-banner {
  font-size: 0.76rem;
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.25rem;
  border-left: 3px solid;
  line-height: 1.5;
}
.battle-confidence-banner.confidence-high {
  background: #f0f7f2; border-color: #5a9a70; color: #2a5a3a;
}
.battle-confidence-banner.confidence-medium {
  background: #f8f5e8; border-color: #a89050; color: #5a4a18;
}
.battle-confidence-banner.confidence-low {
  background: #f8f0f0; border-color: #a05050; color: #5a2020;
}

.battle-unit-section {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--panel-border-soft);
}
.battle-unit-section:last-child { border-bottom: none; margin-bottom: 0; }

.battle-unit-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.battle-unit-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.battle-action-text {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  font-style: italic;
}

.battle-pos-confidence {
  font-size: 0.7rem;
  padding: 0.18rem 0.45rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  display: inline-block;
}
.battle-pos-confidence.confidence-medium {
  background: #fdf9ee; color: #7a6020; border: 1px solid #e0cc80;
}
.battle-pos-confidence.confidence-low {
  background: #fdf0f0; color: #803030; border: 1px solid #d09090;
}
.battle-pos-confidence.confidence-inferred {
  background: #f2f2f8; color: #506080; border: 1px solid #b0bcd0;
}

.battle-community-origin {
  margin-top: 0.75rem;
  border-left: 3px solid var(--church);
  padding-left: 0.75rem;
}

/* ── Battle marker on community map (before entering Battle Mode) ── */
.battle-site-marker {
  /* Styled inline in _renderBattleMarkers — no additional overrides needed */
}

/* ── Utility ───────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Scrollbars ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc8c0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa89e; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root {
    --panel-left-w:  230px;
    --panel-right-w: 310px;
  }
}
@media (max-width: 820px) {
  #panel-left { display: none; }
  :root { --panel-right-w: 280px; }
  #site-subtitle { display: none; }
}
@media (max-width: 600px) {
  #panel-right { display: none; }
  #view-controls { display: none; }
}

/* ── Admin link in header ─────────────────────────────────────── */
#admin-link {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration: none;
  color: #6a8090; border: 1px solid var(--chrome-border);
  padding: 0.22rem 0.65rem; transition: color 0.12s, border-color 0.12s;
}
#admin-link:hover { color: var(--chrome-text); border-color: var(--accent-light); }