/* The Monette Ledger — editorial watchdog shared styles. */
:root {
  --paper: #f5f1ea;
  --paper-2: #ece6db;
  --paper-3: #dcd5c6;
  --ink: #1a1815;
  --ink-2: #3a362f;
  --mute: #6e6558;
  --rule: #d9d2c3;
  --rule-2: #c6bfae;
  --gold: #b48638;
  --gold-ink: #7a5a1e;
  --rust: #9a3a2a;
  --green: #4e6a30;
  --blue: #3f5b6c;
  --red: #b04a3a;
  --yellow: #e5c35a;
  --night: #13110e;
  --night-2: #1e1b16;
  --night-3: #2a2620;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "tnum" 1, "zero" 1; }
.serif { font-family: "Instrument Serif", "Fraunces", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.caps { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 500; }
.hair { border-top: 1px solid var(--rule); }
.hair-2 { border-top: 2px solid var(--ink); }
.hair-d { border-top: 1px dashed var(--rule-2); }

.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align: middle; margin-right:6px; }
.s-operating { background: var(--green); }
.s-forsale   { background: var(--gold); }
.s-sold      { background: var(--rust); }
.s-rented    { background: var(--blue); }
.s-returned  { background: #8a7a5a; }
.s-disputed  { background: var(--red); box-shadow: 0 0 0 2px rgba(176,74,58,0.2); }
.s-unknown   { background: transparent; border: 1px dashed var(--mute); width:8px; height:8px; }

.bar { height: 4px; background: var(--rule); position: relative; overflow: hidden; }
.bar > span { display:block; height:100%; background: var(--ink); }

.btn { font: 500 12px/1 "Geist", sans-serif; padding: 9px 12px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; letter-spacing: 0.02em; transition: all 0.15s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { border-color: var(--rule-2); }
.pill { font: 500 10px/1 "JetBrains Mono", monospace; padding: 4px 7px; border: 1px solid currentColor; letter-spacing: 0.06em; text-transform: uppercase; display: inline-block; }

.pill-operating { color: var(--green); }
.pill-forsale   { color: var(--gold-ink); }
.pill-sold      { color: var(--rust); }
.pill-rented    { color: var(--blue); }
.pill-returned  { color: #6a5a40; }
.pill-disputed  { color: var(--red); background: rgba(176,74,58,0.08); }
.pill-unknown   { color: var(--mute); border-style: dashed; }

.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 4px; }

@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-track { display: flex; gap: 40px; white-space: nowrap; animation: ticker 90s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }

.dark { background: var(--night); color: var(--paper); }
.dark .hair { border-top-color: var(--night-3); }

/* Top nav — real-site navigation (replaces the DesignCanvas artboard wrapper) */
.site-nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 48px;
  background: var(--ink); color: var(--paper);
  border-bottom: 1px solid #000;
}
.site-nav .brand {
  display: flex; align-items: baseline; gap: 14px;
}
.site-nav .brand .wordmark {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 22px; letter-spacing: -0.01em;
}
.site-nav .brand .tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--gold);
}
.site-nav .tabs { display: flex; gap: 4px; }
.site-nav .tabs button {
  background: transparent; border: 1px solid transparent;
  color: var(--paper); cursor: pointer;
  font: 500 11px/1 "JetBrains Mono", monospace;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px;
  transition: all 0.15s;
}
.site-nav .tabs button:hover { border-color: #3a342a; }
.site-nav .tabs button.on {
  background: var(--paper); color: var(--ink);
}
.site-nav .utility {
  display: flex; gap: 10px; align-items: center;
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  color: #8a7f6e; letter-spacing: 0.08em;
}
.site-nav .utility .day { color: var(--gold); }
.site-nav .utility a { color: var(--paper); text-decoration: none; border-bottom: 1px dashed #3a342a; padding-bottom: 1px; }

/* Prevent page-level scrollbars from showing fixed-width artboard overflow */
.view-wrap { min-height: calc(100vh - 52px); }

/* Subtle focus ring for keyboard users */
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Mapbox custom markers ────────────────────────────────────
   Each property renders as a coloured circle whose diameter scales with
   titled acres and whose fill comes from the dominant-ownership rollup.
   Active markers pulse a halo ring to draw the eye. */
.mb-pin {
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s ease-out;
}
.mb-pin:hover { transform: scale(1.15); }
.mb-pin-label {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 14px;
  color: #f5f1ea;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}
.mb-pin-ac {
  position: absolute;
  left: calc(100% + 6px);
  top: calc(50% + 14px);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  color: #8a7f6e;
  white-space: nowrap;
  pointer-events: none;
}
.mb-pin.is-active .mb-pin-label { font-size: 17px; }
.mb-pin.is-active::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: mb-pulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes mb-pulse {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0;   }
}

/* Container that hosts the Mapbox canvas — fills the atlas column. */
.mb-container {
  width: 100%; height: 100%;
  background: #0e0c09;
}
/* Tone the Mapbox ctrls to match our dark editorial palette. */
.mapboxgl-ctrl-group {
  background: rgba(30, 27, 22, 0.92) !important;
  border: 1px solid #2a2620 !important;
}
.mapboxgl-ctrl-group button {
  background-color: transparent !important;
}
.mapboxgl-ctrl-group button+button { border-top: 1px solid #2a2620 !important; }
.mapboxgl-ctrl-group button span { filter: invert(0.85); }
.mapboxgl-ctrl-attrib {
  background: rgba(30, 27, 22, 0.8) !important;
}
.mapboxgl-ctrl-attrib a { color: #8a7f6e !important; }