/* ==========================================================================
   Contextual help — tooltips, guidance cards, empty states, next-step prompts
   Used by BOTH the CRM and the public site, so the two feel like one platform.
   Depends on tokens.css.
   ========================================================================== */

/* --- Help icon ------------------------------------------------------------ */
.help-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; margin-left: 5px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  background: var(--surface-alt); color: var(--ink-muted);
  font-size: 11px; font-weight: 700; font-family: var(--font-body);
  line-height: 1; cursor: help; vertical-align: middle;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
  flex-shrink: 0;
}
.help-icon:hover,
.help-icon:focus-visible,
.help-icon[aria-expanded="true"] {
  background: var(--gold); border-color: var(--gold); color: var(--navy-900);
}

/* On dark backgrounds (navy sections, admin sidebar) */
.section--navy .help-icon,
.admin-sidebar .help-icon,
.hero .help-icon {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.8);
}

/* --- Tooltip bubble ------------------------------------------------------- */
.help-bubble {
  position: absolute; z-index: var(--z-tooltip, 450);
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 10px 13px;
  background: var(--navy-900); color: rgba(255,255,255,.95);
  border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 400; line-height: 1.55; text-align: left;
  letter-spacing: normal; text-transform: none; white-space: normal;
  box-shadow: 0 8px 28px rgba(2,22,52,.32);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease,
              transform var(--dur-fast) var(--ease-out);
}

.help-icon:hover .help-bubble,
.help-icon:focus-visible .help-bubble,
.help-icon[aria-expanded="true"] .help-bubble {
  opacity: 1; visibility: visible;
}

/* Positions */
.help-icon[data-help-pos="top"] .help-bubble {
  bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
}
.help-icon[data-help-pos="top"]:hover .help-bubble,
.help-icon[data-help-pos="top"][aria-expanded="true"] .help-bubble {
  transform: translateX(-50%) translateY(0);
}
.help-icon[data-help-pos="bottom"] .help-bubble {
  top: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(-4px);
}
.help-icon[data-help-pos="bottom"]:hover .help-bubble,
.help-icon[data-help-pos="bottom"][aria-expanded="true"] .help-bubble {
  transform: translateX(-50%) translateY(0);
}
.help-icon[data-help-pos="right"] .help-bubble {
  left: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(-4px);
}
.help-icon[data-help-pos="right"]:hover .help-bubble,
.help-icon[data-help-pos="right"][aria-expanded="true"] .help-bubble {
  transform: translateY(-50%) translateX(0);
}
.help-icon[data-help-pos="left"] .help-bubble {
  right: calc(100% + 9px); top: 50%; transform: translateY(-50%) translateX(4px);
}
.help-icon[data-help-pos="left"]:hover .help-bubble,
.help-icon[data-help-pos="left"][aria-expanded="true"] .help-bubble {
  transform: translateY(-50%) translateX(0);
}

/* Nudged back on-screen by JS when it would overflow the viewport */
.help-icon .help-bubble.is-shifted { left: auto; right: 0; transform: none !important; }

/* Touch devices: hover is unreliable, so tap-to-toggle carries it.
   The bubble is centred and wider because screens are narrow. */
@media (hover: none) {
  .help-icon { cursor: pointer; width: 22px; height: 22px; font-size: 12px; }
  .help-icon .help-bubble {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
    width: auto; max-width: none; transform: none !important;
    font-size: .875rem; padding: 14px 16px;
    box-shadow: 0 -6px 32px rgba(2,22,52,.4);
  }
}

/* --- Guidance card -------------------------------------------------------- */
.help-block {
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3); border-left: 4px solid var(--info);
  background: var(--info-bg);
}
.help-block--tip     { border-left-color: var(--gold);    background: rgba(197,151,51,.10); }
.help-block--warning { border-left-color: var(--warning); background: var(--warning-bg); }

.help-block__title {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: var(--navy); margin-bottom: 4px;
}
.help-block__body { font-size: .9rem; color: var(--ink-muted); line-height: 1.6; }
.help-block__steps {
  margin: var(--space-2) 0 0; padding-left: 20px; list-style: decimal;
  font-size: .9rem; color: var(--ink-muted);
}
.help-block__steps li { margin-bottom: 6px; }
.help-block__steps li::marker { color: var(--gold-600); font-weight: 700; }

/* --- Empty state ---------------------------------------------------------- */
.empty {
  padding: var(--space-8) var(--space-3); text-align: center; color: var(--ink-muted);
}
.empty svg { margin: 0 auto var(--space-2); color: var(--border-strong); }
.empty__heading {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--navy); margin-bottom: 6px;
}
.empty__message {
  font-size: .9rem; max-width: 460px; margin: 0 auto var(--space-3); line-height: 1.6;
}

/* --- Next step prompt ----------------------------------------------------- */
.next-step {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-top: var(--space-3);
  background: rgba(197,151,51,.10); border: 1px dashed var(--gold);
  border-radius: var(--radius-sm);
}
.next-step__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-600); flex-shrink: 0;
}
.next-step__text { font-size: .9rem; color: var(--ink); flex: 1 1 240px; }

/* --- Required-field marker ------------------------------------------------ */
.req { color: var(--danger); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .help-bubble { transition: none; }
}