/* --------------------- Open Props --------------------------- */
/* the props */
@import "https://unpkg.com/open-props";
/* optional resets that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
/* ------------------------------------------------------------ */
:root {
  color-scheme: dark;
  /* Open Props base tokens (with safe fallbacks) */
  --surface-1: var(--gray-12, #0f1220);
  --surface-2: var(--gray-11, #14182a);
  --surface-3: var(--gray-10, #181c32);
  --text-1: var(--gray-1, #eef1f7);
  --text-2: var(--gray-3, #c9cfdb);
  --text-3: var(--gray-5, #9aa3b2);
  --indigo-5: #7aa2ff;
  /* App theme variables */
  --bg: var(--surface-2);
  --panel: var(--surface-3);
  --text: var(--text-1);
  --muted: var(--text-3);
  --accent: var(--indigo-5);
  /* Derived surfaces to replace non-existent surface-4/5/6 */
  /* Using color-mix for subtle contrast against --panel */
  --chip: color-mix(
      in oklab,
      var(--panel),
      white 6%
  ); /* small chips, buttons */
  --tile: color-mix(in oklab, var(--panel), white 10%); /* letter tiles */
  --border: color-mix(
      in oklab,
      var(--panel),
      white 14%
  ); /* default borders */
  --border-strong: color-mix(in oklab, var(--panel), white 22%);
  /* Wordle colors */
  --g: #6aaa64;
  --y: #c9b458;
  --b: #3a3a3c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding-block: var(--size-6, 2rem);
}

.container {
  width: min(1100px, 94vw);
  display: grid;
  gap: var(--size-4, 1rem);
}

.header {
  display: flex;
  gap: var(--size-3, 0.75rem);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.header h1 {
  font-size: var(--font-size-4, 1.5rem);
  margin: 0;
}

.chips {
  display: inline-flex;
  gap: var(--size-2, 0.5rem);
}
.chips .chip {
  background: var(--chip);
  color: var(--text-2);
  padding: var(--size-1, 0.25rem) var(--size-2, 0.5rem);
  border-radius: var(--radius-4, 12px);
  border: 1px solid var(--border);
  font-size: var(--font-size-1, 0.875rem);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-4, 12px);
  padding: var(--size-5, 1.25rem);
  box-shadow: var(--shadow-2, 0 2px 12px rgba(0, 0, 0, 0.25));
  display: grid;
  gap: var(--size-4, 1rem);
}

.muted {
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: var(--size-2, 0.5rem);
  justify-content: center;
  user-select: none;
}

.tile {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2, 8px);
  font-weight: 700;
  font-size: 22px;
  background: var(--tile);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: transform 120ms var(--ease-2, ease), background 120ms var(--ease-2, ease);
}

.tile:hover {
  transform: translateY(-2px);
}

.tile[data-s=b] {
  background: var(--b);
}

.tile[data-s=y] {
  background: var(--y);
  color: #000;
}

.tile[data-s=g] {
  background: var(--g);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2, 0.5rem);
  justify-content: center;
}

.input {
  min-width: 240px;
  padding: var(--size-2, 0.5rem) var(--size-3, 0.75rem);
  border-radius: var(--radius-3, 10px);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel), black 6%);
  color: var(--text);
  outline: none;
}

.input::placeholder {
  color: var(--text-3);
}

.btn {
  padding: var(--size-2, 0.5rem) var(--size-3, 0.75rem);
  border-radius: var(--radius-3, 10px);
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms var(--ease-2, ease), background 120ms var(--ease-2, ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #08102a;
  font-weight: 700;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1, 0.25rem);
  font-size: var(--font-size-1, 0.875rem);
  color: var(--text-2);
}

.stats {
  display: flex;
  gap: var(--size-6, 1.5rem);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.suggestions {
  display: grid;
  gap: var(--size-2, 0.5rem);
}

.sugg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--size-2, 0.5rem) var(--size-3, 0.75rem);
  border-radius: var(--radius-3, 10px);
  background: var(--chip);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sugg.clickable {
  cursor: pointer;
  transition: transform 120ms var(--ease-2, ease), background 120ms var(--ease-2, ease);
}

.sugg.clickable:hover {
  transform: translateY(-1px);
}

.sugg.valid {
  border-color: var(--g);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--g), transparent 60%);
}

.sugg .meta {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--text-2);
}

.sugg .meta .bits {
  opacity: 0.95;
}

.sugg .meta .prior {
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

.badge {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--g), white 20%);
  color: #08150c;
  font-weight: 700;
  border: 1px solid var(--g);
  font-size: 0.75rem;
}

.details summary {
  cursor: pointer;
  color: var(--text-2);
}

.candidates {
  margin-top: var(--size-2, 0.5rem);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-1, 0.875rem);
  color: var(--text-2);
  text-align: left;
  white-space: pre-wrap;
}

.history {
  display: grid;
  gap: var(--size-2, 0.5rem);
}

.history-grid {
  display: grid;
  gap: var(--size-2, 0.5rem);
}

/* Spinner + loading row */
.loading {
  margin: var(--size-2, 0.5rem) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2, 0.5rem);
  justify-content: center;
}

.spinner {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}

.loading-text {
  color: var(--text-2);
  font-size: var(--font-size-1, 0.875rem);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}