/* Cal Golden Bars v2 — Milestone 8A design-board migration */
:root {
  color-scheme: light;

  /* Design-board palette. */
  --cgb-navy-950: #010133;
  --cgb-navy-900: #002676;
  --cgb-navy-800: #052b67;
  --cgb-navy-700: #153f78;
  --cgb-navy-100: #dce6f1;
  --cgb-navy-50: #eef3f8;

  --cgb-gold-600: #c88600;
  --cgb-gold-500: #e4a100;
  --cgb-gold-400: #fdb515;
  --cgb-gold-200: #f8d66e;
  --cgb-gold-100: #ffedb0;
  --cgb-gold-50: #fff8e6;

  --cgb-ink-900: #101626;
  --cgb-ink-700: #354052;
  --cgb-ink-500: #687280;
  --cgb-neutral-300: #cbd0d6;
  --cgb-neutral-200: #dfe2e6;
  --cgb-neutral-100: #eceef0;
  --cgb-neutral-50: #f2f2f2;
  --cgb-warm-50: #f7f6f2;
  --cgb-white: #ffffff;
  --cgb-success: #176b4b;
  --cgb-danger: #9b3028;

  --font-ui: Inter, "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-condensed: "Barlow Condensed", "Arial Narrow", "Avenir Next Condensed", sans-serif;

  --text-2xs: .625rem;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.8rem, 7vw, 2.75rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Small radii and clipped corners replace the previous rounded-card system. */
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .625rem;
  --radius-xl: .875rem;
  --radius-pill: 999px;
  --chamfer-sm: .45rem;
  --chamfer-md: .7rem;

  --shadow-xs: 0 1px 2px rgba(1, 1, 51, .08);
  --shadow-sm: 0 5px 14px rgba(1, 1, 51, .12);
  --shadow-md: 0 12px 28px rgba(1, 1, 51, .16);
  --shadow-lg: 0 24px 52px rgba(1, 1, 51, .22);

  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --focus-ring: 0 0 0 3px rgba(253, 181, 21, .42);

  --mobile-command-height: 64px;

  /* Compatibility aliases used by the existing application. */
  --cal-blue: var(--cgb-navy-900);
  --cal-blue-dark: var(--cgb-navy-950);
  --cal-gold: var(--cgb-gold-400);
  --ink: var(--cgb-ink-900);
  --muted: var(--cgb-ink-500);
  --line: var(--cgb-neutral-200);
  --surface: var(--cgb-white);
  --surface-alt: var(--cgb-neutral-50);
  --shadow: var(--shadow-md);
  --radius: var(--radius-lg);
  --header-height: calc(164px + env(safe-area-inset-top, 0px));
  --footer-height: calc(var(--mobile-command-height) + env(safe-area-inset-bottom, 0px));
  --tray-handle-height: 24px;
  --selected-tray-max-height: min(54dvh, 500px);

  font-family: var(--font-ui);
  color: var(--cgb-ink-900);
  background: var(--cgb-warm-50);
}

html {
  background: var(--cgb-navy-950);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--cgb-warm-50);
  color: var(--cgb-ink-900);
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
a,
input,
select,
textarea {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    transform var(--motion-fast) ease;
}

.ui-icon {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ui-icon--fill {
  fill: currentColor;
  stroke: none;
}

:focus-visible {
  outline: 2px solid var(--cgb-gold-400);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* ---------- Branded shell ---------- */
.site-header {
  position: relative;
  z-index: 50;
  height: var(--header-height);
  min-height: var(--header-height);
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right)) 19px max(16px, env(safe-area-inset-left));
  color: var(--cgb-white);
  background:
    radial-gradient(circle at 18% -35%, rgba(253, 181, 21, .16), transparent 43%),
    linear-gradient(150deg, var(--cgb-navy-950) 0%, var(--cgb-navy-900) 72%, #00358c 100%);
  border: 0;
  overflow: visible;
}

.site-header__brand-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cgb-white);
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  filter: none;
}

