@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/instrument-sans-400.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("/fonts/instrument-sans-500.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/fonts/instrument-sans-600.ttf") format("truetype");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("/fonts/instrument-sans-700.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/fonts/fraunces-600.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("/fonts/fraunces-700.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url("/fonts/fraunces-800.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --body-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: "Fraunces", Georgia, serif;
  --soft-mono-font: "SF Mono", "SFMono-Regular", "Cascadia Code", "Roboto Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-family: var(--body-font);
  --page-bg: #f5f3ee;
  --panel-bg: #fffdf8;
  --card-bg: #fff;
  --autofill-bg: #fff;
  --solid-autofill-bg: #eef6f3;
  --soft-bg: #f8f4ed;
  --muted-bg: #ebe4d8;
  --text: #262626;
  --muted-text: #60594f;
  --placeholder-text: #b8afa2;
  --soft-white: #fffaf2;
  --border: #ded8cd;
  --accent: #2f6269;
  --accent-strong: #17474e;
  --on-accent: #fffaf2;
  --danger-bg: #fff1ec;
  --danger-text: #8a3422;
  --danger-border: #d9b9ad;
  --danger-shadow: inset 0 1px rgba(255, 255, 255, 0.6), 0 8px 18px rgba(138, 52, 34, 0.08);
  --success-bg: #e4f5ec;
  --success-text: #1f6b43;
  --notify-off-text: #9b5a52;
  --board-brief-bg: linear-gradient(135deg, #fffaf1 0%, #f8f4ed 58%, #f2eee5 100%);
  --board-readiness-bg: #fff;
  --board-lunch-bg: linear-gradient(135deg, #fbfff9 0%, #f3f7f3 56%, #edf4f0 100%);
  --board-row-bg: #fff;
  --board-row-border: #e2dbcf;
  --board-row-text: #645d53;
  --board-muted-text: #766d61;
  --board-panel-shadow: inset 0 1px rgba(255, 255, 255, 0.62);
  --chip-bg: #fbf7ef;
  --chip-border: #d9d0bf;
  --chip-text: #524838;
  --chip-selected-bg: #d9eff0;
  --chip-selected-text: #17474e;
  --form-control-gap: 10px;
  --form-section-gap: 22px;
  --app-chrome-bg: #063b37;
  --safe-bottom-max: env(safe-area-max-inset-bottom, 0px);
  background: var(--page-bg);
  color: var(--text);
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

:root[data-font-preset="system"] {
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-font-preset="lucida"] {
  --body-font: "Lucida Grande", "Lucida Sans Unicode", "Segoe UI", Verdana, sans-serif;
  --display-font: "Lucida Console", Monaco, Consolas, "Courier New", monospace;
}

:root[data-font-preset="editorial"] {
  --body-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: Georgia, "Times New Roman", Times, serif;
}

:root[data-font-preset="mono"] {
  --body-font: "Lucida Console", Monaco, Consolas, "Courier New", monospace;
  --display-font: "Lucida Console", Monaco, Consolas, "Courier New", monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #161615;
  --panel-bg: #20201e;
  --card-bg: #262622;
  --autofill-bg: #262622;
  --solid-autofill-bg: #17211f;
  --soft-bg: #24231f;
  --muted-bg: #333029;
  --text: #f4efe5;
  --muted-text: #c7beb0;
  --placeholder-text: #857f75;
  --soft-white: #f2ecdf;
  --border: #3c3932;
  --accent: #79b9b3;
  --accent-strong: #9cd4ce;
  --on-accent: #082d2a;
  --danger-bg: #3a211c;
  --danger-text: #ffc5b8;
  --danger-border: #6f3a30;
  --danger-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  --success-bg: #1b3529;
  --success-text: #9be7bd;
  --notify-off-text: #d39a91;
  --board-brief-bg: linear-gradient(135deg, #302d24 0%, #28261f 58%, #22211d 100%);
  --board-readiness-bg: #22211f;
  --board-lunch-bg: linear-gradient(135deg, #203532 0%, #1d2c2a 58%, #1a2321 100%);
  --board-row-bg: #262622;
  --board-row-border: #3c3932;
  --board-row-text: #c7beb0;
  --board-muted-text: #aaa194;
  --board-panel-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.12);
  --chip-bg: #24231f;
  --chip-border: #3c3932;
  --chip-text: #d7cfc3;
  --chip-selected-bg: #203b39;
  --chip-selected-text: #d8f4f0;
  --app-chrome-bg: #062b29;
  background: #161615;
}

:root[data-theme="dark"] body {
  background: #161615;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--page-bg);
}

[hidden] {
  display: none !important;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body-font);
}

.app-booting body {
  visibility: hidden;
}

.app-booting *,
.app-booting *::before,
.app-booting *::after {
  transition: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  touch-action: manipulation;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shell {
  width: min(1220px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.page-controls {
  position: absolute;
  z-index: 5000;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-controls[data-sayhi-host-surface] {
  align-items: center;
}

.page-controls[data-sayhi-account-surface="root"] {
  gap: 9px;
}

.quick-copy-status {
  position: static;
  max-width: min(190px, calc(100vw - 176px));
  margin: 0;
  border: 0;
  padding: 0 2px 0 0;
  background: transparent;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.quick-copy-status.is-success {
  color: var(--success-text);
}

.quick-copy-status.is-error {
  color: var(--danger-text);
}

.quick-copy-status[hidden] {
  display: none !important;
}

.theme-toggle,
.about-quick,
.invite-quick,
.results-quick,
.wizard-toggle {
  width: 40px;
  min-height: 40px;
  border: 1px solid var(--border);
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  font-weight: 900;
}

.theme-toggle {
  border-radius: 999px;
  font-size: 1.1rem;
}

.sayhi-root-view-button {
  position: relative;
  align-self: center;
  width: 36px;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 999px;
  padding: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--muted-text) 8%, transparent), color-mix(in srgb, var(--muted-text) 8%, transparent)),
    color-mix(in srgb, var(--panel-bg) 86%, transparent);
  box-shadow: none;
}

.sayhi-root-view-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-text) 72%, var(--panel-bg));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transform: translateY(-50%);
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.sayhi-root-view-button.is-selected {
  border-color: color-mix(in srgb, var(--accent) 66%, var(--border));
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 70%, transparent)),
    color-mix(in srgb, var(--panel-bg) 86%, transparent);
}

.sayhi-root-view-button.is-selected::after {
  background: var(--on-accent);
  transform: translate(15px, -50%);
}

.sayhi-root-view-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 3px;
}

.user-feature-shell {
  position: relative;
}

.user-feature-button {
  position: relative;
  z-index: 1;
  width: 42px;
  min-height: 42px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.82rem;
  font-weight: 920;
  letter-spacing: 0.03em;
}

.user-feature-button.avatar-1 { background: #2f6269; }
.user-feature-button.avatar-2 { background: #8b4f39; }
.user-feature-button.avatar-3 { background: #6e5b2e; }
.user-feature-button.avatar-4 { background: #4e6650; }
.user-feature-button.avatar-5 { background: #6b4f70; }
.user-feature-button.avatar-6 { background: #8c3f55; }

.user-feature-button.avatar-1,
.user-feature-button.avatar-2,
.user-feature-button.avatar-3,
.user-feature-button.avatar-4,
.user-feature-button.avatar-5,
.user-feature-button.avatar-6 {
  color: var(--soft-white);
}

.user-feature-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.user-feature-menu {
  position: absolute;
  z-index: 5200;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 5px;
  width: min(286px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  background: var(--panel-bg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.user-feature-menu[hidden] {
  display: none !important;
}

.user-feature-profile {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding: 6px 8px 10px;
}

.user-feature-profile strong {
  color: var(--text);
  font-size: 0.92rem;
}

.user-feature-profile span {
  color: var(--muted-text);
  font-size: 0.76rem;
}

.user-feature-menu button {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 9px;
  background: transparent;
  color: var(--text);
  font-weight: 820;
  text-align: left;
}

.user-feature-menu button:hover,
.user-feature-menu button:focus-visible {
  background: var(--soft-bg);
}

.user-feature-menu svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-quick,
.invite-quick {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
}

.about-quick svg,
.invite-quick svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results-quick {
  position: relative;
  border-radius: 999px;
}

.invite-quick.copied {
  border-color: var(--success-text);
  background: var(--success-bg);
  color: var(--success-text);
}

.results-quick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: translate(-50%, -50%);
}

.results-quick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
  transform: translate(-28%, -50%);
}

.results-quick.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.wizard-toggle {
  display: none !important;
}

.wizard-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.entry-step,
.auth-step,
.about-step,
.rooms-step {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: 28px;
  align-content: start;
  align-items: start;
  padding-top: clamp(6px, 2vh, 18px);
}

.brand-lockup {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.brand-lockup.compact {
  align-content: start;
}

.brand-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  font-weight: 760;
  box-shadow: var(--button-shadow-strong);
}

.about-home-button {
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.about-home-button:hover,
.about-home-button:focus-visible {
  filter: saturate(1.08);
  transform: translateY(-1px);
  box-shadow: var(--button-shadow-strong);
}

.brand-menu-shell {
  position: relative;
}

.brand-menu-button {
  cursor: pointer;
  text-align: center;
}

.brand-menu-button:focus-visible {
  outline: 3px solid rgba(61, 111, 117, 0.28);
  outline-offset: 3px;
}

.brand-menu {
  position: absolute;
  z-index: 2100;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  min-width: 168px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px;
  background: var(--panel-bg);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}

.brand-menu[hidden] {
  display: none !important;
}

.brand-menu button {
  min-height: 36px;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--text);
  font-weight: 820;
  text-align: left;
  white-space: nowrap;
}

.brand-menu button:hover,
.brand-menu button:focus-visible {
  background: var(--accent);
  color: var(--on-accent);
}

.brand-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.brand-menu button:disabled:hover,
.brand-menu button:disabled:focus-visible {
  background: transparent;
  color: var(--text);
}

.entry-card,
.auth-card,
.about-card,
.rooms-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 18px 50px rgba(32, 24, 14, 0.08);
}

.entry-card,
.auth-card,
.about-card,
.rooms-card {
  display: grid;
  gap: 14px;
  align-self: start;
  margin-top: clamp(88px, 13vh, 132px);
  padding: 18px;
}

.entry-card p,
.auth-card p,
.about-card p,
.rooms-card p {
  margin-bottom: 0;
  color: var(--muted-text);
  line-height: 1.45;
}

.rooms-step {
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
}

.rooms-lockup .brand-mark {
  cursor: pointer;
}

.rooms-card {
  max-width: 760px;
}

.rooms-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: 14px;
  align-items: end;
}

.rooms-card h2 {
  margin: 0 0 4px;
  color: var(--text);
}

.consensus-type-field {
  display: grid;
  gap: 7px;
  color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.consensus-type-field select {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--card-bg);
  color: var(--text);
  font-weight: 850;
}

.rooms-status {
  min-height: 20px;
  color: var(--muted-text);
  font-size: 0.86rem;
  font-weight: 750;
}

.rooms-status.is-error {
  color: var(--danger-text);
}

.rooms-list {
  display: grid;
  gap: 10px;
}

.rooms-scope-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-bg) 78%, transparent);
}

.rooms-scope-filters button {
  min-width: 0;
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted-text);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.rooms-scope-filters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(31, 24, 14, 0.08);
}

.rooms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rooms-filters button {
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--soft-bg);
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 880;
}

.rooms-filters button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  background: var(--accent);
  color: var(--on-accent);
}

.rooms-filters button:disabled {
  cursor: default;
  opacity: 0.42;
}

.room-row-shell {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  touch-action: pan-y;
}

.room-row-shell.is-actions-open .room-row {
  transform: translateX(calc(-1 * var(--room-action-width, 86px)));
}

.room-row-action-tray {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86px;
  align-items: stretch;
  justify-content: end;
  width: var(--room-action-width, 86px);
  overflow: hidden;
  border-radius: 16px;
}

.room-action-button {
  display: grid;
  gap: 4px;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 8px 6px;
  background: var(--muted-bg);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 930;
}

.room-action-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-action-button.is-danger {
  background: color-mix(in srgb, var(--danger-text, #b44b45) 22%, var(--muted-bg));
  color: var(--danger-text, #b44b45);
}

.room-action-button.is-confirming {
  background: var(--danger-text, #b44b45);
  color: #fffaf2;
}

:root[data-theme="dark"] .room-action-button {
  background: #173f3a;
  color: #e8dccd;
}

:root[data-theme="dark"] .room-action-button.is-soft {
  background: #193935;
  color: #d6eee8;
}

:root[data-theme="dark"] .room-action-button.is-danger {
  background: #3a2320;
  color: #ffb6aa;
}

:root[data-theme="dark"] .room-action-button.is-confirming {
  background: #c8463c;
  color: #fff7ed;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 242, 0.18);
}

.room-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px minmax(220px, 1fr) minmax(144px, 176px) minmax(116px, 140px) 66px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  text-align: left;
  transition:
    transform 170ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.room-row:hover,
.room-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: var(--soft-bg);
}

.room-row-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display-font);
  font-size: 1.1rem;
  font-weight: 900;
}

.room-row-icon span {
  position: relative;
  z-index: 1;
}

.room-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: center;
}

.room-row-main strong {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-row-main small {
  display: block;
  overflow: hidden;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 640;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-row-tags {
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow: hidden;
}

.room-row-tags em {
  max-width: 9ch;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-bg));
  color: var(--accent);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-row-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 14px;
  justify-items: start;
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 780;
  white-space: nowrap;
}

.room-row-meta em {
  color: var(--accent);
  font-style: normal;
  font-weight: 950;
}

.room-row-meta span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-row-glance {
  display: grid;
  gap: 6px;
  min-width: 0;
  justify-items: start;
}

.room-row-people {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 24px;
  color: var(--text);
}

.room-person-dot {
  display: block;
  width: 22px;
  height: 22px;
  margin-right: -7px;
  border: 2px solid var(--card-bg);
  border-radius: 999px;
  background: var(--accent);
}

.room-person-dot.tone-1 { background: var(--coral); }
.room-person-dot.tone-2 { background: var(--gold); }
.room-person-dot.tone-3 { background: #7bb6ff; }
.room-person-dot.tone-4 { background: #b7df93; }
.room-person-dot.avatar-1 { background: #2f6269; }
.room-person-dot.avatar-2 { background: #8b4f39; }
.room-person-dot.avatar-3 { background: #6e5b2e; }
.room-person-dot.avatar-4 { background: #4e6650; }
.room-person-dot.avatar-5 { background: #6b4f70; }
.room-person-dot.avatar-6 { background: #8c3f55; }

.room-row-people strong {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  margin-left: 9px;
  place-items: center;
  border-radius: 999px;
  background: var(--soft-bg);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 950;
}

.results-diners-ready {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 0;
  min-width: 0;
  letter-spacing: 0;
}

.results-diners-ready-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.results-diners-ready-button:focus-visible {
  border-radius: 999px;
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 3px;
}

.results-diners-ready .room-row-people {
  flex: 0 0 auto;
}

.results-diners-ready .room-row-people strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 58px;
  padding: 0 10px;
  letter-spacing: 0;
  white-space: nowrap;
}

.results-diners-ready-badge em {
  color: color-mix(in srgb, currentColor 78%, var(--muted-text));
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 900;
}

.results-diners-ready .room-person-dot {
  border-color: color-mix(in srgb, var(--panel-bg) 94%, transparent);
}

.results-diners-popover {
  position: absolute;
  z-index: 500;
  right: 50%;
  bottom: calc(100% + 10px);
  display: grid;
  width: min(280px, calc(100vw - 32px));
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
  box-shadow: 0 18px 42px rgba(31, 24, 14, 0.18);
  color: var(--text);
  text-align: left;
  transform: translateX(50%);
  white-space: normal;
}

.results-diners-popover[hidden] {
  display: none;
}

.results-diners-popover::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 98%, transparent);
  transform: translateX(50%) rotate(45deg);
}

.results-diners-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding-bottom: 8px;
}

.results-diners-popover-head strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 950;
}

.results-diners-popover-head span {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 850;
}

.results-diners-popover-list {
  display: grid;
  gap: 7px;
}

.results-diners-person {
  appearance: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: 10px;
  padding: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.results-diners-person:focus-visible,
.results-diners-popover-action:focus-visible,
.room-people-everyone-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

.results-diners-person:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.results-diners-person .person-avatar {
  width: 34px;
  border-radius: 999px;
  font-size: 0.7rem;
  box-shadow: none;
}

.results-diners-person span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.results-diners-person strong,
.results-diners-person em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-diners-person strong {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 950;
}

.results-diners-person em {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 760;
}

.results-diners-popover-action,
.room-people-everyone-button {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-bg));
  color: color-mix(in srgb, var(--accent) 76%, var(--text));
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0;
}

.results-diners-popover-action {
  min-height: 34px;
  margin-top: 1px;
  padding: 0 12px;
  text-align: center;
}

:root[data-theme="dark"] .results-diners-popover {
  border-color: rgba(255, 250, 242, 0.13);
  background: color-mix(in srgb, var(--panel-bg) 92%, #201d19);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] .results-diners-popover::after {
  border-color: rgba(255, 250, 242, 0.13);
  background: color-mix(in srgb, var(--panel-bg) 92%, #201d19);
}

body.room-people-open {
  overflow: hidden;
}

body.room-bulletin-open {
  overflow: hidden;
}

.room-people-overlay {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  background: rgba(20, 18, 14, 0.38);
  backdrop-filter: blur(16px);
}

.room-people-sheet {
  display: grid;
  width: min(980px, calc(100vw - 36px));
  max-height: min(820px, calc(100dvh - 36px));
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
  box-shadow: 0 28px 90px rgba(31, 24, 14, 0.28);
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: 0;
}

.room-people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding: 18px 18px 14px;
}

.room-people-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.room-people-head span {
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.room-people-head h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--display-font, Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.02;
}

.room-people-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-bg) 84%, var(--panel-bg));
  color: var(--muted-text);
}

.room-people-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.room-bulletin-overlay {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px));
  background: rgba(20, 18, 14, 0.38);
  backdrop-filter: blur(16px);
}

.room-bulletin-overlay[hidden] {
  display: none !important;
}

.room-bulletin-sheet {
  display: grid;
  width: min(620px, calc(100vw - 36px));
  max-height: min(760px, calc(100dvh - 36px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-bg) 97%, transparent);
  box-shadow: 0 28px 90px rgba(31, 24, 14, 0.28);
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.room-bulletin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding: 18px 18px 14px;
}

.room-bulletin-head div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.room-bulletin-head span {
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 720;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.room-bulletin-head h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--display-font, Georgia, serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.02;
}

.room-bulletin-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-bg) 84%, var(--panel-bg));
  color: var(--muted-text);
}

.room-bulletin-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.room-bulletin-list {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 14px 18px;
}

.room-bulletin-empty,
.room-bulletin-message {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft-bg) 48%, var(--panel-bg));
}

.room-bulletin-empty {
  padding: 14px;
  color: var(--muted-text);
  font-size: 0.9rem;
  font-weight: 760;
}

.room-bulletin-message {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.room-bulletin-message > div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.room-bulletin-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 950;
}

.room-bulletin-message strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-bulletin-message em {
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.room-bulletin-message.is-direct em {
  background: color-mix(in srgb, var(--coral) 11%, var(--panel-bg));
  color: color-mix(in srgb, var(--coral-strong) 66%, var(--text));
}

.room-bulletin-message p {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.38;
  white-space: pre-wrap;
}

.room-bulletin-message time {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 760;
}

.room-bulletin-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  padding: 14px 18px 18px;
}

.room-bulletin-form label {
  display: grid;
  gap: 6px;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.room-bulletin-form select,
.room-bulletin-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  text-transform: none;
}

.room-bulletin-form select {
  min-height: 42px;
  padding: 0 11px;
}

.room-bulletin-form textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px 11px;
}

.room-bulletin-form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.room-bulletin-form p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 780;
}

.room-bulletin-form p.is-success {
  color: var(--success-text);
}

.room-bulletin-form p.is-error {
  color: var(--danger-text);
}

.room-bulletin-form button {
  min-height: 42px;
  border-radius: 999px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
}

.room-people-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px;
}

.room-people-summary-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 10px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--soft-bg) 62%, var(--panel-bg));
}

.room-people-summary-card span,
.room-people-summary-card small {
  overflow: hidden;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 620;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-people-summary-card span {
  letter-spacing: 0;
  text-transform: uppercase;
}

.room-people-summary-card strong {
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-people-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 18px;
}

.room-people-everyone-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 36px;
  padding: 0 14px;
}

.room-person-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--card-bg) 94%, var(--panel-bg));
  box-shadow: 0 12px 28px rgba(31, 24, 14, 0.07);
}

.room-person-card.is-empty {
  min-height: 160px;
  place-items: center;
  color: var(--muted-text);
  font-weight: 650;
}

.room-person-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.room-person-card-head .person-avatar {
  width: 46px;
  box-shadow: none;
}

.room-person-card-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.room-person-card-title strong,
.room-person-card-title em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-person-card-title strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 760;
}

.room-person-card-title em {
  color: var(--muted-text);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 540;
}

.room-person-you {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  color: color-mix(in srgb, var(--accent) 76%, var(--text));
  font-size: 0.68rem;
  font-weight: 720;
}

.room-person-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-person-criteria-group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.room-person-criteria-group h3,
.room-person-section-head h3 {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.room-person-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.room-person-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 560;
  letter-spacing: 0;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-person-chip.is-muted {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  color: var(--muted-text);
}

.room-person-notes {
  display: grid;
  gap: 7px;
  border-top: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
  padding-top: 11px;
}

.room-person-notes p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.room-person-notes strong {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 680;
  letter-spacing: 0;
  text-transform: none;
}

.room-person-notes span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 520;
  line-height: 1.35;
}

.room-person-hearts-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.room-person-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.room-person-section-head span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #e3496f 11%, var(--panel-bg));
  color: #df2f62;
  font-size: 0.7rem;
  font-weight: 740;
}

.room-person-hearts {
  display: grid;
  gap: 6px;
}

.room-person-heart-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas:
    "heart title"
    "heart meta";
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 10px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--panel-bg) 74%, var(--soft-bg));
  color: var(--text);
  text-align: left;
}

.room-person-heart-row span {
  grid-area: heart;
  color: #df2f62;
  font-size: 1rem;
  line-height: 1;
}

.room-person-heart-row strong,
.room-person-heart-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-person-heart-row strong {
  grid-area: title;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 720;
}

.room-person-heart-row small {
  grid-area: meta;
  color: var(--muted-text);
  font-size: 0.7rem;
  font-weight: 520;
}

.room-person-heart-row:hover,
.room-person-heart-row:focus-visible {
  border-color: color-mix(in srgb, #df2f62 30%, var(--border));
  outline: none;
}

.room-person-hearts-empty {
  margin: 0;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  padding: 11px;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 540;
}

:root[data-theme="dark"] .room-people-overlay {
  background: rgba(0, 0, 0, 0.56);
}

:root[data-theme="dark"] .room-bulletin-overlay {
  background: rgba(0, 0, 0, 0.56);
}

:root[data-theme="dark"] .room-people-sheet {
  border-color: rgba(255, 250, 242, 0.12);
  background: color-mix(in srgb, var(--panel-bg) 94%, #181816);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .room-bulletin-sheet {
  border-color: rgba(255, 250, 242, 0.12);
  background: color-mix(in srgb, var(--panel-bg) 94%, #181816);
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
}

:root[data-theme="dark"] .room-people-close,
:root[data-theme="dark"] .room-bulletin-close,
:root[data-theme="dark"] .room-people-summary-card,
:root[data-theme="dark"] .room-person-card,
:root[data-theme="dark"] .room-person-heart-row,
:root[data-theme="dark"] .room-bulletin-empty,
:root[data-theme="dark"] .room-bulletin-message,
:root[data-theme="dark"] .room-bulletin-form select,
:root[data-theme="dark"] .room-bulletin-form textarea {
  border-color: rgba(255, 250, 242, 0.12);
}

:root[data-theme="dark"] .room-people-summary-card {
  background: rgba(255, 250, 242, 0.055);
}

:root[data-theme="dark"] .room-bulletin-empty,
:root[data-theme="dark"] .room-bulletin-message,
:root[data-theme="dark"] .room-bulletin-form select,
:root[data-theme="dark"] .room-bulletin-form textarea {
  background: rgba(255, 250, 242, 0.06);
}

:root[data-theme="dark"] .room-bulletin-message em {
  background: rgba(121, 185, 179, 0.12);
  color: color-mix(in srgb, var(--accent) 56%, var(--soft-white, #f2ecdf));
}

:root[data-theme="dark"] .room-bulletin-message.is-direct em {
  background: rgba(255, 128, 111, 0.11);
  color: color-mix(in srgb, var(--coral) 70%, var(--soft-white, #f2ecdf));
}

:root[data-theme="dark"] .room-person-card {
  background: rgba(255, 250, 242, 0.065);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .room-person-chip {
  border-color: rgba(121, 185, 179, 0.34);
  color: var(--text);
}

:root[data-theme="dark"] .room-person-chip.is-muted {
  border-color: rgba(255, 250, 242, 0.12);
  color: var(--muted-text);
}

:root[data-theme="dark"] .room-person-heart-row {
  background: rgba(255, 250, 242, 0.055);
}

@media (max-width: 720px) {
  .room-people-overlay,
  .room-bulletin-overlay {
    align-items: end;
    padding: 14px 10px 0;
  }

  .room-people-sheet,
  .room-bulletin-sheet {
    width: min(100%, 520px);
    max-height: min(86dvh, 760px);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .room-bulletin-list {
    padding: 12px 14px;
  }

  .room-bulletin-form {
    padding: 12px 14px max(16px, env(safe-area-inset-bottom, 0px));
  }

  .room-people-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 14px;
  }

  .room-people-list {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }

  .room-person-grid {
    grid-template-columns: 1fr;
  }
}

.room-row-map {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: var(--muted-text);
  font-size: 0.7rem;
  font-weight: 780;
}

.room-row-map i {
  display: block;
  width: 24px;
  height: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--border));
  border-radius: 999px;
  background:
    radial-gradient(circle at 52% 50%, var(--coral) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 50%, color-mix(in srgb, var(--accent) 34%, transparent) 0 7px, transparent 8px),
    color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
}

.room-row-map small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-row-action {
  display: inline-grid;
  min-width: 58px;
  min-height: 34px;
  place-items: center;
  justify-self: end;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel-bg));
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 920;
  white-space: nowrap;
}

.rooms-empty {
  display: grid;
  gap: 5px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--soft-bg);
}

.rooms-empty strong {
  color: var(--text);
  font-weight: 920;
}

.rooms-empty span {
  color: var(--muted-text);
  font-size: 0.86rem;
  font-weight: 720;
}

.rooms-empty-action {
  justify-self: start;
  min-height: 38px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  color: var(--accent);
  font-weight: 920;
}

.about-step {
  grid-template-columns: minmax(0, 0.85fr) minmax(440px, 1.15fr);
}

.about-card {
  gap: 18px;
  max-width: 720px;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: start;
}

.about-copy {
  display: grid;
  gap: 12px;
}

.about-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: 1.36rem;
}

.about-text-section {
  display: grid;
  gap: 5px;
  scroll-margin-top: 18px;
}

.about-text-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 950;
}

.about-text-section a {
  color: var(--accent);
  font-weight: 900;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:root[data-theme="dark"] .about-text-section a {
  color: var(--accent-strong);
}

.about-proof-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.about-mini-dock {
  display: none;
}

.about-mini-dock-shell {
  display: none;
}

.about-section-highlight {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 5px;
  border-radius: 8px;
  scroll-margin-top: 18px;
}

.security-certificate {
  display: grid;
  width: 180px;
  height: 224px;
  min-height: 224px;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: center;
  align-content: start;
  border: 5px solid #1558a8;
  border-radius: 8px;
  padding: 10px 12px 12px;
  background:
    radial-gradient(circle at center 45%, color-mix(in srgb, #1558a8 8%, transparent), transparent 52%),
    var(--soft-bg);
  color: #1558a8;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--panel-bg) 76%, transparent),
    0 14px 32px rgba(21, 88, 168, 0.12);
}

.security-certificate strong {
  display: block;
  align-self: start;
  margin: 3px 0 0;
  color: #1558a8;
  font-family: "Arial Black", "Helvetica Neue Condensed Bold", "Helvetica Compressed", "Arial Bold", Futura, sans-serif;
  font-size: 10.65rem;
  font-stretch: condensed;
  line-height: 0.74;
  font-weight: 950;
  letter-spacing: 0;
}

.certificate-label,
.certificate-subtitle,
.certificate-foot {
  display: block;
}

.certificate-label {
  color: var(--muted-text);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.certificate-subtitle {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.certificate-foot {
  margin-top: 7px;
  color: var(--muted-text);
  font-size: 0.7rem;
  font-weight: 800;
}

.security-certificate:hover,
.security-certificate:focus-visible {
  border-color: #0d4b94;
}

.security-certificate:active {
  transform: translateY(1px);
}

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.prohibition-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    var(--soft-bg);
}

.prohibition-gallery button {
  display: grid;
  grid-template-areas:
    "icon"
    "label";
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-bg);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: center;
}

.prohibition-gallery button:hover,
.prohibition-gallery button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
}

.prohibition-gallery button:active {
  transform: translateY(1px);
}

.prohibition-gallery button > img {
  grid-area: icon;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: contain;
}

.prohibition-dark {
  opacity: 0;
}

:root[data-theme="dark"] .prohibition-light {
  opacity: 0;
}

:root[data-theme="dark"] .prohibition-dark {
  opacity: 1;
}

.prohibition-gallery strong {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coffee-card {
  display: grid;
  width: 180px;
  height: 224px;
  min-width: 0;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft-bg);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

.coffee-card img {
  width: 132px;
  height: 132px;
  border-radius: 8px;
  object-fit: contain;
}

.coffee-card span {
  display: grid;
  gap: 2px;
}

.coffee-card strong {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
}

.coffee-card small {
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 750;
}

.about-coffee-section {
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  height: auto;
  min-height: 0;
  justify-items: start;
  align-items: center;
  align-content: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
}

.about-coffee-section img {
  width: 64px;
  height: 64px;
}

.about-coffee-section a {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.provider-disclosure {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%),
    var(--soft-bg);
}

.provider-disclosure h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 1rem;
}

.provider-disclosure p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}

.provider-disclosure ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.provider-disclosure li {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel-bg);
}

.provider-disclosure strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
}

