/* info-tip.css: NK's small "i" and its popover. One stylesheet for reference/vanilla AND reference/react (same
 * class names). Load it once per page; the data-control skills (range-slider, keyword-search, multi-select-filter,
 * data-explorer) all use it for their own "i".
 *
 * Tokens: each --it-* reads the page's house tokens first (UI_STANDARDS section 3: --bg-elevated, --text-primary,
 * --accent-primary, --border-subtle, --focus-ring ...) with OKLCH fallbacks, light and dark designed together.
 * Theme keys match the siblings: :root[data-theme] wins, else prefers-color-scheme; a popover can also be forced
 * with data-theme="dark|light" (the theme option).
 * Size: --it-size (default 20px) is the drawn "i"; the hit area is ALWAYS 44x44 (inset: calc(50% - 22px), centred
 * whatever the size or border: regression 2026-10-14-hit-area-42px). A host can restyle the "i" through
 * --it-size, --it-btn-font, --it-btn-text, --it-btn-border and --it-btn-bg on any ancestor.
 * Motion: opacity + transform only; reduced motion = fade only (UI_STANDARDS section 5).
 */

:root {
  --it-bg: var(--bg-elevated, oklch(100% 0 0));
  --it-text: var(--text-primary, oklch(23% 0.02 255));
  --it-muted: var(--text-muted, oklch(45% 0.02 255));
  --it-border: var(--border-subtle, oklch(88% 0.008 250));
  --it-border-strong: var(--border-strong, oklch(64% 0.015 250));
  --it-accent: var(--accent-primary, oklch(52% 0.18 258));
  --it-link: var(--link, oklch(48% 0.18 258));
  --it-focus: var(--focus-ring, oklch(58% 0.2 258));
  --it-warn: var(--warning, oklch(46% 0.12 60));
  --it-warn-soft: oklch(95% 0.05 85);
  --it-shadow: 0 12px 32px -8px oklch(20% 0.02 255 / 0.25), 0 2px 6px oklch(20% 0.02 255 / 0.1);
  --it-radius: 12px;
  --it-z: 2147483000; /* above sticky bars, filter sheets and popups (NK 2026-08-04: the "i" hid behind the popup) */
  --it-fast: var(--motion-fast, 180ms);
  --it-ease: var(--ease-snappy, cubic-bezier(0.22, 1, 0.36, 1));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --it-bg: var(--bg-elevated, oklch(27% 0.014 255));
    --it-text: var(--text-primary, oklch(95% 0.008 250));
    --it-muted: var(--text-muted, oklch(76% 0.015 250));
    --it-border: var(--border-subtle, oklch(38% 0.014 255));
    --it-border-strong: var(--border-strong, oklch(58% 0.015 255));
    --it-accent: var(--accent-primary, oklch(74% 0.14 258));
    --it-link: var(--link, oklch(78% 0.12 258));
    --it-focus: var(--focus-ring, oklch(76% 0.15 258));
    --it-warn: var(--warning, oklch(82% 0.12 80));
    --it-warn-soft: oklch(34% 0.06 75);
    --it-shadow: 0 16px 40px -8px oklch(0% 0 0 / 0.6), 0 2px 6px oklch(0% 0 0 / 0.4);
  }
}
:root[data-theme="dark"],
.it-pop[data-theme="dark"] {
  --it-bg: var(--bg-elevated, oklch(27% 0.014 255));
  --it-text: var(--text-primary, oklch(95% 0.008 250));
  --it-muted: var(--text-muted, oklch(76% 0.015 250));
  --it-border: var(--border-subtle, oklch(38% 0.014 255));
  --it-border-strong: var(--border-strong, oklch(58% 0.015 255));
  --it-accent: var(--accent-primary, oklch(74% 0.14 258));
  --it-link: var(--link, oklch(78% 0.12 258));
  --it-focus: var(--focus-ring, oklch(76% 0.15 258));
  --it-warn: var(--warning, oklch(82% 0.12 80));
  --it-warn-soft: oklch(34% 0.06 75);
  --it-shadow: 0 16px 40px -8px oklch(0% 0 0 / 0.6), 0 2px 6px oklch(0% 0 0 / 0.4);
}
.it-pop[data-theme="light"] {
  --it-bg: oklch(100% 0 0);
  --it-text: oklch(23% 0.02 255);
  --it-muted: oklch(45% 0.02 255);
  --it-border: oklch(88% 0.008 250);
  --it-border-strong: oklch(64% 0.015 250);
  --it-accent: oklch(52% 0.18 258);
  --it-link: oklch(48% 0.18 258);
  --it-focus: oklch(58% 0.2 258);
  --it-warn: oklch(46% 0.12 60);
  --it-warn-soft: oklch(95% 0.05 85);
  --it-shadow: 0 12px 32px -8px oklch(20% 0.02 255 / 0.25), 0 2px 6px oklch(20% 0.02 255 / 0.1);
}

