/* MapFun — the Indigenous-peoples correction in HISTORY mode
   (src/time/peoples.js, src/time/datanote.js, src/time/nativeland.js, and the correction half of the polity card).

   Everything here is built from the existing theme tokens, so it reads correctly in both observatory and atlas
   without a single hard-coded colour. */

/* Autonyms carry marks the UI fonts do not have: ḵ and x̱ (combining macron below), ł, ʼ, ǫ, ı̨, and Canadian
   Aboriginal syllabics. Inter and EB Garamond are served from Google Fonts in their *latin* subsets only, so a
   name like Sḵwx̱wú7mesh would fall back per character and come out ragged. This stack puts fonts with real
   Latin-Extended-Additional, combining-diacritic and syllabics coverage first, ending at the platform default. */
:root {
  --font-autonym: 'Gentium Plus', 'Charis SIL', 'Doulos SIL', 'Noto Sans', 'Noto Sans Canadian Aboriginal',
    'Euphemia', 'Euphemia UCAS', 'Segoe UI', 'Lucida Sans Unicode', 'Arial Unicode MS', 'DejaVu Sans',
    system-ui, sans-serif;
}

/* ============================================================================================================
   1. The polity card, when the source label is an aggregate category
   ============================================================================================================ */
/* The card is now a column that fits the viewport: some regions name 40+ nations, and the source's own
   `region` and `explain` strings are full sentences, so an unbounded card ran off the bottom of a 900-px screen. */
.hist-card {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - var(--topbar-h) - var(--tl-h, 96px) - 44px);
}
.hist-card > * { flex: none; }
.hist-card.has-correction { width: 336px; padding-bottom: 10px; }
.hist-card .kind-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin: 0 0 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
:root[data-theme="atlas"] .hist-card .kind-chip { text-transform: none; letter-spacing: .01em; font-size: 11.5px; font-style: italic; }

/* the scroll region: the peoples are visible by default — never behind a disclosure — but a 40-nation list must
   not push the card off the screen */
.hist-card .hist-scroll {
  flex: 1 1 auto; min-height: 96px; max-height: min(46vh, 380px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -14px 8px; padding: 0 14px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
}
.hist-card .hist-scroll::-webkit-scrollbar { width: 7px; }
.hist-card .hist-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 4px; }

.hist-card .region { flex: none; margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }
:root[data-theme="atlas"] .hist-card .region { font-style: italic; font-size: 13px; }
.hist-card .explain-wrap { flex: none; margin: 0 0 10px; }
.hist-card .explain { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.hist-card .explain-more {
  display: none; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--accent);
}
.hist-card .explain-more:hover { text-decoration: underline; }
.hist-card .peoples-h {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}
:root[data-theme="atlas"] .hist-card .peoples-h { text-transform: none; letter-spacing: .01em; font-size: 14px; font-style: italic; }
.hist-card .peoples-h .count {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; padding: 1px 5px; border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted); text-transform: none;
}

.hist-card ul.peoples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.hist-card .people { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--panel-border) 100%, transparent); }
.hist-card .people:first-child { border-top: 0; padding-top: 0; }
.hist-card .people-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.hist-card .people-name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.hist-card .autonym {
  font-family: var(--font-autonym); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--accent);
  /* combining marks below (x̱, ḵ, ı̨) sit under the baseline: give the line room and never clip it */
  padding-bottom: 1px;
}
:root[data-theme="atlas"] .hist-card .autonym { font-size: 15px; }
.hist-card .conf {
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px;
  color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 7%, transparent); cursor: help;
}
.hist-card .conf[data-conf="low"] { color: var(--warn, #d9a441); background: color-mix(in srgb, var(--warn, #d9a441) 14%, transparent); }
.hist-card .people-where { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); }
.hist-card .people-also { margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: color-mix(in srgb, var(--ink-muted) 80%, transparent); }
.hist-card .people-links { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; font-size: 11.5px; }
.hist-card .people-link { color: var(--accent); text-decoration: none; }
.hist-card .people-link:hover { text-decoration: underline; }
.hist-card .people-src { color: color-mix(in srgb, var(--ink-muted) 75%, transparent); cursor: help; }
.hist-card .peoples-foot { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-muted); }

.hist-card .further { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; }
.hist-card .further-h { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
:root[data-theme="atlas"] .hist-card .further-h { text-transform: none; letter-spacing: .01em; font-size: 12.5px; font-style: italic; }
.hist-card .further-link { font-size: 12.5px; color: var(--accent); text-decoration: none; }
.hist-card .further-link:hover { text-decoration: underline; }

/* the honest line: what the underlying file actually says */
.hist-card .srclabel { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-muted); }
.hist-card .srclabel code {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted);
  background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 1px 4px; border-radius: 4px;
  overflow-wrap: anywhere;
}

/* ============================================================================================================
   2. The "About this data" chip and the per-frame strip, both inside the timeline instrument
   ============================================================================================================ */