.provider-disclosure span,
.provider-disclosure .provider-note {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.4;
}

.provider-disclosure .provider-note {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.about-facts div {
  display: grid;
  gap: 4px;
  min-height: 76px;
  align-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft-bg);
}

.about-facts strong {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 900;
}

.about-facts span {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 750;
}

.about-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.about-actions button,
.about-coffee-link {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 14px;
  background: var(--muted-bg);
  color: var(--text);
  font-weight: 850;
  text-decoration: none;
}

.about-actions button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.84rem;
}

.about-coffee-link {
  background: var(--soft-bg);
}

.primary,
.wide {
  background: var(--accent);
  color: var(--on-accent);
}

.wide {
  min-height: 44px;
  border-radius: 7px;
  font-weight: 850;
}

.entry-card .wide {
  margin-top: 6px;
}

.auth-step {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
}

.auth-card {
  margin-bottom: 0;
}

.auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.auth-actions button {
  min-height: 40px;
  border-radius: 7px;
  padding: 0 12px;
  background: var(--muted-bg);
  color: var(--text);
  font-weight: 850;
}

.auth-actions .primary {
  background: var(--accent);
  color: var(--on-accent);
}

.topbar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.app-heading {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

.app-brand-mark {
  flex: 0 0 auto;
}

.eyebrow {
  margin: 0 0 6px;
  color: #846331;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

:root[data-theme="dark"] .eyebrow {
  color: #c7beb0;
}

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

h1 {
  max-width: 780px;
  margin-bottom: 10px;
  font-family: var(--display-font, "Fraunces", Georgia, serif);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.96;
  font-weight: 760;
}

.hero-subtitle {
  max-width: 560px;
  margin: 0;
  color: var(--muted-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

h2 {
  margin-bottom: 0;
  font-size: 1.08rem;
}

h3 {
  margin-bottom: 10px;
  color: var(--muted-text);
  font-size: 0.84rem;
  text-transform: uppercase;
}

.room-card,
.panel {
  border: 1px solid var(--border);
  background: var(--panel-bg);
  box-shadow: 0 18px 50px rgba(32, 24, 14, 0.08);
}

.room-card {
  width: min(420px, 100%);
  padding: 16px;
  border-radius: 8px;
}

.field-stack,
.auth-card label,
.entry-card label,
.room-card label,
form label {
  display: grid;
  gap: 6px;
  color: #625b51;
  font-size: 0.83rem;
  font-weight: 750;
}

.auth-card label,
.entry-card label,
.room-card label,
form label {
  color: var(--muted-text);
}

.field-hint {
  margin: -2px 0 0;
  color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.3;
}

.field-hint.is-success {
  color: var(--success-text);
}

.field-hint.is-error {
  color: var(--danger-text);
}

.room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.share-stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.share-stack button {
  justify-self: end;
  min-height: 36px;
  border-radius: 7px;
  padding: 0 12px;
  background: var(--muted-bg);
  color: var(--text);
  font-weight: 850;
}

.share-link {
  color: var(--muted-text);
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.panel {
  border-radius: 8px;
}

.form-panel {
  padding: 18px;
}

.form-panel[data-form-wizard] {
  display: grid;
  gap: 12px;
}

#appStep[data-wizard-active]:not([data-results-view]) .app-topbar {
  margin-bottom: 18px;
}

.form-panel[data-form-wizard] .save-status:empty {
  display: none;
}

.form-panel[data-form-wizard] > .panel-head,
.form-panel[data-form-wizard] > .actions {
  display: none;
}

.form-panel.criteria-locked [data-wizard-step]:not(#invitePanel) {
  opacity: 0.54;
  filter: saturate(0.76);
  transition:
    opacity 160ms ease,
    filter 160ms ease;
}

.form-panel.criteria-locked .area-map {
  pointer-events: none;
}

.form-panel[data-form-wizard] #hostControls {
  margin-bottom: 0;
}

.form-panel[data-host-setup] {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.form-panel[data-host-setup] > :not(#hostControls) {
  display: none !important;
}

.form-panel[data-host-setup] #hostControls {
  display: grid;
  min-height: 100%;
  margin: 0;
  align-content: center;
}

.form-wizard-head {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px 16px;
  background: linear-gradient(135deg, var(--soft-bg), var(--panel-bg));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42);
}

.form-panel[data-form-wizard][data-active-step="area"] .form-wizard-head {
  border-bottom-color: var(--border);
  border-radius: 26px;
  padding-bottom: 16px;
}

.form-panel[data-form-wizard][data-active-step="area"] .location-box {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.form-panel[data-form-wizard][data-active-step="area"] .location-head h3 {
  display: none;
}

.form-wizard-stepper {
  --wizard-steps: 1;
  display: none;
  grid-template-columns: repeat(var(--wizard-steps), minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  width: 100%;
}

.form-wizard-stepper button {
  position: relative;
  display: grid;
  min-width: 0;
  height: 28px;
  place-items: center;
  padding: 0;
  background: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.form-wizard-stepper button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
}

.form-wizard-stepper button:first-child::before {
  left: 50%;
}

.form-wizard-stepper button:last-child::before {
  right: 50%;
}

.form-wizard-stepper button.is-complete::before,
.form-wizard-stepper button.is-current::before {
  background: rgba(47, 98, 105, 0.38);
}

.form-wizard-stepper span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.form-wizard-stepper button.is-complete span {
  border-color: rgba(47, 98, 105, 0.45);
  background: rgba(47, 98, 105, 0.14);
  color: var(--accent-strong);
}

.form-wizard-stepper button.is-current span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.form-wizard-stepper button.is-results-step span::before {
  content: "";
  width: 13px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.form-wizard-stepper button.is-results-step span::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 -4px 0 currentColor;
  transform: translateX(2px);
}

:root[data-theme="dark"] .form-wizard-stepper button.is-complete::before,
:root[data-theme="dark"] .form-wizard-stepper button.is-current::before {
  background: rgba(121, 185, 179, 0.36);
}

:root[data-theme="dark"] .form-wizard-stepper button.is-complete span {
  border-color: rgba(121, 185, 179, 0.45);
  background: rgba(121, 185, 179, 0.14);
  color: var(--accent-strong);
}

.form-wizard-head > span {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 850;
}

.form-wizard-head strong {
  color: var(--text);
  font-size: 1.08rem;
}

.form-wizard-head p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-wizard-actions {
  display: grid;
  gap: 7px;
  align-items: stretch;
}

.form-wizard-nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.form-wizard-actions[data-show-distance] .form-wizard-nav-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.form-wizard-nav-row > #wizardBackButton,
.form-wizard-nav-row > #wizardNextButton {
  width: 100%;
}

.form-wizard-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 8px;
  align-self: center;
  min-height: 14px;
  padding: 0 6px;
  color: var(--muted-text);
  text-align: left;
}

.form-wizard-progress-label {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
}

.form-wizard-progress-title {
  display: none;
}

.form-wizard-progress-track {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-bg) 72%, transparent);
}

.form-wizard-progress-track em {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--coral));
  transition: width 180ms ease;
}

.form-wizard-actions button {
  min-height: 40px;
  border-radius: 7px;
  padding: 0 12px;
  background: var(--muted-bg);
  color: var(--text);
  font-weight: 850;
  white-space: nowrap;
}

.form-wizard-actions .primary {
  background: var(--accent);
  color: var(--on-accent);
}

.form-wizard-actions .primary.is-results {
  background: linear-gradient(135deg, var(--coral), var(--coral-strong));
  color: #082b29;
}

.form-wizard-actions .primary.is-saved,
.actions .primary.is-saved {
  border: 1px solid var(--border);
  background: var(--muted-bg);
  color: var(--muted-text);
}

.form-wizard-actions button:disabled {
  cursor: default;
  opacity: 0.45;
}

.form-wizard-actions button.is-busy:disabled {
  cursor: wait;
}

.invite-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--soft-bg);
}

.invite-panel h3 {
  margin-bottom: 6px;
}

.invite-panel p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.invite-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.invite-link-display {
  display: block;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px;
  background: var(--card-bg);
  color: var(--muted-text);
  font-size: 0.86rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  white-space: nowrap;
}

.invite-link-display:focus {
  border-color: #3d6f75;
  box-shadow: 0 0 0 3px rgba(61, 111, 117, 0.16);
  outline: none;
}

.invite-copy-row button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 999px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--soft-bg) 86%, var(--panel-bg));
  color: var(--text);
  box-shadow: 0 10px 24px rgba(31, 24, 14, 0.08);
  font-weight: 900;
  white-space: nowrap;
}

:root[data-theme="dark"] .invite-copy-row button {
  border-color: rgba(255, 250, 242, 0.14);
  background: rgba(255, 250, 242, 0.08);
  color: #fff7eb;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.invite-status {
  min-height: 1.2rem;
}

.invite-status.is-success {
  color: var(--success-text);
}

.invite-status.is-error {
  color: var(--danger-text);
}

.save-status {
  min-height: 1.25rem;
  margin: 0;
  color: var(--muted-text);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.35;
  opacity: 1;
  transition: opacity 320ms ease;
}

.save-status.is-fading {
  opacity: 0;
}

.save-status.is-success {
  color: var(--success-text);
}

.save-status.is-error {
  color: var(--danger-text);
}

.board-panel {
  position: sticky;
  top: 18px;
  padding: 18px;
  overflow: visible;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.form-panel > .panel-head h2 {
  color: var(--muted-text);
}

.status-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--soft-bg);
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 700;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "tnum" 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-pill[role="button"] {
  cursor: pointer;
}

.status-pill[role="button"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 3px;
}

.field-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.field-grid > * {
  min-width: 0;
}

.criteria-review-step {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.criteria-review-card {
  display: grid;
  gap: 14px;
}

.criteria-review-head {
  display: grid;
  gap: 5px;
}

.criteria-review-head span,
.criteria-review-group > span {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.075em;
  line-height: 1;
  text-transform: uppercase;
}

.criteria-review-head strong {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 820;
  line-height: 1.05;
}

.criteria-review-head p,
.criteria-review-empty {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.84rem;
  line-height: 1.35;
}

.criteria-review-group {
  display: grid;
  gap: 8px;
}

.criteria-review-list {
  display: grid;
  gap: 7px;
}

.criteria-review-item {
  display: grid;
  grid-template-columns: minmax(72px, 0.34fr) minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  min-width: 0;
}

.criteria-review-item b {
  color: color-mix(in srgb, var(--muted-text) 86%, var(--text));
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.4;
}

.criteria-review-item span {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.criteria-review-item em {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 999px;
  padding: 4px 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel-bg) 58%, transparent);
  color: var(--text);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.criteria-review-empty[hidden] {
  display: none;
}

.criteria-review-notes {
  display: grid;
  gap: 12px;
}

:root[data-theme="dark"] .criteria-review-item em {
  border-color: rgba(255, 250, 242, 0.14);
  background: rgba(255, 250, 242, 0.055);
  color: var(--soft-white, #f2ecdf);
}

.identity-box {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid #cddedb;
  border-radius: 8px;
  padding: 14px;
  background: #f0f8f6;
}

:root[data-theme="dark"] .identity-box {
  border-color: #34514d;
  background: #1d2826;
}

:root[data-theme="dark"] .identity-box h3 {
  color: #e4dacc;
}

:root[data-theme="dark"] .identity-box p,
:root[data-theme="dark"] .identity-grid label {
  color: #c7beb0;
}

:root[data-theme="dark"] .identity-grid button {
  background: var(--accent);
  color: var(--on-accent);
}

.host-box {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  border: 1px solid #d6d4e8;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #f8f7ff 0%, #f1f0fb 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.54);
}

.host-box h3 {
  margin-bottom: 6px;
  color: #4f4974;
}

.host-box p {
  margin-bottom: 0;
  color: #595579;
  font-size: 0.9rem;
}

.host-grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(170px, 1fr);
  gap: 10px;
  align-items: end;
}

.host-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.host-box.is-saved .host-actions {
  grid-template-columns: 1fr 1fr;
}

.host-grid button {
  min-height: 44px;
  border-radius: 7px;
  padding: 0 12px;
  background: #51477a;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.host-grid button:disabled {
  cursor: default;
  opacity: 1;
}

.host-box.is-saved #saveRoomSettingsButton {
  background: var(--success-bg);
  color: var(--success-text);
}

:root[data-theme="dark"] .host-box {
  border-color: #3d3a56;
  background: linear-gradient(135deg, #29263b 0%, #222132 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .host-box h3 {
  color: #ded7ff;
}

:root[data-theme="dark"] .host-box p,
:root[data-theme="dark"] .host-box label {
  color: #c9c0e6;
}

:root[data-theme="dark"] .host-grid button {
  background: var(--accent);
  color: var(--on-accent);
}

.location-box {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft-bg);
}

.location-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.location-head h3 {
  margin-bottom: 6px;
}

.location-head p {
  margin-bottom: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
}

.location-toolbar {
  display: flex;
  align-items: start;
  gap: 8px;
  justify-content: end;
  min-width: 0;
}

.location-segmented {
  display: grid;
  min-width: 320px;
  width: 320px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  background: var(--panel-bg);
}

.location-toolbar .distance-menu-button {
  min-height: 44px;
}

.location-segmented button {
  min-height: 36px;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--muted-text);
  font-weight: 800;
  white-space: nowrap;
}

.location-segmented button.selected {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--button-shadow-soft);
}

.location-segmented button:disabled {
  cursor: wait;
  opacity: 0.66;
}

.distance-menu {
  position: relative;
  justify-self: end;
}

.distance-menu[hidden] {
  display: none !important;
}

.distance-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 88px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0 13px;
  background: var(--panel-bg);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.distance-menu-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.distance-menu-list {
  position: absolute;
  z-index: 2000;
  right: 0;
  bottom: calc(100% + 8px);
  display: none;
  min-width: 112px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  background: var(--panel-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.distance-menu.is-open .distance-menu-list {
  display: grid;
}

.distance-menu-list button {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--text);
  font-weight: 820;
  text-align: left;
}

.distance-menu-list button:hover,
.distance-menu-list button.is-selected {
  background: var(--accent);
  color: var(--on-accent);
}

.form-panel[data-form-wizard] .map-distance-menu {
  display: none;
}

.area-map {
  min-height: 270px;
  position: relative;
  isolation: isolate;
  contain: paint;
  overflow: hidden;
  border: 1px solid #cbd8d1;
  border-radius: 8px;
  background: #e8eee9;
}

.area-map .leaflet-tile {
  width: 256px !important;
  height: 256px !important;
  border: 0 !important;
  outline: 0 !important;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.area-map .leaflet-tile-container {
  will-change: transform;
}

.area-map .lunch-map-tile {
  background: transparent !important;
  box-shadow: none !important;
}

.leaflet-container {
  font: inherit;
}

.ocean-question-marker {
  display: grid;
  width: 36px !important;
  height: 36px !important;
  margin: 0;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--panel-bg);
  color: var(--accent-strong);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.participant-pin-marker {
  display: grid;
  width: 30px !important;
  height: 30px !important;
  margin: 0;
  place-items: center;
  border: 2px solid var(--panel-bg);
  border-radius: 50%;
  background: var(--ink);
  color: var(--panel-bg);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.participant-pin-marker span {
  display: block;
  line-height: 1;
}

.identity-box h3 {
  margin-bottom: 6px;
}

.identity-box p {
  margin-bottom: 0;
  color: #48605e;
  font-size: 0.9rem;
}

.identity-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 0.55fr) auto;
  gap: var(--form-control-gap);
  align-items: end;
}

.form-section-break-after {
  margin-bottom: 0;
}

.identity-grid label.email-confirmed {
  position: relative;
}

.identity-grid label.email-confirmed input {
  padding-right: 48px;
}

.identity-grid label.email-confirmed::after {
  content: "✓";
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

#identityStatus.is-success {
  color: var(--success-text);
  font-weight: 800;
}

#identityStatus.is-error {
  color: var(--danger-text);
  font-weight: 800;
}

.identity-grid button {
  min-height: 44px;
  border-radius: 7px;
  padding: 0 12px;
  background: #2f6269;
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.identity-grid button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basics-grid {
  grid-template-areas:
    "name zip"
    "date zip";
  align-items: start;
}

.basic-name {
  grid-area: name;
}

.basic-field-label {
  order: -1;
}

.basic-date {
  grid-area: date;
  position: relative;
  overflow: visible;
}

.date-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.availability-field {
  position: relative;
  gap: 8px;
}

.availability-calendar-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  color: var(--text);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
  font: inherit;
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
}

.availability-calendar-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.62;
  transform: translateY(-2px) rotate(45deg);
}

.availability-calendar-toggle.is-open::after {
  transform: translateY(2px) rotate(225deg);
}

.availability-calendar-toggle:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 2px;
}

.availability-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

.availability-date-list[hidden] {
  display: none;
}

.availability-date-list button {
  display: inline-grid;
  min-height: 34px;
  min-width: 0;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1;
  text-align: left;
}

.availability-date-list button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--chip-selected-bg);
  color: var(--chip-selected-text);
  box-shadow: var(--button-shadow-soft);
}

.availability-date-list small {
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 850;
  opacity: 0.72;
}

.availability-calendar {
  display: grid;
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  gap: 8px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 18px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel-bg) 96%, var(--soft-bg));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.66),
    0 24px 52px rgba(31, 24, 14, 0.18);
}

.availability-calendar[hidden] {
  display: none !important;
}

.availability-calendar-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.availability-calendar-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 690;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar-head button {
  min-height: 32px;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.74rem;
  font-weight: 680;
}

.availability-calendar-weekdays,
.availability-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.availability-calendar-weekdays span {
  display: grid;
  min-height: 18px;
  place-items: center;
  color: var(--muted-text);
  font-size: 0.64rem;
  font-weight: 680;
  line-height: 1;
  text-transform: uppercase;
}

.availability-calendar-empty,
.availability-calendar-day {
  display: grid;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 30px;
  place-items: center;
}

.availability-calendar-day {
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
}

.availability-calendar-day.is-known:not(.is-selected) {
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
}

.availability-calendar-day.is-today:not(.is-selected) {
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent);
}

.availability-calendar-day.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--button-shadow-soft);
}

.availability-calendar-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.availability-calendar-foot small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar-foot button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

:root[data-theme="dark"] .availability-calendar {
  border-color: rgba(255, 250, 242, 0.14);
  background: color-mix(in srgb, var(--panel-bg) 94%, var(--soft-white, #f2ecdf) 6%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 28px 56px rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"] .availability-calendar-day.is-selected {
  color: #161615;
}

:root[data-theme="dark"] .availability-calendar-toggle {
  border-color: rgba(255, 250, 242, 0.14);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--soft-white, #f2ecdf) 4%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .availability-calendar-toggle .date-day-label {
  background: rgba(255, 250, 242, 0.08);
}

.date-day-label {
  display: inline-grid;
  min-width: 0;
  min-height: 28px;
  padding: 0 9px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-bg) 82%, transparent);
  color: var(--muted-text);
  font-size: 0.74rem;
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
}

.date-day-label[hidden] {
  display: none;
}

.availability-calendar-toggle .date-day-label {
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-bg) 82%, transparent);
  box-shadow: none;
}

.basic-zip {
  grid-area: zip;
}

.field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

input,
select,
textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

input,
select {
  min-height: 44px;
  padding: 0 12px;
}

select {
  --select-surface: color-mix(in srgb, var(--card-bg) 88%, var(--soft-bg));
  --select-edge: color-mix(in srgb, var(--border) 86%, transparent);
  min-height: 48px;
  border-color: var(--select-edge);
  border-radius: 18px;
  padding: 0 48px 0 16px;
  background-color: var(--select-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23073f3b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 68%, transparent), transparent 62%);
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat;
  background-size: 18px 18px, 100% 100%;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.62),
    0 9px 20px rgba(31, 24, 14, 0.045);
  color: var(--text);
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select option {
  background: var(--panel-bg);
  color: var(--text);
}

:root[data-theme="dark"] select {
  --select-surface: color-mix(in srgb, var(--card-bg) 80%, var(--muted-bg));
  --select-edge: rgba(255, 250, 242, 0.14);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23f2ecdf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 250, 242, 0.075), rgba(255, 250, 242, 0.02));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.14);
}

:root[data-theme="dark"] select option {
  background: var(--card-bg);
  color: var(--text);
}

input.is-locked,
input[readonly].is-locked {
  cursor: default;
  background: var(--soft-bg);
  color: var(--muted-text);
}

input[type="date"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: 100%;
  inline-size: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  min-width: 0;
  min-inline-size: 0;
  overflow: hidden;
  line-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  block-size: 44px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
  margin-top: 12px;
  padding: 12px;
}

.dietary-notes-field::placeholder {
  color: var(--placeholder-text);
  opacity: 0.54;
}

:root[data-theme="dark"] .dietary-notes-field::placeholder {
  opacity: 0.66;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #3d6f75;
  box-shadow: 0 0 0 3px rgba(61, 111, 117, 0.16);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  border-color: var(--border) !important;
  background-color: var(--autofill-bg) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

input:autofill,
select:autofill,
textarea:autofill {
  border-color: var(--border);
  background-color: var(--autofill-bg);
  color: var(--text);
}

input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  border-color: #3d6f75 !important;
  -webkit-box-shadow:
    0 0 0 3px rgba(61, 111, 117, 0.16),
    0 0 0 1000px var(--autofill-bg) inset !important;
  box-shadow:
    0 0 0 3px rgba(61, 111, 117, 0.16),
    0 0 0 1000px var(--autofill-bg) inset !important;
}

input.is-solid {
  border-color: var(--accent);
  background: #eef6f3;
  box-shadow:
    inset 0 0 0 1px rgba(47, 98, 105, 0.2),
    0 0 0 3px rgba(47, 98, 105, 0.12);
}

:root[data-theme="dark"] input.is-solid {
  background: #17211f;
  box-shadow:
    inset 0 0 0 1px rgba(121, 185, 179, 0.28),
    0 0 0 3px rgba(121, 185, 179, 0.14);
}

input.is-solid:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow:
    inset 0 0 0 1px rgba(47, 98, 105, 0.2),
    0 0 0 3px rgba(47, 98, 105, 0.12),
    0 0 0 1000px var(--solid-autofill-bg) inset !important;
  box-shadow:
    inset 0 0 0 1px rgba(47, 98, 105, 0.2),
    0 0 0 3px rgba(47, 98, 105, 0.12),
    0 0 0 1000px var(--solid-autofill-bg) inset !important;
}

:root[data-theme="dark"] input.is-solid:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow:
    inset 0 0 0 1px rgba(121, 185, 179, 0.28),
    0 0 0 3px rgba(121, 185, 179, 0.14),
    0 0 0 1000px var(--solid-autofill-bg) inset !important;
  box-shadow:
    inset 0 0 0 1px rgba(121, 185, 179, 0.28),
    0 0 0 3px rgba(121, 185, 179, 0.14),
    0 0 0 1000px var(--solid-autofill-bg) inset !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-text);
  opacity: 0.62;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  opacity: 0.72;
}

.range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
}

input[type="range"] {
  --range-fill: var(--accent);
  --range-track: color-mix(in srgb, var(--muted-bg) 78%, var(--panel-bg));
  --range-thumb-bg: var(--panel-bg);
  --range-thumb-border: var(--accent);
  --range-percent: 18%;
  min-height: 34px;
  border: 0;
  padding: 0;
  background: linear-gradient(
    90deg,
    var(--range-fill) 0%,
    var(--range-fill) var(--range-percent),
    var(--range-track) var(--range-percent),
    var(--range-track) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 8px;
  box-shadow: none;
  accent-color: var(--range-fill);
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border: 3px solid var(--range-thumb-border);
  border-radius: 999px;
  background: var(--range-thumb-bg);
  box-shadow: 0 6px 16px rgba(31, 24, 14, 0.12);
  -webkit-appearance: none;
}

input[type="range"]::-moz-range-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  border-radius: 999px;
  background: var(--range-track);
}

