/* ==========================================================================
   OTW Company Search — autocomplete for the "Company or Website" field.
   Framework-free. Scoped under .otw-cs so it never leaks into the host page.
   Light by default to match the host site, with an opt-in dark palette via
   [data-theme="dark"]. Mobile responsive, reduced-motion aware.
   ========================================================================== */

.otw-cs {
  /* Light theme tokens (overridden for dark below). */
  --cs-bg: #ffffff;
  --cs-panel-bg: #ffffff;
  --cs-border: rgba(17, 20, 45, 0.10);
  --cs-shadow: 0 1px 2px rgba(17, 20, 45, 0.04), 0 12px 32px rgba(17, 20, 45, 0.12);
  --cs-text: #1b1e33;
  /* Both darkened for contrast: #6b7089 on the tinted kbd chip measured
     4.46:1 and #9498ad on white measured 2.86:1, against a 4.5:1 floor. */
  --cs-muted: #565B70;
  --cs-faint: #6E7387;
  --cs-hover: #f5f4fb;
  --cs-active: #efedfc;
  --cs-accent: #5b4fe0;
  --cs-accent-soft: rgba(91, 79, 224, 0.12);
  --cs-skeleton: linear-gradient(90deg, rgba(17,20,45,0.05) 25%, rgba(17,20,45,0.09) 37%, rgba(17,20,45,0.05) 63%);
  --cs-radius: 12px;
  position: relative;
  width: 100%;
}

/* No OS-driven dark mode: the rest of otwmotion.com is a single light theme,
   so honoring prefers-color-scheme here put one black panel on an otherwise
   light page for anyone whose phone is in dark mode. Explicit
   data-theme="dark" below still works for a host that genuinely is dark. */
/* Explicit override wins regardless of OS setting. */
.otw-cs[data-theme="dark"] {
  --cs-panel-bg: #16181f;
  --cs-border: rgba(255, 255, 255, 0.10);
  --cs-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 16px 40px rgba(0,0,0,0.55);
  --cs-text: #ececf1;
  --cs-muted: #9aa0b4;
  --cs-faint: #6f748b;
  --cs-hover: #20222c;
  --cs-active: rgba(91, 79, 224, 0.22);
  --cs-accent: #a79cff;
  --cs-accent-soft: rgba(139, 125, 245, 0.20);
  --cs-skeleton: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.05) 63%);
}

/* --- Dropdown panel --- */
.otw-cs__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--cs-panel-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: var(--cs-shadow);
  overflow: hidden;
  padding: 6px;
  transform-origin: top center;
  animation: otw-cs-in 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes otw-cs-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.otw-cs__panel[hidden] { display: none; }

.otw-cs__list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }

/* --- Section label --- */
.otw-cs__section {
  font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-faint);
  padding: 10px 10px 6px;
}

/* --- Suggestion row --- */
.otw-cs__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  scroll-margin: 8px;
}
.otw-cs__opt[aria-selected="true"] { background: var(--cs-hover); }
.otw-cs__opt:active { background: var(--cs-active); }

.otw-cs__ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--cs-accent-soft);
  color: var(--cs-accent);
  font: 800 15px/1 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  border: 1px solid var(--cs-border);
}
.otw-cs__ico img { width: 100%; height: 100%; object-fit: contain; }

.otw-cs__body { min-width: 0; flex: 1; }
.otw-cs__name {
  display: flex; align-items: center; gap: 8px;
  font: 600 14px/1.25 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  color: var(--cs-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.otw-cs__name mark { background: transparent; color: var(--cs-accent); font-weight: 700; }
.otw-cs__meta {
  font: 400 12px/1.3 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  color: var(--cs-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.otw-cs__meta .dot { opacity: 0.5; margin: 0 6px; }

.otw-cs__badge {
  flex-shrink: 0;
  font: 700 9.5px/1 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  letter-spacing: 0.03em;
  color: var(--cs-accent);
  background: var(--cs-accent-soft);
  padding: 4px 8px;
  border-radius: 20px;
}
.otw-cs__enter {
  flex-shrink: 0;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  color: var(--cs-faint);
  border: 1px solid var(--cs-border);
  border-radius: 6px;
  padding: 4px 7px;
  opacity: 0;
}
.otw-cs__opt[aria-selected="true"] .otw-cs__enter { opacity: 1; }

/* --- Manual / analyze-this-URL action row --- */
.otw-cs__opt--action .otw-cs__ico { background: transparent; border-style: dashed; color: var(--cs-muted); }
.otw-cs__opt--action .otw-cs__name { color: var(--cs-text); }

/* --- Skeleton loading rows --- */
.otw-cs__skel { display: flex; align-items: center; gap: 12px; padding: 9px 10px; }
.otw-cs__skel-ico { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.otw-cs__skel-lines { flex: 1; }
.otw-cs__skel-line { height: 10px; border-radius: 4px; }
.otw-cs__skel-line.short { width: 42%; margin-top: 8px; height: 8px; }
.otw-cs__skel-ico, .otw-cs__skel-line {
  background: var(--cs-skeleton);
  background-size: 400% 100%;
  animation: otw-cs-shimmer 1.2s ease-in-out infinite;
}
@keyframes otw-cs-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Empty / message state --- */
.otw-cs__msg { padding: 18px 12px; text-align: center; }
.otw-cs__msg-title { font: 600 13.5px/1.4 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; color: var(--cs-text); }
.otw-cs__msg-sub { font: 400 12.5px/1.5 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif; color: var(--cs-muted); margin-top: 4px; }

/* --- Footer hint --- */
.otw-cs__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px 4px; margin-top: 4px;
  border-top: 1px solid var(--cs-border);
  font: 500 10.5px/1 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
  color: var(--cs-faint);
}
.otw-cs__foot kbd {
  font: inherit; background: var(--cs-hover); border: 1px solid var(--cs-border);
  border-radius: 5px; padding: 2px 5px; color: var(--cs-muted); margin: 0 2px;
}

/* --- Inline validation note (below the input, after selection) --- */
.otw-cs__validate {
  display: none;
  align-items: center; gap: 8px;
  margin-top: 8px;
  font: 500 12.5px/1.4 -apple-system, BlinkMacSystemFont, system-ui, Helvetica, Arial, sans-serif;
}
.otw-cs__validate.is-shown { display: flex; }
.otw-cs__validate.checking { color: var(--cs-muted); }
.otw-cs__validate.ok { color: #157A54; }   /* was #2fa36b, 3.19:1 on white */
.otw-cs__validate.warn { color: #B04A16; } /* was #d9713f, 3.30:1 on white */
.otw-cs__validate .otw-cs__spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--cs-border); border-top-color: var(--cs-accent);
  animation: otw-cs-spin 0.7s linear infinite; flex-shrink: 0;
}
.otw-cs__validate button {
  background: none; border: none; color: var(--cs-accent); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline;
}
@keyframes otw-cs-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .otw-cs__list { max-height: 52vh; }
  .otw-cs__foot { display: none; }
  .otw-cs__meta { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .otw-cs__panel { animation: none; }
  .otw-cs__skel-ico, .otw-cs__skel-line { animation: none; }
  .otw-cs__validate .otw-cs__spin { animation-duration: 1.4s; }
}