.ec-scope { position: relative; display: flex; min-width: 0; flex: 1 1 auto; align-items: center; }
.ec-scope__box {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-width: 0; height: 21px; padding: 0 8px;
  background: color-mix(in srgb, var(--nilla-bg) 52%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nilla-accent) 16%, transparent);
  transition: box-shadow 200ms ease, background 200ms ease;
}
.ec-scope__box:focus-within {
  background: color-mix(in srgb, var(--nilla-bg) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent-2) 46%, transparent);
}
.ec-scope__mark { flex: 0 0 auto; font-size: 8px; line-height: 1; color: var(--nilla-accent); transition: color 200ms ease; }
.ec-scope__box:focus-within .ec-scope__mark { color: var(--theme-accent-2); }
.ec-scope__in {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nilla-text); background: transparent; border: 0; outline: none; padding: 0;
}
.ec-scope__in::placeholder { color: var(--theme-ink-dim); text-transform: uppercase; }
.ec-scope__key {
  flex: 0 0 auto; font-size: 7.5px; letter-spacing: 0.14em; color: var(--theme-ink-dim); padding: 1px 4px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nilla-border) 80%, transparent);
}
.ec-scope__panel {
  --scope-reading-ink: color-mix(in srgb, var(--nilla-text) 70%, var(--theme-bar-bg));
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--theme-bar-bg); border: 1px solid var(--nilla-border);
  box-shadow: 0 18px 40px -16px #000, 0 0 0 1px color-mix(in srgb, var(--nilla-accent) 10%, transparent);
}
.ec-scope__row {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 10px; align-items: baseline;
  width: 100%; padding: 8px 10px; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--nilla-text);
  border-bottom: 1px solid color-mix(in srgb, var(--nilla-border) 60%, transparent);
}
.ec-scope__row[aria-selected="true"], .ec-scope__row:hover {
  background: color-mix(in srgb, var(--theme-accent-2) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--theme-accent-2);
}
.ec-scope__kind { font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--nilla-accent) 80%, var(--nilla-text)); }
.ec-scope__title { font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ec-scope__text { display: block; margin-top: 2px; font-size: 0.5625rem; letter-spacing: 0.02em; text-transform: none; color: var(--scope-reading-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-scope__empty { padding: 10px; font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--scope-reading-ink); }
@media (prefers-reduced-motion: reduce) { .ec-scope__box, .ec-scope__mark { transition: none; } }
@media (forced-colors: active) { .ec-scope__box { box-shadow: none; border: 1px solid ButtonBorder; } }
@media (max-width: 720px) { .ec-scope__key { display: none; } }