input[type="range"]::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--range-fill);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid var(--range-thumb-border);
  border-radius: 999px;
  background: var(--range-thumb-bg);
  box-shadow: 0 6px 16px rgba(31, 24, 14, 0.12);
}

:root[data-theme="dark"] input[type="range"] {
  --range-track: color-mix(in srgb, var(--muted-bg) 62%, var(--panel-bg));
  --range-thumb-bg: var(--panel-bg);
  --range-thumb-border: var(--accent);
}

input[type="range"]:disabled {
  cursor: default;
  opacity: 0.62;
}

fieldset {
  min-width: 0;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

legend {
  padding: 0 8px;
  color: var(--muted-text);
  font-size: 0.83rem;
  font-weight: 800;
}

.multi-select-hint {
  margin: 0 0 12px;
  color: var(--muted-text);
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-size: 0.8rem;
  font-weight: 680;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  word-spacing: 0.045em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips button,
.actions button,
.room-row button,
.danger {
  min-height: 38px;
  border-radius: 7px;
  padding: 0 12px;
  font-weight: 800;
}

.chips button {
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
}

.chips button.selected {
  border-color: var(--accent);
  background: var(--chip-selected-bg);
  color: var(--chip-selected-text);
}

.actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.actions button,
.room-row button {
  background: var(--muted-bg);
  color: var(--text);
}

.actions .primary {
  background: var(--accent);
  color: var(--on-accent);
}

.actions button:disabled {
  cursor: default;
  opacity: 0.68;
}

.actions button.is-busy:disabled {
  cursor: wait;
}

.brief {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: var(--board-brief-bg);
  box-shadow: var(--board-panel-shadow);
}

.brief p {
  margin-bottom: 0;
  color: var(--text);
  line-height: 1.45;
}

.readiness-card {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--board-readiness-bg);
}

.readiness-card p {
  margin-bottom: 10px;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.readiness-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-bg);
}

.readiness-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 160ms ease;
}

.notification-card {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft-bg);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.notification-card.is-enabled {
  border-color: color-mix(in srgb, var(--success-text) 38%, var(--border));
  background: linear-gradient(135deg, var(--success-bg), var(--panel-bg));
  box-shadow: var(--board-panel-shadow);
}

.notification-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--text);
}

.notification-toggle span {
  display: grid;
  gap: 3px;
}

.notification-toggle strong {
  font-size: 0.9rem;
}

.notification-toggle em {
  color: var(--muted-text);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.3;
}

.notification-toggle input {
  position: absolute;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  margin: 2px 0 0;
  padding: 0;
  opacity: 0;
}

.notification-checkbox {
  position: relative;
  display: grid;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 2px 0 0;
  place-items: center;
  border: 1.5px solid var(--border);
  border-radius: 0;
  background: var(--panel-bg);
}

.notification-toggle input:checked + .notification-checkbox {
  border-color: var(--accent);
  background: var(--accent);
}

.notification-toggle input:checked + .notification-checkbox::after {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  margin-top: -1px;
  border-bottom: 2px solid var(--panel-bg);
  border-left: 2px solid var(--panel-bg);
  transform: rotate(-45deg);
}

.notification-toggle input:focus-visible + .notification-checkbox {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

.notification-toggle input:disabled + .notification-checkbox {
  opacity: 0.66;
}

#notifyReadyStatus {
  min-height: 1.1rem;
  margin: 8px 0 0;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 700;
}

#notifyReadyStatus.is-success {
  color: var(--success-text);
}

#notifyReadyStatus.is-off {
  color: var(--notify-off-text);
}

#notifyReadyStatus.is-error {
  color: var(--danger-text);
}

.restaurant-card {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--board-lunch-bg);
  box-shadow: var(--board-panel-shadow);
  overflow: visible;
}

:root[data-theme="dark"] .restaurant-card {
  background: var(--board-brief-bg);
}

.responses-card {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--board-brief-bg);
  box-shadow: var(--board-panel-shadow);
}

.responses-card h3 {
  margin-bottom: 10px;
}

.restaurant-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.restaurant-head h3 {
  margin-bottom: 6px;
}

.restaurant-head p {
  margin-bottom: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
  line-height: 1.4;
}

.restaurant-head p.is-candidate-count {
  color: #846331;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

:root[data-theme="dark"] .restaurant-head p.is-candidate-count {
  color: #c7beb0;
}

.restaurant-head button {
  min-height: 38px;
  border-radius: 7px;
  padding: 0 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  white-space: nowrap;
}

.restaurant-head button:disabled {
  cursor: wait;
  opacity: 0.66;
}

.provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.provider-chip {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  text-transform: uppercase;
}

.provider-chip.ok {
  background: #dcefe5;
  color: #1f5b3a;
}

.provider-chip.skipped {
  background: #eee8dd;
  color: #6a5f50;
}

.provider-chip.error {
  background: #fff1ec;
  color: #8a3422;
}

:root[data-theme="dark"] .provider-chip.ok {
  background: #1d352b;
  color: #a9e7c4;
}

:root[data-theme="dark"] .provider-chip.skipped {
  background: #302d27;
  color: #d5c8b6;
}

:root[data-theme="dark"] .provider-chip.error {
  background: var(--danger-bg);
  color: var(--danger-text);
}

.restaurant-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  overflow: visible;
}

.restaurant-option {
  display: grid;
  gap: 10px;
  border: 1px solid var(--board-row-border);
  border-radius: 8px;
  padding: 10px;
  background: var(--board-row-bg);
}

.restaurant-option.has-image {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
}

.restaurant-thumb {
  width: 72px;
  height: 72px;
  border: 1px solid var(--board-row-border);
  border-radius: 7px;
  background: var(--soft-bg);
  object-fit: cover;
}

.restaurant-option-body,
.restaurant-option-body div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.restaurant-main {
  align-content: start;
}

.restaurant-title {
  color: var(--text);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

.restaurant-title[href]:hover {
  color: var(--accent);
  text-decoration: underline;
}

.restaurant-rating {
  color: #c98916;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.restaurant-option span,
.restaurant-option p,
.restaurant-option small {
  color: var(--board-row-text);
  font-size: 0.82rem;
}

.restaurant-option p,
.restaurant-option small {
  margin: 6px 0 0;
}

.restaurant-option small {
  color: var(--board-muted-text);
  font-size: 0.72rem;
}

.signal-prototypes {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.signal-prototypes-head {
  display: grid;
  gap: 3px;
}

.signal-prototypes-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.96rem;
}

.signal-prototypes-head p {
  margin: 0;
  color: var(--board-muted-text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.signal-prototype {
  border: 1px solid var(--board-row-border);
  border-radius: 8px;
  padding: 12px;
  background: var(--board-row-bg);
  box-shadow: var(--board-panel-shadow);
}

.signal-prototype-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.signal-prototype-head span {
  color: var(--board-muted-text);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.signal-prototype-head strong {
  color: var(--text);
  font-size: 0.9rem;
}

.signal-bars-body,
.signal-matrix-body,
.signal-donuts-body {
  display: grid;
  gap: 10px;
}

.constraint-gauge {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--board-row-border) 78%, transparent);
  border-radius: 7px;
  padding: 10px;
  background: color-mix(in srgb, var(--soft-bg) 48%, transparent);
}

.constraint-gauge-head,
.constraint-meta,
.signal-bar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.constraint-gauge-head span {
  color: var(--board-muted-text);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.constraint-gauge-head strong {
  color: var(--text);
  font-size: 1.05rem;
}

.constraint-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--muted-bg);
}

.constraint-range {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--success-text));
}

.constraint-marker {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 18px;
  border: 2px solid var(--board-row-bg);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--border);
  transform: translate(-50%, -50%);
}

.constraint-marker.median {
  width: 6px;
  height: 22px;
  background: var(--text);
}

.constraint-marker.max,
.constraint-marker.wide {
  width: 8px;
  height: 18px;
  min-height: 0;
  background: var(--success-text);
}

.constraint-meta {
  color: var(--board-muted-text);
  font-size: 0.68rem;
  line-height: 1.25;
}

.signal-bar-group {
  display: grid;
  gap: 8px;
}

.signal-bar-card {
  min-width: 0;
  overflow: hidden;
}

.signal-bar-card-body {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.signal-bar-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.signal-bar-label span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-bar-label b {
  color: var(--board-muted-text);
  font-size: 0.74rem;
}

.signal-vote-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted-bg);
}

.signal-vote-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.signal-matrix-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matrix-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--board-row-border) 76%, transparent);
  border-radius: 7px;
  padding: 10px;
  background: color-mix(in srgb, var(--soft-bg) 42%, transparent);
}

.matrix-card > span {
  color: var(--board-muted-text);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.matrix-card > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-card > small {
  color: var(--board-muted-text);
  font-size: 0.72rem;
}

.matrix-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}

.matrix-pills em {
  border: 1px solid var(--board-row-border);
  border-radius: 999px;
  padding: 3px 6px;
  background: var(--panel-bg);
  color: var(--board-row-text);
  font-size: 0.67rem;
  font-style: normal;
  font-weight: 800;
}

.matrix-pills b {
  color: var(--accent);
}

.donut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.donut-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--board-row-border) 76%, transparent);
  border-radius: 7px;
  padding: 8px;
  background: color-mix(in srgb, var(--soft-bg) 42%, transparent);
}

.donut-ring {
  position: relative;
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: conic-gradient(var(--accent) var(--value), var(--muted-bg) 0);
}

.donut-ring::after {
  content: "";
  position: absolute;
  width: 22px;
  aspect-ratio: 1;
  border-radius: inherit;
  background: var(--board-row-bg);
}

.donut-ring b {
  position: relative;
  z-index: 1;
  color: var(--text);
  font-size: 0.58rem;
}

.donut-tile strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donut-tile small {
  display: block;
  margin-top: 2px;
  color: var(--board-muted-text);
  font-size: 0.68rem;
}

.donut-constraints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.donut-constraints span {
  border: 1px solid var(--board-row-border);
  border-radius: 7px;
  padding: 8px;
  background: var(--panel-bg);
  color: var(--board-muted-text);
  font-size: 0.72rem;
}

.donut-constraints b {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.result-list,
.people {
  display: grid;
  gap: 8px;
}

.count-row,
.person-card {
  border: 1px solid var(--board-row-border);
  border-radius: 8px;
  background: var(--board-row-bg);
}

.count-row {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
}

.person-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  box-shadow: var(--board-panel-shadow);
}

.person-avatar {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--panel-bg) 92%, transparent);
  border-radius: 999px;
  color: #fffdf8;
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(31, 24, 14, 0.12);
}

.avatar-1 .person-avatar {
  background: linear-gradient(135deg, #2f6269, #17474e);
}

.avatar-2 .person-avatar {
  background: linear-gradient(135deg, #8a5b34, #5b3920);
}

.avatar-3 .person-avatar {
  background: linear-gradient(135deg, #6d6f3d, #444720);
}

.avatar-4 .person-avatar {
  background: linear-gradient(135deg, #7a4f68, #4c2f42);
}

.avatar-5 .person-avatar {
  background: linear-gradient(135deg, #3d6f50, #244830);
}

.avatar-6 .person-avatar {
  background: linear-gradient(135deg, #635b8a, #3d365f);
}

.person-card-body {
  min-width: 0;
}

.person-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.person-card-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.person-card-head span {
  flex: 0 0 auto;
  color: var(--board-muted-text);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.person-card-head .response-state-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.criteria-saved-icon,
.vote-status-icon {
  display: grid;
  width: 20px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 6px;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.criteria-saved-icon {
  border: 1px solid color-mix(in srgb, var(--success-text) 54%, transparent);
  background: var(--success-bg);
  color: var(--success-text);
}

.vote-status-icon {
  border: 1px solid var(--board-row-border);
  background: color-mix(in srgb, var(--board-row-bg) 72%, var(--muted-bg));
  color: var(--board-muted-text);
  opacity: 0.52;
}

.vote-status-icon.is-ready {
  border-color: var(--accent);
  background: var(--panel-bg);
  opacity: 1;
}

.vote-status-icon.is-voted {
  border-color: color-mix(in srgb, var(--success-text) 62%, transparent);
  background: var(--success-bg);
  color: var(--success-text);
  opacity: 1;
}

.vote-status-icon.is-voted::before {
  content: "✓";
}

.person-card span,
.person-card p {
  color: var(--board-row-text);
  font-size: 0.84rem;
}

.person-card p {
  margin: 8px 0 0;
}

.person-card .note {
  color: var(--accent);
  font-weight: 700;
}

.empty {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.9rem;
}

.results-empty-state {
  display: grid;
  width: min(100%, 420px);
  min-height: 280px;
  place-items: center;
  align-content: center;
  justify-self: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 28px;
  padding: 28px 24px;
  background:
    radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 92%, transparent), color-mix(in srgb, var(--soft-bg) 94%, transparent));
  box-shadow: 0 24px 70px rgba(31, 24, 14, 0.12);
  text-align: center;
}

.results-empty-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.results-empty-state h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--display-font);
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  line-height: 0.95;
}

.results-empty-state p {
  max-width: 28ch;
  margin: 0;
  color: var(--muted-text);
  font-size: 0.95rem;
  font-weight: 720;
  line-height: 1.35;
}

.results-empty-state button {
  min-height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  padding: 0 22px;
  background: linear-gradient(135deg, var(--coral), var(--coral-strong));
  color: #082b29;
  font-weight: 950;
  box-shadow: var(--button-shadow);
}

:root[data-theme="dark"] .results-empty-state {
  background:
    radial-gradient(circle at 78% 14%, rgba(242, 201, 75, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 242, 0.085), rgba(255, 250, 242, 0.035));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.danger {
  width: 100%;
  margin-top: 16px;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
  box-shadow: var(--danger-shadow);
}

:root[data-theme="dark"] .danger {
  background: linear-gradient(135deg, #3a211c 0%, #2c1c19 100%);
  color: var(--danger-text);
  text-shadow: none;
}

@media (max-width: 920px) {
  .topbar,
  .entry-step,
  .auth-step,
  .about-step,
  .layout {
    grid-template-columns: 1fr;
    display: grid;
  }

  .entry-step,
  .auth-step,
  .about-step {
    gap: 18px;
  }

  .entry-card,
  .auth-card,
  .about-card {
    margin-top: 0;
  }

  .board-panel {
    position: static;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .board-panel {
    display: none;
  }

  #appStep[data-results-view] .form-panel {
    display: none;
  }

  #appStep[data-results-view] .board-panel {
    display: block;
  }
}

@media (max-width: 680px) {
  :root {
    --mobile-first-panel-offset: 22px;
    --form-control-gap: clamp(10px, 1.6dvh, 16px);
    --form-section-gap: clamp(20px, 3dvh, 32px);
    --wizard-section-gap: clamp(16px, 2.6dvh, 28px);
    --wizard-field-gap: clamp(14px, 2.2dvh, 24px);
    --wizard-label-gap: clamp(6px, 0.9dvh, 10px);
    --wizard-action-footer-space: clamp(14px, 4dvh, 40px);
  }

  .shell {
    width: min(100vw - 20px, 1220px);
    padding-top: 12px;
  }

  .entry-step,
  .auth-step,
  .about-step {
    gap: var(--mobile-first-panel-offset);
  }

  .entry-card,
  .auth-card,
  .about-card {
    margin-top: 4px;
  }

  .app-topbar {
    gap: 10px;
    margin-bottom: var(--mobile-first-panel-offset);
  }

  .app-heading {
    gap: 6px;
  }

  .app-heading .eyebrow {
    margin-bottom: 3px;
    font-size: 0.72rem;
  }

  .app-heading h1 {
    margin-bottom: 4px;
    font-size: 1.68rem;
    line-height: 1.02;
  }

  .app-heading .hero-subtitle {
    display: none;
  }

  .about-grid,
  .about-facts,
  .provider-disclosure ul {
    grid-template-columns: 1fr;
  }

  .about-card {
    gap: 15px;
  }

  .about-mini-dock-shell {
    position: relative;
    display: block;
    min-height: var(--about-dock-shell-height, 0);
  }

  .about-mini-dock {
    display: grid;
    position: relative;
    z-index: 28;
    --about-progress: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    align-items: center;
    justify-items: center;
    margin: -6px -4px 2px;
    padding: 8px 4px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--panel-bg) 82%, transparent);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.62),
      inset 0 -1px color-mix(in srgb, var(--border) 60%, transparent);
    backdrop-filter: blur(12px);
  }

  .about-mini-dock.is-about-dock-floating {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(88px, calc(env(safe-area-inset-right) + 88px));
    left: max(18px, env(safe-area-inset-left));
    z-index: 330;
    margin: 0;
    padding: 6px 3px;
  }

  .about-mini-dock.is-about-dock-floating .about-mini-action {
    width: clamp(32px, 9.5vw, 42px);
    height: clamp(32px, 9.5vw, 42px);
  }

  .about-mini-dock.is-about-dock-floating .about-mini-prohibit img {
    width: clamp(32px, 9.5vw, 39px);
    height: clamp(32px, 9.5vw, 39px);
  }

  .about-mini-dock.is-about-dock-floating .about-mini-coffee img {
    width: clamp(30px, 8.6vw, 35px);
    height: clamp(30px, 8.6vw, 35px);
  }

  .about-mini-dock.is-about-dock-floating .about-mini-grade strong {
    font-size: clamp(1.18rem, 5vw, 1.45rem);
  }

  .about-mini-dock::before,
  .about-mini-dock::after {
    content: "";
    position: absolute;
    left: calc(100% / 12);
    top: 50%;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .about-mini-dock::before {
    right: calc(100% / 12);
    background: color-mix(in srgb, var(--border) 72%, transparent);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.72),
      0 1px rgba(31, 24, 14, 0.06);
    opacity: 0.78;
  }

  .about-mini-dock::after {
    width: calc((100% - (100% / 6)) * var(--about-progress));
    max-width: calc(100% - (100% / 6));
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 82%, var(--coral)),
      color-mix(in srgb, var(--coral) 72%, var(--accent))
    );
    box-shadow:
      0 0 14px color-mix(in srgb, var(--accent) 28%, transparent),
      0 1px rgba(255, 255, 255, 0.22);
    opacity: 0.96;
    transition: width 90ms linear;
  }

  .about-mini-action {
    display: grid;
    position: relative;
    z-index: 1;
    width: clamp(40px, 12vw, 52px);
    height: clamp(40px, 12vw, 52px);
    min-width: 0;
    min-height: 0;
    place-items: center;
    border: 0;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: var(--text);
    box-shadow: none;
    cursor: pointer;
    isolation: isolate;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .about-mini-action::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: inherit;
    background: color-mix(in srgb, var(--panel-bg) 78%, var(--soft-bg));
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.88),
      inset 0 -3px 7px rgba(31, 24, 14, 0.09),
      0 8px 14px rgba(31, 24, 14, 0.09);
    opacity: 0.82;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease, background-color 160ms ease;
  }

  .about-mini-action img,
  .about-mini-action strong {
    position: relative;
    z-index: 1;
    transition: transform 160ms ease, filter 160ms ease;
  }

  .about-mini-action:active,
  .about-mini-action.is-about-anchor-active {
    transform: translateY(1px);
  }

  .about-mini-action:active::before,
  .about-mini-action.is-about-anchor-active::before {
    background: color-mix(in srgb, var(--soft-bg) 84%, var(--accent) 16%);
    box-shadow:
      inset 0 4px 9px rgba(31, 24, 14, 0.14),
      inset 0 -1px rgba(255, 255, 255, 0.54),
      0 2px 5px rgba(31, 24, 14, 0.06);
    opacity: 0.92;
    transform: scale(0.92);
  }

  .about-mini-action:active img,
  .about-mini-action:active strong,
  .about-mini-action.is-about-anchor-active img,
  .about-mini-action.is-about-anchor-active strong {
    filter: saturate(1.06) contrast(1.03);
    transform: translateY(1px) scale(0.96);
  }

  .about-mini-grade strong {
    color: #1558a8;
    font-family: "Arial Black", "Helvetica Neue Condensed Bold", "Helvetica Compressed", "Arial Bold", Futura, sans-serif;
    font-size: 1.62rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 0.9;
  }

  .about-mini-coffee img {
    width: 38px;
    height: 38px;
    object-fit: contain;
  }

  .about-mini-prohibit {
    grid-template: 1fr / 1fr;
  }

  .about-mini-grade {
    border-radius: 10px;
  }

  .about-mini-grade::before {
    inset: 5px;
    border: 2px solid color-mix(in srgb, #1558a8 72%, transparent);
    background: color-mix(in srgb, var(--soft-bg) 92%, #1558a8 8%);
  }

  .about-mini-coffee {
    border-radius: 15px;
  }

  .about-mini-coffee::before {
    inset: 7px;
    border-radius: 13px;
  }

  .about-mini-prohibit img {
    grid-area: 1 / 1;
    width: 41px;
    height: 41px;
    object-fit: contain;
    filter: drop-shadow(0 6px 7px rgba(31, 24, 14, 0.12));
  }

  .about-mini-prohibit::before {
    inset: 9px;
    opacity: 0.56;
  }

  .about-proof-stack,
  .prohibition-gallery {
    display: none;
  }

  .about-copy {
    gap: 10px;
  }

  .about-copy h2 {
    font-size: 1.18rem;
  }

  .about-text-section {
    gap: 4px;
    scroll-margin-top: calc(68px + env(safe-area-inset-top));
  }

  .about-text-section h3 {
    font-size: 0.94rem;
  }

  .about-copy p,
  .provider-disclosure p {
    font-size: 0.84rem;
    line-height: 1.42;
  }

  .about-coffee-section {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
  }

  .about-coffee-section img {
    width: 42px;
    height: 42px;
  }

  .about-coffee-section a {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
  }

  .prohibition-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-actions .about-coffee-link {
    display: none;
  }

  h1 {
    font-size: 2.2rem;
  }

  .field-grid.two,
  .field-grid.three,
  .identity-grid,
  .host-grid,
  .columns,
  .metric-grid,
  .room-row,
  .auth-actions {
    grid-template-columns: 1fr;
  }

  .form-section-break-after {
    margin-bottom: calc(var(--form-section-gap) - var(--form-control-gap));
  }

  .basics-grid {
    grid-template-areas:
      "name"
      "date"
      "zip";
  }

  .restaurant-head,
  .location-head,
  .location-toolbar,
  .form-wizard-actions,
  .actions {
    display: grid;
  }

  .form-wizard-actions {
    gap: 7px;
  }

  .form-wizard-nav-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .form-wizard-actions[data-show-distance] .form-wizard-nav-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .form-wizard-actions .primary {
    grid-column: auto;
  }

  .form-wizard-actions button {
    min-height: 38px;
    padding: 0 8px;
    font-size: 0.84rem;
  }

  .form-wizard-actions .distance-menu-button {
    width: 86px;
    padding: 0 13px;
  }

  .form-wizard-progress-track {
    width: 100%;
  }

  .form-panel[data-form-wizard] {
    gap: var(--wizard-section-gap);
    padding: 12px 12px var(--wizard-action-footer-space);
  }

  .form-panel[data-form-wizard] .field-grid,
  .form-panel[data-form-wizard] fieldset,
  .form-panel[data-form-wizard] .location-box,
  .form-panel[data-form-wizard] .invite-panel {
    margin-bottom: 0;
  }

  .form-panel[data-form-wizard] .field-grid {
    gap: var(--wizard-field-gap);
  }

  .form-panel[data-form-wizard] label {
    gap: var(--wizard-label-gap);
    color: var(--muted-text);
    font-family: var(--body-font);
    font-size: 0.8rem;
    font-weight: 620;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .form-panel[data-form-wizard] select {
    min-height: 52px;
    border-radius: 20px;
    padding-right: 44px;
    padding-left: 17px;
    background-position: right 15px center, 0 0;
    background-size: 18px 18px, 100% 100%;
    font-size: 1rem;
    font-weight: 620;
  }

  .form-wizard-head {
    padding: 10px;
  }

  .form-wizard-stepper {
    gap: 2px;
  }

  .form-wizard-stepper span {
    width: 22px;
    height: 22px;
    font-size: 16px;
    transform: scale(0.72);
  }

  .form-wizard-head strong {
    font-size: 1rem;
    font-weight: 680;
  }

  .form-wizard-head p {
    font-size: 0.84rem;
    font-weight: 480;
  }

  .form-panel[data-form-wizard] fieldset {
    padding: 12px;
  }

  .form-panel[data-form-wizard] .chips {
    gap: 6px;
  }

  .form-panel[data-form-wizard] .chips button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 0.78rem;
    font-weight: 620;
  }

  .form-panel[data-form-wizard] textarea {
    min-height: 72px;
    margin-top: 10px;
  }

  .invite-copy-row {
    grid-template-columns: 1fr;
  }

  .location-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .location-toolbar {
    justify-content: stretch;
  }

  .location-segmented {
    min-width: 0;
    width: 100%;
  }

  .location-segmented button {
    padding: 0 8px;
    font-size: 0.82rem;
  }

  .wizard-distance-menu {
    justify-self: center;
  }

  .distance-menu-button {
    width: 86px;
    min-height: 38px;
    padding: 0 13px;
    font-size: 0.82rem;
  }

  .area-map {
    min-height: 300px;
  }

  .form-panel[data-form-wizard] .area-map {
    min-height: 230px;
    height: min(34vh, 260px);
  }

  #appStep[data-results-view] .board-panel {
    display: grid;
    gap: 10px;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #appStep[data-results-view] .board-panel > .panel-head {
    margin-bottom: 0;
    padding: 0 2px;
  }

  #appStep[data-results-view] .restaurant-card {
    order: 1;
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  #appStep[data-results-view] .restaurant-head,
  #appStep[data-results-view] .provider-list {
    padding: 0 2px;
  }

  #appStep[data-results-view] .restaurant-list {
    margin-top: 8px;
    overflow: visible;
  }

  #appStep[data-results-view] .responses-card {
    order: 2;
  }

  #appStep[data-results-view] .brief {
    order: 3;
  }

  #appStep[data-results-view] .readiness-card {
    order: 4;
  }

  #appStep[data-results-view] .notification-card {
    order: 5;
  }

  #appStep[data-results-view] .signal-prototypes {
    order: 6;
  }

  body:has(#appStep[data-results-view]:not([hidden])) .shell {
    width: min(100vw - 20px, 1220px);
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 12px 0;
    background: var(--page-bg);
  }

  body:has(#appStep[data-results-view]:not([hidden])) {
    min-height: 100dvh;
    overflow: hidden;
    background: var(--page-bg);
  }

  #appStep[data-results-view] {
    height: calc(100dvh - 24px);
    min-height: calc(100dvh - 24px);
    overflow: hidden;
    background: var(--page-bg);
  }

  #appStep[data-results-view] .app-topbar {
    min-height: 58px;
    margin-bottom: 4px;
  }

  #appStep[data-results-view] .app-heading {
    display: flex;
    align-items: center;
  }

  #appStep[data-results-view] .app-heading > div:not(.brand-menu-shell) {
    display: none;
  }

  #appStep[data-results-view] .layout {
    height: calc(100dvh - 86px);
    overflow: hidden;
  }

  #appStep[data-results-view] .board-panel {
    height: 100%;
    align-content: center;
    justify-content: stretch;
  }

  #appStep[data-results-view] .board-panel > .panel-head,
  #appStep[data-results-view] .provider-list,
  #appStep[data-results-view] .responses-card,
  #appStep[data-results-view] .brief,
  #appStep[data-results-view] .readiness-card,
  #appStep[data-results-view] .notification-card,
  #appStep[data-results-view] .signal-prototypes,
  #appStep[data-results-view] #resetRoomButton {
    display: none !important;
  }

  #appStep[data-results-view] .restaurant-card {
    display: grid;
    min-height: 0;
    align-content: center;
    gap: 4px;
  }

  #appStep[data-results-view] .restaurant-head {
    display: none;
  }

  #appStep[data-results-view] .restaurant-head h3 {
    display: none;
  }

  #appStep[data-results-view] .restaurant-head p {
    color: var(--board-muted-text);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .restaurant-list {
    display: grid;
    min-height: 0;
    place-items: center;
  }

  #appStep[data-results-view] .rcs {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded {
    min-height: 0;
    height: calc(100dvh - 132px);
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: 10px;
  }
}

