/* ─────────────────────────────────────────────────────────────
 * cartog.css — Cultural Memory Atlas design system
 *
 * Cartographic primitives shared across laguna_beach_atlas.html
 * and walker.html. Paper-on-paper as the default, dark surfaces
 * reserved for the moment a story plays. Color carries era /
 * strata identity, not decoration.
 *
 * This file is ADDITIVE. It introduces new tokens (--paper,
 * --ink, --clay, era-* etc.) and new classes (all prefixed cg-)
 * without touching the existing --bg / --surface / --text tokens
 * or any existing selector. Surfaces opt in by applying cg-*
 * classes; nothing in the live UI changes until a surface does.
 *
 * Source of truth: cartog.jsx in the design handoff bundle.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* PAPER — warm, light. The Atlas lives here. */
  --paper:        #f4ecdb;
  --paper-deep:   #ece2cb;
  --paper-edge:   #e1d4b6;
  --paper-shadow: #d4c4a0;
  --rule:         #c8bb9a;
  --rule-soft:    #ddd0ac;

  /* INK — warm black, never pure. */
  --ink:          #1b1813;
  --ink-soft:     #5b5346;
  --ink-faint:    #8a8270;
  --ink-ghost:    #b3a98e;

  /* LAGUNA — plein-air, cartographic. */
  --clay:         #b14b1f;
  --clay-soft:   #e7c9b6;
  --pacific:      #1f4f72;
  --pacific-soft: #cfdde7;
  --surf:         #6fa6b3;
  --chaparral:    #6a7e58;
  --dusk:         #6c4d7e;
  --gold:         #c98a3b;

  /* ERA / STRATA — era keys map to colors. The keys match
   * the design's strata vocabulary: tongva, 1880, 1910,
   * 1950, 1960, 1990. cartog.js exposes the same map for
   * JS callers (era-pin divIcons, era-chip rendering). */
  --era-tongva:    var(--chaparral);
  --era-1880:      #8a7d4a;
  --era-1910:      var(--gold);
  --era-1950:      var(--clay);
  --era-1960:      var(--dusk);
  --era-1990:      var(--pacific);

  /* Typography stack — Fraunces / Newsreader / JetBrains Mono.
   * walker.html already loads these via Google Fonts. The Atlas
   * loads them alongside its existing Instrument Serif / DM Sans
   * fonts; either may render depending on which class is applied. */
  --cg-display: "Fraunces", "Times New Roman", Georgia, serif;
  --cg-body:    "Newsreader", "Times New Roman", Georgia, serif;
  --cg-mono:    "JetBrains Mono", ui-monospace, monospace;
}

/* ─────────────────────────────────────────────────────────────
 * SURFACES
 *   .cg-paper      — warm light paper canvas with subtle speckle
 *   .cg-paper-deep — denser paper for inset rails / sub-panels
 * ───────────────────────────────────────────────────────────── */
.cg-paper {
  background: var(--paper);
  color: var(--ink);
  position: relative;
}
.cg-paper-deep {
  background: var(--paper-deep);
  color: var(--ink);
  position: relative;
}

/* Faint paper grain via overlapping radial speckles. Drawn as a
 * ::before so the speckle sits under content without affecting
 * layout. Subtle — should read as texture, never as noise. */
