:root {
  --paper: #faf7f0;
  --paper-raised: #ffffff;
  --ink: #2a241c;
  --ink-soft: #5c5346;
  --ink-faint: #8a8070;
  --rule: #ddd4c2;
  --rule-strong: #c2b89f;
  --accent: #7a3b2e;
  --accent-soft: #f1e3dc;

  /* identity_confidence encoding */
  --conf-confirmed: #2f6b3a;
  --conf-confirmed-bg: #e5efe3;
  --conf-probable: #285f8f;
  --conf-probable-bg: #e2ecf4;
  --conf-inferred: #a35c12;
  --conf-inferred-bg: #f6e8d6;
  --conf-unresolved: #6b6b6b;
  --conf-unresolved-bg: #eceae5;

  /* land_access encoding */
  --access-public: #2f6b3a;
  --access-road: #a35c12;
  --access-private: #8f2f2f;
  --access-unknown: #8a8070;

  --radius: 6px;
  --shadow: 0 1px 3px rgba(42, 36, 28, 0.12), 0 1px 2px rgba(42, 36, 28, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a16;
    --paper-raised: #26241f;
    --ink: #ece6d8;
    --ink-soft: #b9b0a0;
    --ink-faint: #8a8070;
    --rule: #3a362d;
    --rule-strong: #4a453a;
    --accent: #d98f7a;
    --accent-soft: #362621;

    --conf-confirmed: #7fbf8e;
    --conf-confirmed-bg: #22301f;
    --conf-probable: #85b6e0;
    --conf-probable-bg: #1e2a33;
    --conf-inferred: #e0a862;
    --conf-inferred-bg: #33291a;
    --conf-unresolved: #a8a297;
    --conf-unresolved-bg: #2c2a25;

    --access-public: #7fbf8e;
    --access-road: #e0a862;
    --access-private: #d98a8a;
    --access-unknown: #a8a297;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.title-block h1 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.view-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.2rem;
}

.tab-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 0.4rem 0.9rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

#app {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.view {
  display: none;
  width: 100%;
  height: 100%;
}

.view.active {
  display: flex;
}

/* Full-screen expansion for the Map/Connections views. CSS-driven (not
   dependent on the native Fullscreen API succeeding) so it works reliably
   across browsers, including iOS Safari. */
body.chrome-hidden .app-header,
body.chrome-hidden .app-footer {
  display: none;
}

.view.expanded {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--paper);
}

.fullscreen-toggle {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  padding: 0;
}

/* Standalone placement for views without their own control-corner system
   (the map view's button lives inside Leaflet's own bottomright control
   instead, so it isn't thrown off by the legend bar below the tiles). */
#graph-fullscreen-btn.fullscreen-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 501;
}

/* ---- List view ---- */

.sidebar {
  width: 340px;
  min-width: 280px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 0.85rem;
  gap: 0.55rem;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.filter-group label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

#search-input, select {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  background: var(--paper-raised);
  color: var(--ink);
}

.btn-text {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.1rem 0;
  text-decoration: underline;
}

.result-count {
  font-size: 0.75rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}

.site-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* No overflow/scroll of its own — .sidebar already scrolls filters+list
     as one unit. A flex item with its own overflow:auto inside a
     height-constrained flex column can collapse to 0 height instead of
     scrolling (min-height:auto flexbox quirk); this avoids that trap. */
}

.site-card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--conf-unresolved);
  border-radius: 4px;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  transition: box-shadow 0.1s ease;
}

.site-card:hover {
  box-shadow: var(--shadow);
}