@media (max-width: 760px) {
  .user-feature-menu {
    width: min(248px, calc(100vw - 20px));
  }

  .rooms-step {
    min-height: calc(100dvh - 28px);
    grid-template-columns: 1fr;
    gap: 18px;
    align-content: start;
    padding-top: max(18px, env(safe-area-inset-top));
  }

  .rooms-lockup {
    gap: 7px;
  }

  .rooms-lockup .brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    font-size: 1.8rem;
  }

  .rooms-lockup h1 {
    margin: 0;
    font-size: clamp(2.25rem, 10.5vw, 3rem);
  }

  .rooms-card {
    margin: 0;
    border-radius: 24px;
    padding: 16px;
  }

  .rooms-card-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .room-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    border-radius: 16px;
    padding: 11px;
  }

  .room-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .room-row-meta {
    grid-column: 2;
    justify-items: start;
    white-space: normal;
  }
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body:has(#appStep[data-results-view]:not([hidden])) .shell,
html[data-theme="dark"] #appStep[data-results-view] {
  background-color: #161615 !important;
}

/* Lunch app visual direction: deep green, yellow actions, cream cards. */
:root {
  --page-bg: #f8f3ec;
  --panel-bg: #fffaf2;
  --card-bg: #fffdf8;
  --autofill-bg: #fffdf8;
  --solid-autofill-bg: #eef6f2;
  --soft-bg: #f1e9dd;
  --muted-bg: #ece2d4;
  --text: #164944;
  --muted-text: #6b6258;
  --placeholder-text: #b7ab9c;
  --border: #e4d9ca;
  --accent: #073f3b;
  --accent-strong: #052f2c;
  --coral: #f2c94b;
  --coral-strong: #d9a936;
  --gold: #efbd75;
  --success-bg: #dcefe4;
  --success-text: #0f6048;
  --notify-off-text: #a9544f;
  --board-brief-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(247, 239, 228, 0.92));
  --board-readiness-bg: #fffaf2;
  --board-lunch-bg: linear-gradient(145deg, #fffdf8 0%, #f8efe3 100%);
  --board-row-bg: #fffdf8;
  --board-row-border: #e7dccd;
  --board-row-text: #5c544a;
  --board-muted-text: #7b7165;
  --board-panel-shadow: inset 0 1px rgba(255, 255, 255, 0.78), 0 16px 40px rgba(29, 23, 16, 0.07);
  --button-shadow: 0 12px 26px rgba(31, 24, 14, 0.12);
  --button-shadow-soft: 0 8px 18px rgba(31, 24, 14, 0.08);
  --button-shadow-strong: 0 16px 34px rgba(31, 24, 14, 0.16);
  --button-primary-radius: 999px;
  --button-control-radius: 12px;
  --button-compact-radius: 10px;
  --button-primary-bg: var(--coral);
  --button-primary-text: #123c38;
  --button-secondary-bg: color-mix(in srgb, var(--soft-bg) 84%, var(--panel-bg));
  --button-secondary-text: var(--text);
  --button-secondary-border: color-mix(in srgb, var(--border) 88%, transparent);
  --button-tertiary-bg: transparent;
  --button-tertiary-text: var(--muted-text);
  --button-danger-bg: color-mix(in srgb, var(--danger-bg, #fff1ec) 72%, var(--panel-bg));
  --button-danger-text: var(--danger-text, #8a3422);
  --button-danger-border: color-mix(in srgb, var(--danger-border, #d9b9ad) 84%, var(--border));
  --chip-bg: #fffaf2;
  --chip-border: #e2d7c7;
  --chip-text: #293c3a;
  --chip-selected-bg: #073f3b;
  --chip-selected-text: #fffaf2;
  background: var(--page-bg);
}

:root[data-theme="dark"] {
  --page-bg: #062b29;
  --panel-bg: #0f3532;
  --card-bg: #123c38;
  --autofill-bg: #123c38;
  --solid-autofill-bg: #153f3a;
  --soft-bg: #173f3a;
  --muted-bg: #1e4b45;
  --text: #fff7eb;
  --muted-text: #d7cbbb;
  --placeholder-text: #8f9f94;
  --border: rgba(255, 250, 242, 0.14);
  --accent: #9ed8cd;
  --accent-strong: #d2fff4;
  --success-bg: rgba(96, 187, 139, 0.17);
  --success-text: #a8edc7;
  --notify-off-text: #ffafa4;
  --board-brief-bg: linear-gradient(145deg, rgba(255, 250, 242, 0.09), rgba(255, 250, 242, 0.035));
  --board-readiness-bg: rgba(255, 250, 242, 0.07);
  --board-lunch-bg: linear-gradient(145deg, rgba(255, 250, 242, 0.11), rgba(255, 250, 242, 0.045));
  --board-row-bg: rgba(255, 250, 242, 0.08);
  --board-row-border: rgba(255, 250, 242, 0.15);
  --board-row-text: #dccfc0;
  --board-muted-text: #bbaea0;
  --board-panel-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.22);
  --button-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
  --button-shadow-soft: 0 10px 22px rgba(0, 0, 0, 0.18);
  --button-shadow-strong: 0 18px 38px rgba(0, 0, 0, 0.3);
  --button-primary-radius: 999px;
  --button-control-radius: 12px;
  --button-compact-radius: 10px;
  --button-primary-bg: var(--coral);
  --button-primary-text: #092b28;
  --button-secondary-bg: rgba(255, 250, 242, 0.08);
  --button-secondary-text: var(--text);
  --button-secondary-border: rgba(255, 250, 242, 0.16);
  --button-tertiary-bg: transparent;
  --button-tertiary-text: var(--muted-text);
  --button-danger-bg: color-mix(in srgb, var(--coral) 12%, var(--panel-bg));
  --button-danger-text: color-mix(in srgb, var(--coral) 58%, var(--text));
  --button-danger-border: color-mix(in srgb, var(--coral) 34%, var(--border));
  --chip-bg: rgba(255, 250, 242, 0.06);
  --chip-border: rgba(255, 250, 242, 0.16);
  --chip-text: #e8dccd;
  --chip-selected-bg: #f2c94b;
  --chip-selected-text: #082b29;
}

html,
body {
  background:
    radial-gradient(circle at 18% -10%, rgba(242, 201, 75, 0.14), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(239, 189, 117, 0.12), transparent 30%),
    var(--page-bg);
}

:root[data-theme="dark"] html,
:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -10%, rgba(242, 201, 75, 0.16), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(239, 189, 117, 0.08), transparent 34%),
    var(--page-bg);
}

.theme-toggle,
.about-quick,
.invite-quick,
.results-quick,
.wizard-toggle {
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
  color: var(--text);
  box-shadow: var(--button-shadow-soft);
  backdrop-filter: blur(14px);
}

.brand-mark {
  border-radius: 18px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 250, 242, 0.18), transparent 28%),
    linear-gradient(145deg, #073f3b, #042d2a);
  color: #fffaf2;
  box-shadow: var(--button-shadow-strong);
}

:root[data-theme="dark"] .brand-mark {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(145deg, #f5d86b, #d9a936);
  color: #082b29;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.eyebrow {
  color: #a87532;
  font-weight: 850;
  letter-spacing: 0.08em;
}

:root[data-theme="dark"] .eyebrow {
  color: #efbd75;
}

.panel,
.entry-card,
.auth-card,
.about-card,
.room-card,
.brief,
.readiness-card,
.notification-card,
.restaurant-card,
.responses-card,
.signal-prototype,
.host-box,
.identity-box,
.location-box,
fieldset,
.provider-disclosure,
.prohibition-gallery,
.about-facts div,
.coffee-card {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 24px;
  box-shadow: 0 20px 55px rgba(31, 24, 14, 0.08);
}

.about-mini-action {
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .room-card,
:root[data-theme="dark"] .brief,
:root[data-theme="dark"] .readiness-card,
:root[data-theme="dark"] .notification-card,
:root[data-theme="dark"] .restaurant-card,
:root[data-theme="dark"] .responses-card,
:root[data-theme="dark"] .signal-prototype,
:root[data-theme="dark"] .host-box,
:root[data-theme="dark"] .identity-box,
:root[data-theme="dark"] .location-box,
:root[data-theme="dark"] fieldset,
:root[data-theme="dark"] .provider-disclosure,
:root[data-theme="dark"] .prohibition-gallery,
:root[data-theme="dark"] .about-facts div,
:root[data-theme="dark"] .coffee-card {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

:root[data-theme="dark"] .about-mini-action {
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .about-mini-dock {
  background: color-mix(in srgb, var(--panel-bg) 76%, transparent);
  box-shadow:
    inset 0 1px rgba(255, 250, 242, 0.08),
    inset 0 -1px rgba(255, 250, 242, 0.05),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] .about-mini-dock::before {
  background: color-mix(in srgb, var(--border) 66%, transparent);
  box-shadow:
    inset 0 1px rgba(255, 250, 242, 0.1),
    0 1px rgba(0, 0, 0, 0.2);
  opacity: 0.64;
}

:root[data-theme="dark"] .about-mini-dock::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--coral) 72%, #fffaf2),
    color-mix(in srgb, var(--accent) 44%, var(--coral))
  );
  box-shadow:
    0 0 16px color-mix(in srgb, var(--coral) 42%, transparent),
    0 1px rgba(255, 250, 242, 0.12);
}

:root[data-theme="dark"] .about-mini-action::before {
  background: color-mix(in srgb, var(--panel-bg) 70%, var(--soft-bg));
  box-shadow:
    inset 0 1px rgba(255, 250, 242, 0.14),
    inset 0 -3px 8px rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.22);
}

:root[data-theme="dark"] .about-mini-action:active::before,
:root[data-theme="dark"] .about-mini-action.is-about-anchor-active::before {
  background: color-mix(in srgb, var(--soft-bg) 80%, var(--coral) 20%);
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.28),
    inset 0 -1px rgba(255, 250, 242, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.18);
}

:root[data-theme="dark"] .about-mini-prohibit img {
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.26));
}

:root[data-theme="dark"] .about-mini-grade::before {
  background: color-mix(in srgb, var(--panel-bg) 76%, #1558a8 24%);
}

input,
select,
textarea,
.invite-link-display,
.share-link,
.date-day-label,
.distance-menu-button {
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
}

select {
  border-color: var(--select-edge);
  border-radius: 18px;
  background-color: var(--select-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23073f3b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 68%, transparent), transparent 62%);
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat;
  background-size: 18px 18px, 100% 100%;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.62),
    0 9px 20px rgba(31, 24, 14, 0.045);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .invite-link-display,
:root[data-theme="dark"] .share-link,
:root[data-theme="dark"] .date-day-label,
:root[data-theme="dark"] .distance-menu-button {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] select {
  background-color: var(--select-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23f2ecdf' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(145deg, rgba(255, 250, 242, 0.075), rgba(255, 250, 242, 0.02));
  background-position: right 16px center, 0 0;
  background-repeat: no-repeat;
  background-size: 18px 18px, 100% 100%;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 12px 26px rgba(0, 0, 0, 0.14);
}

input[type="range"],
:root[data-theme="dark"] input[type="range"] {
  min-height: 34px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--range-fill) 0%,
    var(--range-fill) var(--range-percent),
    var(--range-track) var(--range-percent),
    var(--range-track) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 8px;
  box-shadow: none;
}

.primary,
.wide,
.auth-actions .primary,
.actions .primary,
.form-wizard-actions .primary {
  border: 0;
  border-radius: var(--button-primary-radius);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: var(--button-shadow);
}

:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .wide,
:root[data-theme="dark"] .auth-actions .primary,
:root[data-theme="dark"] .actions .primary,
:root[data-theme="dark"] .form-wizard-actions .primary {
  color: var(--button-primary-text);
}

.wide,
.primary {
  min-height: 54px;
  font-weight: 900;
}

.share-stack button,
.auth-actions button,
.form-wizard-actions button,
.actions button,
.room-row button,
.distance-menu-list button,
.brand-menu button,
.location-segmented button,
.chips button,
.danger,
.about-actions button,
.about-coffee-link {
  border-radius: 999px;
}

.entry-step {
  position: relative;
  min-height: calc(100dvh - 48px);
  align-items: center;
  border: 1px solid rgba(255, 250, 242, 0.12);
  border-radius: 34px;
  padding: clamp(28px, 4vw, 52px);
  background:
    radial-gradient(circle at 29% 21%, rgba(242, 201, 75, 0.08), transparent 18%),
    radial-gradient(circle at 74% 70%, rgba(239, 189, 117, 0.1), transparent 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 100%),
    linear-gradient(150deg, #063b37 0%, #042d2b 52%, #062723 100%);
  background-size: auto, auto, 44px 44px, auto;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(6, 43, 41, 0.22);
}

.entry-step::before,
.entry-step::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.entry-step::before {
  display: none;
}

.entry-step::after {
  width: 78px;
  height: 48px;
  left: 30%;
  top: clamp(220px, 28vh, 260px);
  border: 4px solid #efbd75;
  border-top-left-radius: 70px;
  border-top-right-radius: 70px;
  border-bottom: 0;
  opacity: 0.8;
  transform: translateX(-50%);
}

.entry-step .brand-lockup {
  position: relative;
  z-index: 1;
  justify-items: center;
  text-align: center;
}

.entry-step .brand-mark {
  width: 76px;
  height: 76px;
  border: 2px solid rgba(239, 189, 117, 0.76);
  border-radius: 26px;
  background: rgba(255, 250, 242, 0.04);
  color: #efbd75;
  box-shadow: inset 0 1px rgba(255, 250, 242, 0.1), 0 18px 44px rgba(0, 0, 0, 0.18);
}

.entry-step .eyebrow {
  display: none;
}

.entry-step h1 {
  margin: 18px 0 0;
  color: #fffaf2;
  font-size: clamp(3.1rem, 6vw, 5.3rem);
  line-height: 0.9;
  text-wrap: balance;
}

.entry-step h1 span {
  color: var(--coral);
}

.entry-step .hero-subtitle {
  display: none;
}

.entry-card,
.auth-card {
  position: relative;
  z-index: 1;
  padding: 24px;
  background: rgba(255, 250, 242, 0.96);
}

:root[data-theme="dark"] .entry-card,
:root[data-theme="dark"] .auth-card {
  background: rgba(15, 53, 50, 0.94);
}

.entry-card h2,
.auth-card h2,
.about-card h2,
.panel-head h2 {
  color: var(--text);
  font-family: var(--body-font);
  font-weight: 920;
}

.app-topbar {
  align-items: center;
}

.app-heading {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
}

.app-heading h1 {
  max-width: 560px;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 0.98;
}

.app-heading .hero-subtitle {
  font-size: 0.96rem;
}

.form-wizard-head {
  border-radius: 26px;
  padding: 16px;
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 201, 75, 0.08), transparent 34%),
    linear-gradient(145deg, #fffdf8, #f4eadc);
}

:root[data-theme="dark"] .form-wizard-head {
  border-color: color-mix(in srgb, var(--border) 68%, transparent);
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 201, 75, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 242, 0.082), rgba(255, 250, 242, 0.03));
  box-shadow: none;
}

.form-wizard-stepper button::before {
  display: none;
  height: 3px;
  background: color-mix(in srgb, var(--border) 76%, transparent);
}

.form-wizard-stepper span {
  display: none;
  border-width: 0;
  background: color-mix(in srgb, var(--muted-bg) 72%, var(--panel-bg));
}

.form-wizard-stepper button.is-current span {
  background: linear-gradient(145deg, #073f3b, #052f2c);
  color: #fffaf2;
  box-shadow: var(--button-shadow-soft);
}

:root[data-theme="dark"] .form-wizard-stepper button.is-current span {
  background: linear-gradient(145deg, var(--coral), var(--coral-strong));
  color: #092726;
}

.form-wizard-head strong {
  font-family: var(--display-font);
  font-size: 1.35rem;
  line-height: 1;
}

fieldset {
  background: color-mix(in srgb, var(--panel-bg) 72%, transparent);
}

legend,
h3 {
  letter-spacing: 0.06em;
}

.chips {
  gap: 10px;
}

.chips button {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--chip-border) 82%, transparent);
  padding: 0 16px;
  box-shadow: var(--button-shadow-soft);
}

.chips button.selected {
  box-shadow: var(--button-shadow);
}

.location-segmented {
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg) 72%, transparent);
}

.location-segmented button.selected {
  border-radius: 999px;
  background: linear-gradient(145deg, #073f3b, #052f2c);
  color: #fffaf2;
}

:root[data-theme="dark"] .location-segmented button.selected {
  background: linear-gradient(145deg, var(--coral), var(--coral-strong));
  color: #092726;
}

.area-map {
  border-radius: 26px;
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
}

.board-panel {
  background:
    radial-gradient(circle at 90% 0%, rgba(242, 201, 75, 0.1), transparent 26%),
    color-mix(in srgb, var(--panel-bg) 94%, transparent);
}

.status-pill,
.provider-chip,
.matrix-pills em,
.restaurant-option,
.person-card,
.count-row,
.constraint-gauge,
.matrix-card,
.donut-tile,
.donut-constraints span {
  border-radius: 18px;
}

.restaurant-card {
  background:
    radial-gradient(circle at 90% 0%, rgba(242, 201, 75, 0.1), transparent 30%),
    var(--board-lunch-bg);
}

.restaurant-head h3,
.responses-card h3,
.brief h3,
.readiness-card h3,
.notification-card h3 {
  color: var(--accent);
}

:root[data-theme="dark"] .restaurant-head h3,
:root[data-theme="dark"] .responses-card h3,
:root[data-theme="dark"] .brief h3,
:root[data-theme="dark"] .readiness-card h3,
:root[data-theme="dark"] .notification-card h3 {
  color: #efbd75;
}

.restaurant-option {
  padding: 12px;
  box-shadow: 0 12px 30px rgba(31, 24, 14, 0.06);
}

.restaurant-thumb {
  border-radius: 16px;
}

.restaurant-title {
  font-family: var(--display-font);
  font-size: 1.08rem;
  font-weight: 800;
}

.person-avatar {
  border-radius: 999px;
}

.danger {
  border-color: color-mix(in srgb, var(--danger-border) 76%, transparent);
  background: color-mix(in srgb, var(--danger-bg) 74%, var(--panel-bg));
}

.reset-room-button {
  display: inline-grid;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  place-items: center;
  border: 1px solid #d9b8ae;
  border-radius: 12px;
  padding: 0 16px;
  background: #fff8f5;
  color: #873829;
  box-shadow: none;
  font-weight: 850;
  line-height: 1;
  text-shadow: none;
}

.reset-room-button:hover,
.reset-room-button:focus-visible {
  border-color: #bd887a;
  background: #fff3ef;
  color: #70291e;
}

.reset-room-button:focus-visible {
  outline: 3px solid rgba(135, 56, 41, 0.2);
  outline-offset: 2px;
}

.reset-room-button:active {
  transform: translateY(1px);
}

:root[data-theme="dark"] .reset-room-button {
  border-color: color-mix(in srgb, var(--danger-border) 72%, var(--panel-bg));
  background: color-mix(in srgb, var(--danger-bg) 44%, var(--panel-bg));
  color: color-mix(in srgb, var(--danger-text) 88%, var(--text));
  box-shadow: none;
}

:root[data-theme="dark"] .reset-room-button:hover,
:root[data-theme="dark"] .reset-room-button:focus-visible {
  border-color: color-mix(in srgb, var(--danger-border) 88%, var(--panel-bg));
  background: color-mix(in srgb, var(--danger-bg) 58%, var(--panel-bg));
  color: var(--danger-text);
}

:root[data-theme="dark"] .reset-room-button:focus-visible {
  outline-color: color-mix(in srgb, var(--danger-text) 22%, transparent);
}

@media (min-width: 921px) {
  .layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.65fr);
  }

  .form-panel,
  .board-panel {
    padding: 22px;
  }
}

@media (max-width: 680px) {
  .page-controls {
    top: 18px;
    right: 18px;
  }

  body:has(#entryStep:not([hidden])),
  body:has(#authStep:not([hidden])) {
    background:
      radial-gradient(circle at 22% 8%, rgba(242, 201, 75, 0.13), transparent 28%),
      linear-gradient(150deg, #063b37 0%, #042d2b 55%, #062723 100%);
  }

  body:has(#entryStep:not([hidden])) .shell,
  body:has(#authStep:not([hidden])) .shell {
    width: 100%;
    padding: 0;
  }

  .entry-step,
  .auth-step {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 28px 22px 22px;
    box-shadow: none;
  }

  .entry-step {
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 18px;
  }

  .entry-step::after {
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
  }

  .entry-step .brand-lockup {
    min-height: 39dvh;
    align-content: center;
  }

  .entry-step .brand-mark {
    width: 66px;
    height: 66px;
    border-radius: 22px;
    font-size: 2rem;
  }

  .entry-step h1 {
    font-size: clamp(2.85rem, 13.5vw, 3.72rem);
  }

  .entry-step .entry-card,
  .auth-card {
    margin: 0;
    border-radius: 30px;
    padding: 18px;
  }

  .entry-card h2,
  .auth-card h2 {
    font-size: 1.18rem;
  }

  .entry-card .wide {
    min-height: 58px;
    margin-top: 12px;
  }

  .auth-step {
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    background:
      radial-gradient(circle at 20% 8%, rgba(242, 201, 75, 0.12), transparent 24%),
      linear-gradient(150deg, #063b37 0%, #042d2b 55%, #062723 100%);
  }

  .auth-step .brand-lockup {
    justify-items: center;
    padding-top: 42px;
    text-align: center;
  }

  .auth-step .brand-lockup h1 {
    color: #fffaf2;
  }

  .auth-step .brand-lockup .hero-subtitle {
    display: block;
    color: rgba(255, 250, 242, 0.72);
  }

  .app-topbar {
    min-height: 66px;
    padding-right: 150px;
  }

  .app-heading h1 {
    max-width: clamp(150px, calc(100vw - 242px), 240px);
    font-size: 1.36rem;
    line-height: 1.04;
  }

  .form-panel[data-form-wizard] {
    border-radius: 30px;
    padding: 14px 14px var(--wizard-action-footer-space);
  }

  :root[data-theme="dark"] .form-panel[data-form-wizard] {
    border-color: transparent;
    box-shadow: none;
  }

  .form-wizard-head {
    padding: 14px;
  }

  .form-wizard-head strong {
    font-size: 1.22rem;
  }

  .form-wizard-actions button {
    min-height: 44px;
  }

  .form-panel[data-form-wizard] .chips button {
    min-height: 40px;
    padding: 0 12px;
  }

  #appStep[data-results-view] .board-panel {
    background: transparent;
  }

  #appStep[data-results-view] .restaurant-list {
    margin-top: 0;
  }
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body:has(#appStep[data-results-view]:not([hidden])) .shell,
html[data-theme="dark"] #appStep[data-results-view] {
  background:
    radial-gradient(circle at 12% -10%, rgba(242, 201, 75, 0.18), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(239, 189, 117, 0.08), transparent 34%),
    var(--page-bg) !important;
}

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--page-bg);
  }

  body {
    position: fixed;
    inset: 0;
    touch-action: manipulation;
  }

  .page-controls {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  .shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--page-bg);
  }

  .entry-step,
  .auth-step,
  .about-step,
  #appStep {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .entry-step,
  .auth-step {
    padding:
      max(28px, env(safe-area-inset-top))
      max(22px, env(safe-area-inset-right))
      max(22px, env(safe-area-inset-bottom))
      max(22px, env(safe-area-inset-left));
  }

  .entry-step {
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .auth-step {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .auth-card {
    align-self: start;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .about-step {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    padding:
      max(28px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .about-card {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html:has(#aboutStep:not([hidden])),
  body:has(#aboutStep:not([hidden])) {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  body:has(#aboutStep:not([hidden])) {
    position: relative;
    inset: auto;
    touch-action: pan-y;
  }

  body:has(#aboutStep:not([hidden])) .shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  #aboutStep:not([hidden]) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  #aboutStep:not([hidden]) .about-card {
    overflow: visible;
  }

  #appStep:not([hidden]) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  #appStep .app-topbar {
    min-height: 62px;
    margin: 0;
    padding-right: 150px;
  }

  #appStep .layout {
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .layout,
  #appStep[data-results-view] .layout {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .layout {
    overflow: visible;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel,
  #appStep[data-results-view] .board-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel {
    overflow: visible;
  }

  .form-panel[data-form-wizard] {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
    gap: var(--wizard-section-gap);
  }

  .form-panel[data-form-wizard] > [data-wizard-step]:not([hidden]) {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .form-panel[data-form-wizard] > .field-grid:not([hidden]),
  .form-panel[data-form-wizard] > fieldset:not([hidden]),
  .form-panel[data-form-wizard] > .invite-panel:not([hidden]) {
    align-self: start;
    width: 100%;
    max-height: 100%;
    align-content: start;
    overflow-y: auto;
  }

  .form-panel[data-form-wizard] > .field-grid:not([hidden]) {
    gap: var(--wizard-field-gap);
    grid-auto-rows: max-content;
  }

  .form-panel[data-form-wizard] > .basics-grid:not([hidden]) {
    overflow: visible;
  }

  .form-panel[data-form-wizard] > [data-wizard-step="logistics"]:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-panel[data-form-wizard] > [data-wizard-step="logistics"]:not([hidden]) > label:nth-child(-n + 2) {
    grid-column: 1 / -1;
  }

  .form-panel[data-form-wizard] label {
    grid-template-rows: auto auto;
    align-content: start;
    gap: var(--wizard-label-gap);
  }

  .form-panel[data-form-wizard] input,
  .form-panel[data-form-wizard] select,
  .form-panel[data-form-wizard] textarea,
  .availability-calendar-toggle {
    font-weight: 560;
  }

  .form-wizard-progress-label,
  .availability-date-list button,
  .availability-calendar-head strong,
  .availability-calendar-head button,
  .availability-calendar-weekdays span,
  .availability-calendar-day,
  legend {
    font-weight: 620;
    letter-spacing: 0;
  }

  .availability-date-list {
    gap: 6px;
  }

  .availability-date-list button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .availability-calendar-toggle {
    min-height: 50px;
    border-radius: 18px;
  }

  .availability-calendar {
    position: fixed;
    z-index: 920;
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    max-height: min(72dvh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 20px;
    padding: 12px;
  }

  .form-panel[data-form-wizard] label > input:not([type="hidden"]),
  .form-panel[data-form-wizard] label > select,
  .form-panel[data-form-wizard] label > textarea,
  .form-panel[data-form-wizard] label > .range-row,
  .form-panel[data-form-wizard] label > .date-input-row {
    align-self: start;
  }

  .form-panel[data-form-wizard] .location-box:not([hidden]) {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .form-panel[data-form-wizard] .area-map {
    min-height: 0;
    height: auto;
  }

  .form-wizard-actions {
    align-self: end;
    margin-top: clamp(2px, 0.8dvh, 8px);
  }

  .save-status {
    min-height: 1.05rem;
    margin: 0;
  }

  #appStep[data-results-view] .board-panel {
    align-content: stretch;
  }

  #appStep[data-results-view] .restaurant-card {
    height: 100%;
    min-height: 0;
    align-content: center;
  }

  #appStep[data-results-view] .restaurant-list {
    min-height: 0;
    overflow: hidden;
  }

  #appStep[data-results-view] .rcs {
    min-height: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body:has(#appStep[data-results-view]:not([hidden])) .shell {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  #appStep[data-results-view] {
    padding-right: 0;
    padding-left: 0;
  }

  #appStep[data-results-view] .app-topbar {
    padding-left: max(10px, env(safe-area-inset-left));
  }

  #appStep[data-results-view] .layout,
  #appStep[data-results-view] .board-panel,
  #appStep[data-results-view] .restaurant-card,
  #appStep[data-results-view] .restaurant-list {
    overflow: visible;
  }

  #appStep[data-results-view] .layout,
  #appStep[data-results-view] .restaurant-card,
  #appStep[data-results-view] .restaurant-list,
  #appStep[data-results-view] .rcs,
  #appStep[data-results-view] .rcs-stage {
    width: 100vw;
    max-width: none;
  }

  #appStep[data-results-view] .board-panel {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-results-view] .restaurant-card {
    justify-items: center;
    padding: 0;
  }

  #appStep[data-results-view] .restaurant-list {
    place-items: start center;
  }

  #appStep[data-results-view] .rcs {
    --rcs-card-w: min(calc(100vw - 20px), 380px);
    justify-items: center;
    margin: 0;
    overflow: visible;
  }

  #appStep[data-results-view] .rcs-stage {
    overflow: visible;
  }

  #appStep[data-results-view] .rcs:not(.is-expanded) .rcs-nav-toolbar {
    display: flex;
    top: calc(var(--rcs-card-h) + clamp(72px, 8dvh, 88px));
    right: max(18px, calc((100vw - var(--rcs-card-w)) / 2 + 20px));
    gap: 10px;
    z-index: 230;
    transform: translateY(-100%);
  }

  #appStep[data-results-view] .rcs-nav-toolbar .rcs-control {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    color: var(--accent);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.46),
      0 12px 24px rgba(31, 24, 14, 0.14);
    backdrop-filter: blur(14px);
  }

  #appStep[data-results-view] .rcs-nav-toolbar .rcs-control svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.65;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-nav-toolbar .rcs-control {
    border-color: rgba(255, 250, 242, 0.16);
    background: color-mix(in srgb, var(--panel-bg) 82%, var(--soft-white, #f2ecdf) 18%);
    color: var(--soft-white, #f2ecdf);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.08),
      0 16px 34px rgba(0, 0, 0, 0.34);
  }

  #appStep[data-results-view] .rcs.is-expanded .rcs-nav-toolbar {
    display: none;
  }

  #appStep[data-results-view] .rcs.is-expanded .rcs-counter {
    padding-top: 3px;
    line-height: 1.45;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded {
    width: min(100vw, 430px);
    height: calc(100dvh - 128px);
    max-height: calc(100dvh - 128px);
    overflow-x: visible;
    overflow-y: auto;
  }
}

