/* MapFun — Indigenous lands mode (src/time/nativeland.js): the timeline panel that stands where the scrubber
   stands in History and Geology, the click card for one territory, and the provenance sheet.
   Nothing here is decorative-only: the disclaimer line is a requirement of Native Land Digital's terms, so it must
   stay legible at every width and in both themes rather than shrinking into a footnote. */

/* ============================================================================================================
   1. The timeline panel (timeline.addPanel → .tl-panels)
   ============================================================================================================ */
.tl-panels { display: block; }
.tl-panels[hidden] { display: none !important; }

.nl-panel { display: flex; flex-direction: column; gap: 5px; padding: 6px 2px 2px; }
.nl-panel[hidden] { display: none !important; }

.nl-why {
  margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-muted);
}
.nl-why b { color: var(--ink); font-weight: 600; }
:root[data-theme="atlas"] .nl-why { font-size: 13px; }

.nl-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 24px; }
.nl-row-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted);
  flex: none; min-width: 42px;
}
:root[data-theme="atlas"] .nl-row-label { text-transform: none; letter-spacing: .01em; font-size: 12px; font-style: italic; }
.nl-spacer { flex: 1 1 6px; }

.nl-chip { gap: 5px; }
.nl-chip[data-status="loading"] { opacity: .8; }
.nl-chip[data-status="error"][aria-pressed="true"],
.nl-chip[data-status="needs-key"][aria-pressed="true"] {
  color: var(--ink-muted); background: color-mix(in srgb, var(--ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--ink) 20%, transparent);
}
.nl-spinner {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  animation: nl-spin .8s linear infinite;
}
@keyframes nl-spin { to { transform: rotate(360deg); } }

/* "Modern borders: over / hidden" — the word is the state, never a lit icon you have to decode */
.nl-modern-btn { min-width: 52px; justify-content: center; font-variant-numeric: tabular-nums; }
.nl-modern-btn[data-modern="hidden"] { color: var(--ink-muted); }

.nl-prov-btn { height: 26px; font-size: 12px; padding: 0 9px; gap: 5px; }
.nl-prov-btn svg { width: 15px; height: 15px; }

.nl-status {
  margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-muted); font-variant-numeric: tabular-nums;
  max-width: 78ch;
}
.nl-status[hidden] { display: none !important; }
.nl-status[data-kind="error"], .nl-status[data-kind="needs-key"] {
  color: var(--ink); padding: 6px 9px; border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.nl-keyrow[hidden] { display: none !important; }
.nl-key {
  flex: 1 1 180px; min-width: 0; max-width: 300px; height: 28px; padding: 0 9px; border-radius: 7px; font-size: 12.5px;
  color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid var(--panel-border); font-family: var(--font-mono);
}
.nl-key:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nl-keyrow .btn { height: 28px; font-size: 12px; padding: 0 10px; }
.nl-keyhelp { font-size: 12px; color: var(--accent); }

/* The credit and the disclaimer. Required by Native Land Digital's terms wherever their data appears, so it is
   on screen the whole time the mode is, not folded into the provenance sheet. */
.nl-row-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--panel-border); }
.nl-credit {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-muted);
  padding-top: 5px; border-top: 1px solid var(--panel-border);
}
.nl-credit a { color: var(--accent); }
.nl-disc-inline { opacity: .95; }

/* ============================================================================================================
   2. The click card
   ============================================================================================================ */
.nl-card {
  position: absolute; width: 300px; max-width: calc(100vw - 16px); padding: 12px 14px 12px;
  pointer-events: auto;   /* the scene overlay it lives in is pointer-events:none */
  z-index: 15; animation: pop-in var(--t-fast);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain;
}
.nl-card[hidden] { display: none !important; }
.nl-card > * { flex: none; }
.nl-card .close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
.nl-card .eyebrow {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  margin: 0 30px 0 0;
}
:root[data-theme="atlas"] .nl-card .eyebrow { text-transform: none; letter-spacing: .02em; font-size: 12px; font-style: italic; }
/* The name is the point of the card: it gets display size, generous line height for stacked diacritics, and a
   font stack that reaches the syllabics faces before the generic sans. Never truncated, never transformed. */