/* ---------- the "i" ---------- */
.it-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--it-size, 20px);
  height: var(--it-size, 20px);
  margin: 0;
  padding: 0;
  border: 1px solid var(--it-btn-border, var(--it-border-strong));
  border-radius: 999px;
  background: var(--it-btn-bg, transparent);
  color: var(--it-btn-text, var(--it-muted));
  font: italic 600 var(--it-btn-font, 0.75rem)/1 Georgia, "Times New Roman", serif;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation; /* no double-tap-zoom wait on phones */
  -webkit-tap-highlight-color: transparent;
  transition: color var(--it-fast) var(--it-ease), border-color var(--it-fast) var(--it-ease), transform var(--it-fast) var(--it-ease);
}
/* 44x44 hit area, centred whatever the size or border. A negative inset is measured from the PADDING box, so
 * inset:-12px on a bordered 20px button gave 42x42 (regression: 2026-10-14-hit-area-42px). */
.it-btn::after { content: ""; position: absolute; inset: calc(50% - 22px); }
.it-btn:hover,
.it-btn[aria-expanded="true"] { color: var(--it-accent); border-color: var(--it-accent); }
.it-btn:active { transform: scale(0.94); }
.it-btn:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 2px; }

/* ---------- the popover: a non-modal dialog, fixed (set inline by the script too), above everything ---------- */
.it-pop {
  --it-ready: 1; /* the script checks this to know the stylesheet is loaded */
  position: fixed;
  /* It is a popover="manual" shown in the top layer (regression: 2026-10-14-dialog-transform). The UA rule for
   * [popover] sets inset: 0, margin: auto, overflow: auto and fit-content sizes: undo them here (the script sets left,
   * top and width inline; overflow: auto would clip the arrow, and .it-scroll does the scrolling). */
  inset: auto;
  height: auto;
  overflow: visible;
  z-index: var(--it-z);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: min(320px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  color: var(--it-text);
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  border-radius: var(--it-radius);
  box-shadow: var(--it-shadow);
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  animation: it-in var(--it-fast) var(--it-ease) both;
}
.it-pop[hidden] { display: none !important; }
.it-pop:focus { outline: none; }
.it-pop:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 2px; }
.it-pop[data-placement="top"] { --it-rise: 4px; }
@keyframes it-in { from { opacity: 0; transform: translateY(var(--it-rise, -4px)); } to { opacity: 1; transform: none; } }

.it-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 16px; border-radius: inherit; }
.it-title { margin: 0 28px 4px 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.it-body > * { margin: 0; }
.it-body > * + * { margin-top: 4px; }
.it-body > .it-what + .it-what { margin-top: 8px; }
.it-body > .it-what + :not(.it-what) { margin-top: 8px; }
.it-k { margin-right: 4px; color: var(--it-muted); font-weight: 600; }
.it-flag { color: var(--it-muted); }
.it-gap { margin-top: 8px !important; color: var(--it-warn); font-weight: 600; }
.it-stale {
  display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--it-warn-soft); color: var(--it-warn);
  font-size: 0.75rem; font-weight: 600; line-height: 1.6;
}
.it-pop[data-freshness="stale"] .it-row[data-row="asOf"] .it-v { color: var(--it-warn); }
.it-unsafe { color: var(--it-muted); font-style: italic; }
.it-links ul { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.it-link {
  color: var(--it-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  border-radius: 4px;
}
.it-link:hover { text-decoration-thickness: 2px; }
.it-link:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 2px; }
.it-links .it-link { display: inline-flex; align-items: center; min-height: 24px; }
.it-ext { margin-left: 2px; font-size: 0.75em; text-decoration: none; display: inline-block; }
.it-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.it-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--it-muted);
  font: 400 1.125rem/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.it-close::after { content: ""; position: absolute; inset: calc(50% - 22px); }
.it-close:hover { color: var(--it-text); background: color-mix(in oklch, var(--it-text) 8%, transparent); }
.it-close:focus-visible { outline: 2px solid var(--it-focus); outline-offset: 0; }

/* the arrow points at the "i"; --it-arrow-x is set by the script */
.it-arrow {
  position: absolute;
  left: calc(var(--it-arrow-x, 50%) - 6px);
  width: 12px;
  height: 12px;
  background: var(--it-bg);
  border: 1px solid var(--it-border);
  transform: rotate(45deg);
  pointer-events: none;
}
.it-pop[data-placement="bottom"] .it-arrow,
.it-pop:not([data-placement]) .it-arrow { top: -7px; border-right: 0; border-bottom: 0; }
.it-pop[data-placement="top"] .it-arrow { bottom: -7px; border-left: 0; border-top: 0; }
.it-pop[data-arrow="off"] .it-arrow { display: none; } /* it could not reach the "i": no arrow beats a wrong one */

/* Touch screens and narrow windows: links and the close button are 44px targets (the estate's touch rule). */
@media (pointer: coarse), (max-width: 639.98px) {
  .it-pop .it-link { display: inline-flex; align-items: center; min-height: 44px; }
  .it-close { top: 2px; right: 2px; width: 36px; height: 36px; }
  .it-title { margin-right: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .it-pop { animation-name: it-fade; }
  .it-btn { transition: none; }
  .it-btn:active { transform: none; }
}
@keyframes it-fade { from { opacity: 0; } to { opacity: 1; } }

@media (forced-colors: active) {
  .it-btn, .it-pop, .it-arrow { border-color: CanvasText; }
  .it-stale { border: 1px solid CanvasText; }
}

@media print {
  .it-pop { display: none !important; }
}