/* ============================================================================
 * Nanocap 100 — Trading Halts styles (SELF-CONTAINED)
 * Loaded ONLY by index.html, alongside style.css. No other page references it,
 * and style.css has no halt styling — so the feature can be developed or removed
 * without touching shared CSS.
 * ==========================================================================*/

/* ---------- halt badge (in the constituents ticker cell) ---------- */
.halt-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; line-height: 1; padding: 2px 5px; border-radius: 4px;
  margin-left: 6px; vertical-align: 1px; cursor: pointer; white-space: nowrap; user-select: none;
}
.halt-badge.vol      { background: #fff3cf; color: #8a6d00; border: 1px solid #ead99a; }   /* volatility pause — amber, low-key */
.halt-badge.alert    { background: #d93025; color: #fff;    border: 1px solid #d93025; }   /* news/info pending — red */
.halt-badge.critical { background: #4a0f0a; color: #fff;    border: 1px solid #4a0f0a; }   /* SEC / regulatory / delist — darkest */
.halt-badge:hover    { filter: brightness(.96); }
/* the red/critical ones pulse gently so a real halt catches the eye */
@keyframes halt-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,48,37,.0); } 50% { box-shadow: 0 0 0 3px rgba(217,48,37,.22); } }
.halt-badge.alert, .halt-badge.critical { animation: halt-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .halt-badge { animation: none !important; } }

/* ---------- persistent on/off status (constituents header) ---------- */
.halt-status { font-size: 12px; font-weight: 700; color: #8a6d00; white-space: nowrap; margin-left: 8px; }
.halt-status.active { color: #d93025; }

/* ---------- halt detail popover (bottom-sheet on phones) ---------- */
.halt-pop-back { position: fixed; inset: 0; background: rgba(15,23,42,.28); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; }
.halt-pop-back.open { opacity: 1; pointer-events: auto; }
.halt-pop {
  position: fixed; z-index: 61; width: 300px; max-width: calc(100vw - 24px); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.18);
  padding: 13px 16px 14px; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s, transform .14s;
}
.halt-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.hp-head { display: flex; align-items: center; gap: 8px; }
.hp-tick { font-weight: 800; font-size: 17px; color: var(--navy2); letter-spacing: .3px; }
.hp-x { margin-left: auto; border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 2px; }
.hp-title { font-size: 13.5px; font-weight: 700; margin: 7px 0 9px; }
.hp-title.vol { color: #8a6d00; } .hp-title.alert { color: #d93025; } .hp-title.critical { color: #7a1a12; }
.hp-code { font-weight: 600; color: var(--muted); }
.hp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; }
.hp-l { color: var(--muted); } .hp-v { font-weight: 600; text-align: right; }
.hp-disc { font-size: 11px; color: var(--muted); line-height: 1.4; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .halt-pop { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%; max-width: 100%;
    border-radius: 15px 15px 0 0; transform: translateY(100%); padding: 16px 18px 24px; }
  .halt-pop.open { transform: none; }
}