.nl-card .nl-name {
  margin: 0; font-family: var(--font-display), 'Gadugi', 'Euphemia UCAS', 'Noto Sans Canadian Aboriginal', sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.003em; padding-right: 18px;
  overflow-wrap: anywhere;
}
.nl-card .nl-asgiven { margin: 0; font-size: 11.5px; color: var(--ink-muted); }
.nl-card .nl-nolink { margin: 0; font-size: 12px; color: var(--ink-muted); }
.nl-card .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.nl-card .actions .btn { height: 28px; font-size: 12.5px; padding: 0 10px; }
.nl-card .actions .btn:hover { text-decoration: none; }
.nl-card .btn.sm { height: 24px; font-size: 11.5px; padding: 0 8px; }
.nl-card .nl-disclaimer {
  margin: 2px 0 0; font-size: 11px; line-height: 1.5; color: var(--ink-muted);
  padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ============================================================================================================
   3. The provenance sheet
   ============================================================================================================ */
.nl-prov {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tl-h, 120px) + 26px + var(--safe-b));
  width: min(600px, calc(100vw - 24px));
  max-height: min(600px, calc(100vh - var(--topbar-h) - var(--tl-h, 120px) - 60px));
  display: flex; flex-direction: column; overflow: hidden; z-index: 24; animation: pop-in var(--t-med);
}
.nl-prov[hidden] { display: none !important; }
.nl-prov-head { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--panel-border); }
.nl-prov-head h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.nl-prov-head .nl-spacer { flex: 1; }
.nl-prov-body { overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.nl-sec { display: flex; flex-direction: column; gap: 6px; }
.nl-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"] .nl-sec h3 { text-transform: none; letter-spacing: .01em; font-size: 14px; font-style: italic; }
.nl-sec p { margin: 0; font-size: 13px; line-height: 1.6; }
.nl-sec a { color: var(--accent); }
.nl-counts { color: var(--ink-muted); font-size: 12.5px !important; font-variant-numeric: tabular-nums; }
.nl-sec blockquote {
  margin: 0; font-size: 13.5px; line-height: 1.65; padding-left: 12px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
:root[data-theme="atlas"] .nl-sec blockquote { font-style: italic; }
.nl-quote-src { color: var(--ink-muted); font-size: 12px !important; }
.nl-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);
}
.nl-selected .nl-name {
  margin: 0; font-family: var(--font-display), 'Gadugi', 'Euphemia UCAS', 'Noto Sans Canadian Aboriginal', sans-serif;
  font-size: 16px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.nl-links ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.55; }
.nl-nostore { color: var(--ink-muted); font-size: 12px !important; }

/* the sheet in the data note that leads here */
.dn-nl-go { height: 32px; font-size: 12.5px; padding: 0 12px; }

/* ============================================================================================================
   4. Phones
   ============================================================================================================ */
@media (max-width: 720px) {
  .nl-panel { gap: 6px; padding: 6px 0 2px; }
  .nl-why { font-size: 11.5px; line-height: 1.5; padding-left: 8px; }
  .nl-row-label { min-width: 0; font-size: 10px; }
  .nl-status { font-size: 11.5px; }
  .nl-credit { font-size: 10.5px; }
  .nl-key { flex: 1 1 130px; }
  .nl-card {
    right: 8px; width: auto;
    max-height: calc(100dvh - var(--topbar-h) - var(--tl-h, 150px) - 70px);
    padding: 10px 12px;
  }
  .nl-card .nl-name { font-size: 17px; }
  .nl-prov {
    left: 8px; right: 8px; transform: none; width: auto; border-radius: 14px;
    bottom: calc(var(--tl-h, 150px) + 14px + var(--safe-b));
    max-height: 62vh; max-height: 62dvh;
  }
  .nl-prov-head { padding: 8px 6px 8px 12px; }
  .nl-prov-body { padding: 10px 12px 14px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nl-card, .nl-prov { animation: none; }
  .nl-spinner { animation-duration: 2.4s; }
}

/* --- the rest of the stack under one click ------------------------------------------------------------------
   Overlap is normal in this dataset; a card that named one nation and stopped would be asserting something the
   data does not say. These are the other polygons containing the same point. */
.nl-also { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.nl-also-head { margin: 0; font-size: 11.5px; color: var(--ink-muted); }
.nl-also-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 172px; overflow-y: auto; }
.nl-also-list li { display: flex; align-items: baseline; gap: 6px; }
.nl-also-btn {
  font-size: 12.5px; line-height: 1.45; text-align: left; color: var(--accent); padding: 1px 0;
  font-family: var(--font-ui), 'Gadugi', 'Euphemia UCAS', 'Noto Sans Canadian Aboriginal', sans-serif;
  overflow-wrap: anywhere;
}
.nl-also-btn:hover { text-decoration: underline; }
.nl-also-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.nl-also-cat { flex: none; font-size: 10.5px; color: var(--ink-muted); }
.nl-also-more { margin: 0; font-size: 11px; color: var(--ink-muted); }
.nl-also-list::-webkit-scrollbar { width: 7px; }
.nl-also-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 4px; }
.nl-also-note { margin: 2px 0 0; font-size: 10.5px; color: var(--ink-muted); font-style: italic; }