:root:not([data-theme="dark"]) .entry-step {
  background:
    radial-gradient(circle at 22% 8%, rgba(242, 201, 75, 0.1), transparent 28%),
    radial-gradient(circle at 78% 24%, rgba(239, 189, 117, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(197, 128, 64, 0.04) 0 1px, transparent 1px 100%),
    var(--page-bg);
  background-size: auto, auto, 44px 44px, auto;
  box-shadow: 0 30px 80px rgba(31, 24, 14, 0.08);
}

:root:not([data-theme="dark"]) .auth-step {
  background:
    radial-gradient(circle at 20% 8%, rgba(242, 201, 75, 0.1), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(239, 189, 117, 0.14), transparent 34%),
    var(--page-bg);
}

:root:not([data-theme="dark"]) .entry-step h1,
:root:not([data-theme="dark"]) .auth-step .brand-lockup h1 {
  color: var(--text);
}

:root:not([data-theme="dark"]) .entry-step .brand-mark {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--gold));
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 250, 242, 0.18), transparent 28%),
    linear-gradient(145deg, #073f3b, #042d2a);
  color: #fffaf2;
  box-shadow: var(--button-shadow-strong);
}

:root:not([data-theme="dark"]) .auth-step .brand-lockup .hero-subtitle {
  color: var(--muted-text);
}

@media (max-width: 680px) {
  :root:not([data-theme="dark"]) body:has(#entryStep:not([hidden])),
  :root:not([data-theme="dark"]) body:has(#authStep:not([hidden])) {
    background:
      radial-gradient(circle at 22% 8%, rgba(242, 201, 75, 0.1), transparent 28%),
      radial-gradient(circle at 82% 18%, rgba(239, 189, 117, 0.14), transparent 34%),
      var(--page-bg) !important;
  }
}

/* Clean surface direction: remove decorative gradients from app chrome and cards. */
:root,
:root[data-theme="dark"] {
  --board-brief-bg: var(--panel-bg);
  --board-lunch-bg: var(--panel-bg);
}

body,
.shell,
.entry-step,
.auth-step,
.about-step,
#appStep,
.entry-card,
.auth-card,
.about-card,
.panel,
.form-panel,
.board-panel,
.brief,
.readiness-card,
.notification-card,
.restaurant-card,
.responses-card,
.signal-prototype,
.results-empty-state,
.host-box,
.prohibition-gallery,
.provider-disclosure,
.about-disclosure,
.about-section,
.score-card,
.support-card,
.free-community-panel {
  background-image: none !important;
}

.entry-step,
.auth-step,
.about-step,
#appStep {
  background-color: var(--page-bg) !important;
}

.entry-card,
.auth-card,
.about-card,
.panel,
.form-panel,
.board-panel,
.brief,
.readiness-card,
.notification-card,
.restaurant-card,
.responses-card,
.signal-prototype,
.results-empty-state,
.host-box,
.prohibition-gallery,
.provider-disclosure,
.about-disclosure,
.about-section,
.score-card,
.support-card,
.free-community-panel {
  background-color: var(--panel-bg) !important;
}

:root {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-logo-variant="house"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"][data-logo-variant="house"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-logo-variant="warm"],
:root[data-logo-variant="auto"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"][data-logo-variant="warm"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"][data-logo-variant="auto"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-logo-variant="ink"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"][data-logo-variant="ink"] {
  --brand-badge-bg: transparent;
  --brand-badge-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
  --brand-entry-mark-image: url("/lunch-brand.svg?v=20260511-lunch-brand-1");
}

:root[data-theme="dark"],
:root[data-theme="dark"][data-logo-variant="house"],
:root[data-theme="dark"][data-logo-variant="warm"],
:root[data-theme="dark"][data-logo-variant="auto"],
:root[data-theme="dark"][data-logo-variant="ink"] {
  --brand-badge-bg: transparent;
}

.brand-mark,
.app-brand-mark,
.entry-step .brand-mark,
:root:not([data-theme="dark"]) .entry-step .brand-mark,
:root[data-theme="dark"] .brand-mark {
  overflow: hidden;
  background-color: var(--brand-badge-bg) !important;
  background-image: var(--brand-badge-image) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 86% 86% !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}

:root[data-theme="dark"] .brand-mark {
  box-shadow: none;
}

.entry-step {
  grid-template-columns: minmax(360px, 0.9fr) minmax(340px, 460px);
  align-items: stretch;
}

.entry-step .brand-lockup {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  min-height: clamp(520px, calc(100dvh - 128px), 720px);
  align-content: center;
  justify-content: center;
  justify-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 58%, transparent);
  border-radius: 30px;
  padding: clamp(42px, 6vw, 78px);
  background:
    linear-gradient(135deg, rgba(255, 250, 242, 0.07) 0 1px, transparent 1px 100%),
    linear-gradient(160deg, #073f3b 0%, #052f2c 58%, #042622 100%);
  background-size: 48px 48px, auto;
  box-shadow: 0 28px 70px rgba(31, 24, 14, 0.16);
  color: var(--soft-white, #fffaf2);
  text-align: center;
}

.entry-step .brand-lockup::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(239, 189, 117, 0.16) 38% 38.25%, transparent 38.25% 100%),
    linear-gradient(24deg, transparent 0 66%, rgba(242, 201, 75, 0.14) 66% 66.3%, transparent 66.3% 100%);
  opacity: 0.74;
}

.entry-step .brand-lockup > * {
  position: relative;
  z-index: 1;
}

.entry-step .brand-mark,
:root:not([data-theme="dark"]) .entry-step .brand-mark,
:root[data-theme="dark"] .entry-step .brand-mark {
  width: clamp(88px, 9vw, 118px);
  height: clamp(88px, 9vw, 118px);
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  background-image: var(--brand-entry-mark-image) !important;
  background-size: contain !important;
  box-shadow: none;
}

.entry-step h1 {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--soft-white, #fffaf2);
  font-family: var(--display-font, "Fraunces", Georgia, serif);
  font-size: clamp(3.45rem, 7.4vw, 6.35rem);
  font-weight: 680;
  line-height: 0.88;
  text-align: center;
}

:root:not([data-theme="dark"]) .entry-step h1,
:root[data-theme="dark"] .entry-step h1 {
  color: var(--soft-white, #fffaf2);
}

.entry-step h1 span {
  color: var(--coral, #ff6f5e);
}

.entry-step .entry-card {
  align-self: center;
  margin-top: 0;
}

:root[data-theme="dark"] .entry-step .brand-lockup {
  border-color: rgba(255, 250, 242, 0.1);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.34);
}

@media (max-width: 680px) {
  .entry-step {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;
  }

  .entry-step .brand-lockup {
    min-height: 36dvh;
    border-radius: 26px;
    padding: 28px 22px;
  }

  .entry-step .brand-mark,
  :root:not([data-theme="dark"]) .entry-step .brand-mark,
  :root[data-theme="dark"] .entry-step .brand-mark {
    width: 82px;
    height: 82px;
  }

  .entry-step h1 {
    max-width: 320px;
    font-size: clamp(2.85rem, 13.5vw, 3.72rem);
  }
}

.primary,
.auth-actions .primary,
.actions .primary,
.form-wizard-actions .primary,
.results-empty-state button {
  background: var(--button-primary-bg, var(--coral, #ff6f5e)) !important;
  background-image: none !important;
  color: var(--button-primary-text, var(--soft-white, #fffaf2)) !important;
}

:root[data-theme="dark"] .primary,
:root[data-theme="dark"] .auth-actions .primary,
:root[data-theme="dark"] .actions .primary,
:root[data-theme="dark"] .form-wizard-actions .primary,
:root[data-theme="dark"] .results-empty-state button {
  background: var(--button-primary-bg, var(--coral, #ff6f5e)) !important;
  background-image: none !important;
  color: var(--button-primary-text, #161615) !important;
}

.location-segmented button.selected,
.form-wizard-stepper button.is-current span,
.distance-menu button.is-active {
  background: var(--accent) !important;
  background-image: none !important;
  color: var(--soft-white, #fffaf2) !important;
}

:root[data-theme="dark"] .location-segmented button.selected,
:root[data-theme="dark"] .form-wizard-stepper button.is-current span,
:root[data-theme="dark"] .distance-menu button.is-active {
  background: var(--coral, #ff6f5e) !important;
  background-image: none !important;
  color: #161615 !important;
}

/* Button hierarchy contract: primary is the next action, not every loud button nearby. */
.button-primary,
.button-secondary,
.button-tertiary,
.button-danger,
.button-danger-quiet {
  min-height: 44px;
  border-radius: var(--button-control-radius);
  padding: 0 16px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

.button-primary {
  border: 0 !important;
  border-radius: var(--button-primary-radius);
  background: var(--button-primary-bg) !important;
  background-image: none !important;
  color: var(--button-primary-text) !important;
  box-shadow: var(--button-shadow);
}

.button-spatial-primary {
  min-height: 54px;
  border-radius: var(--button-primary-radius);
  box-shadow: var(--button-shadow-strong);
}

.button-primary.is-saved {
  border: 1px solid var(--button-secondary-border) !important;
  border-radius: var(--button-control-radius);
  background: var(--button-secondary-bg) !important;
  color: var(--muted-text) !important;
  box-shadow: none;
}

.button-secondary {
  border: 1px solid var(--button-secondary-border) !important;
  border-radius: var(--button-control-radius);
  background: var(--button-secondary-bg) !important;
  background-image: none !important;
  color: var(--button-secondary-text) !important;
  box-shadow: var(--button-shadow-soft);
}

.button-tertiary {
  border: 1px solid color-mix(in srgb, var(--border) 62%, transparent) !important;
  border-radius: var(--button-compact-radius);
  background: var(--button-tertiary-bg) !important;
  background-image: none !important;
  color: var(--button-tertiary-text) !important;
  box-shadow: none !important;
}

.button-danger,
.button-danger-quiet {
  border: 1px solid var(--button-danger-border) !important;
  border-radius: var(--button-control-radius);
  background: var(--button-danger-bg) !important;
  background-image: none !important;
  color: var(--button-danger-text) !important;
  box-shadow: none !important;
}

.button-danger-quiet {
  background: transparent !important;
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--button-shadow-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--button-secondary-border)) !important;
  background: color-mix(in srgb, var(--button-secondary-bg) 78%, var(--panel-bg)) !important;
}

.button-tertiary:hover,
.button-tertiary:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  background: color-mix(in srgb, var(--soft-bg) 54%, transparent) !important;
  color: var(--text) !important;
}

.button-danger:hover,
.button-danger:focus-visible,
.button-danger-quiet:hover,
.button-danger-quiet:focus-visible {
  border-color: color-mix(in srgb, var(--danger-text, #8a3422) 38%, var(--button-danger-border)) !important;
  background: color-mix(in srgb, var(--button-danger-bg) 74%, var(--panel-bg)) !important;
  color: var(--danger-text, #8a3422) !important;
}

.button-primary:focus-visible,
.button-secondary:focus-visible,
.button-tertiary:focus-visible,
.button-danger:focus-visible,
.button-danger-quiet:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.button-danger:focus-visible,
.button-danger-quiet:focus-visible {
  outline-color: color-mix(in srgb, var(--danger-text, #8a3422) 24%, transparent);
}

.button-primary:active,
.button-secondary:active,
.button-tertiary:active,
.button-danger:active,
.button-danger-quiet:active {
  transform: translateY(1px);
}

.button-primary:disabled,
.button-secondary:disabled,
.button-tertiary:disabled,
.button-danger:disabled,
.button-danger-quiet:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}

.identity-grid .button-primary,
.identity-grid .button-secondary,
.host-grid .button-secondary,
.invite-copy-row .button-secondary,
.restaurant-head .button-secondary {
  min-height: 44px;
}

.auth-actions .button-secondary,
.auth-actions .button-primary,
.actions .button-tertiary,
.actions .button-primary,
.form-wizard-actions .button-secondary,
.form-wizard-actions .button-tertiary,
.form-wizard-actions .button-primary {
  min-height: 44px;
}

.host-box.is-saved #saveRoomSettingsButton.button-secondary {
  border-color: color-mix(in srgb, var(--success-text) 30%, var(--button-secondary-border)) !important;
  background: color-mix(in srgb, var(--success-bg) 58%, var(--panel-bg)) !important;
  color: var(--success-text) !important;
  box-shadow: none;
}

@media (max-width: 680px) {
  .button-secondary,
  .button-tertiary,
  .button-danger,
  .button-danger-quiet,
  .button-primary.is-saved {
    border-radius: 999px;
  }
}

/* Results mode should read as one app canvas, not a separate header section. */
body:has(#appStep[data-results-view]:not([hidden])),
body:has(#appStep[data-results-view]:not([hidden])) .shell,
#appStep[data-results-view],
#appStep[data-results-view] .app-topbar,
#appStep[data-results-view] .layout,
#appStep[data-results-view] .board-panel,
#appStep[data-results-view] .restaurant-card,
#appStep[data-results-view] .restaurant-list {
  background: var(--page-bg) !important;
  background-image: none !important;
}

/* Keep results-mode chrome on the same canvas as preferences; only the cards should own solid surfaces. */
body:has(#appStep[data-results-view]:not([hidden])) {
  background: var(--page-bg) !important;
}

html[data-theme="dark"] body:has(#appStep[data-results-view]:not([hidden])) {
  background:
    radial-gradient(circle at 12% -10%, rgba(242, 201, 75, 0.18), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(239, 189, 117, 0.08), transparent 34%),
    var(--page-bg) !important;
}

body:has(#appStep[data-results-view]:not([hidden])) .shell,
#appStep[data-results-view],
#appStep[data-results-view] .app-topbar,
#appStep[data-results-view] .layout,
#appStep[data-results-view] .board-panel,
#appStep[data-results-view] .restaurant-card,
#appStep[data-results-view] .restaurant-list {
  background: transparent !important;
  background-image: none !important;
}

html:has(#appStep[data-results-view]:not([hidden])),
html:has(#appStep[data-results-view]:not([hidden])) body,
html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])),
html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])) body {
  background: var(--page-bg) !important;
  background-image: none !important;
}

html:has(#appStep[data-results-view]:not([hidden])) .shell,
html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])) .shell,
html[data-theme="dark"] body:has(#appStep[data-results-view]:not([hidden])) .shell,
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view],
html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view],
html[data-theme="dark"] #appStep[data-results-view],
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .app-topbar,
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .layout,
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .board-panel,
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .restaurant-card,
html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .restaurant-list {
  background: transparent !important;
  background-image: none !important;
}

.restaurant-results-cockpit,
.restaurant-results-deck {
  min-width: 0;
  width: 100%;
}

.restaurant-results-cockpit {
  display: grid;
  gap: 16px;
}

.desktop-results-feed {
  display: none;
}

.desktop-results-summary,
.desktop-results-map-panel,
.desktop-restaurant-detail {
  display: none;
}

.desktop-results-summary[hidden],
.desktop-results-map-panel[hidden],
.desktop-restaurant-detail[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  body:has(#appStep[data-results-view]:not([hidden])) .shell {
    padding: 0 !important;
  }

  #appStep[data-results-view] {
    height: 100dvh !important;
    min-height: 100dvh !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  #appStep[data-results-view] .app-topbar {
    position: relative;
    z-index: 320;
    min-height: calc(80px + env(safe-area-inset-top));
    margin: 0 !important;
    padding:
      max(14px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      8px
      max(10px, env(safe-area-inset-left)) !important;
  }

  #appStep[data-results-view] .layout {
    height: calc(100dvh - 80px - env(safe-area-inset-top)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(#appStep[data-results-view] .rcs:not(.is-expanded):not(.is-detail-open)) #appStep[data-results-view] .layout,
  body:has(#appStep[data-results-view] .rcs:not(.is-expanded):not(.is-detail-open)) #appStep[data-results-view] .board-panel,
  body:has(#appStep[data-results-view] .rcs:not(.is-expanded):not(.is-detail-open)) #appStep[data-results-view] .restaurant-card,
  body:has(#appStep[data-results-view] .rcs:not(.is-expanded):not(.is-detail-open)) #appStep[data-results-view] .restaurant-list {
    overflow: visible !important;
  }

  body:has(#appStep[data-results-view] .rcs-stage.is-dragging) #appStep[data-results-view] .layout {
    position: relative;
    z-index: 420;
  }

  #appStep[data-results-view] .rcs-stage.is-dragging .rcs-card.is-active {
    z-index: 640 !important;
  }

  #appStep[data-results-view] .board-panel,
  #appStep[data-results-view] .restaurant-card,
  #appStep[data-results-view] .restaurant-list {
    height: 100% !important;
    min-height: 0 !important;
  }

  #appStep[data-results-view] .restaurant-card {
    align-content: stretch !important;
  }

  #appStep[data-results-view] .restaurant-list {
    place-items: start center !important;
  }

  body:has(.rcs.is-detail-open) .page-controls,
  body:has(.rcs.is-detail-open) #appStep[data-results-view] .app-topbar {
    display: none !important;
  }

  body:has(.rcs.is-detail-open) #appStep[data-results-view] .layout {
    height: 100dvh !important;
  }

  body:has(.rcs.is-detail-open) #appStep[data-results-view] .restaurant-list {
    width: 100vw !important;
    place-items: stretch !important;
  }
}

/* Room list cards have a stable internal layout; summary length must not move metadata/actions. */
.rooms-list > .room-row-shell .room-row {
  grid-template-columns: 46px minmax(220px, 1fr) minmax(144px, 176px) minmax(116px, 140px) 66px;
  gap: 14px;
  align-items: center;
  min-height: 82px;
}

.rooms-list > .room-row-shell .room-row-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

.rooms-list > .room-row-shell .room-row-meta {
  grid-column: auto;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 14px;
  justify-items: start;
  white-space: nowrap;
}

.rooms-list > .room-row-shell .room-row-action {
  grid-column: auto;
  justify-self: end;
}

@media (min-width: 681px) {
  html:has(#appStep[data-results-view]:not([hidden])),
  html:has(#appStep[data-results-view]:not([hidden])) body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .page-controls {
    top: 24px;
    right: max(16px, calc((100vw - 1220px) / 2));
  }

  .entry-step,
  .auth-step,
  .about-step,
  .rooms-step,
  #appStep {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  #appStep[data-results-view] .app-heading {
    width: 100%;
    min-width: 0;
  }

  #appStep[data-results-view] .app-heading > div:not(.brand-menu-shell) {
    min-width: 0;
    width: 100%;
    padding-right: 196px;
  }

  #appStep[data-results-view] .app-heading h1,
  #appStep[data-results-view] .app-heading .hero-subtitle {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .app-heading h1 {
    margin-bottom: 4px;
    font-size: clamp(1.45rem, 2.35vw, 2.15rem);
    line-height: 1;
  }

  #appStep[data-results-view] .app-heading .hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.25;
  }
}

@media (min-width: 681px) and (max-width: 1080px) {
  #appStep[data-results-view] .app-heading > div:not(.brand-menu-shell) {
    padding-right: 174px;
  }

  #appStep[data-results-view] .app-heading h1 {
    font-size: clamp(1.28rem, 2.5vw, 1.72rem);
  }

  #appStep[data-results-view] .app-heading .hero-subtitle {
    display: none;
  }
}