.brand-name {
  color: var(--cgb-white);
  font-family: var(--font-condensed);
  font-size: clamp(.92rem, 4vw, 1.08rem);
  font-weight: 850;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-menu-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-content: center;
  gap: 3px;
  padding: 0;
  color: var(--cgb-white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 50%;
}

.header-menu-button span {
  width: 13px;
  height: 1px;
  display: block;
  background: currentColor;
}

.header-menu-button:hover,
.header-menu-button:focus-visible {
  color: var(--cgb-gold-400);
  border-color: var(--cgb-gold-400);
}

.game-button {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 1px 8px;
  padding: 8px 34px 9px 0;
  text-align: left;
  color: var(--cgb-white);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .19);
  border-radius: 0;
  box-shadow: none;
}

.game-button:hover,
.game-button:focus-visible {
  background: rgba(255, 255, 255, .04);
  border-color: var(--cgb-gold-400);
}

.game-button__eyebrow {
  grid-column: 1;
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-condensed);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.game-button strong {
  grid-column: 1;
  overflow: hidden;
  color: var(--cgb-white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-button > span:nth-of-type(2) {
  grid-column: 1;
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: var(--text-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-button__chevron {
  position: absolute;
  right: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}

.opening-stat {
  position: absolute;
  z-index: 70;
  left: max(14px, env(safe-area-inset-left));
  right: max(14px, env(safe-area-inset-right));
  bottom: -27px;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--cgb-ink-900);
  background: var(--cgb-white);
  border: 1px solid rgba(1, 1, 51, .1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.opening-stat__item {
  min-width: 0;
  display: grid;
  place-content: center;
  padding: 7px 10px;
  text-align: center;
}

.opening-stat__item + .opening-stat__item {
  border-left: 1px solid var(--cgb-neutral-200);
}

.opening-stat strong {
  display: block;
  color: var(--cgb-navy-950);
  font-family: var(--font-condensed);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .035em;
  line-height: 1.15;
  text-transform: uppercase;
}

/* ---------- Map command surface ---------- */
.map-view {
  position: relative;
  background: var(--cgb-navy-100);
  overflow: hidden;
}

.map-toolbar {
  position: absolute;
  z-index: 24;
  top: 40px;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  display: block;
  pointer-events: none;
}

.map-toolbar > * {
  pointer-events: auto;
}

.location-search {
  position: relative;
  width: calc(100% - 54px);
  max-width: 620px;
  filter: drop-shadow(0 8px 16px rgba(1, 1, 51, .16));
}

.search-field {
  min-height: 46px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 4px 4px 4px 13px;
  color: var(--cgb-ink-900);
  background: rgba(255, 255, 255, .97);
  border: 1px solid rgba(1, 1, 51, .14);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)));
  backdrop-filter: blur(12px) saturate(120%);
}

.search-field > .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--cgb-navy-900);
}

.search-field input {
  min-width: 0;
  padding: 9px 0;
  color: var(--cgb-ink-900);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 16px;
  font-weight: 550;
}

.search-field input::placeholder {
  color: var(--cgb-ink-500);
  opacity: 1;
}

.search-field:focus-within {
  border-color: var(--cgb-gold-500);
  box-shadow: inset 0 0 0 1px var(--cgb-gold-400);
}

.search-submit {
  min-height: 36px;
  padding: 7px 12px;
  color: var(--cgb-white);
  background: var(--cgb-navy-950);
  border: 0;
  border-radius: 0;
  font-family: var(--font-condensed);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - .4rem) 0, 100% .4rem, 100% 100%, .4rem 100%, 0 calc(100% - .4rem));
}

.search-submit:hover {
  color: var(--cgb-navy-950);
  background: var(--cgb-gold-400);
}

.search-suggestions {
  top: calc(100% + 7px);
  max-height: min(44dvh, 330px);
  padding: 4px;
  color: var(--cgb-ink-900);
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(1, 1, 51, .13);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.search-suggestions button {
  min-height: 50px;
  padding: 10px 11px;
  border: 0;
  border-bottom: 1px solid var(--cgb-neutral-200);
  border-radius: 0;
}

.search-suggestions button:last-child {
  border-bottom: 0;
}

.search-suggestions button:hover,
.search-suggestions button:focus-visible {
  background: var(--cgb-navy-50);
}

.search-result-group {
  gap: 4px;
  padding: 6px;
}

.search-result-group + .search-result-group {
  border-top-color: var(--cgb-neutral-200);
}

.search-result-group__heading {
  color: var(--cgb-navy-900);
  font-family: var(--font-condensed);
  font-size: var(--text-2xs);
  font-weight: 850;
  letter-spacing: .1em;
}