/* Super Calculator: autocomplete popup (ui/autocomplete.js). Uses the app tokens from
   style.css (--surface, --border, --accent-soft, --text ...), with fallbacks so the
   popup also works on a page without them. Light and dark follow the tokens. */

.sc-ac {
  position: fixed;
  z-index: 45;              /* above the key row (40), below the toast (50) */
  left: 0;
  top: 0;
  box-sizing: border-box;
  min-width: 12rem;
  max-width: min(28rem, calc(100vw - 16px));
  margin: 0;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface, #ffffff);
  color: var(--text, #16202a);
  border: 1px solid var(--border, #dde3ea);
  border-radius: 10px;
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06)),
    0 8px 24px rgba(16, 24, 40, 0.08);
  font-family: var(--mono, "JetBrains Mono", Consolas, monospace);
  font-size: 0.875rem;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sc-ac[hidden] { display: none; }

.sc-ac-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 30px;
  padding: 5px 8px 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

/* The active row: a soft fill plus an accent bar, so it stays visible where the fill is
   close to the surface (3:1 against it is not reached by the fill alone). */
.sc-ac-item[aria-selected="true"] {
  background: var(--accent-soft, #d8f0ec);
  box-shadow: inset 3px 0 0 var(--accent, #0f766e);
}

.sc-ac-kind {
  flex: none;
  width: 1.1em;
  text-align: center;
  color: var(--accent, #0f766e);
  font-size: 0.85em;
  opacity: 0.9;
}

/* A very long variable name shrinks with an ellipsis and leaves room for its value. */
.sc-ac-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-ac-name b { font-weight: 700; }

.sc-ac-args {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted, #5f6b78);
}

.sc-ac-detail {
  flex: 0 2 auto;           /* gives way before the name does */
  min-width: 0;
  margin-left: auto;
  padding-left: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted, #5f6b78);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.8em;
}

@media (pointer: coarse) {
  .sc-ac { font-size: 0.95rem; }
  .sc-ac-item { min-height: 44px; align-items: center; padding: 8px 10px 8px 8px; }
}

@media (forced-colors: active) {
  .sc-ac { border-color: CanvasText; }
  .sc-ac-item[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Screen reader status and the caret-measuring mirror: never visible. */
.sc-ac-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sc-ac-mirror {
  position: absolute;
  top: 0;
  left: -10000px;
  visibility: hidden;
  overflow: hidden;
  height: auto;
  pointer-events: none;
}

.sc-ac-mirror-mark { display: inline-block; }
/* The typed word after the mark: wraps to the next row as one piece, like in the editor. */
.sc-ac-mirror-word { white-space: nowrap; }