@media (min-width: 921px) {
  #appStep[data-results-view] {
    --desktop-results-nav-height: 78px;
    --desktop-results-sticky-gap: 12px;
    --desktop-results-map-height: clamp(190px, 18vw, 260px);
    --desktop-results-map-top: calc(var(--desktop-results-nav-height) + var(--desktop-results-sticky-gap));
    --desktop-results-map-panel-height: calc(var(--desktop-results-map-height) + 48px);
    --desktop-results-rail-top: calc(var(--desktop-results-map-top) + var(--desktop-results-map-panel-height) + 14px);
    --desktop-results-scroll-margin: calc(var(--desktop-results-rail-top) + 18px);
  }

  body:has(#appStep[data-results-view]:not([hidden])) .page-controls {
    position: fixed;
    top: 24px;
    right: max(32px, calc((100vw - 1280px) / 2));
  }

  #appStep:not([data-results-view]) .app-heading {
    width: 100%;
  }

  #appStep:not([data-results-view]) .app-heading > div:not(.brand-menu-shell) {
    min-width: 0;
    width: 100%;
  }

  #appStep:not([data-results-view]) .app-heading h1 {
    max-width: none;
    white-space: nowrap;
  }

  #appStep:not([data-results-view]) .app-heading .hero-subtitle {
    max-width: none;
    white-space: nowrap;
  }

  body:has(#appStep[data-results-view]:not([hidden])) .shell {
    width: min(calc(100vw - 64px), 1280px);
  }

  #appStep[data-results-view] {
    min-height: calc(100dvh - 40px);
  }

  #appStep[data-results-view] .app-topbar {
    position: sticky;
    z-index: 880;
    top: 0;
    min-height: var(--desktop-results-nav-height);
    margin-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
    background: color-mix(in srgb, var(--page-bg) 90%, transparent);
    backdrop-filter: blur(16px);
  }

  #appStep[data-results-view] .layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  #appStep[data-results-view] .form-panel {
    display: none;
  }

  #appStep[data-results-view] .board-panel {
    position: static;
    display: grid;
    width: min(100%, 1240px);
    gap: 18px;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-results-view] .board-panel > .panel-head,
  #appStep[data-results-view] .provider-list,
  #appStep[data-results-view] .responses-card,
  #appStep[data-results-view] .brief,
  #appStep[data-results-view] .readiness-card,
  #appStep[data-results-view] .notification-card,
  #appStep[data-results-view] .signal-prototypes,
  #appStep[data-results-view] #resetRoomButton {
    display: none !important;
  }

  #appStep[data-results-view] .restaurant-card {
    display: grid;
    width: 100%;
    gap: 16px;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-results-view] .restaurant-head {
    display: none;
  }

  #appStep[data-results-view] .desktop-results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
  }

  #appStep[data-results-view] .desktop-results-summary > div {
    display: grid;
    position: relative;
    grid-template-areas:
      "icon label"
      "icon value"
      "icon note";
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    gap: 4px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
    box-shadow:
      inset 3px 0 0 color-mix(in srgb, var(--summary-accent, var(--accent)) 72%, transparent),
      0 10px 22px rgba(31, 24, 14, 0.035);
    overflow: hidden;
  }

  #appStep[data-results-view] .desktop-summary-card[data-room-people-open] {
    cursor: pointer;
  }

  #appStep[data-results-view] .desktop-summary-card[data-room-people-open]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--coral, #ff6f5e) 46%, transparent);
    outline-offset: 3px;
  }

  #appStep[data-results-view] .desktop-summary-card.is-room {
    --summary-accent: var(--accent);
  }

  #appStep[data-results-view] .desktop-summary-card.is-date {
    --summary-accent: #b58542;
  }

  #appStep[data-results-view] .desktop-summary-card.is-signal {
    --summary-accent: #6f9f56;
  }

  #appStep[data-results-view] .desktop-summary-card.is-diners {
    --summary-accent: var(--coral, #ff6f5e);
  }

  #appStep[data-results-view] .desktop-summary-icon {
    display: inline-grid;
    grid-area: icon;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--summary-accent, var(--accent)) 28%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--summary-accent, var(--accent)) 12%, var(--panel-bg));
    color: color-mix(in srgb, var(--summary-accent, var(--accent)) 82%, var(--text));
  }

  #appStep[data-results-view] .desktop-summary-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  #appStep[data-results-view] .desktop-summary-label {
    grid-area: label;
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .desktop-results-summary strong,
  #appStep[data-results-view] .desktop-results-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-results-summary strong {
    grid-area: value;
    color: var(--text);
    font-size: 0.98rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .desktop-results-summary small {
    grid-area: note;
    color: var(--muted-text);
    font-size: 0.78rem;
    line-height: 1.25;
  }

  #appStep[data-results-view] .desktop-summary-people {
    overflow: visible;
    white-space: normal;
  }

  #appStep[data-results-view] .desktop-summary-avatar-stack {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    padding-left: 1px;
  }

  #appStep[data-results-view] .desktop-summary-avatar {
    display: inline-grid;
    margin-right: -7px;
  }

  #appStep[data-results-view] .desktop-summary-avatar .person-avatar {
    width: 28px;
    border-width: 2px;
    border-color: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    border-radius: 999px;
    font-size: 0.68rem;
    box-shadow: 0 4px 9px rgba(31, 24, 14, 0.14);
  }

  #appStep[data-results-view] .desktop-summary-avatar-more {
    display: inline-grid;
    min-width: 28px;
    height: 28px;
    margin-left: 11px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 999px;
    background: var(--soft-bg);
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 950;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-summary > div {
    border-color: rgba(255, 250, 242, 0.1);
    background: rgba(255, 250, 242, 0.06);
    box-shadow:
      inset 3px 0 0 color-mix(in srgb, var(--summary-accent, var(--accent)) 68%, transparent),
      0 14px 34px rgba(0, 0, 0, 0.18);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-summary-icon {
    border-color: color-mix(in srgb, var(--summary-accent, var(--accent)) 34%, transparent);
    background: color-mix(in srgb, var(--summary-accent, var(--accent)) 16%, rgba(255, 250, 242, 0.08));
    color: color-mix(in srgb, var(--summary-accent, var(--accent)) 70%, var(--soft-white, #f2ecdf));
  }

  #appStep[data-results-view] .desktop-results-map-panel:not([hidden]) {
    display: grid;
    position: sticky;
    z-index: 840;
    top: var(--desktop-results-map-top);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
    box-shadow: 0 16px 34px rgba(31, 24, 14, 0.07);
  }

  #appStep[data-results-view] .desktop-results-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px 6px;
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .desktop-results-map-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #appStep[data-results-view] .desktop-results-map-head span::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: color-mix(in srgb, var(--accent) 86%, var(--text));
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5c0-.4.22-.76.58-.94L8.1 3.3a2 2 0 0 1 1.8 0l4.2 2.1a2 2 0 0 0 1.8 0l3.52-1.76A1.1 1.1 0 0 1 21 4.62v12.88c0 .4-.22.76-.58.94L15.9 20.7a2 2 0 0 1-1.8 0l-4.2-2.1a2 2 0 0 0-1.8 0l-3.52 1.76A1.1 1.1 0 0 1 3 19.38V6.5Zm5.8-1.45L5 6.95v10.9l3.8-1.9V5.05Zm1.9.05v10.98l4.6 2.3V7.4l-4.6-2.3Zm6.5 2.95v10.9l3.8-1.9V6.15l-3.8 1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5c0-.4.22-.76.58-.94L8.1 3.3a2 2 0 0 1 1.8 0l4.2 2.1a2 2 0 0 0 1.8 0l3.52-1.76A1.1 1.1 0 0 1 21 4.62v12.88c0 .4-.22.76-.58.94L15.9 20.7a2 2 0 0 1-1.8 0l-4.2-2.1a2 2 0 0 0-1.8 0l-3.52 1.76A1.1 1.1 0 0 1 3 19.38V6.5Zm5.8-1.45L5 6.95v10.9l3.8-1.9V5.05Zm1.9.05v10.98l4.6 2.3V7.4l-4.6-2.3Zm6.5 2.95v10.9l3.8-1.9V6.15l-3.8 1.9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  #appStep[data-results-view] .desktop-results-map-head strong {
    display: inline-grid;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    padding: 0 9px;
    background: color-mix(in srgb, var(--success-bg) 76%, var(--panel-bg));
    color: var(--success-text);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }

  #appStep[data-results-view] .desktop-results-map {
    height: var(--desktop-results-map-height);
    min-height: var(--desktop-results-map-height);
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    background: #dce7dd;
  }

  #appStep[data-results-view] .desktop-results-map .leaflet-control-attribution {
    border-radius: 999px 0 0 0;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(32, 35, 31, 0.72);
    font-size: 0.58rem;
    font-weight: 750;
  }

  #appStep[data-results-view] .desktop-results-map-marker-shell {
    border: 0;
    background: transparent;
  }

  #appStep[data-results-view] .desktop-results-map-marker {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 3px solid var(--soft-white, #fffaf2);
    border-radius: 999px 999px 999px 4px;
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 9px 18px rgba(24, 18, 12, 0.25);
    transform: rotate(-45deg);
    transform-origin: center;
    transition: background 160ms ease, box-shadow 160ms ease, scale 160ms ease;
  }

  #appStep[data-results-view] .desktop-results-map-marker b {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.18);
    color: currentColor;
    font-size: 0.66rem;
    font-weight: 950;
    line-height: 1;
    transform: rotate(45deg);
  }

  #appStep[data-results-view] .desktop-results-map-marker.is-active {
    background: var(--coral, #ff6f5e);
    box-shadow: 0 12px 24px rgba(24, 18, 12, 0.34);
    scale: 1.22;
  }

  #appStep[data-results-view] .desktop-results-map-marker.is-hearted::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--soft-white, #fffaf2);
    border-radius: 999px;
    background: #d55d75;
  }

  #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup {
    margin-bottom: 8px;
  }

  #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup .leaflet-popup-content-wrapper {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    color: var(--text);
    box-shadow: 0 18px 34px rgba(31, 24, 14, 0.16);
  }

  #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup .leaflet-popup-content {
    width: 226px !important;
    margin: 0;
  }

  #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup .leaflet-popup-tip {
    background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    box-shadow: 0 8px 16px rgba(31, 24, 14, 0.1);
  }

  #appStep[data-results-view] .desktop-map-business-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 8px;
  }

  #appStep[data-results-view] .desktop-map-business-thumb {
    display: grid;
    width: 62px;
    height: 62px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent),
      var(--soft-bg);
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-family: var(--display-font, Georgia, serif);
    font-size: 2rem;
    font-weight: 800;
  }

  #appStep[data-results-view] .desktop-map-business-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #appStep[data-results-view] .desktop-map-business-copy {
    display: grid;
    align-content: center;
    gap: 7px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-map-business-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-map-business-copy strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-map-business-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 6px 0 8px;
    color: color-mix(in srgb, #e3496f 72%, var(--muted-text));
    font-size: 1.04rem;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-map-business-hearted,
  #appStep[data-results-view] .desktop-map-business-compact-meta {
    display: none;
  }

  #appStep[data-results-view] .desktop-map-business-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-map-business-meta b,
  #appStep[data-results-view] .desktop-map-business-meta em {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    overflow: hidden;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-map-business-meta b {
    background: color-mix(in srgb, var(--gold, #f3c66b) 30%, var(--panel-bg));
    color: color-mix(in srgb, #6b4b00 82%, var(--text));
  }

  #appStep[data-results-view] .desktop-map-business-meta em {
    background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
    color: color-mix(in srgb, var(--accent) 42%, var(--text));
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel:not([hidden]) {
    border-color: rgba(255, 250, 242, 0.1);
    background: rgba(255, 250, 242, 0.06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map {
    border-top-color: rgba(255, 250, 242, 0.09);
    background: #26342f;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map .leaflet-tile {
    filter: saturate(0.88) contrast(0.96) brightness(0.78);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-marker {
    border-color: #18221e;
    background: #2f675d;
    color: #f1e5d0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-marker b {
    background: rgba(10, 16, 14, 0.34);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-marker.is-active {
    border-color: #24160d;
    background: #c77a43;
    color: #251509;
    box-shadow: 0 13px 26px rgba(0, 0, 0, 0.46);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-marker.is-active b {
    background: rgba(255, 232, 190, 0.42);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-marker.is-hearted::after {
    border-color: #18221e;
    background: #d86f88;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup .leaflet-popup-content-wrapper,
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map .desktop-results-map-business-popup .leaflet-popup-tip {
    border-color: rgba(255, 250, 242, 0.1);
    background: rgba(31, 34, 30, 0.96);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-map-business-meta b {
    background: #f2c96f;
    color: #2f2100;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-map-business-meta em {
    background: rgba(255, 250, 242, 0.1);
    color: #f0e4d0;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-map-business-heart {
    color: #ff7fa3;
  }

  #appStep[data-results-view] .restaurant-results-cockpit {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 0.92fr);
    align-items: start;
    gap: 20px;
  }

  #appStep[data-results-view] .desktop-results-feed {
    display: grid;
    gap: 16px;
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 0 0 24px;
    scroll-padding-top: var(--desktop-results-scroll-margin);
    overscroll-behavior: auto;
  }

  #appStep[data-results-view] .desktop-results-feed[hidden] {
    display: none !important;
  }

  #appStep[data-results-view] .desktop-result-detail-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
    min-width: 0;
    scroll-margin-top: var(--desktop-results-scroll-margin);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-bg) 94%, transparent);
    box-shadow: 0 14px 30px rgba(31, 24, 14, 0.07);
    outline: none;
  }

  #appStep[data-results-view] .desktop-result-detail-card.is-active {
    border-color: color-mix(in srgb, var(--coral, #ff6f5e) 34%, var(--border));
    box-shadow: 0 16px 34px rgba(31, 24, 14, 0.1);
  }

  #appStep[data-results-view] .desktop-result-detail-hero {
    display: grid;
    min-height: 270px;
    overflow: hidden;
    place-items: center;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
      var(--soft-bg);
  }

  #appStep[data-results-view] .desktop-result-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #appStep[data-results-view] .desktop-result-detail-hero.is-fallback span {
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-family: var(--display-font, Georgia, serif);
    font-size: 5rem;
    font-weight: 800;
  }

  #appStep[data-results-view] .desktop-result-detail-body {
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
    padding: 18px 20px;
  }

  #appStep[data-results-view] .desktop-result-detail-topline,
  #appStep[data-results-view] .desktop-result-title-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-result-rank {
    display: inline-grid;
    flex: 0 0 auto;
    min-height: 24px;
    place-items: center;
    border: 0;
    border-radius: 0;
    padding: 2px 0 0;
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.03em;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-result-detail-body h3 {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-family: var(--display-font, Georgia, serif);
    font-size: clamp(1.65rem, 2.1vw, 2.35rem);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-result-title-row h3 {
    flex: 1 1 auto;
  }

  #appStep[data-results-view] .desktop-result-title-row .desktop-detail-heart {
    flex: 0 0 auto;
  }

  #appStep[data-results-view] .desktop-result-detail-evidence {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding-top: 10px;
    font-family: var(--soft-mono-font);
  }

  #appStep[data-results-view] .desktop-result-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    margin: 0;
    font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-result-facts span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    min-height: 30px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--panel-bg) 86%, var(--soft-bg));
    color: color-mix(in srgb, var(--text) 74%, var(--muted-text));
    font-size: 0.79rem;
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-result-facts .is-match {
    border-color: color-mix(in srgb, var(--success-text, #0f6048) 22%, var(--border));
    background: color-mix(in srgb, var(--success-bg, #dcefe4) 88%, var(--panel-bg));
    color: color-mix(in srgb, var(--success-text, #0f6048) 84%, var(--text));
    font-weight: 900;
  }

  #appStep[data-results-view] .desktop-result-facts .is-rating {
    border-color: color-mix(in srgb, var(--gold, #efbd75) 40%, var(--border));
    background: color-mix(in srgb, var(--gold, #efbd75) 24%, var(--panel-bg));
    color: color-mix(in srgb, #7b5417 72%, var(--text));
    font-weight: 900;
  }

  #appStep[data-results-view] .desktop-result-facts .is-rating::before {
    content: "★";
    color: color-mix(in srgb, var(--gold, #efbd75) 72%, #7b5417);
    font-size: 0.82rem;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-result-facts .is-hours {
    border-color: color-mix(in srgb, var(--success-text, #0f6048) 16%, var(--border));
    color: color-mix(in srgb, var(--success-text, #0f6048) 72%, var(--text));
  }

  #appStep[data-results-view] .desktop-result-facts .is-phone {
    font-weight: 520;
  }

  #appStep[data-results-view] .desktop-result-detail-card .desktop-detail-address {
    display: -webkit-box;
    max-width: 72ch;
    overflow: hidden;
    color: color-mix(in srgb, var(--muted-text) 90%, var(--text));
    font-size: 0.84rem;
    font-weight: 480;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-result-facts span {
    border-color: rgba(255, 250, 242, 0.12);
    background: rgba(255, 250, 242, 0.075);
    color: #e4dbcf;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-result-facts .is-match {
    border-color: color-mix(in srgb, var(--success-text, #9be7bd) 24%, rgba(255, 250, 242, 0.12));
    background: color-mix(in srgb, var(--success-bg, #1b3529) 82%, var(--panel-bg));
    color: var(--success-text, #9be7bd);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-result-facts .is-rating {
    border-color: color-mix(in srgb, var(--gold, #efbd75) 32%, rgba(255, 250, 242, 0.12));
    background: color-mix(in srgb, var(--gold, #efbd75) 18%, var(--panel-bg));
    color: #f3d297;
  }

  #appStep[data-results-view] .desktop-result-detail-evidence h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0;
    line-height: 1.2;
  }

  #appStep[data-results-view] .desktop-result-evidence-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #appStep[data-results-view] .desktop-result-evidence-list li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: var(--muted-text);
    font-size: 0.79rem;
    font-weight: 520;
    letter-spacing: 0;
    line-height: 1.42;
  }

  #appStep[data-results-view] .desktop-result-evidence-list li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold, #efbd75) 26%, var(--panel-bg));
    color: color-mix(in srgb, var(--text) 70%, var(--gold, #efbd75));
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-result-evidence-list li.is-positive::before {
    content: "✓";
    background: var(--success-bg, #dcefe4);
    color: var(--success-text, #0f6048);
  }

  #appStep[data-results-view] .desktop-result-evidence-list li.is-caution::before {
    content: "?";
    background: color-mix(in srgb, var(--gold, #efbd75) 26%, var(--panel-bg));
    color: color-mix(in srgb, var(--text) 70%, var(--gold, #efbd75));
  }

  #appStep[data-results-view] .restaurant-results-deck {
    position: relative;
    align-self: stretch;
    min-width: 0;
    max-height: none;
    overflow: visible;
  }

  #appStep[data-results-view] .restaurant-results-deck .rcs {
    position: sticky;
    top: var(--desktop-results-rail-top, 92px);
    max-height: calc(100dvh - var(--desktop-results-rail-top, 92px) - 18px);
    overflow: visible;
  }

  #appStep[data-results-view] .restaurant-results-deck .rcs.is-expanded {
    top: var(--desktop-results-rail-top, 92px);
  }

  #appStep[data-results-view] .desktop-restaurant-detail {
    display: none !important;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-restaurant-detail {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  }

  #appStep[data-results-view] .desktop-detail-shell {
    display: grid;
    min-height: 0;
  }

  #appStep[data-results-view] .desktop-detail-hero {
    display: grid;
    height: 214px;
    overflow: hidden;
    place-items: center;
    background: var(--soft-bg);
  }

  #appStep[data-results-view] .desktop-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #appStep[data-results-view] .desktop-detail-hero.is-fallback span {
    color: color-mix(in srgb, var(--text) 62%, transparent);
    font-family: var(--display-font, Georgia, serif);
    font-size: 4rem;
    font-weight: 800;
  }

  #appStep[data-results-view] .desktop-detail-body,
  #appStep[data-results-view] .desktop-detail-empty {
    display: grid;
    gap: 12px;
    padding: 18px;
  }

  #appStep[data-results-view] .desktop-detail-empty {
    min-height: 330px;
    align-content: center;
  }

  #appStep[data-results-view] .desktop-detail-empty span,
  #appStep[data-results-view] .desktop-detail-kicker {
    color: var(--success-text, #0f6048);
    font-size: 0.76rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .desktop-detail-kicker-row,
  #appStep[data-results-view] .desktop-detail-meta,
  #appStep[data-results-view] .desktop-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  #appStep[data-results-view] .desktop-participant-match-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-participant-match-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 999px;
    padding: 3px 10px 3px 3px;
    background: color-mix(in srgb, var(--panel-bg) 88%, var(--accent) 8%);
    color: var(--text);
    box-shadow: 0 8px 16px rgba(31, 24, 14, 0.055);
  }

  #appStep[data-results-view] .desktop-participant-match-chip .person-avatar {
    flex: 0 0 auto;
    width: 26px;
    border-radius: 999px;
    font-size: 0.62rem;
    box-shadow: none;
  }

  #appStep[data-results-view] .desktop-participant-match-chip b,
  #appStep[data-results-view] .desktop-participant-match-chip em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-participant-match-chip b {
    max-width: 9ch;
    font-size: 0.76rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .desktop-participant-match-chip em {
    max-width: 10ch;
    color: color-mix(in srgb, var(--accent) 74%, var(--muted-text));
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 900;
  }

  #appStep[data-results-view] .desktop-participant-match-more {
    display: inline-grid;
    min-height: 30px;
    min-width: 30px;
    place-items: center;
    border-radius: 999px;
    background: var(--soft-bg);
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 950;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-participant-match-chip {
    border-color: rgba(255, 250, 242, 0.12);
    background: rgba(255, 250, 242, 0.075);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  }

  #appStep[data-results-view] .desktop-detail-kicker {
    border-radius: 999px;
    padding: 7px 10px;
    background: var(--success-bg, #dcefe4);
  }

  #appStep[data-results-view] .desktop-detail-heart {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(31, 24, 14, 0.16);
    border-radius: 999px;
    padding: 0 11px;
    background: transparent;
    color: #e3496f;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 850;
  }

  #appStep[data-results-view] .desktop-detail-heart.has-heart-evidence {
    padding-right: 6px;
  }

  #appStep[data-results-view] .desktop-detail-heart-text {
    color: color-mix(in srgb, var(--muted-text) 82%, #e3496f);
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-detail-heart svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #appStep[data-results-view] .desktop-detail-heart:disabled {
    cursor: wait;
    opacity: 0.72;
  }

  #appStep[data-results-view] .desktop-detail-heart[aria-pressed="true"] {
    border-color: rgba(31, 24, 14, 0.18);
    background: transparent;
    color: #df2f62;
  }

  #appStep[data-results-view] .desktop-detail-heart[aria-pressed="true"] svg {
    fill: currentColor;
  }

  #appStep[data-results-view] .desktop-detail-heart-avatars {
    display: inline-flex;
    align-items: center;
    margin-right: 1px;
  }

  #appStep[data-results-view] .desktop-detail-heart-avatar,
  #appStep[data-results-view] .desktop-detail-heart-more {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
    color: var(--muted-text);
    font-size: 0.56rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-1 { color: #2f6269; }
  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-2 { color: #8b4f39; }
  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-3 { color: #6e5b2e; }
  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-4 { color: #4e6650; }
  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-5 { color: #6b4f70; }
  #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-6 { color: #8c3f55; }

  #appStep[data-results-view] .desktop-detail-heart-avatar + .desktop-detail-heart-avatar,
  #appStep[data-results-view] .desktop-detail-heart-avatar + .desktop-detail-heart-more {
    margin-left: -7px;
  }

  #appStep[data-results-view] .desktop-detail-heart[aria-pressed="true"] .desktop-detail-heart-avatar,
  #appStep[data-results-view] .desktop-detail-heart[aria-pressed="true"] .desktop-detail-heart-more {
    border-color: currentColor;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart {
    border-color: rgba(255, 250, 242, 0.16);
    color: #ff7fa3;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-text {
    color: color-mix(in srgb, var(--muted-text) 72%, #ff7fa3);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart[aria-pressed="true"] {
    border-color: rgba(255, 250, 242, 0.2);
    background: transparent;
    color: #ff8fb0;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar,
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-more {
    background: rgba(24, 26, 23, 0.62);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-1 { color: #8fc4cb; }
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-2 { color: #d6a28d; }
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-3 { color: #d0bd83; }
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-4 { color: #abcaa9; }
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-5 { color: #c1a2ca; }
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-heart-avatar.avatar-6 { color: #dc91a6; }

  #appStep[data-results-view] .desktop-detail-body h3,
  #appStep[data-results-view] .desktop-detail-empty h3 {
    margin: 0;
    color: var(--text);
    font-family: var(--display-font, Georgia, serif);
    font-size: clamp(1.55rem, 2vw, 2.05rem);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-detail-empty p,
  #appStep[data-results-view] .desktop-detail-category,
  #appStep[data-results-view] .desktop-detail-contact-line,
  #appStep[data-results-view] .desktop-detail-hours,
  #appStep[data-results-view] .desktop-detail-phone,
  #appStep[data-results-view] .desktop-detail-address {
    margin: 0;
    color: var(--muted-text);
    font-size: 0.88rem;
    line-height: 1.35;
  }

  #appStep[data-results-view] .desktop-detail-category {
    color: var(--text);
    font-weight: 850;
  }

  #appStep[data-results-view] .desktop-detail-hours {
    color: color-mix(in srgb, var(--success-text, #0f6048) 82%, var(--text));
    font-weight: 900;
  }

  #appStep[data-results-view] .desktop-detail-contact-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-detail-contact-line .desktop-detail-hours,
  #appStep[data-results-view] .desktop-detail-contact-line .desktop-detail-phone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-detail-contact-line .desktop-detail-hours {
    flex: 0 1 auto;
  }

  #appStep[data-results-view] .desktop-detail-contact-line .desktop-detail-phone {
    flex: 0 0 auto;
    max-width: 10.5rem;
  }

  #appStep[data-results-view] .desktop-detail-phone {
    font-weight: 400;
  }

  #appStep[data-results-view] .desktop-detail-meta span {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 175px;
    min-height: 32px;
    overflow: hidden;
    border-radius: 999px;
    padding: 0 12px;
    background: var(--soft-bg);
    color: var(--board-row-text);
    font-size: 0.875rem;
    font-weight: 760;
    letter-spacing: 0.00625rem;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-detail-actions a {
    display: inline-grid;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    padding: 0;
    align-content: center;
    background: var(--card-bg);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(31, 24, 14, 0.07);
  }

  #appStep[data-results-view] .desktop-result-actions {
    gap: 6px;
    margin-top: 2px;
  }

  #appStep[data-results-view] .desktop-result-actions a {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-results-view] .desktop-result-actions .desktop-provider-link-icon {
    width: 21px;
    height: 21px;
    font-size: 0.7rem;
  }

  #appStep[data-results-view] .desktop-provider-link-icon {
    display: inline-grid;
    position: relative;
    width: 24px;
    height: 24px;
    place-items: center;
    color: currentColor;
    font-family: var(--body-font, sans-serif);
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-provider-link-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  #appStep[data-results-view] .desktop-provider-link-icon.is-google-review {
    grid-template-columns: 1fr;
  }

  #appStep[data-results-view] .desktop-provider-link-icon.is-google-review b {
    display: block;
    font-size: 0.85rem;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-provider-link-icon.is-google-review svg {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 11px;
    height: 11px;
    fill: currentColor;
    stroke: none;
  }

  #appStep[data-results-view] .desktop-provider-link.yelp {
    border-color: color-mix(in srgb, #d32323 52%, transparent);
    background: #d32323;
    color: #fffaf2;
  }

  #appStep[data-results-view] .desktop-provider-link.google-reviews {
    background: #ffffff;
    color: #1a73e8;
  }

  #appStep[data-results-view] .desktop-provider-link.google-maps {
    background: #e6f4ea;
    color: #137333;
  }

  #appStep[data-results-view] .desktop-provider-link.google-photos {
    background: #e8f0fe;
    color: #174ea6;
  }

  #appStep[data-results-view] .desktop-provider-link.website {
    background: var(--text);
    color: var(--panel-bg);
  }

  #appStep[data-results-view] .desktop-provider-link-icon.is-website {
    width: auto;
    min-width: 25px;
    font-size: 0.62rem;
    letter-spacing: 0;
  }

  #appStep[data-results-view] .desktop-detail-section {
    display: grid;
    gap: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    padding-top: 12px;
  }

  #appStep[data-results-view] .desktop-detail-section h4 {
    margin: 0;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .desktop-detail-section ul {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #appStep[data-results-view] .desktop-detail-section li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    color: var(--muted-text);
    font-size: 0.84rem;
    line-height: 1.34;
  }

  #appStep[data-results-view] .desktop-detail-section li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gold, #efbd75) 26%, var(--panel-bg));
    color: color-mix(in srgb, var(--text) 70%, var(--gold, #efbd75));
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-detail-section.is-positive li::before {
    content: "✓";
    background: var(--success-bg, #dcefe4);
    color: var(--success-text, #0f6048);
  }

  #appStep[data-results-view] .restaurant-list {
    display: grid;
    place-items: start stretch;
    overflow: visible;
  }

  #appStep[data-results-view] .rcs {
    --rcs-card-w: min(390px, 100%);
    --rcs-card-h: 380px;
    --rcs-list-card-w: min(100%, 340px);
    --rcs-list-card-h: 64px;
    --rcs-list-step: 72px;
    width: 100%;
    max-width: 350px;
    margin: 0;
  }

  #appStep[data-results-view] .rcs-stage {
    min-height: 0;
    width: 100%;
  }

  #appStep[data-results-view] .rcs-mode-toolbar {
    display: none;
  }

  #appStep[data-results-view] .rcs-counter {
    min-height: 24px;
    padding: 0 6px;
    color: var(--muted-text);
    text-align: left;
  }

  #appStep[data-results-view] .rcs-card {
    grid-template-rows: 210px minmax(0, 1fr);
  }

  #appStep[data-results-view] .rcs-thumb {
    height: 210px;
  }

  #appStep[data-results-view] .rcs-card-body {
    gap: 8px;
    padding: 20px;
  }

  #appStep[data-results-view] .rcs-heart-badge {
    right: 20px;
    top: -18px;
    width: 50px;
    height: 50px;
  }

  #appStep[data-results-view] .rcs-main {
    gap: 8px;
    padding-right: 52px;
  }

  #appStep[data-results-view] .rcs-title {
    font-size: 1.52rem;
  }

  #appStep[data-results-view] .rcs:not(.is-expanded) .rcs-stamps span {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: 175px;
    min-height: 32px;
    overflow: hidden;
    border-radius: 32px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 760;
    letter-spacing: 0.00625rem;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .rcs-nav-toolbar {
    top: calc(var(--rcs-card-h) + 64px);
    right: calc((100% - var(--rcs-card-w)) / 2 + 26px);
  }

  #appStep[data-results-view] .rcs:not(.is-expanded) .rcs-action-row {
    position: absolute;
    z-index: 230;
    top: calc(var(--rcs-card-h) + 64px);
    left: 50%;
    display: grid;
    grid-template-columns: 54px 62px;
    gap: 16px;
    align-items: center;
    transform: translate(-50%, -100%);
  }

  #appStep[data-results-view] .rcs-action-row .rcs-control {
    display: grid;
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    padding: 0;
    background: color-mix(in srgb, var(--panel-bg) 95%, transparent);
    color: color-mix(in srgb, var(--text) 82%, var(--accent));
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.48),
      0 14px 28px rgba(31, 24, 14, 0.12);
    backdrop-filter: blur(14px);
    cursor: pointer;
    font: inherit;
  }

  #appStep[data-results-view] .rcs-action-row .heart {
    width: 62px;
    min-width: 62px;
    height: 62px;
    min-height: 62px;
    color: var(--coral, #ff6f5e);
  }

  #appStep[data-results-view] .rcs-action-row .heart.is-selected {
    border-color: color-mix(in srgb, var(--coral, #ff6f5e) 52%, transparent);
    background: var(--coral, #ff6f5e);
    color: var(--soft-white, #fffaf2);
    box-shadow: 0 18px 34px rgba(241, 91, 78, 0.24);
  }

  #appStep[data-results-view] .rcs-action-row .heart.is-selected svg {
    fill: currentColor;
  }

  #appStep[data-results-view] .rcs-action-row .rcs-control svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
  }

  #appStep[data-results-view] .rcs:not(.is-expanded) .rcs-group-pill {
    position: absolute;
    z-index: 220;
    top: calc(var(--rcs-card-h) + 78px);
    left: 50%;
    display: block;
    min-height: 30px;
    max-width: min(var(--rcs-card-w), 280px);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 999px;
    padding: 8px 18px;
    background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    color: color-mix(in srgb, var(--text) 76%, #846331);
    box-shadow: 0 10px 20px rgba(31, 24, 14, 0.075);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.1;
    overflow: visible;
    text-align: center;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  #appStep[data-results-view] .rcs.is-expanded .rcs-action-row,
  #appStep[data-results-view] .rcs.is-expanded .rcs-group-pill {
    display: none;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-action-row .rcs-control,
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-group-pill {
    border-color: rgba(255, 250, 242, 0.13);
    background: rgba(255, 250, 242, 0.11);
    color: var(--soft-white, #f2ecdf);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-action-row .heart {
    color: #ff8a7a;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-action-row .heart.is-selected {
    background: var(--coral, #ff6f5e);
    color: var(--soft-white, #f2ecdf);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-group-pill {
    color: color-mix(in srgb, var(--soft-white, #f2ecdf) 88%, #efbd75);
  }

  #appStep[data-results-view] .rcs-stage.is-expanded {
    width: 100%;
    height: calc((var(--rcs-list-step) * var(--card-count)) + 8px);
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    padding-right: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card {
    width: var(--rcs-list-card-w);
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    height: var(--rcs-list-card-h);
    max-height: var(--rcs-list-card-h);
    border-radius: 9px;
    padding: 5px 8px 5px 5px;
    transform:
      translateX(-50%)
      translateY(calc(var(--list-index) * var(--rcs-list-step)))
      scale(1);
    transform-origin: center center;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-thumb {
    width: 54px;
    height: 54px;
    border-radius: 7px;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.has-heart-evidence .rcs-thumb {
    filter: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-favorite .rcs-thumb {
    filter: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-cue:not([hidden]) {
    position: static;
    z-index: 24;
    display: inline-flex;
    justify-self: end;
    max-width: 76px;
    min-width: 28px;
    min-height: 20px;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(31, 24, 14, 0.16);
    border-radius: 999px;
    padding: 1px 5px;
    background: transparent;
    color: #e3496f;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-favorite .rcs-slice-heart-cue {
    border-color: rgba(31, 24, 14, 0.18);
    background: transparent;
    color: #df2f62;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-cue svg {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.9;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-count {
    display: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatars {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    min-width: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar,
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-more {
    display: inline-grid;
    width: 15px;
    height: 15px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
    color: var(--muted-text);
    font-size: 0.44rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-1 { color: #2f6269; }
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-2 { color: #8b4f39; }
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-3 { color: #6e5b2e; }
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-4 { color: #4e6650; }
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-5 { color: #6b4f70; }
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-6 { color: #8c3f55; }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar + .rcs-slice-heart-avatar,
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar + .rcs-slice-heart-more {
    margin-left: -6px;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-cue:not([hidden]) {
    border-color: rgba(255, 250, 242, 0.16);
    background: transparent;
    color: #ff7fa3;
    box-shadow: none;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-favorite .rcs-slice-heart-cue {
    border-color: rgba(255, 250, 242, 0.2);
    background: transparent;
    color: #ff8fb0;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar,
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-more {
    background: rgba(24, 26, 23, 0.62);
    box-shadow: none;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-1 { color: #8fc4cb; }
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-2 { color: #d6a28d; }
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-3 { color: #d0bd83; }
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-4 { color: #abcaa9; }
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-5 { color: #c1a2ca; }
  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-slice-heart-avatar.avatar-6 { color: #dc91a6; }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card-body {
    gap: 3px;
    grid-template-rows: auto auto;
    padding: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-main {
    gap: 3px;
    padding-right: 0;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-title {
    display: -webkit-box;
    font-size: 0.82rem;
    line-height: 1.08;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps {
    flex-wrap: nowrap;
    gap: 3px;
    overflow: hidden;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps span {
    max-width: 52%;
    padding: 2px 5px;
    font-size: 0.58rem;
    line-height: 1.1;
  }

  :root:not([data-theme="dark"]) #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps .rcs-rating-chip {
    gap: 3px;
    border: 1px solid color-mix(in srgb, #d99a27 62%, var(--panel-bg));
    background:
      linear-gradient(180deg, rgba(255, 250, 242, 0.88), rgba(255, 245, 222, 0.58));
    color: color-mix(in srgb, var(--text) 82%, #8d5a0b);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.72),
      0 1px 2px rgba(31, 24, 14, 0.055);
    font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 850;
  }

  :root:not([data-theme="dark"]) #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps .rcs-rating-chip b {
    color: color-mix(in srgb, var(--text) 78%, #6f4710);
    font-weight: 820;
  }

  :root:not([data-theme="dark"]) #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps .rcs-rating-chip em {
    color: color-mix(in srgb, var(--text) 86%, #7a4b05);
    font-weight: 950;
  }

  :root:not([data-theme="dark"]) #appStep[data-results-view] .rcs-stage.is-expanded .rcs-stamps .rcs-rating-chip .rcs-rating-star {
    color: #d99a27;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-contact-line,
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-hours,
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-phone {
    display: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-hours {
    color: color-mix(in srgb, var(--success-text, #0f6048) 82%, var(--text));
    font-size: 0.73rem;
    font-weight: 900;
    line-height: 1.18;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-phone {
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.18;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-categories,
  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-address {
    display: none;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-active {
    --slice-active-indent: 12px;
    z-index: 160 !important;
    overflow: visible;
    border-color: color-mix(in srgb, var(--coral, #ff6f5e) 38%, var(--board-row-border));
    box-shadow: 0 10px 22px rgba(31, 24, 14, 0.1);
    transform:
      translateX(calc(-50% + var(--slice-active-indent)))
      translateY(calc(var(--list-index) * var(--rcs-list-step)))
      scale(1);
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-active::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--slice-active-indent));
    top: 50%;
    width: 3px;
    height: calc(var(--rcs-list-card-h) - 18px);
    border-radius: 999px;
    background: var(--coral, #ff6f5e);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral, #ff6f5e) 18%, transparent);
    transform: translateY(-50%);
    pointer-events: none;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card.is-active::before {
    background: #ff8a7a;
    box-shadow: 0 0 12px rgba(242, 201, 75, 0.22);
  }

  body:has(#aboutStep:not([hidden])) .shell,
  body:has(#roomsStep:not([hidden])) .shell,
  body:has(#appStep:not([hidden])) .shell {
    width: min(calc(100vw - 64px), 1280px);
  }

  body:has(#aboutStep:not([hidden])) .page-controls,
  body:has(#roomsStep:not([hidden])) .page-controls,
  body:has(#appStep:not([hidden])) .page-controls {
    right: max(32px, calc((100vw - 1280px) / 2));
  }

  #aboutStep:not([hidden]),
  #roomsStep:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: calc(100dvh - 104px);
    align-content: start;
    align-items: stretch;
    padding-top: 0;
  }

  #aboutStep:not([hidden]) .about-lockup,
  #roomsStep:not([hidden]) .rooms-lockup,
  #appStep:not([hidden]) .app-heading {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-items: center;
    column-gap: 14px;
    row-gap: 3px;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding-right: 196px;
    text-align: left;
  }

  #roomsStep:not([hidden]) .rooms-lockup {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 8px;
  }

  #aboutStep:not([hidden]) .about-lockup > .brand-mark,
  #roomsStep:not([hidden]) .rooms-lockup > .brand-mark,
  #appStep:not([hidden]) .brand-menu-shell {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    justify-self: start;
  }

  #aboutStep:not([hidden]) .about-lockup > .eyebrow,
  #aboutStep:not([hidden]) .about-lockup > h1,
  #aboutStep:not([hidden]) .about-lockup > .hero-subtitle,
  #roomsStep:not([hidden]) .rooms-lockup > .eyebrow,
  #roomsStep:not([hidden]) .rooms-lockup > h1,
  #roomsStep:not([hidden]) .rooms-lockup > .hero-subtitle,
  #appStep:not([hidden]) .app-heading > div:not(.brand-menu-shell) {
    grid-column: 2;
    min-width: 0;
    width: 100%;
  }

  #aboutStep:not([hidden]) .about-lockup .brand-mark,
  #roomsStep:not([hidden]) .rooms-lockup .brand-mark,
  #appStep:not([hidden]) .app-heading .brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 2rem;
  }

  #aboutStep:not([hidden]) .about-lockup .eyebrow,
  #roomsStep:not([hidden]) .rooms-lockup .eyebrow,
  #appStep:not([hidden]) .app-heading .eyebrow {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #aboutStep:not([hidden]) .about-lockup h1,
  #roomsStep:not([hidden]) .rooms-lockup h1,
  #appStep:not([hidden]) .app-heading h1 {
    max-width: none;
    margin: 0 0 3px;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(1.65rem, 2.35vw, 2.35rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #aboutStep:not([hidden]) .about-lockup .hero-subtitle,
  #roomsStep:not([hidden]) .rooms-lockup .hero-subtitle,
  #appStep:not([hidden]) .app-heading .hero-subtitle {
    display: block;
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: var(--muted-text);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep:not([hidden]) .app-topbar {
    min-height: 58px;
    margin: 0 0 18px;
  }

  #appStep[data-results-view] .app-topbar {
    margin-bottom: 18px;
  }

  #aboutStep:not([hidden]) .about-card,
  #roomsStep:not([hidden]) .rooms-card {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding: 22px;
  }

  #aboutStep:not([hidden]) .about-grid {
    grid-template-columns: minmax(0, 1fr) 220px;
  }

  #roomsStep:not([hidden]) .rooms-card-head {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  }
}

@media (min-width: 921px) and (max-width: 1080px) {
  #aboutStep:not([hidden]) .about-lockup,
  #roomsStep:not([hidden]) .rooms-lockup,
  #appStep:not([hidden]) .app-heading {
    padding-right: 174px;
  }

  #aboutStep:not([hidden]) .about-lockup .hero-subtitle,
  #roomsStep:not([hidden]) .rooms-lockup .hero-subtitle,
  #appStep:not([hidden]) .app-heading .hero-subtitle {
    display: none;
  }
}

@media (min-width: 681px) {
  #appStep[data-results-view]:not([hidden]) .app-heading .hero-subtitle {
    font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    line-height: 1.25rem;
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 680px) {
  html:has(#roomsStep:not([hidden])),
  body:has(#roomsStep:not([hidden])) {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior-y: auto;
  }

  body:has(#roomsStep:not([hidden])) {
    position: relative;
    inset: auto;
    touch-action: pan-y;
  }

  body:has(#roomsStep:not([hidden])) .shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  #roomsStep:not([hidden]) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding:
      max(28px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  #roomsStep:not([hidden]) .rooms-lockup {
    min-width: 0;
    gap: 4px;
    padding-right: 78px;
  }

  #roomsStep:not([hidden]) .rooms-lockup .eyebrow {
    margin-top: -4px;
  }

  #roomsStep:not([hidden]) .rooms-lockup .brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    font-size: 2rem;
  }

  #roomsStep:not([hidden]) .rooms-lockup h1 {
    max-width: 100%;
    font-size: clamp(2.15rem, 11vw, 3.05rem);
    line-height: 0.96;
  }

  #roomsStep:not([hidden]) .hero-subtitle {
    max-width: 28rem;
  }

  #roomsStep:not([hidden]) .rooms-card {
    min-width: 0;
    margin: 0;
    border-radius: 18px;
    padding: 16px;
  }

  #roomsStep:not([hidden]) .rooms-card-head {
    gap: 12px;
  }

  #roomsStep:not([hidden]) .rooms-status {
    min-height: 0;
  }

  #roomsStep:not([hidden]) .rooms-scope-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
  }

  #roomsStep:not([hidden]) .rooms-filters {
    display: flex;
  }

  #roomsStep:not([hidden]) .rooms-filters button {
    min-width: 0;
    padding: 0 10px;
  }

  #roomsStep:not([hidden]) .room-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-radius: 16px;
    padding: 11px;
  }

  #roomsStep:not([hidden]) .room-row-action-tray {
    grid-auto-columns: 78px;
  }

  #roomsStep:not([hidden]) .room-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  #roomsStep:not([hidden]) .room-row-main strong {
    white-space: normal;
  }

  #roomsStep:not([hidden]) .room-row-main small {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #roomsStep:not([hidden]) .room-row-meta,
  #roomsStep:not([hidden]) .room-row-glance,
  #roomsStep:not([hidden]) .room-row-action {
    grid-column: 2;
    justify-self: start;
  }

  #roomsStep:not([hidden]) .room-row-meta {
    border-left: 0;
    padding-left: 0;
    justify-items: start;
    white-space: normal;
  }

#roomsStep:not([hidden]) .room-row-glance {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
  }

  #roomsStep:not([hidden]) .room-row-tags {
    flex-wrap: wrap;
  }
}

html[data-sayhi-root-view="root"] body:has(#roomsStep:not([hidden])) .page-controls {
  align-items: center;
}

html[data-sayhi-root-view="root"] body:has(#roomsStep:not([hidden])) .user-feature-shell::after {
  content: "root";
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: -7px;
  display: inline-grid;
  min-width: 38px;
  min-height: 17px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--panel-bg) 86%, var(--border));
  border-radius: 999px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
  color: color-mix(in srgb, var(--accent) 74%, var(--text));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--panel-bg) 92%, transparent),
    0 8px 16px rgba(0, 0, 0, 0.12);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(50%);
  pointer-events: none;
}

html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) {
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) .rooms-lockup {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 0;
  padding: 0 0 16px;
  background: transparent;
  box-shadow: none;
}

html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) .rooms-lockup .brand-mark {
  background-color: transparent !important;
  background-image: url("/favicon-source.png?v=20260511-sayhi-root-mark-1") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  box-shadow: none;
}

html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) .rooms-lockup h1 {
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.sayhi-rooms-root-surface[hidden] {
  display: none !important;
}

html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) > .rooms-card {
  display: none !important;
}

html[data-sayhi-root-view="room"] #roomsStep:not([hidden]) > .sayhi-rooms-root-surface {
  display: none !important;
}

.sayhi-rooms-root-surface {
  display: grid;
  gap: 16px;
  min-width: 0;
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sayhi-root-console-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 22px;
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  padding-bottom: 14px;
}

.sayhi-root-console-head h2 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  font-weight: 650;
  letter-spacing: 0;
}

.sayhi-root-console-head p {
  margin: 0;
  color: var(--muted-text);
  font-size: 0.88rem;
  font-weight: 500;
}

.sayhi-root-console-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  padding-bottom: 12px;
}

.sayhi-root-rooms-status {
  justify-self: end;
  min-height: 0;
  white-space: nowrap;
}

.sayhi-root-rooms-list {
  display: grid;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.sayhi-root-room-row {
  display: grid;
  grid-template-columns: minmax(132px, 160px) minmax(240px, 1fr) minmax(170px, 230px) minmax(116px, 150px) 64px;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  border-radius: 0;
  padding: 12px 2px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.sayhi-root-room-row:hover,
.sayhi-root-room-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.sayhi-root-room-type {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 650;
}

.sayhi-root-room-main,
.sayhi-root-room-meta {
  display: grid;
  min-width: 0;
}

.sayhi-root-room-main strong {
  overflow: hidden;
  font-size: 0.94rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sayhi-root-room-main small {
  overflow: hidden;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sayhi-root-room-meta {
  grid-template-columns: auto auto auto;
  gap: 8px;
  color: var(--muted-text);
  font-size: 0.76rem;
  font-weight: 500;
}

.sayhi-root-room-meta em {
  color: var(--text);
  font-style: normal;
  font-weight: 650;
}

.sayhi-root-room-date {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

.sayhi-root-room-open {
  justify-self: end;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font-size: 0.78rem;
  font-weight: 650;
}

.sayhi-root-empty {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  padding: 18px 2px;
}

.sayhi-root-empty strong {
  color: var(--text);
  font-weight: 650;
}

.sayhi-root-empty span {
  color: var(--muted-text);
  font-size: 0.86rem;
}

.sayhi-root-start-room {
  justify-self: start;
  min-height: 32px;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 5px;
  padding: 0 12px;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  font-weight: 650;
}

.sayhi-root-kicker {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--muted-text);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sayhi-root-tools {
  display: grid;
  gap: 9px;
}

.sayhi-root-tools .consensus-type-field {
  gap: 5px;
  color: var(--muted-text);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.sayhi-root-tools .consensus-type-field select {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 650;
}

.sayhi-root-context {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--border));
  border-radius: 0;
  padding: 1px 0 1px 9px;
  background: transparent;
  color: var(--muted-text);
  font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
}

.sayhi-root-context strong {
  color: var(--text);
  font-weight: 850;
}

.sayhi-root-orb {
  display: inline-grid;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: url("/favicon-source.png?v=20260511-sayhi-root-mark-1") center / contain no-repeat;
}

html[data-sayhi-root-view="root"] .room-toast.is-root {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%),
    color-mix(in srgb, var(--panel-bg) 96%, transparent);
}

:root[data-theme="dark"][data-sayhi-root-view="root"] body:has(#roomsStep:not([hidden])) .user-feature-shell::after {
  background: rgba(15, 49, 45, 0.82);
}

html[data-sayhi-root-view="room"] .sayhi-root-kicker,
html[data-sayhi-root-view="room"] .sayhi-root-context {
  display: none;
}

@media (max-width: 680px) {
  html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) {
    gap: 12px;
  }

  html[data-sayhi-root-view="root"] #roomsStep:not([hidden]) .rooms-lockup {
    padding: 12px 14px;
  }

  .sayhi-root-console-head,
  .sayhi-root-console-toolbar {
    grid-template-columns: 1fr;
  }

  .sayhi-root-rooms-status {
    justify-self: start;
    white-space: normal;
  }

  .sayhi-root-room-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    min-height: 82px;
    padding: 13px 0;
  }

  .sayhi-root-room-type,
  .sayhi-root-room-main,
  .sayhi-root-room-meta,
  .sayhi-root-room-date {
    grid-column: 1;
  }

  .sayhi-root-room-open {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
  }

  .sayhi-root-room-meta {
    grid-template-columns: repeat(3, max-content);
  }

  .sayhi-root-tools {
    grid-template-columns: 1fr;
  }

  .sayhi-root-context {
    flex-wrap: wrap;
  }
}

.room-activity-log {
  display: none;
}

.room-toast-stack {
  position: fixed;
  top: 86px;
  right: max(18px, calc((100vw - 1120px) / 2));
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(320px, calc(100vw - 32px));
  pointer-events: none;
}

.room-toast {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
  box-shadow: 0 18px 34px rgba(31, 24, 14, 0.14);
  color: var(--text);
  pointer-events: auto;
  transform-origin: top right;
  animation: room-toast-enter 180ms ease-out;
}

.room-toast strong {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-toast span {
  overflow: hidden;
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-toast.is-heart {
  border-color: color-mix(in srgb, #d55d75 38%, var(--border));
}

.room-toast.is-criteria {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
}

.room-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes room-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 681px) {
  #appStep[data-results-view] .room-activity-log:not([hidden]) {
    display: grid;
    gap: 10px;
    margin: 0 0 2px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 8px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 42%),
      color-mix(in srgb, var(--panel-bg) 92%, transparent);
    box-shadow: 0 12px 26px rgba(31, 24, 14, 0.045);
  }

  #appStep[data-results-view] .room-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .room-activity-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  #appStep[data-results-view] .room-activity-head span::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
  }

  #appStep[data-results-view] .room-activity-head strong {
    display: inline-grid;
    min-height: 22px;
    place-items: center;
    border-radius: 999px;
    padding: 0 9px;
    background: color-mix(in srgb, var(--success-bg) 76%, var(--panel-bg));
    color: var(--success-text);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
  }

  #appStep[data-results-view] .room-activity-body {
    display: grid;
    grid-template-columns: minmax(220px, 0.78fr) minmax(0, 2fr);
    gap: 8px;
    min-width: 0;
  }

  #appStep[data-results-view] .room-activity-top {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 8px;
    padding: 8px;
    background: color-mix(in srgb, var(--soft-bg) 64%, transparent);
  }

  #appStep[data-results-view] .room-activity-top-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted-text);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .room-activity-top-head strong {
    color: color-mix(in srgb, #e3496f 78%, var(--text));
    letter-spacing: 0;
  }

  #appStep[data-results-view] .room-activity-top-list {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  #appStep[data-results-view] .room-activity-top-row,
  #appStep[data-results-view] .room-activity-top-empty {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 7px;
    padding: 5px 6px;
    background: color-mix(in srgb, var(--panel-bg) 68%, transparent);
    color: var(--text);
  }

  #appStep[data-results-view] .room-activity-top-row {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  #appStep[data-results-view] .room-activity-top-row:hover {
    border-color: color-mix(in srgb, #e3496f 28%, var(--border));
  }

  #appStep[data-results-view] .room-activity-top-row:focus-visible {
    outline: 2px solid color-mix(in srgb, #e3496f 38%, transparent);
    outline-offset: 2px;
  }

  #appStep[data-results-view] .room-activity-top-row b,
  #appStep[data-results-view] .room-activity-top-empty b {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: color-mix(in srgb, var(--text) 84%, #e3496f);
    font-size: 0.72rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .room-activity-top-row span,
  #appStep[data-results-view] .room-activity-top-empty span {
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .room-activity-top-row em {
    color: color-mix(in srgb, #e3496f 72%, var(--muted-text));
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
  }

  #appStep[data-results-view] .room-activity-top-row em small {
    margin-left: 2px;
    color: var(--muted-text);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0;
  }

  #appStep[data-results-view] .room-activity-top-row i {
    display: inline-flex;
    grid-column: 2 / -1;
    align-items: center;
    min-width: 0;
    margin-top: -1px;
    font-style: normal;
  }

  #appStep[data-results-view] .room-activity-top-row i span {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
    color: var(--muted-text);
    font-size: 0.48rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .room-activity-top-row i span + span {
    margin-left: -5px;
  }

  #appStep[data-results-view] .room-activity-top-row i span.avatar-1 { color: #2f6269; }
  #appStep[data-results-view] .room-activity-top-row i span.avatar-2 { color: #8b4f39; }
  #appStep[data-results-view] .room-activity-top-row i span.avatar-3 { color: #6e5b2e; }
  #appStep[data-results-view] .room-activity-top-row i span.avatar-4 { color: #4e6650; }
  #appStep[data-results-view] .room-activity-top-row i span.avatar-5 { color: #6b4f70; }
  #appStep[data-results-view] .room-activity-top-row i span.avatar-6 { color: #8c3f55; }

  #appStep[data-results-view] .room-activity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  #appStep[data-results-view] .room-activity-item,
  #appStep[data-results-view] .room-activity-empty {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 46px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 8px;
    padding: 7px 8px;
    background: color-mix(in srgb, var(--soft-bg) 74%, transparent);
  }

  #appStep[data-results-view] .room-activity-empty {
    grid-column: 1 / -1;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  #appStep[data-results-view] .room-activity-item.is-heart {
    border-color: color-mix(in srgb, #d55d75 30%, var(--border));
  }

  #appStep[data-results-view] .room-activity-item.is-unheart {
    opacity: 0.78;
  }

  #appStep[data-results-view] .room-activity-avatar {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .room-activity-item.is-heart .room-activity-avatar {
    background: #d55d75;
    color: #fff;
  }

  #appStep[data-results-view] .room-activity-item p,
  #appStep[data-results-view] .room-activity-empty p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .room-activity-restaurant-link {
    appearance: none;
    border: 0;
    border-radius: 4px;
    padding: 0;
    background: transparent;
    color: color-mix(in srgb, var(--accent) 72%, var(--text));
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    letter-spacing: 0;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  #appStep[data-results-view] .room-activity-restaurant-link:hover {
    color: var(--accent);
  }

  #appStep[data-results-view] .room-activity-restaurant-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
  }

  #appStep[data-results-view] .room-activity-restaurant-name {
    font-weight: 950;
  }

  #appStep[data-results-view] .room-activity-empty p {
    color: var(--muted-text);
  }

  #appStep[data-results-view] .room-activity-item time {
    color: var(--muted-text);
    font-size: 0.72rem;
    font-weight: 850;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-log:not([hidden]) {
    border-color: rgba(255, 250, 242, 0.1);
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
      rgba(255, 250, 242, 0.06);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-item,
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-empty {
    border-color: rgba(255, 250, 242, 0.09);
    background: rgba(255, 250, 242, 0.06);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top {
    border-color: rgba(255, 250, 242, 0.09);
    background: rgba(255, 250, 242, 0.055);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row,
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-empty {
    border-color: rgba(255, 250, 242, 0.09);
    background: rgba(255, 250, 242, 0.045);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row b,
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-empty b {
    background: rgba(255, 250, 242, 0.075);
    color: color-mix(in srgb, var(--soft-white, #fffaf2) 82%, #ff7fa3);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-head strong,
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row em {
    color: #ff7fa3;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span {
    background: rgba(24, 26, 23, 0.62);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-1 { color: #8fc4cb; }
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-2 { color: #d6a28d; }
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-3 { color: #d0bd83; }
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-4 { color: #abcaa9; }
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-5 { color: #c1a2ca; }
  :root[data-theme="dark"] #appStep[data-results-view] .room-activity-top-row i span.avatar-6 { color: #dc91a6; }
}

#appStep[data-results-view] .desktop-result-detail-card.is-activity-target {
  animation: activity-result-target 1400ms ease;
}

@keyframes activity-result-target {
  0%,
  100% {
    border-color: var(--board-row-border);
    box-shadow: none;
  }

  18%,
  58% {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--board-row-border));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 18px 32px rgba(31, 24, 14, 0.16);
  }
}

@media (max-width: 680px) {
  .room-activity-log {
    display: none !important;
  }

  .room-toast-stack {
    top: 14px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

@media (min-width: 921px) and (max-width: 1120px) {
  #appStep[data-results-view] .restaurant-results-cockpit {
    grid-template-columns: minmax(0, 1.45fr) minmax(286px, 0.9fr);
    gap: 16px;
  }

  #appStep[data-results-view] .desktop-result-detail-card {
    grid-template-columns: 1fr;
  }

  #appStep[data-results-view] .desktop-result-detail-hero {
    min-height: 220px;
  }

  #appStep[data-results-view] .desktop-result-detail-evidence {
    grid-template-columns: 1fr;
  }

  #appStep[data-results-view] .rcs {
    --rcs-list-card-h: 64px;
    --rcs-list-step: 72px;
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  #appStep[data-results-view] .rcs-stage.is-expanded .rcs-thumb {
    width: 54px;
    height: 54px;
  }
}

:root {
  --page-outer-bg: #f5f3ee;
}

:root[data-theme="dark"] {
  --page-outer-bg: var(--page-bg);
}

@media (min-width: 681px) {
  html:has(#appStep[data-results-view]:not([hidden])) {
    background: var(--page-outer-bg) !important;
    background-image: none !important;
  }

  html:has(#appStep[data-results-view]:not([hidden])) body {
    background: var(--page-bg) !important;
    background-image: none !important;
  }

  html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])),
  html[data-theme="dark"]:has(#appStep[data-results-view]:not([hidden])) body {
    background:
      radial-gradient(circle at 12% -10%, rgba(242, 201, 75, 0.18), transparent 32%),
      radial-gradient(circle at 86% 10%, rgba(239, 189, 117, 0.08), transparent 34%),
      var(--page-bg) !important;
  }

  html:has(#appStep[data-results-view]:not([hidden])) .shell,
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view],
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .app-topbar,
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .layout,
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .board-panel,
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .restaurant-card,
  html:has(#appStep[data-results-view]:not([hidden])) #appStep[data-results-view] .restaurant-list {
    background: transparent !important;
    background-image: none !important;
  }
}

@media (min-width: 921px) {
  html:has(#roomsStep:not([hidden])) {
    background: var(--page-outer-bg) !important;
    background-image: none !important;
  }

  html:has(#roomsStep:not([hidden])) body {
    background: var(--page-bg) !important;
    background-image: none !important;
  }

  html[data-theme="dark"]:has(#roomsStep:not([hidden])),
  html[data-theme="dark"]:has(#roomsStep:not([hidden])) body {
    background:
      radial-gradient(circle at 12% -10%, rgba(242, 201, 75, 0.12), transparent 32%),
      radial-gradient(circle at 86% 10%, rgba(239, 189, 117, 0.06), transparent 34%),
      var(--page-bg) !important;
  }
}

#appStep[data-results-view] .desktop-detail-category-chips,
#appStep[data-results-view] .desktop-result-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-family: var(--body-font, system-ui, sans-serif);
  line-height: 1;
}

#appStep[data-results-view] .desktop-detail-category-chips span,
#appStep[data-results-view] .desktop-result-category-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--border));
  border-radius: 999px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-bg));
  color: color-mix(in srgb, var(--accent) 42%, var(--text));
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root[data-theme="dark"] #appStep[data-results-view] .desktop-detail-category-chips span,
:root[data-theme="dark"] #appStep[data-results-view] .desktop-result-category-chips span {
  border-color: rgba(255, 250, 242, 0.11);
  background: rgba(255, 250, 242, 0.08);
  color: #eadfcd;
}

@media (min-width: 681px) {
  #appStep:not([hidden]) .app-topbar,
  #appStep:not([hidden]) .app-heading {
    min-height: 78px;
  }

  #appStep:not([hidden]) .brand-menu-shell {
    align-self: start;
    margin-top: 10px;
  }

  #appStep[data-results-view] .app-heading h1 {
    margin: 0 0 3px;
    font-size: clamp(1.65rem, 2.35vw, 2.35rem);
    line-height: 1;
  }

  #appStep[data-results-view] .app-heading .hero-subtitle {
    font-family: var(--body-font);
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.25;
  }
}

