:root {
  color-scheme: light;
  --paper: #f5f3ec;
  --paper-strong: #fcfbf7;
  --ink: #18382a;
  --ink-soft: #65736b;
  --line: #dedfd7;
  --green: #173e2c;
  --lime: #eef8b9;
  --sam: #e787b1;
  --mia: #7399eb;
  --alex: #e9b848;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --panel-width: clamp(390px, 36vw, 530px);
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

.app-shell {
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
}

.topbar {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 26px;
  background: rgba(250, 249, 244, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--green);
  font: 700 21px/1 "Manrope", sans-serif;
  letter-spacing: -.7px;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  background: var(--green);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(23, 62, 44, .14);
}

.brand-mark svg { width: 25px; height: 25px; }
.brand-mark path:first-child { fill: var(--sam); opacity: .9; }
.brand-mark path:nth-child(2) { fill: var(--mia); opacity: .9; }
.brand-mark circle { fill: var(--lime); }

.topbar-actions { display: flex; align-items: center; gap: 14px; }
.mini-avatars { display: flex; padding-left: 8px; }

.mini-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  margin-left: -8px;
  place-items: center;
  color: #1f2923;
  border: 2px solid var(--paper-strong);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.avatar-sam { background: var(--sam); }
.avatar-mia { background: var(--mia); }
.avatar-alex { background: var(--alex); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease;
}

.button:active { transform: scale(.97); }

.button:focus-visible,
.add-person:focus-visible,
.mode-segment button:focus-visible,
.map-control:focus-visible,
.map-zoom button:focus-visible,
.remove-person:focus-visible,
.map-message-action:focus-visible,
.venue-card:focus-visible,
.venue-pagination button:focus-visible,
.insights-back:focus-visible,
.insights-select:focus-visible,
.experiment-item:focus-visible,
.run-experiment:focus-visible {
  outline: 3px solid rgba(87, 118, 228, .35);
  outline-offset: 2px;
}

.button-secondary {
  gap: 8px;
  min-height: 39px;
  padding: 0 15px;
  color: var(--green);
  background: transparent;
  border: 1px solid #d7d9d1;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.button-secondary svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.workspace {
  display: grid;
  min-height: 0;
  grid-template-columns: var(--panel-width) minmax(0, 1fr);
}

.planner-panel {
  z-index: 10;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--paper-strong);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 30px rgba(36, 50, 42, .06);
}

.planner-scroll {
  min-height: 0;
  padding: 30px clamp(24px, 3.2vw, 48px) 26px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c9cec6 transparent;
}

.eyebrow-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }

.plan-date,
.demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px;
}