.dn-chip { position: relative; }
.dn-chip .dn-dot {
  position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--panel-solid);
}
.dn-chip.flagged { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.dn-chip[aria-expanded="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }

.dn-strip {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 5px; padding: 6px 5px 6px 10px; border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  animation: fade-in var(--t-med);
}
.dn-strip[hidden] { display: none !important; }
.dn-strip-body { flex: 1; min-width: 0; }
.dn-strip-text {
  margin: 0; font-size: 11.5px; line-height: 1.42; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root[data-theme="atlas"] .dn-strip-text { font-size: 12.5px; }
.dn-strip-more {
  flex: none; align-self: center; height: 24px; padding: 0 9px; border-radius: 6px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dn-strip-more:hover { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.dn-strip-close { flex: none; align-self: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-muted); }
.dn-strip-close:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.dn-strip-more:focus-visible, .dn-strip-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ============================================================================================================
   3. The sheet
   ============================================================================================================ */
.dn-sheet {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tl-h, 96px) + 26px + var(--safe-b));
  width: min(560px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - var(--topbar-h) - var(--tl-h, 96px) - 60px));
  display: flex; flex-direction: column; overflow: hidden; z-index: 24; animation: pop-in var(--t-med);
}
.dn-sheet[hidden] { display: none !important; }
.dn-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--panel-border); }
.dn-head h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.dn-spacer { flex: 1; }
.dn-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.dn-sec { display: flex; flex-direction: column; gap: 6px; }
.dn-sec h3 {
  margin: 0; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-muted);
}
:root[data-theme="atlas"] .dn-sec h3 { text-transform: none; letter-spacing: .01em; font-size: 14px; font-style: italic; }
.dn-sec p { margin: 0; font-size: 13px; line-height: 1.6; }
.dn-caveat { font-size: 13.5px !important; }
.dn-missing { color: var(--ink-muted); font-size: 12px !important; }
.dn-flag {
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.dn-doc { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.dn-doc a, .dn-body a { color: var(--accent); }

.dn-srcs > summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent); width: fit-content;
  padding: 2px 0; list-style-position: inside;
}
.dn-srcs > summary::marker { color: var(--ink-muted); }
.dn-srcs[open] > summary { margin-bottom: 6px; }
.src-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.src-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.src-list a { text-decoration: none; font-weight: 500; }
.src-list a:hover { text-decoration: underline; }
.src-pub { color: var(--ink-muted); }
.src-lic { color: color-mix(in srgb, var(--ink-muted) 75%, transparent); font-size: 11.5px; }

/* --- Native Land Digital ---------------------------------------------------------------------------------- */
.dn-nl-howto { color: var(--ink-muted); font-size: 12.5px !important; }
.dn-nl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dn-nl-key {
  flex: 1 1 200px; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--panel-border); font-family: var(--font-mono);
}
.dn-nl-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dn-nl-save, .dn-nl-toggle { height: 32px; font-size: 12.5px; padding: 0 12px; flex: none; }
.dn-nl-clear { font-size: 12px; color: var(--ink-muted); text-decoration: underline; }
.dn-nl-clear:hover { color: var(--ink); }
.dn-nl-maps { display: inline-flex; gap: 4px; }
.dn-nl-status { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dn-disclaimer {
  margin: 2px 0 0 !important; font-size: 11.5px !important; line-height: 1.5 !important; color: var(--ink-muted);
  padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ============================================================================================================
   4. Phones
   ============================================================================================================ */
@media (max-width: 720px) {
  /* the sheet fits the gap between the extras row (top bar + 48 px button strip) and the skin rail + timeline;
     the peoples list takes whatever is left rather than pushing the card under the chrome */
  .hist-card {
    right: 8px; width: auto;
    /* extras row = topbar + 8 + 40 + 8; leave 14 px of map above the card. positionCard() measures the real
       bottom chrome (timeline, skin rail, info-card peek) and overrides this inline. */
    max-height: calc(100dvh - var(--topbar-h) - var(--tl-h, 120px) - var(--sb-h, 0px) - 70px);
    padding: 10px 12px 10px;
  }
  .hist-card.has-correction { width: auto; }
  /* on a phone the budget is ~300 px: tighten the prose so the peoples list is never the part that vanishes */
  .hist-card h3 { font-size: 16px; }
  .hist-card .explain-wrap { margin-bottom: 8px; }
  .hist-card .explain { font-size: 12px; line-height: 1.5; }
  .hist-card .explain:not(.expanded) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hist-card .explain-more { display: block; }
  .hist-card .people { padding: 6px 0; }
  .hist-card .people-name { font-size: 13.5px; }
  .hist-card .hist-scroll { flex: 1 1 auto; min-height: 58px; max-height: none; margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .hist-card .eyebrow, .hist-card h3, .hist-card .kind-chip, .hist-card .explain-wrap, .hist-card .region,
  .hist-card .srclabel, .hist-card .actions, .hist-card dl.meta { flex: none; }
  /* the region sentence can be long: on a phone it is context, not the point */
  .hist-card .region { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
  .dn-sheet {
    left: 8px; right: 8px; transform: none; width: auto; border-radius: 14px;
    bottom: calc(var(--tl-h, 120px) + 14px + var(--safe-b));
    max-height: 62vh; max-height: 62dvh;
  }
  .dn-head { padding: 8px 6px 8px 12px; }
  .dn-body { padding: 10px 12px 14px; gap: 12px; }
  .dn-strip { padding: 6px 4px 6px 8px; }
  .dn-strip-text { -webkit-line-clamp: 4; font-size: 11.5px; }
  .dn-chip .dn-chip-label { display: none; }
  .dn-chip { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .dn-strip, .dn-sheet { animation: none; }
}