/* Shared semantic colors keep controls and board states legible in both modes. */
:root {
  color-scheme: light;
  --ink: #272934;
  --page: #f6f5f1;
  --surface: #ffffff;
  --surface-soft: #f2f2f5;
  --topbar: #fbfbfd;
  --edge: #c7c8d0;
  --text-muted: #606271;
  --text-soft: #6b6d7b;
  --field: #fbfbfd;
  --field-text: #343642;
  --primary-fill: #5b4b8a;
  --primary-hover: #6b589f;
  --primary-text: #ffffff;
  --link: #5c4e85;
  --accent-text: #5c488e;
  --focus-edge: #7355a8;
  --cell-bg: #f0f0f4;
  --cell-edge: #656271;
  --cell-text: #373640;
  --cell-hover: #e5e2ee;
  --heat-1: #eae8f0;
  --heat-2: #e0dce9;
  --heat-3: #d5cee2;
  --heat-4: #c9bfd9;
  --recommended-bg: #e8dcfa;
  --recommended-edge: #7953a6;
  --recommended-text: #56367d;
  --recommend-panel-bg: #302940;
  --recommend-panel-edge: #605077;
  --recommend-panel-text: #e8e3f3;
  --recommend-location: #ffffff;
  --selected-bg: #dcecff;
  --selected-edge: #176bce;
  --selected-halo: #267ee63d;
  --selected-glow: #267ee64d;
  --selected-text: #1456a6;
  --miss-bg: #e1e1e7;
  --miss-edge: #777783;
  --miss-text: #565563;
  --yellow: #886300;
  --yellow-bg: #ffedab;
  --yellow-edge: #94731d;
  --yellow-text: #715400;
  --blue: #2c639f;
  --blue-bg: #d4e7ff;
  --blue-edge: #386fa7;
  --blue-text: #194d85;
  --green: #2a7047;
  --green-bg: #cef0d9;
  --green-edge: #357a50;
  --green-text: #225c39;
  --red: #aa3c52;
  --red-bg: #ffdae0;
  --red-edge: #af4c60;
  --red-text: #8c2f43;
  --inferred-edge: #7953a6;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0eff5;
  --page: #141418;
  --surface: #202026;
  --surface-soft: #2a2a32;
  --topbar: #1b1b20;
  --edge: #555560;
  --text-muted: #c0bfcc;
  --text-soft: #aaa9b8;
  --field: #303039;
  --field-text: #f0eff5;
  --primary-fill: #b7a2ed;
  --primary-hover: #c8b6f7;
  --primary-text: #211830;
  --link: #d4c1ff;
  --accent-text: #c9b8ee;
  --focus-edge: #cdb9ff;
  --cell-bg: #2b2b34;
  --cell-edge: #aaa7b7;
  --cell-text: #eeeef4;
  --cell-hover: #41404e;
  --heat-1: #33323e;
  --heat-2: #3d3b4c;
  --heat-3: #48445d;
  --heat-4: #544c70;
  --recommended-bg: #403157;
  --recommended-edge: #c9a4ff;
  --recommended-text: #ead7ff;
  --recommend-panel-bg: #292439;
  --recommend-panel-edge: #625778;
  --recommend-panel-text: #e6dff2;
  --recommend-location: #f4ecff;
  --selected-bg: #1c3c61;
  --selected-edge: #7fc9ff;
  --selected-halo: #58b8ff40;
  --selected-glow: #58b8ff5c;
  --selected-text: #b5e2ff;
  --miss-bg: #222228;
  --miss-edge: #757381;
  --miss-text: #bdb9c9;
  --yellow: #f2ce68;
  --yellow-bg: #594513;
  --yellow-edge: #e5bc52;
  --yellow-text: #ffdf79;
  --blue: #8bc1ff;
  --blue-bg: #193e68;
  --blue-edge: #79b1ff;
  --blue-text: #c5e1ff;
  --green: #86dda5;
  --green-bg: #194b35;
  --green-edge: #70c995;
  --green-text: #aff1c5;
  --red: #ff9ca5;
  --red-bg: #65262e;
  --red-edge: #ef929b;
  --red-text: #ffd2d7;
  --inferred-edge: #c9a4ff;
}

