/* statum-combobox.css  v1.1.0
   Styles for statum-combobox.js. Scoped entirely under .sc-* so it cannot collide with a
   host page. Nothing here is added to statum-dash.css or tokens.css.

   Color policy: no hardcoded hex. Every value is a token lookup with a fallback chain that
   ends on a CSS system color, so the component still renders legibly on a page that defines
   none of the tokens. tokens.css defines --navy, --line, --ink, --muted and --amber but not
   --gold or --gray, so those two chain onward to their nearest existing equivalents.

   Sizing policy: rows are at least 44px tall and no text is below 12px, per audit findings
   D7 and 18. The min-height is on the row itself, not a parent, so it survives a host page
   with a tighter line-height.

   v1.1.0 adds the clear (×) and dropdown-arrow buttons. They sit inside the field, so the
   input gets right padding to match — set from a custom property the host page can override
   if its input has unusual horizontal padding of its own. */

.sc-wrap {
  position: relative;
  display: block;
  width: 100%;

  --sc-btn: 32px;          /* visual size of each in-field button */
  --sc-btn-gap: 2px;
  --sc-btn-inset: 6px;     /* distance from the field's right edge */
}

/* The host page owns the input's own look. We only guarantee a touch-sized target. */
.sc-input {
  min-height: 44px;
  font-size: max(1rem, 12px);
}

/* Room for the buttons, so a long bank name never runs underneath them.
   box-sizing is asserted because a host page that ships content-box inputs would otherwise
   grow the field by the padding we just added and break its column. */
.sc-wrap.sc-has-btns .sc-input {
  box-sizing: border-box;
  padding-right: calc(var(--sc-btn-inset) + (2 * var(--sc-btn)) + var(--sc-btn-gap) + 4px);
}

/* ---------- in-field buttons ---------- */

.sc-btns {
  position: absolute;
  top: 50%;
  right: var(--sc-btn-inset);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--sc-btn-gap);
  /* The strip itself is inert; only the buttons take pointer events, so clicking the gap
     between them lands on the input and places the caret instead of doing nothing. */
  pointer-events: none;
}

.sc-btn {
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sc-btn);
  height: var(--sc-btn);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--gray, var(--muted, GrayText));
  cursor: pointer;
  font: inherit;
  line-height: 0;
  transition: background-color .12s ease, color .12s ease, transform .12s ease;
}

.sc-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.sc-btn:hover {
  background: color-mix(in srgb, var(--navy, Highlight) 10%, transparent);
  color: var(--navy, var(--ink, CanvasText));
}

.sc-btn:active {
  background: color-mix(in srgb, var(--navy, Highlight) 18%, transparent);
}

/* Keyboard focus still has to be visible even though these are tabindex=-1: a user can reach
   them with a screen reader's virtual cursor or a switch device. */
.sc-btn:focus-visible {
  outline: 2px solid var(--gold, var(--amber, Highlight));
  outline-offset: 1px;
  color: var(--navy, var(--ink, CanvasText));
}

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

/* A thin rule between × and ▾ so they read as two controls, not one wide smudge. */
.sc-clear + .sc-toggle::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sc-btn-gap) / 2 - 0.5px);
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--line, ButtonBorder);
}

.sc-toggle { position: relative; }

/* The arrow points at what it will do: down to open, up once the list is open. */
.sc-wrap.sc-open .sc-toggle svg { transform: rotate(180deg); }
.sc-toggle svg { transition: transform .15s ease; }

/* ---------- popup ---------- */

.sc-pop {
  position: absolute;
  z-index: var(--z-overlay, 60);
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card, var(--paper, Canvas));
  color: var(--ink, CanvasText);
  border: 1px solid var(--line, ButtonBorder);
  border-radius: var(--radius-sm, 8px);
  box-shadow: var(--shadow-lg, var(--shadow, 0 8px 28px rgb(0 0 0 / 0.16)));
  padding: 4px;
}

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

.sc-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 44px;            /* touch target, audit D7 */
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  scroll-margin: 4px;
}

.sc-opt:hover {
  background: color-mix(in srgb, var(--navy, Highlight) 8%, transparent);
}

/* Selected row. aria-selected is the source of truth for both the AT and the paint, so the
   highlight cannot drift out of sync with aria-activedescendant. */
.sc-opt[aria-selected="true"] {
  background: color-mix(in srgb, var(--navy, Highlight) 14%, transparent);
  outline: 2px solid var(--gold, var(--amber, Highlight));
  outline-offset: -2px;
}

/* The bank already committed, shown pinned at the top of browse mode. A left rule rather
   than a fill, so it does not compete with the keyboard-active row's outline. */
.sc-opt.sc-current {
  box-shadow: inset 3px 0 0 var(--gold, var(--amber, Highlight));
}

.sc-opt.sc-current .sc-name::after {
  content: "current";
  margin-left: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: max(0.625rem, 12px);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray, var(--muted, GrayText));
}

.sc-name {
  font-size: max(0.875rem, 13px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy, var(--ink, CanvasText));
  overflow-wrap: anywhere;
}

.sc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: max(0.75rem, 12px);   /* never below 12px, audit finding 18 */
  line-height: 1.3;
  color: var(--gray, var(--muted, GrayText));
}

.sc-gpa,
.sc-tier {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: max(0.6875rem, 12px);
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--line, ButtonBorder);
  white-space: nowrap;
}

.sc-tier { color: var(--ink, CanvasText); }

.sc-place { white-space: nowrap; }

.sc-assets {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: max(0.6875rem, 12px);
  white-space: nowrap;
}

/* The whole point of the component: an unresolvable query says so instead of silently
   nulling the selection. */
.sc-none {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: max(0.8125rem, 12px);
  font-weight: 600;
  color: var(--bad, var(--ink, CanvasText));
}

/* Truncation is always visible, never silent. */
.sc-more {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  font-size: max(0.75rem, 12px);
  color: var(--gray, var(--muted, GrayText));
  border-top: 1px solid var(--line, ButtonBorder);
  margin-top: 4px;
  position: sticky;
  bottom: -4px;
  background: var(--card, var(--paper, Canvas));
}

/* Visually hidden but announced. Not display:none, which removes it from the a11y tree. */
.sc-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sc-opt { scroll-behavior: auto; }
  .sc-btn,
  .sc-toggle svg { transition: none; }
}

@media (prefers-contrast: more) {
  .sc-opt[aria-selected="true"] { outline-width: 3px; }
  .sc-pop { border-width: 2px; }
  .sc-btn { color: var(--ink, CanvasText); }
}