/* tooltip.css - styling for the tooltip renderer (tooltip.js) and the
   searchable help overlay (tooltip-search.js). Uses the shared aero.css
   design tokens so it tracks the dark and light themes. Honors reduced motion.
   No horizontal overflow at desktop or phone width.

   Layout note on the fixed corners (so nothing collides):
   - the gate dock sits bottom-center
   - the page tour launcher sits bottom-left
   - the help button here sits bottom-right */

/* ============================================================
   1. The tooltip
   ============================================================ */
.ti-tip {
  position: absolute;
  z-index: 2147483400;
  max-width: 280px;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-2, #1C2027);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  box-shadow: var(--shadow, 0 6px 22px rgba(0, 0, 0, 0.40));
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 12.5px;
  line-height: 1.42;
  pointer-events: none;        /* the tip never steals the pointer from controls */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.ti-tip.in { opacity: 1; transform: translateY(0); }
.ti-tip.no-anim { transition: none; transform: none; }
.ti-tip.is-measuring { opacity: 0; transform: none; }
.ti-tip-text { display: block; }

.ti-tip-arrow {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--surface-2, #1C2027);
  border-left: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  border-top: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  transform: rotate(45deg);
}
.ti-tip.is-above .ti-tip-arrow { bottom: -5px; border-left: none; border-top: none;
  border-right: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  border-bottom: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30)); }
.ti-tip.is-below .ti-tip-arrow { top: -5px; }

/* a non-focusable host that got tabindex still shows a clear focus ring */
[data-tip][tabindex="0"]:focus-visible {
  outline: 2px solid var(--gold, #E0A24A);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 7px);
}

/* a control the help search jumped to gets a short, calm highlight */
.ti-tip-found {
  outline: 2px solid var(--gold, #E0A24A);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 7px);
  animation: ti-tip-found-pulse 2.4s ease;
}
@keyframes ti-tip-found-pulse {
  0%   { box-shadow: 0 0 0 0 var(--gold-soft, rgba(224, 162, 74, 0.18)); }
  30%  { box-shadow: 0 0 0 8px var(--gold-soft, rgba(224, 162, 74, 0.18)); }
  100% { box-shadow: 0 0 0 0 rgba(224, 162, 74, 0); }
}

/* ============================================================
   2. The help button — UPPER slot of the shared bottom-right dock column.
   aero.css owns its position + z (the .ti-help-launch rule in the shared
   dock layer lifts it one row above the Ask-AI pill, so they never overlap).
   This file paints only.
   ============================================================ */
.ti-help-launch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface, #15181E);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.32));
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ti-help-launch:hover { background: var(--accent-pale, rgba(84, 199, 224, 0.12)); }
.ti-help-launch:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }
.ti-help-launch-glyph {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent, #54C7E0);
  color: var(--bg, #0E1014);
  font-weight: 700;
  font-size: 12px;
  flex: 0 0 auto;
}
.ti-help-launch-label { white-space: nowrap; }

/* on a phone the gate dock moves into static flow, so the help button drops to
   a compact glyph-only puck. It keeps its UPPER-slot place in the dock column
   (position + z come from aero.css, lifted clear of the Ask-AI pill below it),
   so the two pills still never overlap at phone width. */
@media (max-width: 820px) {
  .ti-help-launch { padding: 8px; }
  .ti-help-launch-label { display: none; }
}

/* ============================================================
   3. The help overlay
   ============================================================ */
.ti-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  box-sizing: border-box;
  background: rgba(8, 10, 13, 0.62);
  opacity: 0;
  transition: opacity 160ms ease;
  overflow-y: auto;
}
.ti-help-overlay.in { opacity: 1; }

.ti-help-panel {
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
  background: var(--surface, #15181E);
  border: 1px solid var(--border, #2A2F38);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.52));
  padding: 20px;
  transform: translateY(8px);
  transition: transform 180ms ease;
}
.ti-help-overlay.in .ti-help-panel { transform: translateY(0); }

.ti-help-head { position: relative; margin-bottom: 14px; padding-right: 76px; }
.ti-help-title {
  margin: 0 0 3px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--text, #E7EAEE);
}
.ti-help-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim, #9AA2AD);
}
.ti-help-close {
  position: absolute;
  top: 0; right: 0;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-2, #1C2027);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border, #2A2F38);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ti-help-close:hover { background: var(--accent-pale, rgba(84, 199, 224, 0.12)); }
.ti-help-close:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }

.ti-help-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-2, #1C2027);
  color: var(--text, #E7EAEE);
  border: 1px solid var(--border-accent, rgba(84, 199, 224, 0.30));
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14px;
  margin-bottom: 14px;
}
.ti-help-input:focus-visible { outline: 2px solid var(--accent, #54C7E0); outline-offset: 1px; }

.ti-help-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 56vh;
  overflow-y: auto;
}
.ti-help-none {
  margin: 6px 0;
  font-size: 13px;
  color: var(--text-dim, #9AA2AD);
}
.ti-help-row {
  padding: 12px 14px;
  border-radius: var(--radius-sm, 7px);
  background: var(--surface-2, #1C2027);
  border: 1px solid var(--border-soft, #21262E);
}
.ti-help-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.ti-help-row-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #E7EAEE);
  overflow-wrap: anywhere;
}
.ti-help-row-tag {
  flex: 0 0 auto;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-deep, #8BDCEE);
  white-space: nowrap;
}
.ti-help-row-copy {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-dim, #9AA2AD);
  overflow-wrap: anywhere;
}
.ti-help-go {
  margin-top: 9px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 7px);
  background: var(--accent, #54C7E0);
  color: var(--bg, #0E1014);
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ti-help-go:hover { filter: brightness(0.97); }
.ti-help-go:focus-visible { outline: 2px solid var(--gold, #E0A24A); outline-offset: 2px; }

/* ============================================================
   4. Reduced motion: drop the fades + the highlight pulse
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ti-tip,
  .ti-help-overlay,
  .ti-help-panel { transition: none; transform: none; }
  .ti-tip-found { animation: none; }
}