/**
 * KoreAves — Shared RegionSelector Stylesheet
 * Custom mineral-paper popover listbox matching KoreAves cartographic grammar.
 */

/* Shared host chrome. Surfaces may only add layout modifiers such as width. */
.ka-region-selector-host {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ka-color-paper-sunken);
  border: 1px solid var(--ka-color-rule-subtle);
  border-radius: 6px;
  padding: 0 10px;
  min-height: 44px;
  box-sizing: border-box;
}

.ka-region-selector-wrap {
  position: relative;
  display: inline-block;
  /* Shrink-to-fit inline-block sized by the trigger's flex-basis, so without
     these it overruns a narrower host (20px past the card padding on Compare
     at 390px). Guards the mount wherever it is embedded. */
  max-width: 100%;
  min-width: 0;
}

.ka-region-selector {
  position: relative;
}

/* Trigger Button: Atlas control grammar */
.ka-region-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  /* Fill the mount instead of shrink-to-fitting to the label: a <button> sizes
     to its content by default, so at long region names it outgrew the host
     card (31px past it on Compare at 390px) and never let its own label reach
     text-overflow: ellipsis. width (not flex) is what applies here — the
     parent .ka-region-selector is display:block, so a flex shorthand on this
     element is inert. */
  width: 100%;
  min-width: 0;
  padding: 8px 14px;
  background: var(--ka-color-paper-base, #f7f6f2);
  border: 1px solid var(--ka-color-rule-subtle, #cfcac0);
  border-radius: 4px;
  color: var(--ka-color-ink-primary, #1b2420);
  font-family: var(--ka-font-hangul-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}

.ka-region-trigger:hover {
  background: var(--ka-color-paper-sunken, #edebe4);
  border-color: var(--ka-color-rule-strong, #8a968f);
}

.ka-region-trigger:focus-visible {
  outline: 2px solid var(--ka-color-forest, #205c42);
  outline-offset: 1px;
}

.ka-region-trigger-label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.ka-region-prefix {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ka-color-ink-tertiary, #79847d);
}

.ka-region-current-name {
  font-weight: 600;
  word-break: keep-all;
}

.ka-region-count-badge {
  font-family: var(--ka-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  background: var(--ka-color-forest-subtle, rgba(32, 92, 66, 0.1));
  color: var(--ka-color-forest, #205c42);
  border: 1px solid var(--ka-color-forest-hairline, rgba(32, 92, 66, 0.25));
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ka-region-chevron {
  font-size: 10px;
  color: var(--ka-color-ink-secondary, #58625b);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.ka-region-trigger[aria-expanded="true"] .ka-region-chevron {
  transform: rotate(180deg);
}

/* Custom Popover Listbox */
.ka-region-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--ka-color-paper-base, #f7f6f2);
  border: 1px solid var(--ka-color-rule-subtle, #cfcac0);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(27, 40, 56, 0.12);
  z-index: 1200;
  box-sizing: border-box;
}

.ka-region-popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--ka-color-paper-sunken, #edebe4);
  border-bottom: 1px solid var(--ka-color-rule-subtle, #cfcac0);
}

.ka-region-header-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ka-color-ink-secondary, #58625b);
}

.ka-region-clear-btn {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--ka-color-rust, #c2410c);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}

.ka-region-clear-btn:hover {
  background: rgba(194, 65, 12, 0.08);
}

.ka-region-options-list {
  padding: 4px 0;
}

.ka-region-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--ka-font-hangul-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 13px;
  line-height: 1.3;
  color: var(--ka-color-ink-primary, #1b2420);
  box-sizing: border-box;
  transition: background-color 0.1s ease;
  user-select: none;
}

.ka-region-option:hover,
.ka-region-option:focus {
  background: var(--ka-color-paper-sunken, #edebe4);
  outline: none;
}

.ka-region-option.is-selected {
  background: var(--ka-color-surface-selected, #e8efe9);
  font-weight: 600;
}

.ka-region-check-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ka-color-forest, #205c42);
  flex-shrink: 0;
}

.ka-region-opt-en {
  flex: 1;
  color: var(--ka-color-ink-primary, #1b2420);
}

.ka-region-opt-ko {
  font-size: 12px;
  color: var(--ka-color-ink-secondary, #58625b);
  word-break: keep-all;
}

/* Genuinely visually hidden / non-layout-affecting native select for test-automation sync */
.ka-region-native-sync {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ownership: RegionSelector owns trigger interaction. */
.ka-region-trigger {
  box-shadow: var(--ka-control-press-inset);
  transition: var(--ka-control-transition);
}
.ka-region-trigger:active { transform: translateY(1px); box-shadow: var(--ka-control-active-inset); }