.cg-paper::before,
.cg-paper-deep::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 17% 33%, rgba(99,80,40,0.045) 0 1px, transparent 1.5px),
    radial-gradient(circle at 73% 64%, rgba(99,80,40,0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 41% 81%, rgba(99,80,40,0.04)  0 1px, transparent 1.5px),
    radial-gradient(circle at 89% 22%, rgba(99,80,40,0.035) 0 1px, transparent 1.5px);
  background-size: 140px 140px, 200px 200px, 160px 160px, 220px 220px;
  background-position: 0 0, 30px 60px, 80px 20px, 10px 110px;
  opacity: 0.7;
}
.cg-paper > *,
.cg-paper-deep > * { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
 * GRATICULE — cartographic grid background, two densities.
 *   .cg-graticule       — 48px grid, behind map surfaces
 *   .cg-graticule-fine  — 16px grid, inside small bracketed panels
 * ───────────────────────────────────────────────────────────── */
.cg-graticule {
  background-image:
    linear-gradient(to right,  rgba(110,90,50,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110,90,50,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
.cg-graticule-fine {
  background-image:
    linear-gradient(to right,  rgba(110,90,50,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(110,90,50,0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ─────────────────────────────────────────────────────────────
 * TYPE RAMP
 *   .cg-mono   — monospace text helper
 *   .cg-micro  — uppercase microcopy (coords, era chips, etc.)
 *   .cg-label  — uppercase label, slightly larger than micro
 *   .cg-label-clay / .cg-label-pacific — accent variants
 *   .cg-place-label — Fraunces italic, halo, on-map place name
 *   .cg-display / .cg-body — generic font-family helpers
 * ───────────────────────────────────────────────────────────── */
.cg-display { font-family: var(--cg-display); }
.cg-body    { font-family: var(--cg-body); }
.cg-mono    { font-family: var(--cg-mono); letter-spacing: 0.06em; }
.cg-micro {
  font-family: var(--cg-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cg-label {
  font-family: var(--cg-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cg-label-clay    { color: var(--clay); }
.cg-label-pacific { color: var(--pacific); }

.cg-place-label {
  font-family: var(--cg-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 0 4px var(--paper), 0 0 8px var(--paper);
}

/* ─────────────────────────────────────────────────────────────
 * BRACKETED PANEL — the signature cartographic chrome.
 * Plain paper card with four 10×10 bracket marks anchored at the
 * corners and a hairline under the optional title row.
 *
 * Markup:
 *   <div class="cg-panel" style="--cg-accent:var(--clay)">
 *     <div class="cg-panel-head">
 *       <span class="cg-micro">Pin · 33.5421° N · 117.7857° W</span>
 *       <span class="cg-micro" style="color:var(--ink-faint)">VERIFIED</span>
 *     </div>
 *     <div class="cg-panel-body">…</div>
 *   </div>
 *
 * The bracket color follows --cg-accent (defaults to --ink) so
 * panels can flag their accent (clay for pin, gold for media,
 * pacific for draft state, chaparral for walker preview).
 * ───────────────────────────────────────────────────────────── */
.cg-panel {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  --cg-accent: var(--ink);
}
.cg-panel::before,
.cg-panel::after,
.cg-panel > .cg-panel-br-bl,
.cg-panel > .cg-panel-br-br {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid var(--cg-accent);
  pointer-events: none;
}
.cg-panel::before { top: -1px; left:  -1px; border-right: 0; border-bottom: 0; }
.cg-panel::after  { top: -1px; right: -1px; border-left:  0; border-bottom: 0; }
.cg-panel > .cg-panel-br-bl { bottom: -1px; left:  -1px; border-right: 0; border-top: 0; }
.cg-panel > .cg-panel-br-br { bottom: -1px; right: -1px; border-left:  0; border-top: 0; }
.cg-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.cg-panel-body { padding: 0; }

/* ─────────────────────────────────────────────────────────────
 * SEPARATOR — hairline with a centred bullet, marks section breaks.
 *
 *   <div class="cg-sep"><span></span><i></i><span></span></div>
 *
 * The two <span>s are the rules, the <i> is the centre dot.
 * Authored as element children rather than ::before/::after so
 * the rules can flex independently around the dot.
 * ───────────────────────────────────────────────────────────── */
.cg-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cg-sep > span {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.cg-sep > i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rule);
}

/* ─────────────────────────────────────────────────────────────
 * ERA PIN — small map marker as a CSS-only element. cartog.js
 * also exposes cartog.eraPin(era,size) for divIcon use in Leaflet.
 *
 *   <span class="cg-era-pin" data-era="1950"></span>
 *
 * data-era is one of: tongva, 1880, 1910, 1950, 1960, 1990.
 * Size is 18px by default; override with --cg-pin-size for inline
 * variations. Falls back to clay if data-era is unset.
 * ───────────────────────────────────────────────────────────── */
.cg-era-pin {
  --cg-pin-size: 18px;
  --cg-pin-color: var(--clay);
  display: inline-block;
  width: var(--cg-pin-size);
  height: var(--cg-pin-size);
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--cg-pin-color);
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
}
.cg-era-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--cg-pin-size) / 3);
  height: calc(var(--cg-pin-size) / 3);
  border-radius: 50%;
  background: var(--cg-pin-color);
}
.cg-era-pin[data-era="tongva"] { --cg-pin-color: var(--era-tongva); }
.cg-era-pin[data-era="1880"]   { --cg-pin-color: var(--era-1880); }
.cg-era-pin[data-era="1910"]   { --cg-pin-color: var(--era-1910); }
.cg-era-pin[data-era="1950"]   { --cg-pin-color: var(--era-1950); }
.cg-era-pin[data-era="1960"]   { --cg-pin-color: var(--era-1960); }
.cg-era-pin[data-era="1990"]   { --cg-pin-color: var(--era-1990); }

/* ─────────────────────────────────────────────────────────────
 * ERA CHIP — hollow pill with 6px dot of era color, then the label
 * in monospace micro. Used for stratum labels next to a place name.
 *
 *   <span class="cg-era-chip" data-era="1950">
 *     <i></i><span>Beat · 1958–62</span>
 *   </span>
 * ───────────────────────────────────────────────────────────── */
.cg-era-chip {
  --cg-chip-color: var(--clay);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--cg-chip-color);
  color: var(--ink);
  font-family: var(--cg-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
}
.cg-era-chip > i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cg-chip-color);
  align-self: center;
  flex-shrink: 0;
}
.cg-era-chip[data-era="tongva"] { --cg-chip-color: var(--era-tongva); }
.cg-era-chip[data-era="1880"]   { --cg-chip-color: var(--era-1880); }
.cg-era-chip[data-era="1910"]   { --cg-chip-color: var(--era-1910); }
.cg-era-chip[data-era="1950"]   { --cg-chip-color: var(--era-1950); }
.cg-era-chip[data-era="1960"]   { --cg-chip-color: var(--era-1960); }
.cg-era-chip[data-era="1990"]   { --cg-chip-color: var(--era-1990); }

/* ─────────────────────────────────────────────────────────────
 * CONFIDENCE DOTS — 4-step claim confidence indicator. The first
 * N dots fill with clay; the rest are hollow rings.
 *
 *   <span class="cg-confidence" data-value="3"></span>
 *
 * Implemented with four ::after-style children for clarity. We
 * use direct <i> children so the script can't accidentally inject
 * extra dots, and so colors can be themed via --cg-conf-color.
 * ───────────────────────────────────────────────────────────── */
.cg-confidence {
  --cg-conf-color: var(--clay);
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.cg-confidence > i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--cg-conf-color);
  background: transparent;
}
.cg-confidence[data-value="1"] > i:nth-child(-n+1),
.cg-confidence[data-value="2"] > i:nth-child(-n+2),
.cg-confidence[data-value="3"] > i:nth-child(-n+3),
.cg-confidence[data-value="4"] > i:nth-child(-n+4) {
  background: var(--cg-conf-color);
}

/* ─────────────────────────────────────────────────────────────
 * BUTTONS — five kinds × three sizes. JetBrains Mono, uppercase,
 * generous letter-spacing. The kind name is the modifier class.
 *
 *   <button class="cg-btn cg-btn-clay">Walk this →</button>
 *   <button class="cg-btn cg-btn-ghost cg-btn-sm">Edit</button>
 * ───────────────────────────────────────────────────────────── */
.cg-btn {
  font-family: var(--cg-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 10px 16px;
  font-size: 11px;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.cg-btn-sm { padding: 6px 10px;  font-size: 10px; }
.cg-btn-md { padding: 10px 16px; font-size: 11px; }
.cg-btn-lg { padding: 14px 22px; font-size: 12px; }
.cg-btn-primary { background: var(--ink);       color: var(--paper); border: 1px solid var(--ink); }
.cg-btn-ghost   { background: transparent;       color: var(--ink);   border: 1px solid var(--ink); }
.cg-btn-clay    { background: var(--clay);      color: var(--paper); border: 1px solid var(--clay); }
.cg-btn-pacific { background: var(--pacific);   color: var(--paper); border: 1px solid var(--pacific); }
.cg-btn-paper   { background: var(--paper-deep);color: var(--ink);   border: 1px solid var(--rule); }

/* ─────────────────────────────────────────────────────────────
 * STATE WASHES — soft radial overlays used by the Walker to carry
 * state identity (en-route = pacific, arrived = moss+gold,
 * listening = dusk) without going to dark mode. Drop one of these
 * as a position:absolute child of the screen container.
 *
 *   <div class="cg-wash cg-wash-pacific"></div>
 * ───────────────────────────────────────────────────────────── */
.cg-wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cg-wash-pacific {
  background: radial-gradient(ellipse 110% 60% at 50% 28%,
    rgba(31, 79, 114, 0.22) 0%,
    rgba(111, 166, 179, 0.10) 40%,
    transparent 75%);
}
.cg-wash-moss-gold {
  background:
    radial-gradient(ellipse 80% 50% at 30% 25%, rgba(201, 138, 59, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 90% 60% at 70% 70%, rgba(106, 126, 88, 0.18) 0%, transparent 75%);
}
.cg-wash-dusk {
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%,   rgba(108, 77, 126, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 90%  40% at 50% 100%, rgba(108, 77, 126, 0.10) 0%, transparent 70%);
}