.site-card.selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.site-card .card-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.site-card .card-meta {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

/* ---- Badges ---- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-confirmed { color: var(--conf-confirmed); background: var(--conf-confirmed-bg); }
.badge-probable  { color: var(--conf-probable); background: var(--conf-probable-bg); }
.badge-inferred  { color: var(--conf-inferred); background: var(--conf-inferred-bg); }
.badge-unresolved {
  color: var(--conf-unresolved);
  background: var(--conf-unresolved-bg);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.06) 0 4px, transparent 4px 8px);
}

.badge-plain {
  color: var(--ink-soft);
  background: var(--rule);
  text-transform: none;
  font-weight: 500;
}

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ---- Detail pane ---- */

.detail-pane {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  min-width: 0;
}

.detail-pane-overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 380px;
  background: var(--paper-raised);
  border-left: 1px solid var(--rule);
  box-shadow: -4px 0 12px rgba(0,0,0,0.08);
  padding: 1.25rem 1.5rem;
  z-index: 500;
}

/* Hidden until a pin/node is actually selected, so it never blocks the
   map/graph underneath — critical on mobile where it goes full-width. */
.detail-pane-overlay.empty {
  display: none;
}

.detail-empty {
  color: var(--ink-faint);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  max-width: 32em;
  margin-top: 2rem;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}

.detail-header h2 {
  margin: 0 0 0.2rem;
  font-size: 1.4rem;
}

.detail-atlas-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.unresolved-banner {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  background: var(--conf-unresolved-bg);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 6px, transparent 6px 12px);
  border: 1px solid var(--conf-unresolved);
  color: var(--ink);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 1rem;
}

.detail-section {
  margin-bottom: 1.2rem;
}

.detail-section h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}

.detail-section p {
  margin: 0 0 0.4rem;
  line-height: 1.55;
}

.kv-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
}

.kv-list dt {
  color: var(--ink-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.1rem;
}

.kv-list dd {
  margin: 0;
}

ul.plain-list {
  margin: 0;
  padding-left: 1.1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
}

ul.plain-list.open-questions li {
  color: var(--conf-inferred);
}

.family-block {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.family-block strong {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.1rem;
}

.connection-link {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
}

.connection-link .rel {
  color: var(--ink-faint);
  font-size: 0.75rem;
  display: block;
  margin-top: 0.1rem;
}

.no-geometry-note {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  color: var(--ink-faint);
  border-top: 1px dashed var(--rule-strong);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
}

.detail-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--ink-faint);
  line-height: 1;
}

/* ---- Map view ---- */

#view-map {
  position: relative;
  flex-direction: column;
}

#map-container {
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Static bar below the map — not a floating control, so it never covers tiles. */
.map-legend-bar {
  flex-shrink: 0;
  background: var(--paper-raised);
  border-top: 1px solid var(--rule-strong);
  padding: 0.5rem 0.85rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  max-height: 30vh;
  overflow-y: auto;
}

.map-legend-bar .legend-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.55rem;
}

.map-legend-bar .legend-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin-right: 0.15rem;
}

.map-legend-bar .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.map-marker-icon {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.map-empty-note {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  box-shadow: var(--shadow);
  max-width: min(90%, 420px);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.map-empty-note .note-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-faint);
  flex-shrink: 0;
  padding: 0;
}

/* ---- Graph view ---- */

#graph-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#graph-svg {
  width: 100%;
  height: 100%;
  background: var(--paper);
}

.graph-node circle {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: pointer;
}

.graph-node text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  fill: var(--ink);
  pointer-events: none;
}

.graph-link {
  stroke: var(--rule-strong);
  stroke-width: 1.5px;
}

/* ---- Footer ---- */

.app-footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 0.5rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
}

.app-footer a { color: var(--ink-soft); }

/* ---- Responsive ---- */

@media (max-width: 780px) {
  /* The whole List view scrolls as one page — filters, then the full
     list, then the detail section — rather than nesting a separate
     scroll region inside a height-capped sidebar. A short filter panel
     was consistently eating the entire capped box, leaving no visible
     room for any list items without an easy-to-miss inner scroll. */
  #view-list {
    flex-direction: column;
    overflow-y: auto;
  }
  .sidebar {
    width: 100%;
    max-height: none;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .detail-pane-overlay {
    width: 100%;
  }
}