.plan-date { gap: 7px; padding: 0 11px; color: #4e5b53; background: #edeee7; }
.pulse-dot { width: 7px; height: 7px; background: #5ca97a; border-radius: 50%; box-shadow: 0 0 0 4px rgba(92, 169, 122, .12); }
.demo-badge { padding: 0 9px; color: #6b5a1c; background: #f6edc8; }
.demo-badge.live { color: #24613e; background: #dff2e5; }

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 13px;
  color: #183829;
  font: 700 clamp(36px, 3.5vw, 49px)/.99 "Manrope", sans-serif;
  letter-spacing: -2.5px;
}

h1 span { color: #7a847e; }

.intro {
  max-width: 410px;
  margin-bottom: 30px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.section-heading h2, .time-card h2 { margin-bottom: 3px; font-size: 14px; letter-spacing: -.2px; }
.section-heading p, .time-card p { margin: 0; color: #8a938d; font-size: 11px; }

.count-pill {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #657269;
  background: #eceee8;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.people-list { display: grid; gap: 9px; }

.person-card {
  padding: 12px;
  background: #fff;
  border: 1px solid #e3e4de;
  border-radius: 15px;
  box-shadow: 0 3px 12px rgba(37, 49, 42, .035);
  transition: border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 220ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(7px) scale(.98); }
}

.person-card:focus-within { position: relative; z-index: 12; border-color: #cbd3c9; box-shadow: 0 7px 22px rgba(37, 49, 42, .075); }
.person-card.is-removing { opacity: 0; transform: translateX(-8px) scale(.98); }

.person-line { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.person-avatar { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #263129; font-size: 10px; font-weight: 700; }
.person-name-label { min-width: 0; flex: 1; }
.person-name { width: 100%; padding: 1px 0; color: #243b2f; background: transparent; border: 0; outline: 0; font-size: 12px; font-weight: 700; }

.remove-person {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #9ca39f;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease;
}

.person-card:hover .remove-person,
.remove-person:focus-visible { opacity: 1; }

.address-control { position: relative; z-index: 2; margin-bottom: 9px; }

.address-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 35px;
  padding: 0 10px;
  background: #f6f6f2;
  border: 1px solid #e5e7e0;
  border-radius: 10px;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.address-field:focus-within { background: #fff; border-color: #b9c5bc; }
.address-field svg { flex: 0 0 auto; width: 15px; fill: none; stroke: #7d8981; stroke-width: 1.5; }
.address-field input { width: 100%; color: #33473c; background: transparent; border: 0; outline: 0; font-size: 11px; text-overflow: ellipsis; }
.address-field input::placeholder { color: #a0a7a2; }

.address-search-spinner {
  display: none;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid #d8ddd6;
  border-top-color: #66776d;
  border-radius: 50%;
  animation: spin .65s linear infinite;
}

.address-control.is-loading .address-search-spinner { display: block; }

.autocomplete-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  overflow: hidden;
  background: rgba(255, 255, 253, .98);
  border: 1px solid #dfe3dc;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(29, 47, 37, .18), 0 2px 7px rgba(29, 47, 37, .06);
  backdrop-filter: blur(16px);
  transform-origin: top center;
  transition: opacity 150ms ease, transform 170ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-3px) scale(.985); }
}

.autocomplete-menu[hidden] { display: none; }
.autocomplete-results { max-height: 210px; padding: 5px; overflow-y: auto; scrollbar-width: thin; }

.autocomplete-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  text-align: left;
  color: #31473b;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color 130ms ease, transform 110ms var(--ease-out);
}

.autocomplete-option:active { transform: scale(.985); }
.autocomplete-option.is-active { background: #f0f3ec; }

.autocomplete-pin {
  display: grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  place-items: center;
  color: #617269;
  background: #eef0eb;
  border-radius: 9px;
}

.autocomplete-pin svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.45; }
.autocomplete-copy { display: grid; min-width: 0; gap: 2px; }
.autocomplete-copy strong, .autocomplete-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-copy strong { font-size: 11px; font-weight: 700; }
.autocomplete-copy small { color: #879189; font-size: 9px; }

.autocomplete-empty { padding: 13px 10px; color: #7d8982; font-size: 10px; line-height: 1.4; }
.google-attribution { display: flex; min-height: 24px; align-items: center; justify-content: flex-end; padding: 3px 9px; border-top: 1px solid #eceee9; }
.google-attribution img { width: 96px; height: auto; }

.mode-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  background: #f0f1ec;
  border-radius: 10px;
}

.mode-segment button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 29px;
  padding: 0 8px;
  color: #88918b;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 120ms var(--ease-out);
}

.mode-segment button:active { transform: scale(.97); }
.mode-segment button.selected { color: #284535; background: #fff; box-shadow: 0 1px 4px rgba(35, 54, 43, .11); }
.mode-segment svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }

.add-person {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 39px;
  margin: 11px 0 23px;
  padding: 0 9px;
  color: #65756c;
  background: transparent;
  border: 1px dashed #ccd0c8;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out);
}

.add-person:active { transform: scale(.985); }
.add-icon { display: grid; width: 22px; height: 22px; place-items: center; background: #e8ebe5; border-radius: 7px; font-size: 17px; font-weight: 400; }
.add-person[disabled] { opacity: .45; cursor: not-allowed; }

.time-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 15px;
  background: #f7f7f2;
  border: 1px solid #e2e4dd;
  border-radius: 15px;
}

.time-card-copy { display: flex; align-items: center; gap: 10px; }
.time-icon { display: grid; width: 31px; height: 31px; place-items: center; color: #607469; background: #e6eae3; border-radius: 9px; }
.time-icon svg { width: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.time-value { padding: 6px 9px; color: #57655e; background: #fff; border: 1px solid #e1e4dd; border-radius: 9px; font-size: 10px; }
.time-value strong { color: var(--green); font-size: 13px; }

input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 18px;
  margin: 13px 0 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--green) var(--range-progress, 33%), #d9ddd5 var(--range-progress, 33%)); border-radius: 4px; }
input[type="range"]::-moz-range-track { height: 4px; background: #d9ddd5; border-radius: 4px; }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--green); border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; appearance: none; background: var(--lime); border: 4px solid var(--green); border-radius: 50%; box-shadow: 0 1px 4px rgba(23, 62, 44, .25); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; background: var(--lime); border: 4px solid var(--green); border-radius: 50%; }
.range-labels { display: flex; grid-column: 1 / -1; justify-content: space-between; color: #9aa29d; font-size: 9px; }

.planner-footer { padding: 14px clamp(24px, 3.2vw, 48px) 13px; background: rgba(252, 251, 247, .95); border-top: 1px solid #e5e6df; box-shadow: 0 -12px 25px rgba(36, 50, 42, .035); }

.find-button {
  justify-content: space-between;
  width: 100%;
  min-height: 49px;
  padding: 0 11px 0 18px;
  color: #f6f8e8;
  background: var(--green);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(23, 62, 44, .18);
  font-size: 13px;
  font-weight: 700;
}

.find-button:hover { background: #103624; box-shadow: 0 10px 22px rgba(23, 62, 44, .23); }
.find-button[disabled] { cursor: wait; opacity: .82; }
.find-label { display: flex; align-items: center; gap: 9px; }
.find-label svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.button-arrow { display: grid; width: 31px; height: 31px; place-items: center; color: var(--green); background: var(--lime); border-radius: 9px; font-size: 17px; transition: transform 180ms var(--ease-out); }
.find-button:hover .button-arrow { transform: translateX(2px); }
.find-button.is-loading .find-label { opacity: .72; }
.find-button.is-loading .button-arrow { color: transparent; }
.find-button.is-loading .button-arrow::after { width: 12px; height: 12px; content: ""; border: 2px solid rgba(23, 62, 44, .25); border-top-color: var(--green); border-radius: 50%; animation: spin .7s linear infinite; }

.planner-footer p { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 9px 0 0; color: #9ba29e; font-size: 9px; }
.planner-footer p svg { width: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.3; }

.map-panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e9e8e1; }
.demo-map, .google-map { position: absolute; inset: 0; }
.google-map { z-index: 1; opacity: 0; transition: opacity 250ms var(--ease-out); }
.google-map.is-active { opacity: 1; }
.demo-map { z-index: 0; }
.map-art { width: 100%; height: 100%; }
.iso-area { mix-blend-mode: multiply; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(var(--area-scale)); transition: transform 280ms var(--ease-in-out), opacity 180ms ease; }
.area-sam { fill: rgba(231, 135, 177, .27); stroke: rgba(208, 93, 143, .48); }
.area-mia { fill: rgba(115, 153, 235, .25); stroke: rgba(78, 120, 212, .48); }
.area-alex { fill: rgba(233, 184, 72, .25); stroke: rgba(195, 140, 31, .48); }
.shared-area { fill: rgba(187, 218, 103, .46); }
.shared-area-core { fill: rgba(219, 239, 144, .67); stroke: rgba(76, 107, 50, .45); stroke-width: 2; stroke-dasharray: 5 5; }
.area-group { transition: opacity 180ms ease; }
.map-panel.hide-areas .area-group { opacity: 0; }
.map-panel.hide-areas .meeting-pin { opacity: .65; }

.home-pin { transition: transform 250ms var(--ease-in-out); }
.meeting-pin { transition: opacity 180ms ease, transform 280ms var(--ease-in-out); }

.map-top-controls { position: absolute; z-index: 5; top: 18px; right: 18px; display: flex; gap: 8px; }
.map-control { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 12px; color: #44554c; background: rgba(255, 255, 252, .91); border: 1px solid rgba(206, 211, 204, .9); border-radius: 11px; box-shadow: 0 5px 17px rgba(39, 53, 45, .12); backdrop-filter: blur(12px); cursor: pointer; font-size: 11px; font-weight: 700; transition: transform 130ms var(--ease-out), background-color 160ms ease; }
.map-control:active { transform: scale(.97); }
.map-control svg { width: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }

.map-zoom { position: absolute; z-index: 4; top: 19px; left: 19px; display: grid; overflow: hidden; background: rgba(255, 255, 252, .91); border: 1px solid rgba(206, 211, 204, .9); border-radius: 10px; box-shadow: 0 5px 17px rgba(39, 53, 45, .1); backdrop-filter: blur(12px); }
.map-zoom button { display: grid; width: 36px; height: 34px; place-items: center; color: #536158; background: transparent; border: 0; cursor: pointer; font-size: 18px; }
.map-zoom button + button { border-top: 1px solid #dde0da; }

.map-legend { position: absolute; z-index: 4; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 11px; color: #617068; background: rgba(255, 255, 252, .88); border: 1px solid rgba(206, 211, 204, .8); border-radius: 10px; box-shadow: 0 4px 14px rgba(39, 53, 45, .08); backdrop-filter: blur(12px); font-size: 9px; font-weight: 700; }
.map-legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend-shape, .legend-overlap { display: inline-block; width: 9px; height: 9px; border-radius: 3px 6px 4px 5px; }
.shape-sam { background: rgba(231, 135, 177, .7); }
.shape-mia { background: rgba(115, 153, 235, .7); }
.shape-alex { background: rgba(233, 184, 72, .75); }
.legend-overlap { background: #d8e98c; border: 1px dashed #78905d; border-radius: 50%; }

.result-card {
  position: absolute;
  z-index: 6;
  bottom: 18px;
  left: 50%;
  width: min(760px, calc(100% - 38px));
  padding: 14px 16px 15px;
  background: rgba(255, 255, 252, .95);
  border: 1px solid rgba(211, 216, 209, .95);
  border-radius: 19px;
  box-shadow: 0 16px 45px rgba(33, 49, 40, .19);
  backdrop-filter: blur(16px);
  transform: translate(-50%, 0);
  transition: opacity 210ms ease, transform 250ms var(--ease-out);
}

.result-card.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 18px) scale(.98); }
.result-handle { display: none; width: 36px; height: 4px; margin: -5px auto 9px; background: #d8ddd7; border-radius: 4px; }
.result-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.result-summary { display: flex; align-items: center; gap: 6px; }
.best-match, .fairness-score { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.best-match { gap: 5px; padding: 0 8px; color: #48612e; background: #edf5c9; }
.best-match svg { width: 11px; fill: currentColor; }
.fairness-score { padding: 0 8px; color: #607168; background: #edf0eb; }

.venue-pagination { display: flex; align-items: center; gap: 5px; }
.venue-pagination > span { margin-right: 3px; color: #89928d; font-size: 8px; font-weight: 700; }
.venue-pagination button { display: grid; width: 27px; height: 27px; place-items: center; color: #35503f; background: #eef0e8; border: 1px solid #dde0d8; border-radius: 8px; cursor: pointer; font-size: 12px; transition: background-color 150ms ease, opacity 150ms ease, transform 130ms var(--ease-out); }
.venue-pagination button:active { transform: scale(.94); }
.venue-pagination button:disabled { cursor: default; opacity: .32; }

.venue-rail {
  display: grid;
  padding: 1px 1px 7px;
  grid-auto-flow: column;
  grid-auto-columns: 225px;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 1px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #cbd1c8 transparent;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.venue-card { display: grid; min-width: 0; min-height: 116px; padding: 10px; grid-template-rows: auto auto auto 1fr; color: #31483b; background: #f5f5ef; border: 1px solid #e1e3dc; border-radius: 12px; scroll-snap-align: start; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease, transform 150ms var(--ease-out), box-shadow 160ms ease; }
.venue-card.is-best { background: #f1f5dd; border-color: #dde6b6; }
.venue-card:active { transform: scale(.985); }
.venue-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.venue-card-top > i { display: grid; width: 25px; height: 25px; place-items: center; color: #3c5948; background: rgba(255, 255, 255, .8); border: 1px solid rgba(214, 219, 210, .8); border-radius: 7px; font-style: normal; font-size: 12px; }
.venue-rank { overflow: hidden; color: #89948d; font-size: 7px; font-weight: 700; letter-spacing: .2px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.venue-card h2 { margin: 8px 0 2px; overflow: hidden; font: 700 12px/1.2 "Manrope", sans-serif; letter-spacing: -.25px; text-overflow: ellipsis; white-space: nowrap; }
.venue-card p { margin: 0; overflow: hidden; color: #89928d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.venue-card-meta { display: flex; margin-top: 9px; align-self: end; align-items: center; justify-content: space-between; gap: 8px; color: #7c8881; font-size: 7.5px; }
.venue-card-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venue-card-meta strong { flex: 0 0 auto; color: #365442; font-size: 8px; }
.travel-chips { display: flex; gap: 6px; margin-top: 7px; overflow: auto; scrollbar-width: none; }
.travel-chips::-webkit-scrollbar { display: none; }
.travel-chips span { display: flex; align-items: center; gap: 5px; min-height: 27px; padding: 0 8px; color: #6d7972; background: #f3f4ef; border-radius: 8px; font-size: 9px; white-space: nowrap; }
.travel-chips strong { color: #30483b; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; }
.sam-dot { background: var(--sam); }.mia-dot { background: var(--mia); }.alex-dot { background: var(--alex); }

.map-message-card {
  position: absolute;
  z-index: 7;
  bottom: 18px;
  left: 50%;
  display: grid;
  width: min(440px, calc(100% - 38px));
  padding: 17px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  background: rgba(255, 255, 252, .96);
  border: 1px solid rgba(211, 216, 209, .96);
  border-radius: 19px;
  box-shadow: 0 16px 45px rgba(33, 49, 40, .19);
  backdrop-filter: blur(16px);
  transform: translate(-50%, 0);
  transition: opacity 210ms ease, transform 250ms var(--ease-out);
}

.map-message-card.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, 18px) scale(.98); }

.map-message-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #725f29;
  background: #f5edc9;
  border-radius: 12px;
}

.map-message-icon svg { width: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.map-message-copy { min-width: 0; }
.map-message-eyebrow { display: block; margin-bottom: 3px; color: #8a752e; font-size: 9px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.map-message-copy h2 { margin: 0 0 5px; font: 700 15px/1.25 "Manrope", sans-serif; letter-spacing: -.35px; }
.map-message-copy p { margin: 0; color: #758078; font-size: 10px; line-height: 1.45; }

.map-message-action {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 8px 0 12px;
  color: #35503f;
  background: #f0f4d6;
  border: 1px solid #e3e9bc;
  border-radius: 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: background-color 160ms ease, transform 130ms var(--ease-out);
}

.map-message-action span:last-child { display: grid; width: 25px; height: 25px; place-items: center; color: #eff7bd; background: var(--green); border-radius: 7px; font-size: 14px; }
.map-message-action:active { transform: scale(.985); }

.map-status {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 43px;
  padding: 0 15px;
  color: #44544b;
  background: rgba(255, 255, 252, .96);
  border: 1px solid #d8ddd6;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(31, 47, 38, .2);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -43%) scale(.97);
  transition: opacity 180ms ease, transform 210ms var(--ease-out);
}

.map-status.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.status-spinner { width: 15px; height: 15px; border: 2px solid #dbe2d8; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }

body.insights-open { overflow: hidden; }

.insights-lab {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  min-width: 320px;
  grid-template-rows: 76px minmax(0, 1fr);
  color: #17372a;
  background: #f3f1ea;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 240ms var(--ease-out), visibility 0ms;
}

.insights-lab.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 150ms ease, transform 180ms ease, visibility 0ms 180ms;
}

.insights-header {
  z-index: 5;
  display: grid;
  align-items: center;
  padding: 0 28px;
  grid-template-columns: 1fr auto 1fr;
  background: rgba(250, 249, 244, .95);
  border-bottom: 1px solid #d9dbd3;
  box-shadow: 0 5px 24px rgba(31, 48, 39, .04);
  backdrop-filter: blur(18px);
}

.insights-back {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  color: #536259;
  background: #f4f3ee;
  border: 1px solid #dcddd6;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
}

.insights-back span { font-size: 16px; line-height: 1; }
.insights-back:active { transform: scale(.97); }

.insights-heading { text-align: center; }
.insights-heading > span { display: block; margin-bottom: 2px; color: #849087; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.insights-heading h1 { margin: 0; font: 700 22px/1.05 "Manrope", sans-serif; letter-spacing: -.8px; }

.derby-tally {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 11px;
  min-height: 39px;
  padding: 0 13px;
  background: #efefe9;
  border: 1px solid #dedfd7;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
}

.tally-side { display: inline-flex; align-items: center; gap: 6px; }
.tally-side i { width: 7px; height: 7px; background: var(--team-color); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-color) 16%, transparent); }
.tally-side strong { display: grid; width: 23px; height: 23px; place-items: center; color: #fff; background: var(--team-color); border-radius: 7px; font: 700 11px/1 "Manrope", sans-serif; }
.west-tally { --team-color: #d65f91; }
.east-tally { --team-color: #587fdc; }
.tally-divider { color: #a2a9a4; }

.insights-body {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 284px minmax(480px, 1fr) 294px;
}

.experiment-rail,
.method-rail {
  min-width: 0;
  min-height: 0;
  padding: 23px 22px;
  overflow: auto;
  background: #fbfaf6;
  scrollbar-width: thin;
  scrollbar-color: #ccd0c8 transparent;
}

.experiment-rail { border-right: 1px solid #dcddd5; }
.method-rail { border-left: 1px solid #dcddd5; }
.rail-section + .rail-section { margin-top: 23px; }
.insights-label { display: block; margin-bottom: 8px; color: #7a867f; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }

.insights-select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 12px;
  color: #254436;
  background: #f0f0e9;
  border: 1px solid #dadcd4;
  border-radius: 11px;
  font: 700 11px/1 "DM Sans", sans-serif;
  cursor: pointer;
}

.pair-description { min-height: 34px; margin: 9px 1px 0; color: #808b84; font-size: 9px; line-height: 1.5; }

.cohort-versus { position: relative; display: grid; margin-top: 19px; grid-template-columns: 1fr 1fr; gap: 8px; }
.cohort-side { min-width: 0; padding: 12px 11px 10px; background: color-mix(in srgb, var(--team-color) 8%, #fff); border: 1px solid color-mix(in srgb, var(--team-color) 20%, #e3e4dc); border-radius: 13px; }
.cohort-west { --team-color: #d65f91; }
.cohort-east { --team-color: #587fdc; }
.cohort-side > span { display: block; margin-bottom: 8px; color: var(--team-color); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.cohort-side ul { display: grid; padding: 0; margin: 0; gap: 7px; list-style: none; }
.cohort-side li { display: flex; min-width: 0; justify-content: space-between; gap: 5px; color: #4f5f56; font-size: 8.5px; line-height: 1.2; }
.cohort-side li span { flex: 0 0 auto; padding: 2px 4px; color: #728077; background: rgba(255, 255, 255, .8); border-radius: 4px; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.versus-mark { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 25px; height: 25px; place-items: center; color: #6e7a73; background: #fff; border: 1px solid #dcded6; border-radius: 50%; box-shadow: 0 3px 10px rgba(36, 49, 42, .08); font: italic 700 8px/1 "Manrope", sans-serif; text-transform: uppercase; transform: translate(-50%, -50%); }

.experiment-section { padding-top: 19px; border-top: 1px solid #e2e3dc; }
.rail-heading-row { display: flex; align-items: center; justify-content: space-between; }
.rail-heading-row > span:last-child { color: #9aa29d; font-size: 8px; }
.experiment-list { display: grid; gap: 5px; }

.experiment-item {
  display: grid;
  width: 100%;
  min-height: 48px;
  padding: 7px 9px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #6f7c74;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out);
}

.experiment-item > span:first-child { display: grid; width: 26px; height: 26px; place-items: center; color: #8c9690; background: #efefe9; border-radius: 8px; font: 700 8px/1 "Manrope", sans-serif; }
.experiment-item > span:last-child { display: grid; min-width: 0; gap: 2px; }
.experiment-item strong { color: #405047; font-size: 10px; font-weight: 700; }
.experiment-item small { color: #9ba39e; font-size: 7.5px; }
.experiment-item.is-selected { color: #223f31; background: #eef3d3; border-color: #dfe7b9; }
.experiment-item.is-selected > span:first-child { color: #eff8b9; background: var(--green); }
.experiment-item.has-result small { color: #587063; font-weight: 700; }
.experiment-item:active { transform: scale(.985); }
.is-running .experiment-item { cursor: wait; opacity: .62; }

.insights-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  grid-template-rows: minmax(300px, 1fr) auto;
  gap: 14px;
  overflow: hidden;
  background: #eeece5;
}

.insights-map-shell {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #e4e5df;
  border: 1px solid #d3d6cf;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(32, 48, 39, .08);
}

.insights-map { position: absolute; inset: 0; }
.insights-map-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; color: #859089; background: linear-gradient(135deg, #ecebe5, #dfe4dc); font-size: 10px; font-weight: 700; letter-spacing: .2px; text-align: center; transition: opacity 200ms ease; }
.insights-map-placeholder.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.placeholder-routes { position: relative; width: 148px; height: 94px; margin: auto; }
.placeholder-routes i { position: absolute; display: block; height: 2px; background: #c2c9c0; border-radius: 10px; transform-origin: left center; }
.placeholder-routes i:nth-child(1) { top: 18px; left: 5px; width: 132px; transform: rotate(18deg); }
.placeholder-routes i:nth-child(2) { top: 74px; left: 17px; width: 125px; transform: rotate(-25deg); }
.placeholder-routes i:nth-child(3) { top: 4px; left: 42px; width: 96px; transform: rotate(68deg); }
.placeholder-routes i:nth-child(4) { top: 47px; left: 25px; width: 113px; height: 13px; background: transparent; border: 2px dashed #c2c9c0; border-radius: 50%; transform: rotate(-7deg); }

.insights-map-legend { position: absolute; z-index: 4; right: 12px; bottom: 12px; display: flex; gap: 6px; padding: 7px; background: rgba(255, 255, 252, .94); border: 1px solid rgba(213, 217, 210, .94); border-radius: 10px; box-shadow: 0 5px 16px rgba(37, 51, 43, .1); backdrop-filter: blur(10px); }
.insights-map-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px; color: #68766d; font-size: 8px; font-weight: 700; }
.insights-map-legend i { width: 13px; height: 8px; background: var(--team-color); border: 1px solid color-mix(in srgb, var(--team-color) 70%, #263b31); border-radius: 999px; opacity: .76; }
.west-swatch { --team-color: #d65f91; }
.east-swatch { --team-color: #587fdc; }

.insights-progress { position: absolute; z-index: 5; top: 50%; left: 50%; display: flex; min-height: 44px; padding: 0 15px; align-items: center; gap: 9px; color: #42534a; background: rgba(255, 255, 252, .97); border: 1px solid #d5d9d2; border-radius: 12px; box-shadow: 0 14px 36px rgba(31, 47, 38, .18); font-size: 10px; font-weight: 700; opacity: 0; visibility: hidden; transform: translate(-50%, -44%) scale(.97); transition: opacity 170ms ease, transform 210ms var(--ease-out); }
.insights-progress.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.derby-scoreboard { padding: 16px 18px; background: #fbfaf6; border: 1px solid #d8dad3; border-radius: 17px; box-shadow: 0 7px 22px rgba(32, 47, 39, .05); }
.scoreboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.scoreboard-kicker { display: block; margin-bottom: 2px; color: #7e8a83; font-size: 8px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.scoreboard-heading h2 { margin: 0; font: 700 17px/1.2 "Manrope", sans-serif; letter-spacing: -.45px; }

.run-experiment { display: flex; min-width: 155px; min-height: 40px; padding: 0 7px 0 13px; align-items: center; justify-content: space-between; gap: 15px; color: #eef7bc; background: var(--green); border: 0; border-radius: 11px; cursor: pointer; font-size: 9.5px; font-weight: 700; box-shadow: 0 5px 14px rgba(23, 62, 44, .16); transition: transform 140ms var(--ease-out), background-color 160ms ease, opacity 160ms ease; }
.run-experiment span:last-child { display: grid; width: 27px; height: 27px; place-items: center; color: var(--green); background: var(--lime); border-radius: 7px; font-size: 15px; }
.run-experiment:active { transform: scale(.97); }
.run-experiment:disabled { cursor: wait; opacity: .7; }

.side-scores { position: relative; display: grid; margin-top: 14px; grid-template-columns: 1fr 30px 1fr; align-items: center; }
.side-score { min-width: 0; }
.score-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.score-meta span { color: var(--team-color); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.score-meta strong { font: 700 17px/1 "Manrope", sans-serif; letter-spacing: -.4px; }
.score-track { height: 6px; margin-top: 7px; overflow: hidden; background: #e9eae4; border-radius: 99px; }
.score-track i { display: block; width: 0; height: 100%; background: var(--team-color); border-radius: inherit; transition: width 600ms var(--ease-out); }
.side-score p { margin: 6px 0 0; color: #879189; font-size: 8px; }
.west-score { --team-color: #d65f91; }
.east-score { --team-color: #587fdc; }
.score-midline { display: grid; height: 100%; place-items: center; }
.score-midline::before { position: absolute; top: 3px; bottom: 3px; width: 1px; content: ""; background: #e0e2da; }
.score-midline span { z-index: 1; display: grid; width: 23px; height: 23px; place-items: center; color: #8d9691; background: #fbfaf6; border: 1px solid #e0e2da; border-radius: 50%; font: italic 700 7px/1 "Manrope", sans-serif; text-transform: uppercase; }
.side-scores.is-empty .score-track { opacity: .55; }

.derby-verdict { display: flex; margin-top: 13px; padding: 10px; align-items: center; gap: 10px; background: #f0f3d9; border: 1px solid #e1e7bd; border-radius: 11px; }
.verdict-mark { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; color: #fff; background: var(--verdict-color, #7e8b84); border-radius: 9px; font: 700 11px/1 "Manrope", sans-serif; }
.derby-verdict p { display: grid; margin: 0; gap: 2px; }
.derby-verdict strong { font-size: 9px; }
.derby-verdict p span { color: #77837b; font-size: 8px; line-height: 1.4; }
.derby-verdict.is-west { --verdict-color: #d65f91; background: #f8e7ee; border-color: #efd0dc; }
.derby-verdict.is-east { --verdict-color: #587fdc; background: #e9eefb; border-color: #d4def5; }
.derby-verdict.is-draw { --verdict-color: #617268; }
.derby-verdict.is-error { --verdict-color: #a8644d; background: #f8ebe6; border-color: #eed8cf; }
.derby-verdict.is-empty { background: #f0f0ea; border-color: #e0e1da; }

.method-intro { padding-bottom: 19px; border-bottom: 1px solid #e0e1da; }
.method-number { display: grid; width: 34px; height: 34px; margin-bottom: 12px; place-items: center; color: #edf7b7; background: var(--green); border-radius: 10px; font: 700 10px/1 "Manrope", sans-serif; box-shadow: 0 5px 13px rgba(23, 62, 44, .13); }
.method-intro h2 { margin: 0 0 7px; font: 700 16px/1.2 "Manrope", sans-serif; letter-spacing: -.4px; }
.method-intro p { margin: 0; color: #7e8982; font-size: 9px; line-height: 1.55; }
.method-steps { padding: 18px 0 20px; border-bottom: 1px solid #e0e1da; }
.method-steps h3,
.result-ledger h3 { margin: 0; color: #69766e; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; }
.method-steps ol { display: grid; padding: 0 0 0 18px; margin: 13px 0 0; gap: 10px; color: #69766f; }
.method-steps li { padding-left: 3px; font-size: 8.5px; line-height: 1.45; }
.method-steps li::marker { color: #879a47; font-weight: 700; }
.result-ledger { padding-top: 19px; }
.result-ledger .rail-heading-row > span { color: #909a94; font-size: 8px; font-weight: 700; }
#result-ledger { display: grid; margin-top: 10px; gap: 3px; }
.ledger-row { display: grid; min-height: 30px; padding: 0 7px; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 5px; color: #7b8680; background: #f1f1eb; border-radius: 7px; font-size: 8px; }
.ledger-row > span:first-child { color: #a0a8a3; font: 700 7px/1 "Manrope", sans-serif; }
.ledger-row strong { color: #98a09b; font-size: 8px; }
.ledger-row.is-west { background: #f8e9ef; }
.ledger-row.is-west strong { color: #b34e78; }
.ledger-row.is-east { background: #eaf0fc; }
.ledger-row.is-east strong { color: #486ec6; }
.ledger-row.is-draw strong { color: #53655a; }
.method-note { margin: 18px 0 0; padding: 10px; color: #89928d; background: #f1f1eb; border-radius: 9px; font-size: 7.5px; line-height: 1.45; }

.toast {
  position: fixed;
  z-index: 50;
  top: 80px;
  left: 50%;
  max-width: min(420px, calc(100% - 30px));
  padding: 10px 14px;
  color: #f9fbf1;
  background: #1f392c;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(28, 44, 35, .25);
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(.98);
  transition: opacity 180ms ease, transform 200ms var(--ease-out);
}

.toast.is-visible { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

@media (hover: hover) and (pointer: fine) {
  .button-secondary:hover { background: #f0f1eb; }
  .remove-person:hover { color: #7e615f; background: #f4ebe9; }
  .add-person:hover { color: #355243; background: #f5f6f1; border-color: #abb6ad; }
  .mode-segment button:hover:not(.selected) { color: #66736c; }
  .autocomplete-option:hover { background: #f0f3ec; }
  .map-control:hover { background: #fff; }
  .venue-card:hover { background: #fafaf6; border-color: #cfd5cb; box-shadow: 0 5px 13px rgba(33, 48, 40, .07); transform: translateY(-1px); }
  .venue-card.is-best:hover { background: #eef4d3; border-color: #d2dda3; }
  .venue-pagination button:hover:not(:disabled) { background: #e7eadf; }
  .map-message-action:hover { background: #eaf0c4; }
  .insights-back:hover { background: #ebece5; }
  .experiment-item:hover:not(.is-selected) { background: #f1f1eb; border-color: #e3e4dd; }
  .run-experiment:hover:not(:disabled) { background: #1e4b36; }
}

@media (max-width: 1160px) {
  .insights-body { grid-template-columns: 260px minmax(450px, 1fr); }
  .method-rail { display: none; }
}

@media (max-width: 900px) {
  :root { --panel-width: 390px; }
  .planner-scroll { padding-left: 24px; padding-right: 24px; }
  .planner-footer { padding-left: 24px; padding-right: 24px; }
  .map-legend { display: none; }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .app-shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .topbar { position: sticky; top: 0; height: 62px; }
  .workspace { display: flex; flex-direction: column-reverse; }
  .map-panel { position: sticky; top: 62px; z-index: 2; height: min(52vh, 430px); min-height: 340px; }
  .map-panel.showing-results { height: min(72vh, 590px); min-height: 510px; }
  .planner-panel { position: relative; z-index: 7; display: block; overflow: visible; border-top: 1px solid var(--line); border-right: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 35px rgba(31, 47, 38, .12); }
  .planner-scroll { padding: 28px 20px 18px; overflow: visible; }
  .planner-footer { position: sticky; z-index: 10; bottom: 0; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); }
  h1 { font-size: 39px; }
  .intro { font-size: 13px; }
  .result-card { bottom: 12px; width: calc(100% - 24px); }
  .map-message-card { bottom: 12px; width: calc(100% - 24px); }
  .result-handle { display: block; }
  .venue-rail { grid-auto-columns: min(72vw, 245px); }
  .map-top-controls { top: 12px; right: 12px; }
  .map-zoom { top: 12px; left: 12px; }
  .demo-map .map-art { transform: scale(1.08); }
  body.insights-open { overflow: hidden; }
  .insights-lab { display: block; overflow: auto; }
  .insights-header { position: sticky; top: 0; grid-template-columns: auto 1fr auto; height: 68px; padding: 0 14px; }
  .insights-back { width: 38px; min-height: 38px; padding: 0; justify-content: center; font-size: 0; }
  .insights-back span { font-size: 17px; }
  .insights-heading { text-align: left; padding-left: 11px; }
  .insights-heading > span { display: none; }
  .insights-heading h1 { font-size: 17px; letter-spacing: -.55px; }
  .derby-tally { min-height: 36px; padding: 0 8px; gap: 5px; }
  .tally-side { font-size: 0; gap: 4px; }
  .tally-side i { display: none; }
  .tally-side strong { width: 22px; height: 22px; }
  .insights-body { display: block; min-height: auto; }
  .experiment-rail,
  .method-rail { display: block; padding: 20px; overflow: visible; border: 0; }
  .experiment-rail { border-bottom: 1px solid #dcddd5; }
  .cohort-versus { max-width: 520px; }
  .experiment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-stage { display: block; padding: 14px; overflow: visible; }
  .insights-map-shell { height: 370px; }
  .derby-scoreboard { margin-top: 12px; }
  .method-rail { border-top: 1px solid #dcddd5; }
  .method-steps ol { max-width: 560px; }
}

@media (max-width: 440px) {
  .topbar { padding: 0 14px 0 16px; }
  .mini-avatars { display: none; }
  .button-secondary { min-height: 36px; }
  .map-panel { min-height: 330px; }
  .map-control { padding: 0 10px; }
  .map-control { font-size: 0; }
  .map-control svg { width: 18px; }
  .result-card { padding-right: 12px; padding-left: 12px; }
  .result-topline { align-items: flex-start; }
  .result-summary { flex-wrap: wrap; }
  .insights-header { padding: 0 10px; }
  .insights-heading h1 { font-size: 15px; }
  .experiment-rail,
  .method-rail { padding: 17px 15px; }
  .experiment-list { grid-template-columns: 1fr; }
  .insights-stage { padding: 10px; }
  .insights-map-shell { height: 330px; min-height: 330px; border-radius: 14px; }
  .derby-scoreboard { padding: 14px; }
  .scoreboard-heading { align-items: flex-start; }
  .run-experiment { min-width: 42px; width: 42px; padding: 0 7px; }
  .run-experiment > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .side-scores { grid-template-columns: 1fr 25px 1fr; }
  .score-meta { display: grid; gap: 5px; }
  .score-meta strong { font-size: 15px; }
  .insights-map-legend { right: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .person-card, .result-card, .map-status, .toast, .iso-area, .insights-lab, .score-track i { transition-property: opacity, background-color, border-color, color !important; }
}

/* Windows 95 theme */
:root {
  --paper: #c0c0c0;
  --paper-strong: #c0c0c0;
  --ink: #000000;
  --ink-soft: #404040;
  --line: #808080;
  --green: #000080;
  --lime: #ffffff;
  --ease-out: linear;
  --ease-in-out: linear;
  --panel-width: clamp(390px, 35vw, 500px);
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
}

*, *::before, *::after {
  border-radius: 0 !important;
  transition-duration: 0s !important;
}

body {
  color: #000;
  background: #008080;
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
  -webkit-font-smoothing: auto;
}

body *,
body *::before,
body *::after { font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif !important; }

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

.app-shell {
  grid-template-rows: 48px minmax(0, 1fr);
  min-height: 570px;
  padding: 3px;
  gap: 3px;
  background: #008080;
}

.topbar {
  min-width: 0;
  height: 48px;
  padding: 3px 5px;
  color: #fff;
  background: #000080;
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  backdrop-filter: none;
}

.brand { gap: 7px; color: #fff; font-size: 17px; letter-spacing: 0; }
.brand-mark {
  width: 32px;
  height: 32px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
}
.brand-mark svg { width: 24px; height: 24px; }
.brand-mark path:first-child { fill: #ff00ff; }
.brand-mark path:nth-child(2) { fill: #00ffff; }
.brand-mark circle { fill: #ffff00; }
.topbar-actions { gap: 7px; }
.mini-avatars { padding-left: 4px; }
.mini-avatar {
  width: 27px;
  height: 27px;
  margin-left: -4px;
  color: #000;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: 9px;
}

.button-secondary,
.insights-back,
.add-person,
.map-control,
.map-zoom button,
.map-message-action,
.venue-pagination button,
.run-experiment,
.find-button {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
  text-shadow: none;
}

.button-secondary { min-height: 34px; padding: 0 11px; font-size: 11px; }
.button-secondary svg { stroke-width: 2; }
.button-secondary:active,
.insights-back:active,
.add-person:active,
.map-control:active,
.map-zoom button:active,
.map-message-action:active,
.venue-pagination button:active,
.run-experiment:active,
.find-button:active {
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
  transform: none;
}

.button:focus-visible,
.add-person:focus-visible,
.mode-segment button:focus-visible,
.map-control:focus-visible,
.map-zoom button:focus-visible,
.remove-person:focus-visible,
.map-message-action:focus-visible,
.venue-card:focus-visible,
.venue-pagination button:focus-visible,
.insights-back:focus-visible,
.insights-select:focus-visible,
.experiment-item:focus-visible,
.run-experiment:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.workspace {
  padding: 5px;
  gap: 7px;
  background: #008080;
}

.planner-panel,
.map-panel {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080, 2px 2px #000;
}

.planner-panel { border-right-color: #000; }
.planner-scroll { padding: 18px 20px 20px; scrollbar-color: #808080 #c0c0c0; }
.eyebrow-row { margin-bottom: 15px; }
.plan-date,
.demo-badge,
.count-pill,
.best-match,
.fairness-score {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.pulse-dot { background: #00a000; box-shadow: none; }
.demo-badge.live { color: #fff; background: #000080; border-color: #404040 #fff #fff #404040; }

h1 { color: #000; font-size: clamp(33px, 4vw, 47px); line-height: .98; letter-spacing: -2px; text-shadow: 1px 1px #fff; }
h1 span { color: #000080; }
.intro { color: #000; font-size: 12px; line-height: 1.45; }
.section-heading { padding-bottom: 6px; border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; }
.section-heading h2,
.time-card h2 { font-size: 12px; letter-spacing: 0; }
.section-heading p,
.time-card p { color: #404040; font-size: 10px; }
.count-pill { min-width: 28px; height: 24px; }

.person-card {
  padding: 11px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
}
.person-card:focus-within { border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px #000; }
.person-avatar { color: #000; border: 1px solid #000; }
.person-name { color: #000; font-size: 12px; }
.remove-person { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.remove-person:active { border-color: #404040 #fff #fff #404040; }

.address-field {
  min-height: 37px;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}
.address-field:focus-within { background: #fff; border-color: #000 #fff #fff #000; }
.address-field input { color: #000; font-size: 11px; }
.address-field input::placeholder { color: #808080; }
.address-field svg { stroke: #000; }

.autocomplete-menu {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: 2px 2px #000;
}
.autocomplete-results { padding: 2px; }
.autocomplete-option { min-height: 42px; color: #000; }
.autocomplete-option.is-active { color: #fff; background: #000080; }
.autocomplete-option.is-active small { color: #fff; }
.autocomplete-pin { color: #000; background: #c0c0c0; border: 1px solid #808080; }
.google-attribution { background: #fff; border-top: 1px solid #808080; }

.mode-segment {
  padding: 2px;
  gap: 2px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}
.mode-segment button {
  min-height: 31px;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
}
.mode-segment button:active,
.mode-segment button.selected {
  color: #fff;
  background: #000080;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
  transform: none;
}

.add-person { min-height: 39px; color: #000; border-style: solid; }
.add-icon { color: #000; background: #c0c0c0; border: 1px solid #808080; }
.time-card {
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px #000;
}
.time-icon { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.time-value { color: #fff; background: #000080; border: 1px solid #000; }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: #fff; border: 1px solid #000; }
input[type="range"]::-moz-range-track { height: 5px; background: #fff; border: 1px solid #000; }
input[type="range"]::-webkit-slider-thumb { width: 13px; height: 21px; margin-top: -9px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px #000; }
input[type="range"]::-moz-range-thumb { width: 10px; height: 18px; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px #000; }
.range-labels { color: #404040; }

.planner-footer {
  padding: 11px 20px 10px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  box-shadow: inset 0 1px #dfdfdf;
}
.find-button { min-height: 45px; color: #000; }
.find-button:hover { color: #000; background: #c0c0c0; box-shadow: 1px 1px #000; }
.button-arrow { color: #fff; background: #000080; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.planner-footer p { color: #404040; }

.map-panel { overflow: hidden; }
.map-control { min-height: 34px; color: #000; background: #c0c0c0; backdrop-filter: none; }
.map-zoom { background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px #000; backdrop-filter: none; }
.map-zoom button { width: 32px; height: 30px; border-width: 0; box-shadow: none; }
.map-zoom button + button { border-top: 1px solid #404040; }
.map-legend,
.insights-map-legend {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
  backdrop-filter: none;
}

.result-card,
.map-message-card,
.map-status,
.insights-progress {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080, 3px 3px #000;
  backdrop-filter: none;
}
.result-card { padding: 10px 11px 11px; }
.result-handle { background: #808080; box-shadow: 1px 1px #fff; }
.best-match { color: #fff; background: #000080; border-color: #404040 #fff #fff #404040; }
.fairness-score { color: #000; }
.venue-pagination > span { color: #000; }
.venue-pagination button { color: #000; background: #c0c0c0; }
.venue-pagination button:disabled { color: #808080; text-shadow: 1px 1px #fff; opacity: 1; }
.venue-rail { padding: 2px 2px 9px; scrollbar-color: #808080 #c0c0c0; }
.venue-card {
  min-height: 118px;
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}
.venue-card.is-best { color: #fff; background: #000080; border-color: #404040 #fff #fff #404040; }
.venue-card:hover,
.venue-card.is-best:hover { color: inherit; background: inherit; border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; transform: none; }
.venue-card-top > i { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.venue-rank,
.venue-card p,
.venue-card-meta { color: #404040; }
.venue-card.is-best .venue-rank,
.venue-card.is-best p,
.venue-card.is-best .venue-card-meta,
.venue-card.is-best .venue-card-meta strong { color: #fff; }
.venue-card-meta strong { color: #000080; text-decoration: underline; }
.travel-chips span { color: #000; background: #c0c0c0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.travel-chips strong { color: #000; }

.map-message-icon { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.map-message-eyebrow { color: #fff; background: #000080; padding: 2px 4px; }
.map-message-copy p { color: #000; }
.map-message-action { color: #000; }
.map-message-action span:last-child { color: #fff; background: #000080; }
.map-status,
.insights-progress { font-weight: 700; }
.status-spinner { border-color: #808080; border-top-color: #000080; }
.toast { color: #000; background: #ffffe1; border: 1px solid #000; box-shadow: 2px 2px #000; }

.insights-lab { color: #000; background: #008080; }
.insights-header {
  color: #fff;
  background: #000080;
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  backdrop-filter: none;
}
.insights-heading > span { color: #c0c0c0; letter-spacing: 1px; }
.insights-heading h1 { color: #fff; letter-spacing: 0; text-shadow: none; }
.insights-back { color: #000; }
.derby-tally { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.tally-side strong { color: #fff; background: #000080; border: 1px solid #000; }
.tally-side i { box-shadow: none; }
.insights-body { padding: 6px; gap: 6px; background: #008080; }
.experiment-rail,
.method-rail,
.insights-stage {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080, 2px 2px #000;
}
.experiment-rail,
.method-rail { padding: 18px; }
.insights-label { color: #000; letter-spacing: 0; }
.insights-select {
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}
.pair-description { color: #404040; }
.cohort-side { color: #000; background: #c0c0c0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.cohort-side > span { color: #000080; }
.cohort-side li { color: #000; }
.cohort-side li span { color: #000; background: #fff; border: 1px solid #808080; }
.versus-mark { color: #fff; background: #000080; border: 1px solid #000; box-shadow: none; }
.experiment-section,
.method-intro,
.method-steps { border-color: #808080; box-shadow: 0 1px #fff; }
.experiment-item { color: #000; background: #fff; border: 1px solid #808080; }
.experiment-item > span:first-child { color: #000; background: #c0c0c0; border: 1px solid #808080; }
.experiment-item strong { color: #000; }
.experiment-item small { color: #404040; }
.experiment-item.is-selected,
.experiment-item:hover:not(.is-selected) { color: #fff; background: #000080; border-color: #000080; }
.experiment-item.is-selected strong,
.experiment-item.is-selected small,
.experiment-item:hover:not(.is-selected) strong,
.experiment-item:hover:not(.is-selected) small { color: #fff; }
.experiment-item.is-selected > span:first-child { color: #000; background: #c0c0c0; border-color: #fff #404040 #404040 #fff; }
.insights-stage { padding: 8px; gap: 8px; overflow: hidden; }
.insights-map-shell { background: #808080; border: 2px solid; border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; }
.insights-map-placeholder { color: #000; background: #c0c0c0; }
.derby-scoreboard { color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 1px 1px #000; }
.scoreboard-kicker { color: #000080; }
.run-experiment { color: #000; background: #c0c0c0; box-shadow: 1px 1px #000; }
.run-experiment span:last-child { color: #fff; background: #000080; border: 1px solid #000; }
.score-track { height: 12px; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; }
.score-track i { background: #000080; }
.score-midline span { color: #fff; background: #000080; border-color: #000; }
.derby-verdict,
.derby-verdict.is-west,
.derby-verdict.is-east,
.derby-verdict.is-draw,
.derby-verdict.is-error,
.derby-verdict.is-empty { color: #000; background: #c0c0c0; border: 2px solid; border-color: #808080 #fff #fff #808080; }
.verdict-mark,
.method-number { color: #fff; background: #000080; border: 1px solid #000; box-shadow: none; }
.derby-verdict p span,
.method-intro p,
.method-steps ol { color: #000; }
.ledger-row { color: #000; background: #fff; border: 1px solid #808080; }
.ledger-row.is-west,
.ledger-row.is-east { color: #fff; background: #000080; }
.ledger-row.is-west strong,
.ledger-row.is-east strong { color: #fff; }
.method-note { color: #000; background: #ffffe1; border: 1px solid #000; }

@media (hover: hover) and (pointer: fine) {
  .button-secondary:hover,
  .add-person:hover,
  .map-control:hover,
  .map-message-action:hover,
  .insights-back:hover,
  .run-experiment:hover:not(:disabled),
  .venue-pagination button:hover:not(:disabled) { color: #000; background: #dfdfdf; }
  .mode-segment button:hover:not(.selected) { color: #000; }
  .autocomplete-option:hover { color: #fff; background: #000080; }
}

@media (max-width: 720px) {
  .app-shell { display: block; padding: 0; background: #008080; }
  .topbar { top: 0; height: 48px; border-width: 0 0 2px; border-bottom-color: #000; }
  .workspace { padding: 5px; gap: 7px; background: #008080; }
  .map-panel { top: 48px; }
  .planner-panel { border: 2px solid; border-color: #fff #000 #000 #fff; box-shadow: 2px 2px #000; }
  .planner-scroll { padding: 22px 16px 18px; }
  .planner-footer { padding-right: 16px; padding-left: 16px; }
  h1 { font-size: 38px; letter-spacing: -2px; }
  .result-card,
  .map-message-card { bottom: 9px; width: calc(100% - 18px); }
  .result-handle { display: none; }
  .venue-rail { grid-auto-columns: min(72vw, 245px); }
  .insights-lab { background: #008080; }
  .insights-header { height: 52px; padding: 3px 7px; }
  .insights-body { padding: 5px; }
  .experiment-rail,
  .method-rail { padding: 15px; border: 2px solid; border-color: #fff #000 #000 #fff; }
  .insights-stage { padding: 6px; }
}

@media (max-width: 440px) {
  .topbar { padding: 3px 5px; }
  .brand { font-size: 15px; }
  .brand-mark { width: 29px; height: 29px; }
  .topbar-actions { gap: 4px; }
  .button-secondary { min-height: 31px; padding: 0 7px; font-size: 10px; }
  .insights-launch { max-width: 103px; line-height: 1.05; }
  .result-card { padding: 9px; }
  .result-summary { gap: 4px; }
  .best-match,
  .fairness-score { padding-right: 6px; padding-left: 6px; font-size: 8px; }
  .venue-pagination > span { font-size: 7px; }
  .insights-heading h1 { font-size: 14px; }
}

/* Quirky system interactions */
.brand {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.brand:active { transform: translate(1px, 1px); }

.button-secondary:active,
.insights-back:active,
.add-person:active,
.map-control:active,
.map-zoom button:active,
.map-message-action:active,
.venue-pagination button:active,
.run-experiment:active,
.find-button:active,
.remove-person:active,
.mode-segment button:active { transform: translate(1px, 1px); }

.result-card,
.map-message-card {
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0ms !important;
}
.result-card.is-hidden,
.map-message-card.is-hidden { transition: opacity 110ms ease, transform 130ms ease, visibility 0ms 130ms !important; }
.toast { transition: opacity 150ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0ms !important; }
.insights-lab { transition: opacity 170ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0ms !important; }
.insights-lab.is-hidden { transition: opacity 120ms ease, transform 150ms ease, visibility 0ms 150ms !important; }
.keyboard-navigation .result-card,
.keyboard-navigation .map-message-card,
.keyboard-navigation .toast,
.keyboard-navigation .insights-lab,
.keyboard-navigation .about-dialog { transition-duration: 0s !important; }

.venue-card.is-best:not(.is-current) { color: #000; background: #ffffe1; }
.venue-card.is-best:not(.is-current) .venue-rank,
.venue-card.is-best:not(.is-current) p,
.venue-card.is-best:not(.is-current) .venue-card-meta { color: #404040; }
.venue-card.is-best:not(.is-current) .venue-card-meta strong { color: #000080; }
.venue-card.is-current,
.venue-card.is-current:hover { color: #fff; background: #000080; border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; transform: none; }
.venue-card.is-current .venue-rank,
.venue-card.is-current p,
.venue-card.is-current .venue-card-meta,
.venue-card.is-current .venue-card-meta strong { color: #fff; }

.map-status,
.insights-progress {
  display: grid;
  min-width: min(330px, calc(100% - 32px));
  min-height: 88px;
  padding: 30px 12px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: 8px;
}
.map-status::before,
.insights-progress::before {
  position: absolute;
  top: 3px;
  right: 3px;
  left: 3px;
  display: flex;
  height: 20px;
  padding: 0 5px;
  align-items: center;
  color: #fff;
  background: #000080;
  content: "Working - meetway.exe";
  font-size: 9px;
  font-weight: 700;
}
.insights-progress::before { content: "Running - travel-test.exe"; }
.windows-progress {
  position: relative;
  display: block;
  height: 13px;
  grid-column: 1 / -1;
  overflow: hidden;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}
.windows-progress i {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 28%;
  background: repeating-linear-gradient(90deg, #000080 0 10px, #fff 10px 12px);
  transform: translateX(-115%);
  animation: windows-progress 780ms linear infinite;
}
.map-status:not(.is-visible) .windows-progress i,
.insights-progress:not(.is-visible) .windows-progress i { animation-play-state: paused; }
.system-busy,
.system-busy button,
.system-busy a { cursor: progress !important; }

.pixel-burst {
  position: absolute;
  z-index: 30;
  bottom: 218px;
  left: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.pixel-burst i {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid #000;
  box-shadow: 1px 1px #fff;
  will-change: transform, opacity;
}

.about-dialog {
  width: min(430px, calc(100% - 28px));
  padding: 3px;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080, 4px 4px #000;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity 140ms ease, transform 180ms cubic-bezier(0.23, 1, 0.32, 1), display 180ms allow-discrete !important;
}
.about-dialog[open] { opacity: 1; transform: translateY(0) scale(1); }
@starting-style {
  .about-dialog[open] { opacity: 0; transform: translateY(8px) scale(.97); }
}
.about-dialog::backdrop { background: rgba(0, 0, 0, .42); }
.dialog-titlebar {
  display: flex;
  height: 25px;
  padding: 2px 2px 2px 5px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #000080;
  font-size: 11px;
}
.dialog-titlebar form { display: contents; }
.dialog-titlebar button,
.dialog-actions button {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
  cursor: pointer;
  font-weight: 700;
}
.dialog-titlebar button { width: 20px; height: 19px; padding: 0; line-height: 13px; }
.dialog-titlebar button:active,
.dialog-actions button:active { border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; transform: translate(1px, 1px); }
.about-dialog-body { display: grid; padding: 19px 18px 14px; grid-template-columns: 57px minmax(0, 1fr); gap: 15px; }
.about-icon {
  display: grid;
  width: 53px;
  height: 53px;
  place-items: center;
  color: #ffff00;
  background: #000080;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
  font-size: 28px;
}
.about-dialog-body h2 { margin: 0 0 3px; font-size: 18px; }
.about-dialog-body p { margin: 0 0 8px; color: #000; font-size: 10px; line-height: 1.35; }
.about-dialog-body dl { padding-top: 8px; margin: 12px 0 0; border-top: 1px solid #808080; box-shadow: inset 0 1px #fff; font-size: 9px; }
.about-dialog-body dl div { display: flex; justify-content: space-between; gap: 10px; }
.about-dialog-body dt { color: #404040; }
.about-dialog-body dd { margin: 0; text-align: right; }
.dialog-actions { display: flex; padding: 4px 18px 15px; justify-content: flex-end; }
.dialog-actions button { min-width: 78px; min-height: 28px; }

@media (hover: hover) and (pointer: fine) {
  .venue-card:hover:not(.is-current) { transform: translate(-1px, -1px); box-shadow: inset 1px 1px #000, 2px 2px #000; }
  .brand:hover .brand-mark { outline: 1px dotted #fff; outline-offset: 2px; }
}

@keyframes windows-progress {
  to { transform: translateX(360%); }
}

@media (max-width: 720px) {
  .pixel-burst { bottom: 232px; }
  .map-status,
  .insights-progress { min-width: min(310px, calc(100% - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  .result-card,
  .map-message-card,
  .toast,
  .insights-lab,
  .about-dialog { transition-property: opacity, visibility, display !important; transform: none !important; }
  .windows-progress i { animation: none !important; transform: translateX(125%); }
  .pixel-burst { display: none; }
}

/* Hierarchy and control clarity pass */
.time-card {
  padding: 3px 11px 11px;
  column-gap: 12px;
}

.time-card-titlebar {
  display: flex;
  grid-column: 1 / -1;
  min-height: 23px;
  margin-bottom: 10px;
  padding: 0 6px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #000080;
  font-size: 9px;
  font-weight: 700;
}

.time-card-titlebar > span:last-child {
  color: #c0c0c0;
  font-size: 8px;
  font-weight: 400;
}

.time-value {
  display: grid;
  min-width: 84px;
  min-height: 45px;
  padding: 4px 8px 3px;
  place-content: center;
  color: #000;
  text-align: center;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}

.time-value strong {
  color: #000080;
  font-size: 22px;
  line-height: .9;
}

.time-value span {
  margin-top: 3px;
  color: #404040;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #000080 var(--range-progress, 33%), #fff var(--range-progress, 33%));
}

input[type="range"]::-moz-range-track { background: #fff; }
input[type="range"]::-moz-range-progress { height: 5px; background: #000080; border: 1px solid #000; }

.planner-footer-actions {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
}

.footer-time-limit {
  display: grid;
  min-width: 0;
  min-height: 45px;
  padding: 5px 8px;
  align-content: center;
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
}

.footer-time-limit > span {
  color: #404040;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
}

.footer-time-limit strong {
  margin-top: 3px;
  color: #000080;
  font-size: 14px;
  line-height: 1;
}

.planner-footer p { margin-top: 7px; }

.win95-select { position: relative; }

.insights-select {
  min-height: 42px;
  padding: 0 40px 0 12px;
  appearance: none;
  color: #000;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  border-radius: 0;
  box-shadow: inset 1px 1px #000;
  font: 700 11px/1 "DM Sans", sans-serif;
}

.insights-select::-ms-expand { display: none; }
.insights-select option { color: #000; background: #fff; font-weight: 700; }

.win95-select-button {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  display: grid;
  width: 29px;
  place-items: center;
  pointer-events: none;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
}

.win95-select-button i {
  width: 0;
  height: 0;
  border-top: 6px solid #000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.win95-select:focus-within .win95-select-button {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.rail-heading-row > span:last-child { color: #404040; }

.run-control {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.run-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000080;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.run-source i {
  width: 7px;
  height: 7px;
  background: #00a000;
  border: 1px solid #000;
}

.run-experiment {
  min-width: 198px;
  min-height: 49px;
  padding: 0 7px 0 15px;
  color: #fff;
  background: #000080;
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px #fff, 2px 2px #000;
  font-size: 11px;
  letter-spacing: .1px;
}

.run-experiment span:last-child {
  width: 31px;
  height: 31px;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: 12px;
}

.run-experiment:focus-visible {
  outline-color: #fff;
  outline-offset: -7px;
}

.run-experiment:disabled { color: #dfdfdf; background: #000080; opacity: .8; }

@media (hover: hover) and (pointer: fine) {
  .run-experiment:hover:not(:disabled) { color: #fff; background: #0000a8; }
}

@media (max-width: 720px) {
  .insights-stage {
    display: flex;
    flex-direction: column;
  }

  .derby-scoreboard {
    order: -1;
    margin: 0 0 6px;
  }
}

/* Friend-group first run */
.session-start {
  padding: 3px;
  margin-bottom: 24px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: 2px 2px #000;
}

.session-start[hidden] { display: none; }

.session-start-titlebar {
  display: flex;
  min-height: 25px;
  padding: 0 6px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #000080;
  font-size: 10px;
}

.session-start-titlebar span { color: #c0c0c0; font-size: 9px; }
.session-start-body { display: grid; padding: 15px 12px 11px; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; }
.session-start-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #ffff00;
  background: #000080;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: 21px;
}
.session-start h2 { margin: 0 0 5px; font-size: 15px; line-height: 1.2; }
.session-start-body p { margin: 0; color: #202020; font-size: 11px; line-height: 1.45; }
.session-steps { display: grid; padding: 0 12px 12px; margin: 0; grid-template-columns: repeat(3, 1fr); gap: 5px; list-style: none; }
.session-steps li { display: flex; min-width: 0; align-items: center; gap: 5px; font-size: 9px; line-height: 1.2; }
.session-steps strong { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; color: #fff; background: #000080; border: 1px solid #000; }
.start-session-button,
.join-card button,
.use-location,
.venue-open,
.venue-vote {
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
  cursor: pointer;
  font-weight: 700;
}
.start-session-button {
  display: flex;
  width: calc(100% - 24px);
  min-height: 44px;
  padding: 0 7px 0 12px;
  margin: 0 12px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #000080;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  font-size: 12px;
}
.start-session-button > span:last-child { display: grid; width: 27px; height: 27px; place-items: center; color: #000; background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff; }
.start-session-button:disabled { color: #c0c0c0; cursor: progress; }
.session-access-note { margin: 9px 12px 10px; color: #404040; font-size: 9px; line-height: 1.4; }

.is-new-session .planner-scroll > .schedule-card,
.is-new-session .planner-scroll > .join-card,
.is-new-session .planner-scroll > .section-heading,
.is-new-session .people-list,
.is-new-session .add-person,
.is-new-session .time-card,
.is-new-session .planner-footer { display: none; }

.join-card {
  display: grid;
  padding: 10px;
  margin: 0 0 20px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  background: #ffffe1;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 1px 1px #000;
}
.join-card[hidden] { display: none; }
.join-card-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #ffff00; background: #000080; border: 1px solid #000; font-size: 18px; }
.join-card-copy { min-width: 0; }
.join-card-copy > strong { font-size: 12px; }
.join-card-copy > p { margin: 2px 0 7px; color: #404040; font-size: 10px; line-height: 1.35; }
.join-name { display: grid; gap: 3px; }
.join-name span { font-size: 9px; font-weight: 700; }
.join-name input { min-width: 0; width: 100%; min-height: 34px; padding: 5px 7px; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; font-size: 12px; }
.join-card button { min-height: 34px; padding: 0 10px; align-self: end; font-size: 10px; }

.person-card.is-you { outline: 2px solid #000080; outline-offset: -5px; }
.you-badge { padding: 2px 5px; color: #fff; background: #000080; border: 1px solid #000; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.use-location { display: inline-flex; min-height: 31px; padding: 0 8px; margin: 0 0 9px; align-items: center; gap: 6px; font-size: 10px; }
.use-location[hidden] { display: none; }
.use-location span { font-size: 15px; line-height: 1; }
.use-location:disabled { color: #808080; text-shadow: 1px 1px #fff; cursor: progress; }

.venue-card { grid-template-rows: auto auto auto 1fr auto; }
.venue-card-actions { display: flex; margin-top: 9px; align-items: center; justify-content: space-between; gap: 7px; }
.venue-open,
.venue-vote { display: inline-flex; min-height: 28px; padding: 0 7px; align-items: center; justify-content: center; color: #000080; font-size: 9px; text-decoration: none; }
.venue-vote { gap: 4px; color: #000; }
.venue-vote > span:first-child { color: #808080; }
.venue-vote.is-selected { color: #fff; background: #000080; border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px #000; }
.venue-vote.is-selected > span:first-child { color: #ff80c0; }
.venue-vote:disabled { cursor: progress; opacity: .75; }
.venue-card.is-current .venue-open { color: #000080; background: #c0c0c0; }
.venue-card.is-current .venue-vote:not(.is-selected) { color: #000; background: #c0c0c0; }

@media (max-width: 440px) {
  .session-start-body { padding-right: 9px; padding-left: 9px; }
  .session-steps { grid-template-columns: 1fr; padding-right: 9px; padding-left: 9px; }
  .start-session-button { width: calc(100% - 18px); margin-right: 9px; margin-left: 9px; }
  .session-access-note { margin-right: 9px; margin-left: 9px; }
  .join-card { grid-template-columns: 31px minmax(0, 1fr); }
  .join-card button { grid-column: 2; width: 100%; }
}

@media (max-width: 440px) {
  .planner-footer-actions { grid-template-columns: 84px minmax(0, 1fr); }
  .footer-time-limit { padding-right: 6px; padding-left: 6px; }
  .scoreboard-heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .run-control {
    width: 100%;
    justify-items: stretch;
  }
  .run-source { justify-self: start; }
  .run-experiment {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0 7px 0 15px;
  }
  .run-experiment > span:first-child {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* Responsive readability pass */
:root {
  --ui-font: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
}

body,
body *,
body *::before,
body *::after {
  font-family: var(--ui-font) !important;
}

body {
  font-size: 12px;
  line-height: 1.4;
}

.button-secondary { min-height: 36px; font-size: 12px; }
.plan-date,
.demo-badge { font-size: 11px; }
.intro { margin-bottom: 26px; font-size: 13px; line-height: 1.5; }
.section-heading h2,
.time-card h2 { font-size: 13px; }
.section-heading p,
.time-card p { font-size: 11px; line-height: 1.35; }
.person-avatar { font-size: 11px; }
.person-name { font-size: 13px; }
.address-field { min-height: 40px; height: auto; }
.address-field input { font-size: 12px; }
.autocomplete-copy strong { font-size: 12px; }
.autocomplete-copy small { font-size: 10px; }
.autocomplete-empty { font-size: 11px; }
.mode-segment button { min-height: 33px; height: auto; font-size: 11px; }
.add-person { font-size: 12px; }
.time-card-titlebar { font-size: 10px; }
.time-card-titlebar > span:last-child { font-size: 9px; }
.time-value span,
.footer-time-limit > span { font-size: 9.5px; }
.range-labels { font-size: 10px; }
.planner-footer p { font-size: 10px; line-height: 1.35; }
.map-control { font-size: 12px; }
.map-legend { font-size: 10px; }

.result-card {
  width: min(820px, calc(100% - 38px));
  padding: 14px 16px 15px;
}

.best-match,
.fairness-score { min-height: 26px; font-size: 10px; }
.venue-pagination > span { font-size: 10px; }
.venue-pagination button { width: 31px; height: 31px; font-size: 14px; }
.venue-rail { grid-auto-columns: 245px; }
.venue-card { min-height: 134px; padding: 11px; }
.venue-rank { font-size: 9px; line-height: 1.2; }
.venue-card h2 { font-size: 13px; line-height: 1.25; }
.venue-card p { font-size: 10.5px; line-height: 1.35; }
.venue-card-meta { font-size: 10px; line-height: 1.25; }
.venue-card-meta strong { font-size: 10px; }
.travel-chips span { min-height: 30px; font-size: 10.5px; }
.map-message-eyebrow { font-size: 10px; }
.map-message-copy h2 { font-size: 17px; }
.map-message-copy p { font-size: 11px; line-height: 1.5; }
.map-message-action { min-height: 42px; font-size: 11px; }
.toast { font-size: 12px; line-height: 1.4; }
.about-dialog-body p { font-size: 11px; line-height: 1.45; }
.about-dialog-body dl { font-size: 10px; line-height: 1.45; }

.insights-heading > span { font-size: 9.5px; }
.insights-heading h1 { font-size: 23px; line-height: 1.1; }
.derby-tally { font-size: 11px; }
.insights-label { font-size: 10px; }
.insights-select { font-size: 12px; }
.pair-description { min-height: 0; font-size: 11px; line-height: 1.45; }
.cohort-side > span { font-size: 10px; line-height: 1.25; }
.cohort-side li { font-size: 10px; line-height: 1.3; }
.cohort-side li span { font-size: 9px; }
.versus-mark { font-size: 9px; }
.rail-heading-row > span:last-child { font-size: 10px; }
.experiment-item {
  min-height: 56px;
  padding: 8px 9px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
}
.experiment-item > span:first-child { width: 29px; height: 29px; font-size: 10px; }
.experiment-item strong { font-size: 11.5px; line-height: 1.25; }
.experiment-item small { font-size: 10px; line-height: 1.2; }
.insights-map-placeholder { font-size: 11px; }
.insights-map-legend span { font-size: 10px; }
.scoreboard-kicker { font-size: 10px; }
.scoreboard-heading h2 { font-size: 19px; line-height: 1.2; }
.scoreboard-description {
  display: none;
  max-width: 52ch;
  margin: 5px 0 0;
  color: #202020;
  font-size: 11px;
  line-height: 1.4;
}
.run-source { font-size: 9.5px; }
.run-experiment { min-height: 51px; font-size: 12px; }
.score-meta span { font-size: 10px; }
.score-meta strong { font-size: 19px; }
.side-score p { font-size: 10px; line-height: 1.35; }
.score-midline span { font-size: 9px; }
.derby-verdict strong { font-size: 11px; }
.derby-verdict p span { font-size: 10.5px; line-height: 1.4; }
.method-number { font-size: 11px; }
.method-intro h2 { font-size: 18px; line-height: 1.25; }
.method-intro p { font-size: 11px; line-height: 1.5; }
.method-steps h3,
.result-ledger h3 { font-size: 10px; line-height: 1.3; }
.method-steps ol { gap: 11px; }
.method-steps li { font-size: 11px; line-height: 1.5; }
.result-ledger .rail-heading-row > span { font-size: 10px; }
.ledger-row {
  min-height: 37px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  font-size: 10px;
}
.ledger-row > span:first-child,
.ledger-row strong { font-size: 9.5px; }
.method-note { font-size: 10px; line-height: 1.45; }

@media (max-width: 1160px) {
  .scoreboard-description { display: block; }
}

@media (max-width: 840px) {
  body { overflow: auto; }

  .app-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    padding: 0;
    overflow: visible;
    background: #008080;
  }

  .topbar {
    position: sticky;
    top: 0;
    height: 48px;
    border-width: 0 0 2px;
    border-bottom-color: #000;
  }

  .workspace {
    display: flex;
    padding: 5px;
    flex-direction: column;
    gap: 7px;
    background: #008080;
  }

  .planner-panel {
    position: relative;
    z-index: 7;
    display: block;
    overflow: visible;
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    box-shadow: 2px 2px #000;
  }

  .planner-scroll {
    padding: 24px max(16px, calc((100vw - 680px) / 2)) 20px;
    overflow: visible;
  }

  .planner-footer {
    position: sticky;
    z-index: 10;
    bottom: 0;
    padding: 11px max(16px, calc((100vw - 680px) / 2)) max(11px, env(safe-area-inset-bottom));
  }

  .planner-footer-actions,
  .planner-footer > p {
    width: 100%;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
  }

  h1 { font-size: clamp(34px, 7vw, 44px); line-height: 1; }
  .intro { max-width: 46rem; font-size: 14px; }

  .map-panel,
  .map-panel.showing-results {
    position: relative;
    top: auto;
    z-index: 2;
    height: clamp(500px, 70vh, 640px);
    min-height: 500px;
  }

  .result-card,
  .map-message-card {
    bottom: 10px;
    width: calc(100% - 18px);
  }

  .venue-rail { grid-auto-columns: min(78vw, 260px); }
  .remove-person { width: 32px; height: 32px; opacity: 1; }
  .mode-segment button { min-height: 38px; }
  .add-person { min-height: 44px; }
  .map-control { min-height: 40px; }
  .scoreboard-description { display: block; }
}

@media (max-width: 720px) {
  .insights-heading h1 { font-size: 17px; }
  .experiment-rail,
  .method-rail { padding: 18px; }
  .insights-stage { padding: 8px; }
  .derby-scoreboard { padding: 16px; }
}

@media (max-width: 440px) {
  .topbar { padding: 3px 5px; }
  .planner-scroll { padding: 21px 14px 18px; }
  .planner-footer { padding-right: 12px; padding-left: 12px; }
  h1 { font-size: clamp(33px, 10.5vw, 38px); }
  .intro { margin-bottom: 24px; font-size: 13px; }
  .button-secondary { font-size: 10px; }
  .result-card { padding: 10px; }
  .result-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .best-match,
  .fairness-score { padding-right: 7px; padding-left: 7px; font-size: 10px; }
  .venue-pagination > span { font-size: 9px; line-height: 1.15; text-align: center; }
  .venue-card { min-height: 138px; }
  .travel-chips span { font-size: 10px; }
  .insights-heading h1 { font-size: 15px; }
  .insights-label { font-size: 10px; }
  .pair-description { font-size: 10.5px; }
  .cohort-side { padding: 11px 10px; }
  .cohort-side li { font-size: 9.5px; }
  .experiment-rail,
  .method-rail { padding: 16px 14px; }
  .scoreboard-heading h2 { font-size: 18px; }
  .scoreboard-description { font-size: 10.5px; }
  .run-experiment { min-height: 52px; font-size: 12px; }
}

@media (max-width: 360px) {
  .brand > span:last-child { display: none; }
  .brand-mark { width: 31px; height: 31px; }
  .topbar-actions { gap: 3px; }
  .button-secondary { padding-right: 6px; padding-left: 6px; }
  .insights-launch { max-width: 108px; }
  .planner-footer-actions { grid-template-columns: 78px minmax(0, 1fr); }
  .find-button { padding-left: 10px; font-size: 12px; }
}

/* Real meeting schedule */
.plan-date {
  display: inline-flex;
  min-width: 0;
  max-width: calc(100% - 74px);
  align-items: center;
  gap: 6px;
}

#plan-date-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-card {
  padding: 3px 10px 10px;
  margin: 0 0 24px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px #000;
}

.schedule-titlebar {
  display: flex;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0 6px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: #000080;
  font-size: 10px;
}

.schedule-titlebar > span {
  color: #c0c0c0;
  font-size: 9px;
}

.schedule-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, .56fr);
  gap: 9px;
}

.schedule-field {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.schedule-field > span {
  color: #000;
  font-size: 11px;
  font-weight: 700;
}

.schedule-field input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 6px 7px;
  color: #000;
  color-scheme: light;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  box-shadow: inset 1px 1px #000;
  font-size: 12px;
  font-weight: 700;
}

.schedule-field input:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.schedule-field input:user-invalid {
  color: #800000;
  background: #ffffe1;
}

.schedule-field input::-webkit-calendar-picker-indicator {
  padding: 7px 5px;
  margin: -5px -5px -5px 3px;
  background-color: #c0c0c0;
  border: 1px solid #808080;
  cursor: pointer;
}

.schedule-note {
  display: flex;
  margin: 9px 0 0;
  align-items: flex-start;
  gap: 7px;
  color: #202020;
  font-size: 10px;
  line-height: 1.4;
}

.schedule-note > span:first-child {
  display: grid;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #fff;
  background: #000080;
  border: 1px solid #000;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
}

@media (max-width: 840px) {
  .schedule-card { max-width: 680px; }
  .schedule-field input { min-height: 44px; font-size: 13px; }
  .schedule-field > span { font-size: 12px; }
  .schedule-note { font-size: 11px; }
}

@media (max-width: 440px) {
  .schedule-card { margin-bottom: 22px; }
  .schedule-fields { grid-template-columns: minmax(0, 1fr) 108px; gap: 7px; }
  .schedule-field input { padding-right: 4px; padding-left: 5px; font-size: 12px; }
  .schedule-note { font-size: 10px; }
}

@media (max-width: 350px) {
  .schedule-fields { grid-template-columns: 1fr; }
}

/* Shared friend-group room */
.shared-plan-status {
  display: flex;
  min-height: 29px;
  padding: 7px 2px 0;
  margin-top: 9px;
  align-items: center;
  gap: 6px;
  color: #202020;
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px #fff;
  font-size: 10px;
}

.shared-plan-status[hidden] { display: none; }

.shared-plan-status strong {
  color: #000080;
  white-space: nowrap;
}

#shared-sync-status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-status-light {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  background: #00a000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px #80ff80;
}

.shared-plan-status[data-status="saving"] .shared-status-light,
.shared-plan-status[data-status="waiting"] .shared-status-light {
  background: #ffff00;
  box-shadow: inset 1px 1px #fff;
}

.shared-plan-status[data-status="error"] .shared-status-light {
  background: #c00000;
  box-shadow: inset 1px 1px #ff8080;
}

@media (max-width: 440px) {
  .shared-plan-status {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 10px;
  }
  #shared-sync-status {
    width: 100%;
    margin-left: 15px;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 840px) {
  .join-name input,
  .join-card button,
  .use-location,
  .venue-open,
  .venue-vote {
    min-height: 44px;
  }

  .venue-open,
  .venue-vote {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 10px;
  }
}