/* ===========================================================================
   Components — buttons, chips, fields, switchers
   ========================================================================= */

/* ----- Buttons ----- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-strong);
  --btn-border: var(--border);
  --btn-bg-hover: var(--surface-2);
  --btn-fg-hover: var(--text-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.3rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--border-hover);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }

.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-border: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-fg-hover: var(--accent-fg);
  box-shadow: 0 1px 0 oklch(100% 0 0 / 0.08) inset;
}
.btn-primary:hover { box-shadow: var(--shadow), 0 1px 0 oklch(100% 0 0 / 0.08) inset; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-bg-hover: var(--surface-2);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  border-color: var(--border-hover);
}
.btn-icon svg { width: 18px; height: 18px; }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--fs-xs); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: var(--fs-base); }

/* ----- Chips ----- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.42rem 0.95rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-line);
}

/* ----- Field (text input) ----- */
.field {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.field-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 100%;
  color: var(--text-subtle);
  flex-shrink: 0;
}
.field-icon svg { width: 18px; height: 18px; }
.field input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.95rem 1rem 0.95rem 0;
  font-size: var(--fs-base);
  outline: none;
  width: 100%;
  color: var(--text);
}
.field input::placeholder { color: var(--text-subtle); }

.field-lg input { padding-block: 1.15rem; font-size: var(--fs-md); }

/* ----- Pill switcher (segmented control) ----- */
.pill-switcher {
  --pill-bg: var(--surface-2);
  display: inline-flex;
  position: relative;
  background: var(--pill-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}
.pill-switcher button {
  position: relative;
  padding: 0.42rem 0.95rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  z-index: 1;
}
.pill-switcher button:hover { color: var(--text-strong); }
.pill-switcher button[aria-pressed='true'],
.pill-switcher button.active {
  color: var(--accent-fg);
}
.pill-switcher .pill-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out);
  z-index: 0;
  pointer-events: none;
}

/* ----- Card ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.card-hover:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ----- Country card ----- */
.country-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--text);
  transition: all var(--dur) var(--ease-out);
  overflow: hidden;
}
.country-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease-out);
}
.country-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.country-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.country-card.active::after {
  border-color: var(--accent);
}
.country-card:focus-visible { box-shadow: var(--shadow-focus); }

.country-flag-frame {
  width: 56px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15), 0 0 0 1px oklch(0% 0 0 / 0.04);
  flex-shrink: 0;
}
.country-flag-frame svg { width: 100%; height: 100%; }

.country-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  display: block;
  margin-bottom: 2px;
}
.country-source {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.country-meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}

.country-check {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--highlight);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--highlight-fg);
}
.country-card.active .country-check { display: inline-flex; }
.country-check svg { width: 14px; height: 14px; }

/* ----- Theme toggle ----- */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all var(--dur) var(--ease-out);
  overflow: hidden;
}
.theme-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--accent);
}
.theme-toggle svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.theme-toggle .icon-moon { display: none; }
[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
[data-theme='dark'] .theme-toggle .icon-moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: inline-block; }
}

/* ----- Source badge ----- */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
}
.source-badge .src-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.source-badge .src-value {
  color: var(--text-strong);
  font-weight: 500;
}

/* ----- Generic fade-in (used by IntersectionObserver) ----- */
/* Default: visible (fail-safe). Becomes hidden only when html.js is set. */
.reveal {
  transition: opacity var(--dur-page) var(--ease-out-quart),
              transform var(--dur-page) var(--ease-out-quart);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}