@media (min-width: 921px) {
  #appStep[data-results-view] .layout {
    justify-items: stretch;
  }

  #appStep[data-results-view] .board-panel,
  #appStep[data-results-view] .restaurant-card,
  #appStep[data-results-view] .restaurant-results-cockpit {
    width: 100%;
  }
}

@media (min-width: 681px) {
  #appStep[data-results-view] .room-activity-log {
    display: none !important;
  }

  #appStep[data-results-view] .desktop-results-map-panel:not([hidden]) {
    position: relative;
  }

  #appStep[data-results-view] .desktop-results-map-panel .map-top-chart {
    position: absolute;
    z-index: 460;
    left: 14px;
    top: 56px;
    display: grid;
    width: min(286px, calc(100% - 28px));
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 8px;
    padding: 10px;
    background: color-mix(in srgb, var(--panel-bg) 90%, transparent);
    box-shadow: 0 18px 34px rgba(31, 24, 14, 0.14);
    backdrop-filter: blur(10px);
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted-text);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-head strong {
    color: color-mix(in srgb, #e3496f 78%, var(--text));
    letter-spacing: 0;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-list {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row,
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-empty {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 34px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 7px;
    padding: 5px 6px;
    background: color-mix(in srgb, var(--panel-bg) 74%, transparent);
    color: var(--text);
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row {
    appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row:hover {
    border-color: color-mix(in srgb, #e3496f 28%, var(--border));
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row:focus-visible {
    outline: 2px solid color-mix(in srgb, #e3496f 38%, transparent);
    outline-offset: 2px;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row b,
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-empty b {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 6px;
    background: color-mix(in srgb, var(--text) 9%, transparent);
    color: color-mix(in srgb, var(--text) 84%, #e3496f);
    font-size: 0.72rem;
    font-weight: 950;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row span,
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-empty span {
    align-self: center;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row em {
    display: inline-flex;
    align-self: center;
    justify-self: end;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 6px 0 8px;
    color: color-mix(in srgb, #e3496f 72%, var(--muted-text));
    font-size: 1.04rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row em small {
    margin-left: 2px;
    color: var(--muted-text);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i {
    display: inline-flex;
    grid-column: 2 / -1;
    align-items: center;
    min-width: 0;
    margin-top: -1px;
    font-style: normal;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-bg) 84%, transparent);
    color: var(--muted-text);
    font-size: 0.48rem;
    font-weight: 950;
    line-height: 1;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span + span {
    margin-left: -5px;
  }

  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-1 { color: #2f6269; }
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-2 { color: #8b4f39; }
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-3 { color: #6e5b2e; }
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-4 { color: #4e6650; }
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-5 { color: #6b4f70; }
  #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row i span.avatar-6 { color: #8c3f55; }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .map-top-chart {
    border-color: rgba(255, 250, 242, 0.12);
    background: rgba(31, 34, 30, 0.86);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.34);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row,
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-empty {
    border-color: rgba(255, 250, 242, 0.1);
    background: rgba(255, 250, 242, 0.07);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row b,
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-empty b {
    background: rgba(255, 250, 242, 0.08);
    color: color-mix(in srgb, var(--soft-white, #fffaf2) 82%, #ff7fa3);
  }

  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-head strong,
  :root[data-theme="dark"] #appStep[data-results-view] .desktop-results-map-panel .room-activity-top-row em {
    color: #ff7fa3;
  }
}

/* Mobile preference polish: date selection belongs in the calendar; chips summarize selected days. */
.availability-date-list {
  align-items: center;
  gap: 7px;
}

.availability-date-list button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 999px;
  padding: 3px 8px 3px 4px;
  background: color-mix(in srgb, var(--panel-bg) 86%, var(--soft-bg));
  color: var(--text);
  box-shadow: none;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 580;
  line-height: 1;
}

.availability-date-list button::after {
  content: "x";
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  color: color-mix(in srgb, var(--muted-text) 86%, transparent);
  font-size: 0.88rem;
  font-weight: 620;
}

.availability-date-list button small {
  display: inline-grid;
  min-width: 34px;
  min-height: 26px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
  color: var(--accent-strong);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  opacity: 1;
}

.availability-date-list button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-date-list button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--panel-bg) 90%, var(--accent) 4%);
  color: var(--text);
  box-shadow: none;
}

:root[data-theme="dark"] .availability-date-list button,
:root[data-theme="dark"] .availability-date-list button[aria-pressed="true"] {
  border-color: rgba(255, 250, 242, 0.12);
  background: rgba(255, 250, 242, 0.065);
  color: #eadfcd;
}

:root[data-theme="dark"] .availability-date-list button small {
  background: rgba(143, 196, 203, 0.14);
  color: #9fcbd1;
}

:root[data-theme="dark"] .availability-date-list button::after {
  color: rgba(242, 236, 223, 0.62);
}

@media (max-width: 680px) {
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basics-grid {
    --bbs-field-line: color-mix(in srgb, var(--accent) 42%, var(--border));
    --bbs-field-ghost: color-mix(in srgb, var(--muted-text) 24%, transparent);
    gap: clamp(16px, 2.6dvh, 24px);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-date,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip {
    gap: 5px;
    color: var(--muted-text);
    font-size: 0.72rem;
    line-height: 1.05;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-field-label {
    order: 2;
    display: block;
    margin-top: 0;
    padding-left: 2px;
    color: color-mix(in srgb, var(--muted-text) 86%, var(--text));
    font-family: var(--body-font);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .date-input-row {
    order: 1;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    min-height: 48px;
    border: 0;
    border-radius: 0;
    padding: 7px 2px 9px;
    background:
      repeating-linear-gradient(
        to right,
        var(--bbs-field-line) 0 9px,
        transparent 9px 14px
      )
      left bottom / 100% 1.5px no-repeat;
    box-shadow: none;
    caret-color: var(--accent-strong);
    color: var(--text);
    font-family: ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: 1.04rem;
    font-weight: 520;
    letter-spacing: 0.01em;
    line-height: 1.15;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle::after {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    opacity: 0.7;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle .date-day-label {
    display: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] input::placeholder,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    color: color-mix(in srgb, var(--muted-text) 82%, transparent);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] input:not(:placeholder-shown),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle.has-selection {
    color: var(--text);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] #availabilityHint {
    order: 4;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list {
    order: 3;
    margin-top: 2px;
    gap: 8px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar {
    order: 5;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button {
    min-height: 38px;
    gap: 8px;
    border-color: var(--bbs-field-ghost);
    padding: 4px 11px 4px 5px;
    background: transparent;
    font-size: 0.82rem;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button::after {
    content: "×";
    width: 18px;
    height: 18px;
    align-self: center;
    color: color-mix(in srgb, var(--muted-text) 76%, transparent);
    font-size: 1.05rem;
    font-weight: 520;
    line-height: 18px;
    transform: translateY(-0.5px);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button small {
    min-width: 44px;
    min-height: 28px;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-foot button {
    display: inline-grid;
    min-width: 74px;
    min-height: 36px;
    place-items: center;
    padding: 0 16px;
    font-size: 0.86rem;
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
  }

  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button {
    background-color: transparent;
  }

  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basics-grid {
    --bbs-field-line: color-mix(in srgb, var(--accent) 54%, rgba(255, 250, 242, 0.22));
    --bbs-field-ghost: rgba(255, 250, 242, 0.16);
  }
}

@media (max-width: 680px) {
  .page-controls {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    gap: 6px;
  }

  .theme-toggle,
  .about-quick,
  .invite-quick,
  .results-quick,
  .wizard-toggle {
    width: 34px;
    min-height: 34px;
    font-size: 0.94rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }

  .about-quick svg,
  .invite-quick svg,
  .results-quick svg {
    width: 19px;
    height: 19px;
  }

  .user-feature-button {
    width: 36px;
    min-height: 36px;
    border-width: 1px;
    font-size: 0.72rem;
    letter-spacing: 0;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  }

  #appStep .app-topbar {
    min-height: 50px;
    padding-right: 128px;
  }

  #appStep:not([hidden]) .app-heading {
    column-gap: 10px;
    min-height: 48px;
    padding-right: 128px;
  }

  #appStep:not([hidden]) .app-heading .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 1.62rem;
  }

  #appStep:not([hidden]) .app-heading h1 {
    font-size: clamp(1.34rem, 6.2vw, 1.62rem);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-topbar {
    min-height: 48px;
    margin-bottom: 4px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    min-height: 48px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .eyebrow,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .hero-subtitle {
    display: none;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading h1 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #appStep[data-wizard-active]:not([data-results-view]) {
    background:
      radial-gradient(circle at 10% -8%, color-mix(in srgb, var(--coral) 8%, transparent), transparent 34%),
      radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 30%),
      var(--page-bg) !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] {
    border: 0 !important;
    border-radius: 0;
    padding: 4px 4px max(12px, env(safe-area-inset-bottom));
    background: transparent !important;
    box-shadow: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head {
    border: 0;
    border-radius: 0;
    padding: 0 2px 2px;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head > span {
    font-size: 0.72rem;
    font-weight: 620;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head strong {
    font-family: var(--body-font);
    font-size: 1.08rem;
    font-weight: 680;
    line-height: 1.1;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head p {
    max-width: 33ch;
    font-size: 0.82rem;
    font-weight: 460;
    line-height: 1.35;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] > fieldset:not([hidden]),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] > .invite-panel:not([hidden]),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] .location-box:not([hidden]) {
    border: 0;
    border-radius: 0;
    padding: 2px 0;
    background: transparent;
    box-shadow: none;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] label {
    font-size: 0.78rem;
    font-weight: 580;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .field-hint,
  #appStep[data-wizard-active]:not([data-results-view]) .multi-select-hint {
    font-size: 0.76rem;
    font-weight: 450;
    line-height: 1.42;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-toggle {
    min-height: 48px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel-bg) 86%, transparent);
    font-weight: 540;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-date-list {
    gap: 7px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-date-list button {
    min-height: 34px;
    padding: 3px 8px 3px 4px;
    font-size: 0.8rem;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-actions {
    margin-top: 2px;
  }
}

@media (max-width: 680px) {
  #appStep[data-wizard-active]:not([data-results-view]) .app-topbar {
    min-height: 42px;
    margin-bottom: 2px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 8px;
    min-height: 42px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 1.28rem;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading h1 {
    font-family: var(--display-font);
    font-size: clamp(1.04rem, 5vw, 1.3rem);
    font-weight: 760;
    line-height: 0.96;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] {
    gap: clamp(12px, 2dvh, 22px);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head {
    gap: 3px;
    padding: 0 2px 4px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head > span {
    color: color-mix(in srgb, var(--muted-text) 78%, transparent);
    font-size: 0.66rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head strong {
    max-width: 9ch;
    color: var(--text);
    font-family: var(--display-font);
    font-size: clamp(2.55rem, 13.5vw, 3.72rem);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 0.86;
    text-wrap: balance;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head p,
  #appStep[data-wizard-active]:not([data-results-view]) .multi-select-hint {
    display: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .field-hint {
    margin: 0;
    font-size: 0;
    line-height: 0;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] label,
  #appStep[data-wizard-active]:not([data-results-view]) legend {
    color: color-mix(in srgb, var(--muted-text) 86%, var(--text));
    font-family: var(--body-font);
    font-size: 0.76rem;
    font-weight: 660;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
  }
}

@media (max-width: 680px) {
  #appStep[data-wizard-active]:not([data-results-view]) {
    padding:
      max(28px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-topbar {
    min-height: 58px;
    margin-bottom: 10px;
    padding-right: 150px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    min-height: 58px;
    padding-right: 0;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-menu-shell {
    align-self: center;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading > div:not(.brand-menu-shell) {
    display: grid;
    min-height: 58px;
    align-content: center;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading h1 {
    max-width: min(12ch, calc(100vw - 274px));
    margin: 0;
    overflow: visible;
    color: var(--text);
    font-size: clamp(1.08rem, 5vw, 1.32rem);
    line-height: 0.96;
    text-overflow: clip;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: break-word;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head > span[hidden] {
    display: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head {
    gap: 5px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head strong {
    max-width: 10.5ch;
    font-size: clamp(1.92rem, 9.8vw, 2.54rem);
    line-height: 0.92;
  }
}

@media (max-width: 680px) {
  html,
  body,
  .shell {
    background-color: var(--page-bg) !important;
  }
}

@media (max-width: 680px) {
  #appStep[data-results-view] .rcs:not(.is-expanded):not(.is-detail-open) {
    margin-top: 10px;
  }

  #appStep[data-results-view] .rcs-action-row .rcs-control {
    position: relative;
  }

  #appStep[data-results-view] .rcs-action-row .heart:not(.is-selected) {
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
    color: color-mix(in srgb, var(--muted-text) 72%, var(--accent));
  }

  #appStep[data-results-view] .rcs-action-row .heart:not(.is-selected) svg {
    fill: none;
    stroke: currentColor;
  }

  :root[data-theme="dark"] #appStep[data-results-view] .rcs-action-row .heart:not(.is-selected) {
    border-color: rgba(255, 250, 242, 0.16);
    background: rgba(255, 250, 242, 0.11);
    color: color-mix(in srgb, var(--soft-white, #f2ecdf) 82%, var(--accent));
  }

}

@media (max-width: 680px) {
  body:has(#appStep:not([hidden])) .page-controls {
    top: max(8px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
  }

  #appStep[data-wizard-active]:not([data-results-view]) {
    padding-top: max(8px, env(safe-area-inset-top));
  }

  #appStep:not([hidden]) .app-topbar,
  #appStep[data-wizard-active]:not([data-results-view]) .app-topbar {
    min-height: 36px;
    margin-bottom: 12px;
    padding-right: 150px;
  }

  #appStep:not([hidden]) .app-heading,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-height: 36px;
    padding-right: 0;
  }

  #appStep:not([hidden]) .brand-menu-shell,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-menu-shell {
    align-self: center;
    justify-self: start;
    width: 36px;
    height: 36px;
    margin: 0;
  }

  #appStep:not([hidden]) .app-heading .brand-mark,
  #appStep[data-wizard-active]:not([data-results-view]) .app-heading .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1.18rem;
    line-height: 1;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading {
    grid-template-columns: 36px;
    width: 36px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .app-heading > div:not(.brand-menu-shell) {
    display: none;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-wizard-head {
    display: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="area"] {
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
}

@media (max-width: 680px) {
  #appStep[data-wizard-active]:not([data-results-view]),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard],
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] label,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] button,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] select,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard] textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basics-grid {
    display: grid;
    gap: 0;
    align-self: start;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 16px;
    padding: 0;
    overflow: visible;
    background: color-mix(in srgb, var(--panel-bg) 93%, transparent);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.52),
      0 10px 26px rgba(31, 24, 14, 0.06);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-date,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip {
    display: grid;
    grid-template-columns: minmax(84px, 0.34fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    min-height: 66px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    padding: 11px 13px;
    background: transparent;
    color: var(--text);
    font-family: var(--body-font);
    line-height: 1.15;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip {
    border-bottom: 0;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-field-label {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    display: block;
    margin: 0;
    padding: 0;
    color: color-mix(in srgb, var(--muted-text) 88%, var(--text));
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 620;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .date-input-row {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    align-self: center;
    width: 100%;
    min-width: 0;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    caret-color: var(--accent-strong);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.02rem;
    font-weight: 540;
    letter-spacing: 0;
    line-height: 1.15;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input::placeholder,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input::placeholder,
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    color: color-mix(in srgb, var(--muted-text) 76%, transparent);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input:not(:placeholder-shown),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input:not(:placeholder-shown),
  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle.has-selection {
    color: var(--text);
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    text-align: left;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle::after {
    width: 7px;
    height: 7px;
    border-width: 1.5px;
    opacity: 0.62;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle .date-day-label {
    display: none !important;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] #availabilityHint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list {
    grid-column: 2;
    grid-row: 2;
    order: 0;
    margin: 0;
    gap: 6px;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list:empty {
    display: none;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button {
    min-height: 30px;
    gap: 4px;
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    padding: 2px 5px 2px 3px;
    background: color-mix(in srgb, var(--soft-bg) 72%, transparent);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 520;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button::after {
    width: 13px;
    height: 13px;
    font-size: 0.78rem;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-date-list button small {
    min-width: 28px;
    min-height: 24px;
    padding-right: 6px;
    padding-left: 6px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg));
    font-size: 0.62rem;
  }

  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basics-grid {
    border-color: rgba(255, 250, 242, 0.13);
    background: rgba(255, 250, 242, 0.055);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.06),
      0 14px 30px rgba(0, 0, 0, 0.16);
  }

  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-date {
    border-bottom-color: rgba(255, 250, 242, 0.1);
  }

  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-name input,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .basic-zip input,
  :root[data-theme="dark"] #appStep[data-wizard-active]:not([data-results-view]) .form-panel[data-form-wizard][data-active-step="basics"] .availability-calendar-toggle {
    background: transparent;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar button,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar strong,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar span,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar small {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-head strong,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-head button,
  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-weekdays span {
    font-weight: 580;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-day {
    font-weight: 540;
  }

  #appStep[data-wizard-active]:not([data-results-view]) .availability-calendar-day.is-selected {
    font-weight: 620;
  }
}

@media (max-width: 680px) {
  html,
  body {
    min-height: 100svh;
    background-color: var(--app-chrome-bg) !important;
    background-image: none !important;
  }

  body {
    overscroll-behavior: none;
  }

  .shell {
    min-height: 100svh;
    padding-bottom: calc(40px + max(env(safe-area-inset-bottom, 0px), var(--safe-bottom-max))) !important;
  }

  body::before,
  body::after {
    content: "";
    position: fixed;
    z-index: 4900;
    right: 0;
    left: 0;
    background: var(--app-chrome-bg);
    pointer-events: none;
  }

  body::before {
    top: 0;
    height: max(1px, env(safe-area-inset-top, 0px));
  }

  body::after {
    bottom: 0;
    height: max(1px, env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 921px) {
  body:has(#appStep[data-results-view]:not([hidden])) .page-controls {
    position: fixed;
    top: 24px;
    right: max(32px, calc((100vw - 1280px) / 2));
  }

  #appStep[data-results-view] .app-topbar {
    position: sticky;
    z-index: 880;
    top: 0;
    min-height: var(--desktop-results-nav-height, 78px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
    background: color-mix(in srgb, var(--page-bg) 90%, transparent);
    backdrop-filter: blur(16px);
  }

  #appStep[data-results-view] .desktop-results-map-panel:not([hidden]) {
    position: sticky;
    z-index: 840;
    top: var(--desktop-results-map-top, 90px);
  }

  #appStep[data-results-view] .desktop-results-map {
    height: var(--desktop-results-map-height, clamp(190px, 18vw, 260px));
    min-height: var(--desktop-results-map-height, 190px);
  }

  #appStep[data-results-view] .restaurant-results-deck .rcs,
  #appStep[data-results-view] .restaurant-results-deck .rcs.is-expanded {
    position: sticky;
    top: var(--desktop-results-rail-top, 412px);
  }

  #appStep[data-results-view] .desktop-results-feed {
    scroll-padding-top: var(--desktop-results-scroll-margin, 430px);
  }

  #appStep[data-results-view] .desktop-result-detail-card {
    scroll-margin-top: var(--desktop-results-scroll-margin, 430px);
  }
}

.results-empty-state.is-card-placeholder {
  --empty-outline: color-mix(in srgb, var(--accent) 58%, var(--border));
  --empty-outline-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  min-height: 392px;
  overflow: hidden;
  border: 4px dashed var(--empty-outline);
  border-radius: 30px;
  padding: 32px 26px;
  background-color: transparent !important;
  background-image:
    linear-gradient(135deg, var(--empty-outline-soft), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--panel-bg) 22%, transparent), transparent) !important;
  box-shadow: none;
}

.results-empty-state.is-card-placeholder::before,
.results-empty-state.is-card-placeholder::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.results-empty-state.is-card-placeholder::before {
  inset: 14px;
  border: 2px dashed color-mix(in srgb, var(--empty-outline) 62%, transparent);
  border-radius: 24px;
  opacity: 0.52;
  transform: rotate(-0.8deg);
}

.results-empty-state.is-card-placeholder::after {
  top: 20px;
  left: 20px;
  width: 72px;
  height: 72px;
  border: 2px dashed color-mix(in srgb, var(--empty-outline) 50%, transparent);
  border-radius: 18px;
  opacity: 0.42;
}

.results-empty-state.is-card-placeholder .results-empty-kicker {
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

.results-empty-state.is-card-placeholder button {
  border: 1px solid color-mix(in srgb, var(--empty-outline) 74%, transparent);
  background: color-mix(in srgb, var(--panel-bg) 42%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

:root[data-theme="dark"] .results-empty-state.is-card-placeholder {
  --empty-outline: rgba(255, 250, 242, 0.34);
  --empty-outline-soft: rgba(255, 250, 242, 0.055);
  background-image:
    linear-gradient(135deg, rgba(255, 250, 242, 0.055), transparent 42%),
    linear-gradient(145deg, rgba(255, 250, 242, 0.035), transparent) !important;
}

:root[data-theme="dark"] .results-empty-state.is-card-placeholder .results-empty-kicker {
  color: color-mix(in srgb, var(--soft-white, #f2ecdf) 66%, var(--accent));
}

:root[data-theme="dark"] .results-empty-state.is-card-placeholder button {
  background: rgba(255, 250, 242, 0.075) !important;
  color: var(--soft-white, #f2ecdf) !important;
}

@media (min-width: 921px) {
  #appStep[data-results-view] .results-empty-state.is-card-placeholder {
    width: min(100%, 760px);
    min-height: clamp(430px, 52vh, 600px);
    justify-self: stretch;
  }
}

@media (max-width: 680px) {
  #appStep[data-results-view] .results-empty-state.is-card-placeholder {
    width: min(calc(100vw - 20px), 380px);
    min-height: 392px;
    margin-top: 36px;
  }
}