/* /lib/ticker-picker.css — Mission Metrics shared ticker-search widget.
 *
 * Extracted from public/hal.html (C35 search UX). Namespaced under `.tp-*`
 * so it never collides with host-page styles. Works in two modes:
 *
 *   - INLINE: drop a .tp-card into any form. No backdrop. Renders in flow.
 *   - MODAL:  .tp-backdrop > .tp-card. Backdrop covers viewport, card centers.
 *
 * Color tokens come from the host page's CSS variables when present
 * (--navy, --accent, --accent-dark, --bg-card, --bg-secondary, --border,
 * --text-secondary, --text-muted, --hal-glow, --hal-red). Falls back to
 * sane defaults if any variable is missing.
 *
 * 2026-05-19 — v1.0 (single ticker)
 * 2026-05-19 — v2.0 (multi-ticker mode — adds .tp-mode-multi, .tp-multi-meta, .tp-multi etc.)
 */

/* ─── Tokens with fallbacks ───────────────────────────────────────── */
.tp-card {
  --tp-navy:           var(--navy,           #1B2A4A);
  --tp-accent:         var(--accent,         #0D9373);
  --tp-accent-dark:    var(--accent-dark,    #0B7A60);
  --tp-bg-card:        var(--bg-card,        #F7FAF9);
  --tp-bg-secondary:   var(--bg-secondary,   #FFFFFF);
  --tp-border:         var(--border,         #E0E6E3);
  --tp-text:           var(--text-primary,   #1A2030);
  --tp-text-secondary: var(--text-secondary, #4A5568);
  --tp-text-muted:     var(--text-muted,     #7A8A90);
  --tp-hal-red:        var(--hal-red,        #b33a3a);
  --tp-hal-glow:       var(--hal-glow,       #34D399);
}

/* ─── Backdrop (modal mode only) ──────────────────────────────────── */
.tp-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,26,48,0.78);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
}
.tp-backdrop.tp-show { display: flex; }

/* ─── Card (inline or modal) ──────────────────────────────────────── */
.tp-card {
  background: var(--tp-bg-secondary);
  border-radius: 18px;
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 6px 22px rgba(15,26,48,0.06);
  position: relative;
  border: 1px solid rgba(15,26,48,0.06);
  font-family: inherit;
  color: var(--tp-text);
  box-sizing: border-box;
}
.tp-card.tp-mode-modal {
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  width: calc(100% - 32px);
}
.tp-card.tp-mode-modal::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--tp-hal-red), transparent 30%, transparent 70%, var(--tp-hal-glow));
  z-index: -1;
  opacity: 0.6;
}

/* ─── HAL eye (optional) ──────────────────────────────────────────── */
.tp-card .tp-eye {
  width: 56px; height: 56px;
  background: radial-gradient(circle at 50% 50%, var(--tp-hal-red) 0%, var(--tp-hal-red) 35%, #6B2222 80%);
  border-radius: 50%;
  margin: 0 auto 16px;
  box-shadow: 0 0 0 4px rgba(179,58,58,0.18), 0 0 30px rgba(179,58,58,0.5);
  position: relative;
}
.tp-card .tp-eye::after {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%);
}

/* ─── Title + subtitle ────────────────────────────────────────────── */
.tp-card h2.tp-title {
  font-size: 24px; font-weight: 900; color: var(--tp-navy);
  text-align: center; letter-spacing: -0.02em; margin: 0 0 6px;
}
.tp-card .tp-sub {
  text-align: center; color: var(--tp-text-secondary);
  font-size: 13.5px; line-height: 1.55; margin: 0 0 22px;
}

/* ─── Labels + inputs ─────────────────────────────────────────────── */
.tp-card .tp-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--tp-text-secondary); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 6px; margin-top: 12px;
}
.tp-card .tp-input {
  width: 100%; padding: 14px 16px;
  font-family: inherit; font-size: 18px; font-weight: 700;
  color: var(--tp-navy);
  background: var(--tp-bg-card);
  border: 1.5px solid var(--tp-border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  letter-spacing: 0.5px;
  box-sizing: border-box;
}
.tp-card .tp-input:focus {
  outline: none; border-color: var(--tp-accent);
  box-shadow: 0 0 0 3px rgba(13,147,115,0.16);
}
.tp-card .tp-input.tp-symbol { text-transform: uppercase; font-size: 24px; font-weight: 900; }

/* Multi-ticker textarea — mono, 90px min height, vertical resize only */
.tp-card .tp-input.tp-multi {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  min-height: 90px;
  resize: vertical;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  line-height: 1.45;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  white-space: pre;
  overflow-wrap: normal;
}
.tp-card .tp-input.tp-multi::placeholder {
  color: var(--tp-text-muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.tp-card .tp-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ─── Multi-ticker meta row (count + warning + clear button) ──────── */
.tp-card .tp-multi-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--tp-text-muted);
}
.tp-card .tp-multi-count {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-text-secondary);
  font-family: 'SF Mono', Monaco, monospace;
}
.tp-card .tp-multi-count.tp-multi-over {
  color: var(--tp-hal-red);
}
.tp-card .tp-multi-warn {
  flex: 1;
  font-size: 11px;
  color: var(--tp-hal-red);
  font-weight: 600;
}
.tp-card .tp-multi-clear {
  margin-left: auto;
  background: transparent;
  color: var(--tp-text-secondary);
  border: 1px solid var(--tp-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tp-card .tp-multi-clear:hover {
  background: rgba(179,58,58,0.08);
  border-color: var(--tp-hal-red);
  color: var(--tp-hal-red);
}

/* ─── Autocomplete dropdown ───────────────────────────────────────── */
.tp-card .tp-symbol-wrap { position: relative; }
.tp-card .tp-ac-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--tp-bg-secondary); border: 1px solid var(--tp-border);
  border-radius: 10px; margin-top: 4px;
  box-shadow: 0 8px 28px rgba(15,26,48,0.18);
  max-height: 280px; overflow-y: auto; z-index: 50;
  display: none;
}
/* When wrapping a textarea, the dropdown sits below the resize handle
   so we nudge it down a hair and prevent it from collapsing under the
   textarea's bottom border. */
.tp-card .tp-symbol-wrap-multi .tp-ac-dropdown {
  margin-top: 2px;
  max-height: 240px;
}
.tp-card .tp-ac-dropdown.tp-show { display: block; }
.tp-card .tp-ac-row {
  padding: 9px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--tp-bg-card); font-size: 14px;
}
.tp-card .tp-ac-row:last-child { border-bottom: none; }
.tp-card .tp-ac-row:hover, .tp-card .tp-ac-row.tp-active { background: rgba(13,147,115,0.10); }
.tp-card .tp-ac-row .tp-ac-tk { font-weight: 800; color: var(--tp-navy); min-width: 60px; font-family: 'SF Mono', Monaco, monospace; }
.tp-card .tp-ac-row .tp-ac-nm { flex: 1; color: var(--tp-text-secondary); font-size: 13px; }
.tp-card .tp-ac-row .tp-ac-sc { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--tp-bg-card); color: var(--tp-text-muted); font-weight: 700; letter-spacing: 0.04em; }
.tp-card .tp-ac-row .tp-ac-recent { font-size: 9px; color: var(--tp-accent-dark); font-weight: 800; }

/* ─── Quick chips (recent + popular) ──────────────────────────────── */
.tp-card .tp-quick-section { margin-top: 10px; }
.tp-card .tp-quick-label {
  font-size: 10px; font-weight: 800; color: var(--tp-text-muted);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
}
.tp-card .tp-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-card .tp-chip {
  padding: 6px 11px; border-radius: 999px;
  background: var(--tp-bg-card); border: 1px solid var(--tp-border);
  font-size: 12px; font-weight: 700; color: var(--tp-navy);
  cursor: pointer; transition: all 0.12s;
  font-family: 'SF Mono', Monaco, monospace;
}
.tp-card .tp-chip:hover { background: rgba(13,147,115,0.12); border-color: var(--tp-accent); color: var(--tp-accent-dark); }
.tp-card .tp-chip.tp-recent { border-color: var(--tp-accent); background: rgba(13,147,115,0.06); }
.tp-card .tp-chip.tp-recent::before { content: '↻ '; color: var(--tp-accent-dark); }

/* In multi mode chips ADD (not replace) — add a tiny "+" affordance on hover */
.tp-card.tp-mode-multi .tp-chip:hover::after {
  content: ' +';
  color: var(--tp-accent-dark);
  font-weight: 900;
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.tp-card .tp-btn-row { display: flex; gap: 10px; margin-top: 22px; }
.tp-card .tp-submit {
  flex: 1; margin: 0;
  background: linear-gradient(135deg, var(--tp-accent), var(--tp-accent-dark));
  color: #fff;
  border: none; border-radius: 12px;
  padding: 16px;
  font-family: inherit; font-size: 16px; font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 6px 22px rgba(13,147,115,0.32);
  letter-spacing: -0.01em;
}
.tp-card .tp-submit:hover { filter: brightness(1.08); box-shadow: 0 10px 30px rgba(13,147,115,0.42); }
.tp-card .tp-submit:active { transform: scale(0.98); }
.tp-card .tp-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.tp-card .tp-cancel {
  flex: 0 0 auto;
  background: transparent;
  color: var(--tp-text-secondary);
  border: 1.5px solid var(--tp-border);
  border-radius: 12px;
  padding: 16px 20px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tp-card .tp-cancel:hover { background: rgba(15,26,48,0.04); color: var(--tp-text); border-color: rgba(15,26,48,0.18); }

/* ─── Footer ──────────────────────────────────────────────────────── */
.tp-card .tp-foot {
  text-align: center; margin-top: 14px;
  font-size: 11.5px; color: var(--tp-text-muted);
}
.tp-card .tp-foot a { color: var(--tp-accent-dark); text-decoration: none; font-weight: 600; }

/* ─── Dark mode ──────────────────────────────────────────────────────
   The picker uses its own --tp-* variables. The standard theme layer
   (/lib/theme.css) remaps the global vars, but --tp-navy is used as TEXT
   here, so we remap the --tp-* set explicitly for dark. This fixes the
   autocomplete dropdown (its background was previously hardcoded #fff and
   flashed white in dark mode) plus chips, inputs, and rows. */
html[data-theme="dark"] .tp-card,
html[data-theme="dark"] .tp-ac-dropdown {
  --tp-bg-card: #1f2630;
  --tp-bg-secondary: #161b22;
  --tp-border: #30363d;
  --tp-navy: #e6edf3;
  --tp-text: #e6edf3;
  --tp-text-secondary: #aeb6c2;
  --tp-text-muted: #8b949e;
}