:root { color: var(--ink); background: var(--page); }
.brand-mark { background: var(--primary-fill); color: var(--primary-text); }
.local-badge > span { background: var(--accent-text); }
button:focus-visible, a:focus-visible, input:focus-visible { outline-color: var(--focus-edge); }
.topbar { background: var(--topbar); border-color: var(--edge); }
.panel, dialog { background: var(--surface); border-color: var(--edge); }
.brand small, .local-badge, .intro-copy, .eyebrow, .edition,
.muted, .area-summary, .privacy-note, .estimate-note,
.board-meta, .board-meta > span:last-child, .heatmap-toggle,
.board-legend, .board-footer, .empty-selection, .selection-label,
.placement-label, .placement-arrows, .site-footer, dialog p, dialog li {
  color: var(--text-muted);
}
.edition > span, .edition small { color: var(--text-soft); }
.text-button, .site-footer a { color: var(--link); }
.text-button:hover:enabled { color: var(--accent-text); }
.step { color: var(--text-muted); background: var(--surface-soft); }
.count-input { color: var(--field-text); background: var(--field); border-color: var(--edge); }
.count-input:disabled { background: var(--surface-soft); }
.area-summary { border-color: var(--edge); }
.area-summary strong { color: var(--accent-text); }
.primary { background: var(--primary-fill); color: var(--primary-text); }
.primary:hover:enabled { background: var(--primary-hover); }
.start-button span { color: inherit; opacity: .8; }
.secondary, .result-shapes .button {
  background: var(--surface-soft);
  border-color: var(--edge);
}
.secondary { color: var(--link); }
.secondary:hover:enabled, .result-shapes .button:hover { background: var(--field); }
.yellow { --treasure-bg: var(--yellow-bg); --treasure-edge: var(--yellow-edge); --treasure-text: var(--yellow-text); }
.blue { --treasure-bg: var(--blue-bg); --treasure-edge: var(--blue-edge); --treasure-text: var(--blue-text); }
.green { --treasure-bg: var(--green-bg); --treasure-edge: var(--green-edge); --treasure-text: var(--green-text); }
.red { --treasure-bg: var(--red-bg); --treasure-edge: var(--red-edge); --treasure-text: var(--red-text); }
.result-shapes .button, .result-shapes .button:hover {
  background: var(--treasure-bg);
  border-color: var(--treasure-edge);
  color: var(--treasure-text);
}
.result-shapes .button:hover { box-shadow: inset 0 0 0 1px var(--treasure-edge); }
.miss-icon { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.miss-button { display: flex; align-items: center; gap: 9px; }
.miss-button .miss-icon { width: 16px; height: 16px; flex: none; }
.selection-label strong { color: var(--accent-text); }
.board-footer { background: var(--surface-soft); border-color: var(--edge); }
.board-footer > span:first-child { color: var(--accent-text); }
.column-labels, .row-labels {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
}
.heatmap-toggle input { accent-color: var(--primary-fill); }

/* A solid 2px outline distinguishes each cell even at narrow phone widths. */
.cell {
  border: 2px solid var(--cell-edge);
  border-radius: 4px;
  background: var(--cell-bg);
  color: var(--cell-text);
  font-weight: 600;
}
.cell:hover:enabled { border-color: var(--selected-edge); background: var(--cell-hover); }
.cell.heat-1 { background: var(--heat-1); }
.cell.heat-2 { background: var(--heat-2); }
.cell.heat-3 { background: var(--heat-3); }
.cell.heat-4 { background: var(--heat-4); }
.cell.is-recommended, .cell.is-recommended:hover:enabled {
  background: var(--recommended-bg);
  border: 3px solid var(--recommended-edge);
  color: var(--recommended-text);
  box-shadow: none;
}
.cell.is-recommended::before { color: var(--recommended-text); }
.cell.is-miss { background: var(--miss-bg); border-color: var(--miss-edge); color: var(--miss-text); }
.cell.is-miss .miss-icon { width: clamp(12px, 2vw, 20px); height: clamp(12px, 2vw, 20px); }
.cell.is-found, .cell.is-preview {
  background: var(--treasure-bg);
  border-color: var(--treasure-edge);
  color: var(--treasure-text);
}
.cell.is-preview { border-style: dashed; box-shadow: none; }
.cell.is-inferred { border-color: var(--inferred-edge); box-shadow: none; }

/* Keep the blue click frame distinct while the shape-colored preview is pending. */
.cell.is-selected, .cell.is-selected:hover:enabled {
  background: var(--selected-bg);
  border: 3px solid var(--selected-edge);
  box-shadow: 0 0 0 2px var(--selected-halo), 0 0 10px var(--selected-glow);
  animation: clicked-cell-glow 1.8s ease-in-out infinite;
  z-index: 2;
}
.cell.is-selected.is-preview { background: var(--treasure-bg); color: var(--treasure-text); }
.cell.is-selected.is-recommended::before { content: none; }
@keyframes clicked-cell-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--selected-halo), 0 0 7px var(--selected-glow); }
  50% { box-shadow: 0 0 0 4px var(--selected-halo), 0 0 15px var(--selected-glow); }
}
.click-origin-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 17px 0 0;
  color: var(--selected-text);
  font-size: 11px;
}
.click-origin-label strong { font-size: 17px; font-family: Georgia, serif; }
@media (prefers-reduced-motion: reduce) {
  .cell.is-selected { animation: none; }
}
.legend-recommended { background: var(--recommended-bg); border-color: var(--recommended-edge); }
.legend-selected { background: var(--selected-bg); border-color: var(--selected-edge); }
.legend-found { background: linear-gradient(90deg, var(--yellow) 25%, var(--blue) 25% 50%, var(--green) 50% 75%, var(--red) 75%); border: 0; }
.board-legend .legend-found { width: 15px; }
.board-legend .legend-miss { display: grid; place-items: center; width: 12px; height: 12px; background: var(--miss-bg); border-color: var(--miss-edge); color: var(--miss-text); }
.legend-miss .miss-icon { width: 10px; height: 10px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 11px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--link);
  white-space: nowrap;
  font-size: 12px;
}
.theme-toggle:hover { background: var(--field); border-color: var(--accent-text); }
.theme-icon { font-size: 18px; line-height: 1; }
.recommendation { background: var(--recommend-panel-bg); border: 1px solid var(--recommend-panel-edge); color: var(--recommend-panel-text); }
.recommendation .eyebrow, .recommendation p:not(.eyebrow),
.recommend-location > span, .analysis-meta { color: var(--recommend-panel-text); }
.recommend-location { color: var(--recommend-location); }
[data-theme="dark"] .notice { background: #43391e; border-color: #927735; color: #ffe4a1; }
[data-theme="dark"] .notice.error { background: #482c24; border-color: #ad755e; color: #ffceb5; }
[data-theme="dark"] dialog::backdrop { background: #08080cba; }

@media (max-width: 650px) {
  .top-actions { gap: 10px; }
  .theme-toggle { width: 36px; padding: 0; flex: none; }
  .theme-label { display: none; }
  .column-labels, .row-labels { font-size: 11px; }
}