@font-face {
  font-family: "DM Sans";
  src: url("/static/dm-sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/static/nunito.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #142d55;
  --muted: #536580;
  --paper: #f0f6ff;
  --surface: #ffffff;
  --surface-soft: #f7faff;
  --surface-selected: #eaf3ff;
  --line: #d2deef;
  --blue: #086fbe;
  --blue-dark: #075795;
  --button-ink: #ffffff;
  --aqua: #e5f1ff;
  --green: #246732;
  --green-bg: #e4f4df;
  --available-bg: #d2f3c2;
  --available-ink: #194823;
  --unavailable-bg: #edf2f9;
  --unavailable-ink: #536580;
  --red: #a13832;
  --red-bg: #fbece9;
  --amber: #785311;
  --amber-bg: #fff4d6;
  --warning-border: #e8d18f;
  --secondary-bg: #eaf2fc;
  --secondary-hover: #dceafa;
  --control-bg: #ffffff;
  --control-border: #b6c9e2;
  --selection-border: #6aa5da;
  --table-heading: #f1f5fc;
  --quiet-bg: #e9eff7;
  --change: #a36613;
  --focus: #0875c7;
  --toast-bg: #15305a;
  --heading-font: "DM Sans", system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(24, 60, 116, 0.09);
  font-family: "DM Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf5ff;
  --muted: #afc4dc;
  --paper: #071827;
  --surface: #102b43;
  --surface-soft: #142f49;
  --surface-selected: #1a405b;
  --line: #365572;
  --blue: #78d0fa;
  --blue-dark: #a3e1ff;
  --button-ink: #071d2f;
  --aqua: #183d57;
  --green: #b5ec9d;
  --green-bg: #1c3c33;
  --available-bg: #b9ed9b;
  --available-ink: #123621;
  --unavailable-bg: #86a9c6;
  --unavailable-ink: #0a243b;
  --red: #ffbbb4;
  --red-bg: #512e36;
  --amber: #f7d78d;
  --amber-bg: #413924;
  --warning-border: #74613b;
  --secondary-bg: #193b56;
  --secondary-hover: #244e6d;
  --control-bg: #0b2136;
  --control-border: #4c6b89;
  --selection-border: #71c8ee;
  --table-heading: #1a3852;
  --quiet-bg: #1b344e;
  --change: #ffd37a;
  --focus: #b0e0ff;
  --toast-bg: #0b233c;
  --heading-font: "Nunito", "DM Sans", system-ui, sans-serif;
  --shadow: 0 12px 32px rgba(0, 8, 20, .25);
}

.view-navigation { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.view-navigation a { color: var(--muted); padding: 0.75rem 0.1rem; text-decoration: none; font-weight: 650; border-bottom: 3px solid transparent; }
.view-navigation a[aria-current="page"] { color: var(--blue-dark); border-bottom-color: var(--blue); }
.view-navigation a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.completed-intro { max-width: 52rem; margin-bottom: 1.5rem; }
.completed-trip-card .section-heading { margin-bottom: 0.75rem; }
.completed-details { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0 0 1.25rem; }
.completed-details dt { font-size: 0.8rem; color: var(--muted); }
.completed-details dd { margin: 0.25rem 0 0; font-weight: 600; }
 .past-accommodation { display: flex; gap: 12px; align-items: start; margin: 16px 0 20px; font-size: 15px; line-height: 1.5; }
.past-accommodation > .ui-icon { width: 26px; height: 26px; color: var(--blue); flex-shrink: 0; }
.past-results, .past-emails { border-top: 1px solid var(--line); }
.past-results > summary, .past-emails > summary { display: flex; align-items: center; gap: 8px; min-height: 48px; cursor: pointer; list-style: none; font-size: 14px; }
.past-results > summary > span { margin-left: auto; color: var(--muted); text-align: right; }
.past-results[open] > summary .ui-icon { transform: rotate(180deg); }
.past-trip-card .search-detail { margin-top: 0; }
.past-trip-card .search-detail > summary { min-height: 48px; display: flex; align-items: center; }
.past-trip-card .trip-menu { margin-left: auto; }
.past-trip-card .results-heading { position: relative; padding-right: 40px; }
.past-trip-card .results-heading > .trip-menu { position: absolute; top: 0; right: 0; margin: 0; }
.past-trip-card .completed-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; }
.past-trip-card .delivery-entry { margin: 8px 0; padding: 10px 0; }
.past-trip-card .trip-calendar th:first-child { width: 200px; min-width: 140px; }
.past-trip-card .inventory-count { font-size: 24px; }
@media (max-width: 560px) {
  .past-trip-card .completed-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .past-trip-card .trip-calendar th:first-child { width: 42%; min-width: 0; }
  .past-trip-card .inventory-count { font-size: 20px; }
}
#past-view { padding-bottom: 2rem; }
@media (max-width: 560px) {
  .completed-trip-card { padding: 1rem; }
  .completed-details { gap: 0.7rem 1.5rem; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
}

button,
input,
select {
  font: inherit;
}

button,
.button {
  border: 0;
  border-radius: 0.7rem;
  padding: 0.7rem 1rem;
  color: var(--button-ink);
  background: var(--blue);
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

button:hover,
.button:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

button:disabled {
  cursor: wait;
  opacity: 0.55;
  transform: none;
}

button.secondary,
.button.secondary {
  color: var(--blue-dark);
  background: var(--secondary-bg);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--secondary-hover);
}

button.danger {
  color: var(--red);
  background: var(--red-bg);
}

button.compact {
  padding: 0.52rem 0.75rem;
  font-size: 0.9rem;
}

.site-header,
main,
footer {
  width: min(1480px, calc(100% - 2rem));
  margin-inline: auto;
}

.change-log-main {
  width: min(1240px, calc(100% - 2rem));
  margin-inline: auto;
  padding-bottom: 2rem;
}

.change-log-header {
  min-height: 6.2rem;
}

.change-log-header p {
  margin-bottom: 0;
}

.change-log-table {
  min-width: 920px;
}

.change-log-table th:first-child,
.change-log-table td:first-child {
  position: static;
  min-width: 150px;
  background: inherit;
  text-align: left;
}

.change-log-table th:nth-child(2) {
  min-width: 190px;
  text-align: left;
}

.transition-badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

.transition-badge.opened {
  color: var(--green);
  background: var(--green-bg);
}

.transition-badge.closed {
  color: var(--red);
  background: var(--red-bg);
}

.site-header {
  min-height: 7.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

h1 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  letter-spacing: -0.04em;
}

h2 {
  margin-bottom: 0.25rem;
  letter-spacing: -0.025em;
}

.eyebrow {
  margin-bottom: 0.2rem;
  color: var(--blue);
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.header-actions,
.toolbar,
.row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border-radius: 999px;
  padding: 0.42rem 0.78rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.pill.neutral {
  color: var(--muted);
  background: var(--quiet-bg);
}

.pill.good {
  color: var(--green);
  background: var(--green-bg);
}

.pill.bad {
  color: var(--red);
  background: var(--red-bg);
}

.pill.busy {
  color: var(--amber);
  background: var(--amber-bg);
}

.banner {
  border: 1px solid var(--warning-border);
  border-radius: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
}

.banner.warning {
  color: var(--amber);
  background: var(--amber-bg);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.status-card {
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
}

.status-card span {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--muted);
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.status-card strong {
  font-size: 0.96rem;
}

.toolbar {
  min-height: 5.2rem;
}

.poll-interval-control {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border-radius: 0.7rem;
  padding: 0.45rem 0.65rem;
  color: var(--blue-dark);
  background: var(--secondary-bg);
  font-size: 0.9rem;
  white-space: nowrap;
}

.poll-interval-control select {
  min-width: 3.3rem;
  border: 1px solid var(--control-border);
  border-radius: 0.48rem;
  padding: 0.28rem 0.38rem;
  color: var(--ink);
  background: var(--control-bg);
  font-weight: 700;
}

.poll-interval-control select:focus {
  outline: 3px solid rgba(23, 107, 135, 0.18);
  border-color: var(--blue);
}

.inline-error {
  color: var(--red);
  font-size: 0.9rem;
}

.workspace {
  position: relative;
  min-height: 35rem;
}

.watch-panel {
  padding: 1.2rem;
  background: var(--surface-soft);
}

.watch-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: min(370px, calc(100vw - 1.25rem));
  overflow-y: auto;
  border-right: 1px solid var(--line);
  box-shadow: 18px 0 50px rgba(13, 38, 55, 0.2);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 180ms ease, visibility 180ms ease;
}

.watch-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(19, 42, 57, 0.42);
  backdrop-filter: blur(1px);
}

.menu-button span {
  margin-right: 0.3rem;
  font-size: 1.15rem;
}

.results-panel {
  min-width: 0;
  min-height: 35rem;
  padding-bottom: 2rem;
}

.workspace:has(#results-empty:not(.hidden)),
.results-panel:has(#results-empty:not(.hidden)) {
  min-height: 0;
}

.active-trip-list {
  display: grid;
  gap: 1.25rem;
}

.active-trip-card {
  min-width: 0;
  scroll-margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.35rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.active-trip-card h2 {
  margin-bottom: 0.25rem;
}

.active-trip-card .results-heading {
  align-items: flex-start;
}

.trip-actions {
  justify-content: flex-end;
}

.counter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.watch-list {
  display: grid;
  gap: 0.65rem;
}

.watch-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  color: var(--ink);
  background: var(--control-bg);
  overflow: hidden;
}

.watch-card:hover,
.watch-card.selected {
  border-color: var(--selection-border);
  background: var(--surface-selected);
}

.watch-card-main {
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0.9rem;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.watch-card-main:hover {
  background: transparent;
  transform: none;
}

.watch-card-main strong,
.watch-card-main span {
  display: block;
}

.watch-card-main span {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.watch-card .disabled-label {
  color: var(--amber);
}

.watch-card-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding: 0.5rem 0.65rem;
}

.hero-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-empty h2 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
}

.hero-empty p {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.muted,
.field-help,
small {
  color: var(--muted);
}

.calendar-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
}

table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

th,
td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.62rem;
  text-align: center;
  vertical-align: middle;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 210px;
  background: var(--control-bg);
  text-align: left;
}

thead th {
  background: var(--table-heading);
  color: var(--muted);
  font-size: 0.78rem;
}

thead th:first-child {
  z-index: 2;
  background: var(--table-heading);
}

td.available {
  color: var(--available-ink);
  background: var(--available-bg);
}

td.unavailable {
  color: var(--unavailable-ink);
  background: var(--unavailable-bg);
}

td.unknown {
  color: var(--muted);
  background: var(--quiet-bg);
}

td.changed {
  position: relative;
  box-shadow: inset 0 0 0 3px var(--change);
}

.inventory-count {
  display: block;
  min-width: 1.25rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.dashboard-legend {
  justify-content: center;
  margin-bottom: 0;
}

.legend-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.25rem;
}

.legend-dot.available {
  background: var(--green);
}

.legend-dot.unavailable {
  background: var(--unavailable-ink);
}

.legend-dot.unknown {
  background: var(--muted);
}

.legend-dot.changed {
  border: 2px solid var(--change);
  background: transparent;
}

dialog {
  width: min(1040px, calc(100% - 1.5rem));
  max-height: calc(100vh - 2rem);
  border: 0;
  border-radius: 1rem;
  padding: 0;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 30px 90px rgba(13, 38, 55, 0.26);
}

dialog::backdrop {
  background: rgba(19, 42, 57, 0.52);
  backdrop-filter: blur(2px);
}

:root:has(#watch-dialog[open]) {
  overflow: hidden;
}

#watch-dialog {
  width: min(1040px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

#watch-form {
  padding: 1.35rem;
  overflow: visible;
  overflow-wrap: anywhere;
}

#watch-form fieldset,
#watch-form label,
#watch-form input,
#watch-form .dialog-heading > div {
  min-width: 0;
}

#watch-form .dialog-heading > button {
  flex-shrink: 0;
}

#watch-form .picker-heading,
#watch-form .dialog-actions {
  flex-wrap: wrap;
}

.dialog-heading,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.icon-button {
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  border-radius: 50%;
  color: var(--ink);
  background: var(--quiet-bg);
  font-size: 1.4rem;
}

label,
legend {
  color: var(--ink);
  font-weight: 650;
}

label > input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  display: block;
  border: 1px solid var(--control-border);
  border-radius: 0.6rem;
  margin-top: 0.35rem;
  padding: 0.7rem 0.75rem;
  color: var(--ink);
  background: var(--control-bg);
}

input:focus {
  outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
  border-color: var(--blue);
}

.date-fields,
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.search-mode-fieldset {
  margin-bottom: 0;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.segmented-control label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-soft);
  cursor: pointer;
  font-weight: 600;
}

.segmented-control label:has(input:checked) {
  border-color: var(--selection-border);
  color: var(--blue-dark);
  background: var(--surface-selected);
}

.flexible-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(360px, 1.35fr);
  align-items: start;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.weekday-field {
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: var(--surface-soft);
}

.weekday-field > strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.weekday-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.weekday-choices label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  background: var(--control-bg);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
}

.weekday-choices label:has(input:checked) {
  border-color: var(--selection-border);
  color: var(--blue-dark);
  background: var(--surface-selected);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  margin: 1rem 0;
  padding: 1rem;
}

.catalog-toolbar,
.picker-heading,
.room-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.catalog-toolbar {
  margin: 0.8rem 0;
}

.catalog-summary,
.selection-count {
  color: var(--muted);
  font-size: 0.82rem;
}

.catalog-picker {
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(340px, 1.35fr);
  gap: 0.8rem;
}

.catalog-column {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.8rem;
  background: var(--surface-soft);
}

.picker-heading {
  min-height: 1.8rem;
}

.search-label {
  display: block;
  margin: 0.55rem 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.choice-list {
  max-height: 24rem;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  scrollbar-gutter: stable;
}

.catalog-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0.35rem;
  cursor: pointer;
  font-weight: 550;
}

.catalog-choice:hover {
  background: var(--surface-selected);
}

.catalog-choice input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
}

.catalog-choice span,
.catalog-choice strong,
.catalog-choice small {
  display: block;
}

.catalog-choice strong {
  font-size: 0.91rem;
}

.catalog-choice small,
.room-group-heading small,
.selection-chip small {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.room-group + .room-group {
  border-top: 0.35rem solid var(--paper);
}

.room-type-group h4 {
  margin: 0;
  padding: 0.65rem 0.35rem 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.room-option {
  position: relative;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.room-option .room-choice {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0;
}

.room-selection-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.room-selection-control input {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
}

.room-description-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  text-align: left;
}

.room-description-toggle:hover {
  background: transparent;
  transform: none;
}

.room-description-toggle > span:first-child {
  flex: 1 1 7.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.room-description-toggle strong {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
}

.room-description-toggle small {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.room-detail-affordance {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

.room-description p {
  margin: 0;
  padding: 0 0.5rem 0.5rem 2.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.room-description ul {
  margin: 0;
  padding: 0 0.5rem 0.7rem 3.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

.room-description li + li {
  margin-top: 0.45rem;
}

.room-group-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.55rem 0.35rem;
  background: var(--secondary-bg);
}

.room-group-heading span,
.room-group-heading strong,
.room-group-heading small {
  display: block;
}

button.text-button {
  padding: 0.3rem 0.4rem;
  min-height: 44px;
  border: 0;
  box-shadow: none;
  color: var(--blue-dark);
  background: transparent;
  font-size: 0.75rem;
}

button.text-button:hover {
  background: var(--secondary-hover);
  transform: none;
}

.selected-options {
  margin-top: 0.85rem;
}

.availability-preview { margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.availability-preview > button { min-height: 44px; }
#preview-availability-status { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
#preview-availability-status:empty, #preview-availability-results:empty { display: none; }
#preview-availability-results { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-soft); }
#preview-availability-results h3 { margin: 0 0 .4rem; }
.preview-dates { margin: 0 0 .4rem; color: var(--muted); font-size: .875rem; }
.preview-resort { margin: 0 0 .8rem; font-weight: 700; }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.preview-actions > * { min-height: 44px; }
@media (max-width: 560px) {
  #preview-availability-results { padding: 8px; }
  .availability-preview > button { width: 100%; }
  .preview-actions { gap: .5rem; }
  .preview-actions > * { font-size: .8125rem; padding: .5rem .6rem; }
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  border: 1px solid var(--selection-border);
  border-radius: 999px;
  padding: 0.35rem 0.4rem 0.35rem 0.65rem;
  color: var(--blue-dark);
  background: var(--surface-selected);
  font-size: 0.78rem;
  font-weight: 650;
}

.selection-chip > span {
  min-width: 0;
}

.selection-chip button {
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  padding: 0;
  color: var(--blue-dark);
  background: var(--secondary-hover);
  line-height: 1;
}

.picker-empty {
  margin: 0;
  padding: 0.9rem 0.4rem;
  color: var(--muted);
  font-size: 0.83rem;
}

.check-grid {
  grid-template-columns: 1fr;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 550;
}

.check-label input {
  width: 1.1rem;
  height: 1.1rem;
}

.form-error {
  min-height: 1.2rem;
  color: var(--red);
}

.dialog-actions {
  justify-content: flex-end;
}

.toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 10;
  max-width: min(26rem, calc(100% - 2.4rem));
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  color: white;
  background: var(--toast-bg);
  box-shadow: var(--shadow);
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 0.75rem;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}

.hidden {
  display: none !important;
}

/* Results stay dense; account controls and details expand when needed. */
.view-navigation { flex-wrap: wrap; }
.settings-panel {
  max-width: 60rem;
  margin: 0 0 1.2rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--surface);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-panel.settings-locked { max-width: 34rem; }
.settings-heading { margin: 0; font-size: 1.125rem; font-weight: 650; }
.settings-header button { min-height: 44px; }
.settings-content { display: grid; gap: 1rem; }
.settings-panel .field-help { max-width: 66ch; line-height: 1.5; margin-bottom: 1rem; }
.settings-panel [role="status"]:empty { display: none; }
.settings-panel [role="status"] { margin: .75rem 0 0; font-size: .875rem; }
.settings-monitoring h3 { margin: 0 0 .5rem; font-size: 1rem; }
.settings-monitoring .row-actions { margin: 1rem 0; }
.settings-password-section { border: 1px solid var(--line); border-radius: .65rem; }
.settings-password-section > summary {
  padding: 1rem;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 650;
}
.settings-password-section[open] > summary { border-bottom: 1px solid var(--line); }
.settings-password-section > p { margin: 0 1rem 1rem; }
.settings-password-section > [role="status"] { margin: 0 1rem 1rem; }
.password-form { display: grid; gap: 1rem; width: 100%; max-width: 30rem; }
.password-form > button[type="submit"] { justify-self: start; min-height: 44px; }
.settings-password-section .password-form { width: calc(100% - 2rem); margin: 1rem; }
.auth-panel .password-form { margin-block: 1.25rem; }
.password-field { display: grid; gap: .45rem; min-width: 0; }
.password-field > label { font-size: .875rem; }
.password-input {
  display: flex;
  min-width: 0;
  border: 1px solid var(--control-border);
  border-radius: .6rem;
  background: var(--control-bg);
}
.password-input:focus-within {
  border-color: var(--blue);
  outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
}
.password-input input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: .7rem .8rem;
  border: 0;
  border-radius: .6rem 0 0 .6rem;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
}
.password-input input:focus { outline: none; }
.password-toggle {
  flex: 0 0 4.5rem;
  min-height: 44px;
  padding: .6rem .75rem;
  border-left: 1px solid var(--line);
  border-radius: 0 .6rem .6rem 0;
  background: transparent;
  color: var(--blue-dark);
  font-size: .875rem;
}
.password-toggle:hover { background: var(--secondary-bg); transform: none; }
.password-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.search-alert-form, .recipient-add-form, .recipient-channel-form {
  display: grid;
  gap: 0.65rem;
}
.search-alert-form, .recipient-add-form { max-width: 38rem; }
.search-recipient {
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.8rem;
  margin: 0.7rem 0;
}
.search-recipient h4, .search-recipient p { margin: 0 0 0.5rem; }
.search-recipient .muted { overflow-wrap: anywhere; }
.search-detail > summary, .stay-comparison > summary { padding: .8rem; cursor: pointer; font-weight: 650; }
.search-freshness { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.room-update-status { display: block; margin-top: .3rem; color: var(--amber); font-size: .72rem; font-weight: 500; }
.activity-detail > p { white-space: pre-line; }
.activity-outcome.partial { color: var(--amber); background: var(--amber-bg); }
.stay-comparison { border: 1px solid var(--line); border-radius: .6rem; background: var(--green-bg); margin-bottom: 1rem; }
.comparison-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .65rem; padding: .3rem .8rem .8rem; }
.comparison-option { border-top: 1px solid var(--line); padding: .65rem 0 0; font-size: .82rem; line-height: 1.45; }
.comparison-option p { margin: .25rem 0; }
.grid-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem 0 .65rem; font-size: .82rem; }
.trip-calendar.paged-grid { min-width: 0; table-layout: fixed; }
.trip-calendar th:first-child { width: 260px; min-width: 260px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; font-size: .8rem; }
.trip-calendar.paged-grid td, .trip-calendar.paged-grid th { padding: .6rem .3rem; }
.trip-calendar.full-grid td, .trip-calendar.full-grid thead th:not(:first-child) { min-width: 58px; }
.search-detail { margin-top: .8rem; border-top: 1px solid var(--line); }
.search-detail-content { padding: .5rem; }
.recent-changes { max-height: 22rem; overflow-y: auto; }
.change-entry { display: grid; gap: .2rem; border-bottom: 1px solid var(--line); padding: .7rem 0; font-size: .85rem; }
.detail-link { display: inline-block; margin-top: .8rem; color: var(--blue); }
.archive-provenance { white-space: pre-wrap; overflow-wrap: anywhere; padding: .8rem; font-size: .78rem; }
.archive-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; margin-bottom: .6rem; }
.archive-filter select { max-width: 100%; padding: .5rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--control-bg); }
.room-filters, .filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-bottom: .8rem; }
.room-filters label, .filter-bar label { font-size: .76rem; flex: 1 1 100px; }
.room-filters select, .filter-bar select, .filter-bar input { display: block; width: 100%; border: 1px solid var(--control-border); border-radius: .5rem; padding: .55rem .4rem; margin-top: .3rem; background: var(--control-bg); color: var(--ink); }
.selected-options { position: sticky; bottom: 0; padding: 8px 0; background: var(--surface); border-top: 1px solid var(--line); z-index: 2; }
.selected-options .picker-empty { padding: 0; line-height: 1.4; }
.selection-chips { max-height: 8rem; overflow-y: auto; }
.selection-chip { border-radius: .6rem; }
.activity-list { display: grid; gap: .55rem; }
.activity-entry { border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); margin: .4rem 0; }
.activity-entry > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .9rem; cursor: pointer; font-size: .85rem; }
.activity-entry > summary::before { content: '\25b8'; }
.activity-entry[open] > summary::before { content: '\25be'; }
.activity-entry time { margin-left: auto; color: var(--muted); font-size: .78rem; }
.activity-outcome { color: var(--muted); font-size: .75rem; font-weight: 700; }
.activity-outcome.failure { color: var(--red); }
.activity-outcome.success { color: var(--green); }
.activity-detail { border-top: 1px solid var(--line); padding: 1rem; font-size: .85rem; }
.activity-detail p { white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-detail dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; }
.activity-detail dt { color: var(--muted); font-size: .75rem; }
.activity-detail dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0 2rem; }
.toast a { color: #fff; text-decoration: underline; white-space: nowrap; }
.auth-panel { max-width: 36rem; margin: 3rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--control-bg); line-height: 1.5; }
.auth-panel .button { display: inline-block; margin-bottom: 1rem; }
.account-name { font-size: .8rem; color: var(--muted); }
.admin-invitations { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#invitation-result { display: flex; align-items: end; gap: .7rem; flex-wrap: wrap; }
#invitation-result label { flex: 1 1 240px; }
.notification-dialog-content { padding: 1.4rem; }
.notification-summary { font-size: .82rem; line-height: 1.5; }
.notification-detail { border-top: 1px solid var(--line); margin-top: 1rem; }
.notification-detail > summary { font-weight: 650; padding: .8rem; cursor: pointer; }
.notification-detail > .field-help, .notification-detail > h3 { margin-inline: .8rem; }
.subscription-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: .8rem; }
.subscription-form { border: 1px solid var(--line); border-radius: .8rem; padding: 1rem; background: var(--surface-soft); }
.subscription-form > label { display: block; margin: .6rem 0; font-size: .83rem; }
.subscription-form > .check-label { display: flex; }
.subscription-timing { margin: .8rem 0; font-size: .83rem; }
.subscription-timing > summary { cursor: pointer; font-weight: 650; padding: .4rem 0; }
.subscription-timing > label { display: block; margin: .6rem 0; }
.notification-onboarding { margin: 0 0 1rem; padding: .85rem 1rem; background: var(--surface-selected); border-radius: .7rem; font-size: .9rem; }
.subscription-form select { width: 100%; display: block; margin-top: .3rem; padding: .5rem; background: var(--control-bg); border: 1px solid var(--line); border-radius: .5rem; }
.subscription-form input[type="text"] { padding: .5rem; }
.quiet-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; font-size: .8rem; }
.subscription-feedback { color: var(--red); font-size: .85rem; margin-bottom: 0; }
.delivery-list { margin: .8rem; max-height: 20rem; overflow: auto; }
.delivery-entry { display: grid; gap: .3rem; font-size: .82rem; border-top: 1px solid var(--line); padding: .7rem 0; }
.delivery-entry p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

footer {
  padding: 1.4rem 0 2rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

@media (max-width: 850px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem 0;
  }

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

  .workspace {
    display: block;
  }

  .watch-drawer .watch-list {
    grid-template-columns: 1fr;
  }

  .catalog-picker {
    grid-template-columns: 1fr;
  }

  .flexible-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 850px), (pointer: coarse) {
  #watch-dialog .choice-list,
  #watch-dialog .selection-chips {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  #watch-dialog .selected-options,
  #watch-dialog .room-group-heading {
    position: static;
  }
}

@media (max-width: 560px) {
  .site-header,
  main,
  footer {
    width: min(100% - 1rem, 1480px);
  }

  .header-actions,
  .header-actions > * {
    width: 100%;
  }

  .header-actions .pill {
    width: auto;
  }

  .status-grid,
  .date-fields,
  .segmented-control {
    grid-template-columns: 1fr;
  }

  .toolbar button {
    flex: 1 1 45%;
  }

  .poll-interval-control {
    flex: 1 1 100%;
    justify-content: center;
  }

  .results-panel {
    padding: 0.9rem;
  }

  .active-trip-card .results-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .trip-actions {
    justify-content: flex-start;
  }

  .watch-panel {
    padding: 1rem;
  }

  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-toolbar button {
    width: 100%;
  }

  .header-actions { flex-direction: row; }
  .header-actions > .button { width: auto; font-size: .8rem; padding: .55rem; }
  .header-actions .account-name, .header-actions #logout-button { width: auto; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .status-card { padding: .65rem; }
  .status-card strong { font-size: .8rem; }
  .results-panel { padding: 0; }
  .active-trip-card { padding: .75rem; }
  .trip-calendar th:first-child { width: 136px; min-width: 136px; font-size: .69rem; }
  .trip-calendar.paged-grid th, .trip-calendar.paged-grid td { padding: .6rem .2rem; }
  .trip-calendar.paged-grid thead th:not(:first-child) { font-size: .64rem; }
  .inventory-count { font-size: .9rem; min-width: 0; }
  .grid-controls { flex-wrap: wrap; }
  .grid-controls > span { flex: 1 1 100%; }
  .grid-controls .row-actions { justify-content: flex-end; width: 100%; }
  .toolbar { padding: .75rem 0; min-height: 0; }
  .toolbar > button, .toolbar > a { flex: 1 1 40%; font-size: .85rem; text-align: center; }
  .settings-panel .poll-interval-control { flex-basis: 100%; }
  .settings-panel { padding: 1rem; }
  .password-form > button[type="submit"] { width: 100%; }
  .activity-entry time { flex-basis: 100%; margin-left: 0; }
  .activity-entry > summary { gap: .4rem; }
  .comparison-list { grid-template-columns: 1fr; }
  #watch-form { padding: 12px; }
  #watch-form .catalog-fieldset { border: 0; padding: 0; min-width: 0; }
  .catalog-column { padding: 8px; }
  .room-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-filters label:has(#accessible-filter) { grid-column: 1 / -1; }
  .room-group-heading { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .selected-options { position: static; }
  .subscription-settings { grid-template-columns: 1fr; margin: 0; }
  .subscription-form { padding: .8rem; }
}
.settings-email .row-actions { align-items: end; }
.test-email-field { display: grid; gap: .4rem; width: min(100%, 24rem); }
.test-email-field input { width: 100%; }

/* Concept layouts: Classic WDW and After Dark. All artwork is local. */
:root { --ink: #122653; --paper: #edf5ff; --green-bg: #ddf7d9; --available-bg: #cef5bc; --line: #ccd9ec; --shadow: 0 5px 14px #2362a51a; }
:root[data-theme="dark"] { --paper: #06192d; --surface: #122e49; --surface-soft: #17344e; --line: #577b9b; --green-bg: #1d3d36; --available-bg: #baf39a; --unavailable-bg: #82a5c2; --shadow: 0 5px 16px #0003; --check-mark: #102e28; }
.ui-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
h1, h2, h3 { font-family: var(--heading-font); }
button, .button { font-weight: 750; }
button:where(:not(.password-toggle):not(.room-choice-text):not(.watch-card-main)), a.button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
button.secondary, .button.secondary { border: 1px solid #8fa7c7; background: linear-gradient(#fff9, #e7f0fc80); color: #15376a; }
button:where(:not(.secondary):not(.danger):not(.password-toggle):not(.room-detail-toggle):not(.room-choice-text):not(.watch-card-main)) { background: linear-gradient(#008bea, #0062b8); box-shadow: 0 3px 6px #1767a72b; }
input, select, textarea { color: var(--ink); accent-color: var(--blue); }
input::placeholder { color: var(--muted); opacity: .85; }
.site-header, main, footer { width: min(1320px, calc(100% - 64px)); }
.masthead { display: flex; flex-direction: column; position: relative; background: #162e5c; color: white; }
.masthead .site-header { order: 0; min-height: 86px; padding-block: 12px; gap: 20px; }
.site-brand { flex-shrink: 0; }
a.site-brand { display: flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
a.site-brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.site-brand :is(h1, .brand-title) { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; font-size: 30px; line-height: 1; font-weight: 900; letter-spacing: -.8px; }
.brand-castle { width: 46px; height: 51px; stroke: none; }
.brand-trail { display: none; position: absolute; width: 80px; height: 27px; left: 39px; top: -15px; fill: none; stroke: #f7da8d; stroke-width: 2; }
.masthead .header-actions { gap: 14px; margin-left: auto; flex-wrap: nowrap; }
.masthead .header-actions > button { min-height: 44px; padding: 5px; border: 0; color: #fff; background: transparent; box-shadow: none; font-size: 14px; }
.masthead .header-actions > button:hover, .header-menu > summary:hover { background: #ffffff13; transform: none; }
.masthead .pill { display: flex; align-items: center; gap: 8px; padding: 5px; background: none; color: #fff; border: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.masthead .pill .ui-icon { width: 26px; height: 25px; }
.masthead .pill.good { color: #a7ef9c; }
.masthead .pill.bad { color: #ffaaa3; }
.masthead .pill.busy { color: #ffda80; }
.masthead .pill.neutral { color: #b9c4d3; }
.connection-status { position: relative; flex-shrink: 0; }
.connection-status > summary { cursor: pointer; list-style: none; min-width: 44px; min-height: 44px; justify-content: center; border-radius: 8px; }
.connection-status > summary::-webkit-details-marker { display: none; }
.connection-status > summary:hover { background: #ffffff13; }
.connection-detail { position: absolute; top: calc(100% + 4px); right: 0; width: max-content; max-width: min(280px, calc(100vw - 24px)); padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: .875rem; line-height: 1.4; }
.connection-detail p { margin: 0; }
.masthead .account-name { color: var(--ink); }
.header-menu { position: relative; order: 3; }
.header-menu > summary { display: grid; place-items: center; cursor: pointer; height: 44px; width: 44px; border-radius: 8px; list-style: none; }
.header-menu-items {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 15;
  display: grid;
  width: min(240px, calc(100vw - 24px));
  padding: 8px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.header-menu .header-menu-items > :is(button, a) {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: anywhere;
}
.header-menu .header-menu-items > :is(button, a):is(:hover, :focus-visible) {
  background: var(--surface-selected);
  transform: none;
}
.header-menu summary::-webkit-details-marker, .trip-menu summary::-webkit-details-marker { display: none; }
.theme-toggle { white-space: nowrap; min-height: 44px; }
.theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.masthead .view-navigation { order: 2; width: min(1320px, calc(100% - 64px)); margin: 0 auto; gap: 26px; border: 0; }
.masthead .view-navigation a { color: #fff; padding: 18px 5px 16px; font-size: 17px; white-space: nowrap; font-weight: 700; border-bottom: 4px solid transparent; }
.masthead .view-navigation a[aria-current="page"] { color: white; border-bottom-color: #03a9ed; }

.masthead :focus-visible { outline-color: #bce5ff; }
.resort-banner { order: 1; height: 240px; position: relative; background: url('/static/castle-day.f2414c55c90c.webp') center 12% / cover no-repeat; }
.resort-banner::after { content: ''; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.banner-spark { position: absolute; color: #fff; font-size: 31px; text-shadow: 0 0 10px white; }
.spark-one { left: 44%; top: 22%; font-size: 22px; }
.spark-two { left: 65%; top: 27%; }
.spark-three { left: 31%; top: 50%; font-size: 18px; }
main { position: relative; padding-top: 0; }
.toolbar { gap: 24px; padding-block: 0 24px; min-height: 76px; align-items: center; margin-top: -8px; }
.primary-actions { display: flex; gap: 16px; flex: 0 0 auto; }
.primary-actions button { font-size: 18px; min-height: 48px; padding: 10px 28px; }
.primary-actions #visible-new-watch-button { min-width: 202px; }
.primary-actions #refresh-button { min-width: 160px; }
.poll-status { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 0; padding: 9px 0 9px 26px; border-left: 1px solid #8ba3c4; color: var(--muted); font-size: 15px; font-weight: 500; }
.poll-status time { font-variant-numeric: tabular-nums; }
#last-error:empty { display: none; }
#last-error { flex-basis: 100%; }
.active-trip-list { gap: 24px; }
.active-trip-card { padding: 24px; border-radius: 22px; box-shadow: var(--shadow); background: linear-gradient(135deg, #fff, #f8fbff); border-color: #d0e1f9; }
.active-trip-card .results-heading { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; }
.resort-thumbnail { width: 180px; height: 110px; border-radius: 16px; object-fit: cover; flex-shrink: 0; }
.past-trip-card .past-resort-thumbnail { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); gap: 2px; overflow: hidden; background: var(--surface-soft); }
.past-resort-thumbnail img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.past-resort-thumbnail[data-photo-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.past-resort-thumbnail[data-photo-count="3"], .past-resort-thumbnail[data-photo-count="4"] { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.past-resort-thumbnail[data-photo-count="3"] img:first-child { grid-row: span 2; }
.past-resort-thumbnail > .ui-icon { place-self: center; width: 48px; height: 48px; color: var(--muted); }
.past-trip-card .trip-resort .ui-icon { display: none; }
.trip-heading-text { flex: 1; min-width: 0; }
.active-trip-card h2 { font-size: 32px; line-height: 1.12; letter-spacing: -.7px; font-weight: 900; margin: 0 0 6px; }
.trip-dates { font-size: 17px; line-height: 1.35; color: var(--muted); margin: 0 0 6px; }
.trip-resort { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 22px; line-height: 1.3; font-weight: 850; }
.trip-resort .ui-icon { display: none; }
.trip-actions { flex-wrap: nowrap; gap: 10px; position: relative; }
.trip-actions button.compact { min-height: 48px; padding: 9px 20px; font-size: 17px; border-radius: 12px; }
.trip-menu { position: relative; }
.trip-actions .polling-toggle.secondary { flex: 0 0 auto; flex-direction: column; min-width: 60px; min-height: 44px; padding: 2px 4px; gap: 2px; border: 0; color: var(--ink); background: transparent; box-shadow: none; }
.trip-actions .polling-toggle:hover { background: var(--surface-selected); transform: none; }
.polling-label { font-size: 11px; line-height: 1.2; font-weight: 650; }
.polling-state { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2; }
.polling-switch-track { display: inline-flex; align-items: center; width: 30px; height: 18px; padding: 3px; border-radius: 999px; background: var(--muted); }
.polling-switch-track::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: white; }
.polling-toggle[aria-checked="true"] .polling-switch-track { background: var(--blue); }
.polling-toggle[aria-checked="true"] .polling-switch-track::before { transform: translateX(12px); }
.trip-menu > summary { display: grid; place-items: center; cursor: pointer; list-style: none; width: 24px; height: 44px; color: var(--muted); }
.trip-menu > button { position: absolute; z-index: 6; right: 0; top: 100%; white-space: nowrap; box-shadow: var(--shadow); border: 1px solid var(--line); }
.calendar-wrap { border-radius: 10px; border-color: #ccd8ea; }
.trip-calendar { border-collapse: separate; border-spacing: 2px; background: var(--surface-soft); }
.trip-calendar.paged-grid th:first-child { width: 40%; min-width: 0; }
.trip-calendar.full-grid th:first-child { min-width: 310px; }
.trip-calendar.paged-grid th, .trip-calendar.paged-grid td { padding: 8px 10px; }
.trip-calendar td { border: 0; border-radius: 5px; height: 46px; }
.trip-calendar th { border: 0; border-bottom: 1px solid var(--line); }
.trip-calendar tbody th { background: transparent; }
.trip-calendar thead th { font-size: 17px; color: var(--ink); font-weight: 800; background: var(--table-heading); }
.trip-calendar thead th:first-child { background: var(--table-heading); }
.trip-calendar .inventory-count { font-size: 22px; font-weight: 850; }
.room-label { display: flex; gap: 18px; align-items: center; }
.room-label > .ui-icon { display: none; }
.room-label > span { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; }
.room-label strong { font-size: 18px; font-weight: 850; line-height: 1.2; }
.room-label small { font-size: 14px; color: var(--muted); line-height: 1.3; font-weight: 500; }
.room-label .room-update-status { grid-column: 1 / -1; color: var(--amber); }
.resort-section th { color: var(--ink); font-size: 17px; padding-block: 14px !important; background: var(--surface-selected) !important; }
.resort-section .ui-icon { margin-right: 10px; width: 32px; height: 30px; }
.grid-controls { display: flex; flex-wrap: nowrap; padding: 0 0 8px; justify-content: space-between; font-size: 14px; }
.grid-controls > span { flex: initial; text-align: center; }
.grid-controls button { min-width: 38px; min-height: 38px; padding: 6px; }
.stay-comparison { margin: 16px 0 14px; border: 0; border-radius: 12px; background: linear-gradient(100deg, #e1f9d9, #cfeeda); }
.stay-comparison > summary { display: flex; align-items: center; gap: 14px; padding: 12px 18px; font-size: 20px; font-weight: 850; color: #155518; list-style: none; }
.stay-comparison .ui-icon { width: 28px; height: 28px; color: #15962c; }
.stay-comparison > summary small { margin-left: auto; font-size: 13px; font-weight: 500; }
.stay-pending { background: var(--surface-soft); border: 1px solid var(--line); }
.stay-pending > summary, .stay-pending .ui-icon { color: var(--muted); }
.notification-detail { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.notification-detail > summary { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 17px; color: var(--ink); list-style: none; }
.notification-detail > summary .ui-icon { color: var(--blue); }
.notification-detail[open] > summary .ui-icon { transform: rotate(180deg); }
.notification-detail > .search-email-form { margin: 0; padding: 14px; }
.search-email-form .email-fields { padding: 0; margin: 0; border: 0; min-width: 0; }
.email-alert-toggle, .email-switch-label, .email-recipient-actions { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.email-alert-toggle { justify-content: space-between; margin-bottom: 12px; }
.email-switch { appearance: none; flex: 0 0 auto; width: 36px; height: 22px; border: 0; border-radius: 20px; padding: 3px; background: var(--muted); cursor: pointer; }
.email-switch::before { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.email-switch:checked { background: var(--blue); }
.email-switch:checked::before { transform: translateX(14px); }
.email-recipient { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr) auto; align-items: end; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.email-recipient label { min-width: 0; font-size: 13px; }
.email-recipient input:not([type="checkbox"]) { padding: 9px 10px; }
.search-email-form input:not([type="checkbox"]), .search-email-form select { font-size: 16px; }
.search-email-form select { display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--control-border); border-radius: 8px; color: var(--ink); background: var(--control-bg); }
.search-email-form .subscription-timing { margin-top: 12px; }
.search-email-form .subscription-timing > label { display: block; margin: 8px 0; font-size: 13px; }
.search-email-form .quiet-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.search-email-form .quiet-hours label { font-size: 13px; }
.email-recipient-actions { justify-content: space-between; }
.email-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.email-form-actions > button { min-height: 44px; font-size: 14px; }
.email-deliveries { margin: 0 14px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.email-deliveries > summary, .search-email-form .subscription-timing > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.email-deliveries .delivery-entry { padding: 10px 0; }
@media (max-width: 700px) {
  .email-recipient { grid-template-columns: minmax(0, 1fr); }
  .email-recipient-actions { gap: 6px; }
  .email-form-actions > button { flex: 1 1 auto; padding: 9px 12px; }
}
.recipient-count { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 14px; }
.notification-detail > form, .notification-detail > p, .notification-detail > article, .notification-detail > h3, .notification-detail > .delivery-list { margin: 16px; }
.notification-detail > summary::-webkit-details-marker, .stay-comparison > summary::-webkit-details-marker { display: none; }
.card-secondary-actions { display: flex; align-items: start; gap: 16px; margin-top: 10px; }
.card-secondary-actions .grid-mode { order: 1; margin-left: auto; min-width: 80px; min-height: 32px; padding: 5px 8px; font-size: 12px; border: 0; background: none; color: var(--muted); }
.card-secondary-actions .search-detail { flex: 1; margin: 0; border: 0; background: none; font-size: 12px; }
.card-secondary-actions .search-detail > summary { padding: 7px 0; color: var(--muted); font-weight: 500; }
.search-freshness { margin: 5px 0 0; font-size: 11px; }
.search-detail-content { padding: 10px 0; }
.settings-panel, .auth-panel { box-shadow: var(--shadow); }
.settings-visible:is([data-view="activity"], [data-view="past"]) #monitoring-view > .toolbar, .settings-visible:is([data-view="activity"], [data-view="past"]) #monitoring-view > .workspace { display: none; }
[data-theme="dark"] .masthead { background: linear-gradient(110deg, #05182b, #0b2440); }
[data-theme="dark"] .site-brand :is(h1, .brand-title) { font-family: "Nunito", sans-serif; font-size: 36px; }
[data-theme="dark"] .brand-name { color: #ffe098; }
[data-theme="dark"] .brand-trail { display: block; }
[data-theme="dark"] .resort-banner { background-image: url('/static/castle-night.ca066f000e74.webp'); background-position: center 43%; height: 230px; }
[data-theme="dark"] .resort-banner::after, [data-theme="dark"] .banner-spark { display: none; }
[data-theme="dark"] .masthead .view-navigation { border-bottom: 1px solid #355573; width: 100%; padding-inline: max(32px, calc((100% - 1320px) / 2)); gap: 26px; }
[data-theme="dark"] .masthead .view-navigation a { padding-block: 18px; font-size: 20px; }
[data-theme="dark"] .masthead .view-navigation a[aria-current="page"] { color: #ffe09b; border-bottom-color: #ffe09b; }
:where([data-theme="dark"]) button.secondary, :where([data-theme="dark"]) .button.secondary { background: linear-gradient(#17385180, #06192d80); color: #f0f6ff; border-color: #95dbf6; }
:where([data-theme="dark"]) button:where(:not(.secondary):not(.danger):not(.password-toggle):not(.room-detail-toggle):not(.room-choice-text):not(.watch-card-main)) { background: linear-gradient(#7dd6ff, #68c6f2); color: #051c2e; box-shadow: none; border: 1px solid #8be1ff; }
[data-theme="dark"] .header-actions > button { background: none; border: 0; color: white; }
[data-theme="dark"] .toolbar { margin-top: -68px; padding-bottom: 14px; gap: 0; }
[data-theme="dark"] .primary-actions { margin-left: auto; height: 68px; align-items: center; }
[data-theme="dark"] .primary-actions button { min-width: 130px; }
[data-theme="dark"] .primary-actions #visible-new-watch-button { min-width: 200px; }
[data-theme="dark"] .primary-actions .ui-icon { display: none; }
[data-theme="dark"] .poll-status { flex-basis: 100%; border: 0; color: #e1eaf7; padding: 13px 0 0; }
[data-theme="dark"] .active-trip-card { background: linear-gradient(120deg, #17344e, #0c233c); border-color: #6486a5; border-radius: 20px; padding: 20px; }
[data-theme="dark"] .resort-thumbnail { display: none; }
[data-theme="dark"] .past-trip-card .past-resort-thumbnail { display: grid; }
[data-theme="dark"] .active-trip-card .results-heading { align-items: flex-start; margin-bottom: 18px; }
[data-theme="dark"] .active-trip-card h2 { font-size: 36px; color: #fff; font-weight: 900; }
[data-theme="dark"] .trip-dates { color: #f1f6fc; font-size: 19px; }
[data-theme="dark"] .trip-resort { font-family: "Nunito", sans-serif; color: #ffe09e; font-size: 26px; margin-top: 14px; }
[data-theme="dark"] .trip-resort .ui-icon { display: block; width: 46px; height: 38px; color: #fff; }
[data-theme="dark"] .past-trip-card .trip-resort .ui-icon { display: none; }
[data-theme="dark"] .trip-resort .palm { color: #ffe09e; }
[data-theme="dark"] .trip-actions { padding-top: 14px; }
[data-theme="dark"] .trip-actions button:not(.polling-toggle) { background: linear-gradient(#17385180, #06192d80) !important; color: #f2f6ff !important; border: 1px solid #93dbf6 !important; }
[data-theme="dark"] .trip-actions .poll-watch-button .ui-icon { color: #88dafb; }
[data-theme="dark"] .calendar-wrap { border-color: #6d8eab; }
[data-theme="dark"] .trip-calendar { border-spacing: 1px; background: #19354c; }
[data-theme="dark"] .trip-calendar td { border-radius: 4px; height: 53px; }
[data-theme="dark"] .trip-calendar .inventory-count { font-size: 25px; }
[data-theme="dark"] .trip-calendar.paged-grid th:first-child { width: 33%; }
[data-theme="dark"] .trip-calendar tbody th { background: #10273e; }
[data-theme="dark"] .room-label > .ui-icon { display: block; width: 32px; height: 28px; }
[data-theme="dark"] .room-label > span { display: block; }
[data-theme="dark"] .room-label strong { display: block; font-size: 19px; }
[data-theme="dark"] .room-label small { display: block; font-size: 14px; color: #fff; margin-top: 2px; }
[data-theme="dark"] .stay-comparison { background: linear-gradient(110deg, #233f36, #183832); border: 1px solid #5c9e45; }
[data-theme="dark"] .stay-comparison > summary { color: #c4f5a6; font-size: 23px; }
[data-theme="dark"] .stay-comparison .ui-icon { color: #bdf4a0; }
[data-theme="dark"] .stay-pending { border-color: var(--line); background: var(--surface-soft); }
[data-theme="dark"] .stay-pending summary, [data-theme="dark"] .stay-pending .ui-icon { color: var(--muted); }
[data-theme="dark"] .notification-detail { background: linear-gradient(#1c3a54, #14304b); border-color: #6485a1; }
[data-theme="dark"] .recipient-count { color: #e0e8f3; }
@media (min-width: 1250px) {
  :root:not([data-theme="dark"]) .masthead .view-navigation { position: absolute; top: 0; left: max(330px, calc((100% - 1320px) / 2 + 310px)); width: auto; height: 86px; align-items: center; gap: 18px; }
  :root:not([data-theme="dark"]) .masthead .view-navigation::before { content: ''; height: 38px; width: 1px; margin-right: 8px; background: #7f9bc0; }
  :root:not([data-theme="dark"]) .masthead .view-navigation a { font-size: 16px; padding: 12px 0; }
  :root:not([data-theme="dark"]) .resort-banner { order: 3; }
}
@media (min-width: 561px) and (max-width: 1249px) {
  :root:not([data-theme="dark"]) .view-navigation { order: 1; }
  :root:not([data-theme="dark"]) .resort-banner { order: 2; }
  [data-theme="dark"] .masthead .view-navigation { padding-right: 350px; gap: 18px; }
  [data-theme="dark"] .masthead .view-navigation a { font-size: 16px; }
  .resort-thumbnail { width: 140px; height: 100px; }
  .active-trip-card .results-heading { gap: 16px; }
  .trip-actions button.compact { padding-inline: 12px; }
  .trip-resort { font-size: 19px; }
  .room-label > span { display: block; }
  .room-label small { display: block; }
}
@media (max-width: 950px) and (min-width: 561px) {
  [data-theme="dark"] .toolbar { margin-top: 12px; }
  [data-theme="dark"] .primary-actions { margin-left: 0; height: auto; }
  [data-theme="dark"] .masthead .view-navigation { padding-right: 20px; }
  .masthead .site-header { flex-direction: row; }
  .masthead .pill span { display: none; }
  .trip-actions { align-self: start; }
  .active-trip-card .results-heading { flex-wrap: wrap; }
  .trip-actions { margin-left: auto; }
  .poll-status { border: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .site-header, main, footer { width: calc(100% - 24px); }
  .masthead .site-header { flex-direction: row; align-items: center; min-height: 72px; padding: 12px 0 4px; gap: 4px; }
  .site-brand :is(h1, .brand-title), [data-theme="dark"] .site-brand :is(h1, .brand-title) { font-size: 22px; gap: 5px; letter-spacing: -.7px; }
  .brand-castle { width: 31px; height: 38px; }
  .brand-trail { left: 24px; top: -7px; width: 59px; height: 17px; }
  .masthead .header-actions { width: auto; gap: 1px; margin-left: auto; }
  .masthead .header-actions > button, .masthead .pill { min-width: 30px; width: 30px; padding: 3px; font-size: 0; }
  .masthead .header-actions > button span, .masthead .pill span { display: none; }
  .masthead .header-actions .pill { min-height: 44px; }
  .masthead .pill .ui-icon { width: 23px; }
  .header-menu .ui-icon { width: 20px; }
  .masthead .header-actions > .theme-toggle { width: 30px; }
  .masthead .view-navigation, [data-theme="dark"] .masthead .view-navigation { order: 1; width: 100%; padding: 0 12px; gap: 0; justify-content: space-between; flex-wrap: nowrap; }
  .masthead .view-navigation a, [data-theme="dark"] .masthead .view-navigation a { font-size: 13px; padding: 11px 3px 10px; border-bottom-width: 3px; }
  .resort-banner { order: 2; height: 110px; background-position: center 45%; }
  .resort-banner::after { inset: 70% 0 0; }
  .banner-spark { font-size: 16px; }
  .spark-one, .spark-three { font-size: 12px; }
  [data-theme="dark"] .resort-banner { display: none; }
  main { padding-top: 0; }
  .toolbar, [data-theme="dark"] .toolbar { margin-top: -2px; padding: 0 2px 12px; gap: 10px; }
  [data-theme="dark"] .toolbar { margin-top: 16px; }
  .primary-actions, [data-theme="dark"] .primary-actions { width: 100%; height: auto; gap: 10px; margin: 0; }
  .primary-actions button, [data-theme="dark"] .primary-actions button { min-width: 0 !important; min-height: 43px; font-size: 14px; padding: 8px 10px; flex: 1; border-radius: 10px; }
  .primary-actions #visible-new-watch-button { flex: 1.25; }
  .primary-actions .ui-icon { width: 20px; height: 20px; }
  .poll-status, [data-theme="dark"] .poll-status { flex-basis: 100%; justify-content: center; gap: 4px; font-size: 12px; border: 0; padding: 0; margin: 0; }
  .active-trip-card, [data-theme="dark"] .active-trip-card { border-radius: 17px; padding: 12px; }
  .active-trip-card .results-heading, [data-theme="dark"] .active-trip-card .results-heading { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 10px 12px; margin-bottom: 12px; }
  .resort-thumbnail { width: 90px; height: 80px; border-radius: 12px; }
  .active-trip-card .results-heading:not(:has(.resort-thumbnail)), [data-theme="dark"] .active-trip-card .results-heading { grid-template-columns: minmax(0, 1fr); }
  [data-theme="dark"] .past-trip-card .results-heading { grid-template-columns: 90px minmax(0, 1fr); }
  .active-trip-card h2 { font-size: 23px; letter-spacing: -.6px; margin-bottom: 4px; }
  .trip-dates { font-size: 13px; margin-bottom: 4px; }
  .trip-resort { font-size: 14px; font-weight: 850; line-height: 1.35; }
  .trip-actions, [data-theme="dark"] .trip-actions { grid-column: 1 / -1; width: 100%; padding: 0; gap: 6px; margin: 2px 0 0; }
  .trip-actions button.compact { flex: 1; min-height: 44px; font-size: 13px; padding: 6px; gap: 6px; border-radius: 10px; }
  .trip-actions .ui-icon { width: 18px; height: 18px; }
  .trip-menu > summary { width: 44px; height: 44px; }
  .trip-calendar.paged-grid th:first-child, [data-theme="dark"] .trip-calendar.paged-grid th:first-child { width: 43%; min-width: 0; }
  .trip-calendar.paged-grid th, .trip-calendar.paged-grid td { padding: 6px 7px; }
  .trip-calendar.paged-grid thead th:not(:first-child) { font-size: 13px; }
  .trip-calendar td, [data-theme="dark"] .trip-calendar td { height: 46px; }
  .trip-calendar .inventory-count, [data-theme="dark"] .trip-calendar .inventory-count { font-size: 19px; }
  .room-label > span { display: block; }
  .room-label strong, [data-theme="dark"] .room-label strong { font-size: 13px; line-height: 1.2; }
  .room-label small, [data-theme="dark"] .room-label small { display: block; font-size: 10px; margin-top: 2px; line-height: 1.3; }
  .room-label { gap: 8px; }
  [data-theme="dark"] .room-label > .ui-icon { width: 22px; height: 22px; }
  .grid-controls { padding-bottom: 6px; font-size: 12px; }
  .grid-controls button { min-height: 34px; min-width: 34px; padding: 5px; border: 0; }
  .grid-controls .ui-icon { width: 21px; height: 21px; }
  .stay-comparison { margin: 12px 0; border-radius: 10px; }
  .stay-comparison > summary, [data-theme="dark"] .stay-comparison > summary { font-size: 16px; gap: 8px; padding: 10px; }
  .stay-comparison .ui-icon { width: 24px; height: 24px; }
  .stay-comparison > summary small { display: none; }
  .notification-detail > summary { font-size: 14px; gap: 10px; padding: 11px 10px; }
  .notification-detail > summary .ui-icon { width: 20px; height: 20px; }
  .recipient-count { font-size: 11px; white-space: nowrap; }
  .notification-detail { margin-top: 10px; }
  .card-secondary-actions { gap: 4px; margin-top: 6px; }
  .card-secondary-actions .grid-mode, .card-secondary-actions .search-detail { font-size: 10px; }
  .search-freshness { font-size: 9px; line-height: 1.5; }
  [data-theme="dark"] .active-trip-card h2 { font-size: 28px; }
  [data-theme="dark"] .trip-dates { font-size: 16px; }
  [data-theme="dark"] .trip-resort { font-size: 17px; margin: 10px 0 0; gap: 8px; }
  [data-theme="dark"] .trip-resort .ui-icon { width: 34px; height: 30px; }
  [data-theme="dark"] .trip-heading-text { min-width: 0; }
  .dashboard-legend { font-size: 10px; gap: 8px; }
  .settings-panel { margin-top: 14px; }
}
@media (max-width: 359px) {
  .site-brand :is(h1, .brand-title), [data-theme="dark"] .site-brand :is(h1, .brand-title) { font-size: 19px; }
  .brand-castle { width: 27px; }
  .masthead .header-actions > button, .masthead .pill { width: 28px; min-width: 28px; }
  .active-trip-card .results-heading { grid-template-columns: 73px minmax(0, 1fr); gap: 9px; }
  .resort-thumbnail { width: 73px; }
  [data-theme="dark"] .past-trip-card .results-heading { grid-template-columns: 73px minmax(0, 1fr); }
  .active-trip-card h2 { font-size: 21px; }
  .trip-dates { font-size: 11px; }
  .trip-resort { font-size: 12px; }
  [data-theme="dark"] .room-label > .ui-icon { display: none; }
  .notification-detail > summary { gap: 5px; padding-inline: 7px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* The photograph supports the controls and results; it reserves no layout space. */
.masthead .site-header { position: relative; z-index: 4; }
.masthead .view-navigation { position: relative; z-index: 2; }
.masthead .site-header::before { content: ''; position: absolute; z-index: -1; inset: 0 calc((min(1320px, 100vw - 64px) - 100vw) / 2); background: #162e5cf5; }
.resort-banner { position: absolute; z-index: 0; top: 100%; left: 0; right: 0; height: 240px; background-position: center 70%; }
.resort-banner::after { inset: 0; background: linear-gradient(transparent 20%, #edf6ff85 65%, var(--paper)); }
main { z-index: 1; }
.toolbar { position: relative; margin-top: 0; margin-bottom: 20px; min-height: 64px; padding: 24px 0 12px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.active-trip-card { background: linear-gradient(135deg, #fffffff7, #f8fbfff5); }
[data-theme="dark"] .masthead .site-header::before { background: #061b2f; }
[data-theme="dark"] .resort-banner { top: 100%; height: 260px; background-position: center 65%; display: block; }
[data-theme="dark"] .resort-banner::after { display: block; inset: 0; background: linear-gradient(#06192d22 20%, #06192da6 65%, var(--paper)); }
[data-theme="dark"] .masthead .view-navigation { background: #06192dbd; }
[data-theme="dark"] .toolbar { background: transparent; border: 0; backdrop-filter: none; box-shadow: none; margin-top: -68px; margin-bottom: 16px; padding: 0; }
[data-theme="dark"] .poll-status { margin-top: 8px; flex-basis: auto; padding: 7px 10px; border-radius: 7px; background: #06192ddd; font-weight: 500; }
[data-theme="dark"] .active-trip-card { background: linear-gradient(120deg, #17344ef5, #0c233cf7); }
[data-theme="dark"] .legend-dot.unavailable { background: var(--unavailable-bg); }
@media (min-width: 1250px) {
  :root:not([data-theme="dark"]) .masthead .view-navigation { position: absolute; }
  :root:not([data-theme="dark"]) .masthead .site-header { pointer-events: none; }
  :root:not([data-theme="dark"]) .masthead .site-header::before { display: none; }
  :root:not([data-theme="dark"]) .masthead .site-brand,
  :root:not([data-theme="dark"]) .masthead .header-actions { pointer-events: auto; }
}
@media (min-width: 561px) and (max-width: 1249px) {
  :root:not([data-theme="dark"]) .masthead .view-navigation { background: #162e5ce8; }
}
@media (min-width: 561px) and (max-width: 950px) {
  [data-theme="dark"] .toolbar { margin-top: 12px; }
  [data-theme="dark"] .poll-status { flex-basis: 100%; margin-top: 10px; }
}
@media (max-width: 560px) {
  .masthead .site-header::before { inset-inline: -12px; }
  .masthead .view-navigation { background: #162e5cf0; }
  .resort-banner, [data-theme="dark"] .resort-banner { height: 210px; background-position: center 34%; }
  .toolbar, [data-theme="dark"] .toolbar { margin: 0 0 12px; padding: 24px 0 12px; gap: 10px; }
  .primary-actions, [data-theme="dark"] .primary-actions { height: auto; }
  .poll-status, [data-theme="dark"] .poll-status { flex-basis: 100%; background: none; padding: 0; margin: 0; font-size: 11px; }
  .active-trip-card, [data-theme="dark"] .active-trip-card { backdrop-filter: blur(8px); }
}

.trip-calendar.full-grid tbody th { background: var(--surface); }

#header-nav-slot { display: contents; }
#toolbar-nav-slot:empty { display: none; }
[data-theme="dark"] .toolbar { margin-top: 0; padding-top: 0; }
#toolbar-nav-slot { flex: 1; min-width: 0; }
.toolbar .view-navigation { display: flex; gap: 26px; margin: 0; border: 0; align-items: center; }
.toolbar .view-navigation a { padding: 18px 4px; color: white; font-size: 20px; border-bottom: 4px solid transparent; }
.toolbar .view-navigation a[aria-current="page"] { color: #ffe09b; border-bottom-color: #ffe09b; }
[data-theme="dark"] .primary-actions { margin-left: auto; }
[data-theme="dark"] .poll-status { flex-basis: 100%; background: none; padding: 10px 0; margin: 0; }
[data-theme="dark"] .toolbar { background: none; padding-inline: 0; border-radius: 0; }
@media (min-width: 951px) {
  [data-theme="dark"] .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  [data-theme="dark"] .toolbar .poll-status { grid-column: 1 / -1; justify-self: start; }
  [data-theme="dark"] .toolbar .inline-error { grid-column: 1 / -1; }
}
@media (min-width: 951px) and (max-width: 1249px) {
  .toolbar .view-navigation { gap: 15px; }
  .toolbar .view-navigation a { font-size: 16px; }
  [data-theme="dark"] .primary-actions { gap: 10px; }
  [data-theme="dark"] .primary-actions button { min-width: 110px; padding-inline: 18px; }
  [data-theme="dark"] .primary-actions #visible-new-watch-button { min-width: 170px; }
}
@media (max-width: 950px) {
  [data-theme="dark"] .toolbar { margin-top: 12px; padding: 10px; border-radius: 13px; }
  [data-theme="dark"] .poll-status { padding: 0; margin-top: 10px; }
}
@media (max-width: 560px) {
  [data-theme="dark"] .poll-status { margin: 0; }
}

.change-log-header .eyebrow, .change-log-header .muted { color: #cbdcf3; }
@media (max-width: 560px) {
  .masthead .change-log-header { flex-direction: column; align-items: stretch; padding-bottom: 12px; }
  .change-log-header > div:first-child { padding-right: 40px; }
  .change-log-header h1 { font-size: 23px; }
  .masthead .change-log-header .header-actions { margin: 0; justify-content: flex-start; gap: 8px; }
  .masthead .change-log-header .header-actions > button:not(.theme-toggle) { width: auto; font-size: 13px; padding: 6px 10px; }
  .change-log-header .theme-toggle { position: absolute; top: 12px; right: 0; }
}

.masthead .header-actions > .header-help { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 5px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.header-help:hover { background: #ffffff13; }
.masthead .header-actions > .header-menu { width: auto; flex-shrink: 0; }
.dialog-heading > div:first-child { flex: 1; }
.dialog-help { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; color: var(--blue-dark); text-underline-offset: 3px; }
.help-page .site-brand .brand-title { font-family: var(--heading-font); }
.help-main { padding-top: 28px; padding-bottom: 48px; }
.help-main > h1 { margin: 0 0 24px; }
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-topics { padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.help-topics > summary { min-height: 44px; padding: 10px; cursor: pointer; font-weight: 700; }
.help-topics ul { list-style: none; margin: 0; padding: 0; }
.help-topics a { display: block; min-height: 44px; padding: 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .9375rem; line-height: 1.4; }
.help-topics a:hover { background: var(--surface-selected); }
.help-content { min-width: 0; padding: 28px 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); font-size: 1rem; line-height: 1.65; }
.help-content section { scroll-margin-top: 20px; }
.help-content section + section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.help-content h2 { margin: 0 0 16px; font-size: 1.5625rem; line-height: 1.3; }
.help-content h3 { margin: 24px 0 10px; font-size: 1.1875rem; line-height: 1.4; scroll-margin-top: 20px; }
.help-content p { margin: 0 0 18px; }
.help-content ul, .help-content ol { margin: 0 0 20px; padding-left: 24px; }
.help-content li { margin-bottom: 10px; }
.help-content a { color: var(--blue-dark); text-underline-offset: 3px; }
.help-content table { min-width: 0; table-layout: fixed; margin: 22px 0; border: 1px solid var(--line); }
.help-content :is(th, td) { position: static; min-width: 0; padding: 10px 12px; text-align: left; vertical-align: top; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; background: var(--surface); }
.help-content th:first-child { width: 35%; }
.help-content thead th { background: var(--surface-soft); color: var(--ink); }
.help-top-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; transform: translateY(-150%); padding: 10px 16px; border-radius: 8px; background: var(--surface); color: var(--ink); }
.skip-link:focus { transform: none; }
@media (min-width: 951px) and (min-height: 700px) {
  .help-topics { position: sticky; top: 20px; max-height: calc(100dvh - 40px); overflow-y: auto; }
}
@media (max-width: 950px) {
  .help-layout { display: block; }
  .help-topics { margin-bottom: 20px; }
}
@media (max-width: 560px) {
  .help-main { padding-top: 20px; padding-bottom: 24px; }
  .help-main > h1 { font-size: 27px; margin-bottom: 16px; }
  .help-content { padding: 20px 16px; border-radius: 16px; }
  .help-content h2 { font-size: 1.4375rem; }
  .help-content :is(th, td) { padding: 9px 7px; font-size: .8125rem; }
  .help-topics { margin-bottom: 16px; }
}

/* Dashboard utilities share one row; the navigation keeps its own hierarchy. */
.dashboard-masthead .site-header { flex-wrap: nowrap; align-items: center; }
.dashboard-masthead .header-actions { flex: 0 0 auto; gap: 6px; }
.dashboard-masthead .header-actions > :is(details, a, button) { width: auto; flex-shrink: 0; }
.dashboard-masthead .theme-toggle { min-width: 44px; }
.dashboard-masthead .header-menu { order: 3; }
.dashboard-masthead .header-menu-items { right: 0; }
.dashboard-masthead .header-menu > summary .ui-icon { width: 24px; height: 24px; }
.dashboard-masthead .banner-spark { display: none; }
.toolbar .poll-status { width: fit-content; border: 0; padding: 6px 10px; border-radius: 6px; background: #f4f9fff0; color: #334662; }
[data-theme="dark"] .toolbar .poll-status { background: #06192de8; color: #dce9fa; }
@media (max-width: 950px) {
  .dashboard-masthead .site-header { min-height: 64px; padding-block: 8px; }
  .dashboard-masthead .header-actions > :is(details, a, button),
  .dashboard-masthead .header-actions .pill { width: 44px; min-width: 44px; height: 44px; padding: 0; }
  .dashboard-masthead .header-actions > :is(a, button) span { display: none; }
  .dashboard-masthead .header-help .ui-icon { display: block; width: 24px; height: 24px; }
  .dashboard-masthead .connection-detail { right: auto; left: 50%; transform: translateX(-50%); }
  .dashboard-masthead .site-brand :is(h1, .brand-title) { font-size: 24px; }
  .dashboard-masthead .brand-castle { width: 32px; height: 40px; }
  [data-theme="dark"] .toolbar { background: none; margin-top: 0; padding: 24px 0 12px; border-radius: 0; }
}
@media (max-width: 560px) {
  .dashboard-masthead .site-header { gap: 2px; }
  .dashboard-masthead .header-actions { gap: 0; }
  .dashboard-masthead .site-brand :is(h1, .brand-title) { font-size: clamp(16px, 5vw, 22px); gap: 4px; letter-spacing: -.6px; }
  .dashboard-masthead .brand-castle { width: clamp(20px, 6vw, 28px); height: 32px; }
  .dashboard-masthead .brand-trail { left: 22px; width: 52px; }
  .dashboard-masthead .pill .ui-icon { width: 24px; }
  .toolbar .poll-status, [data-theme="dark"] .toolbar .poll-status { flex-basis: auto; margin-inline: auto; font-size: 12px; }
}

/* Inline room filters share one scrolling surface with the search editor. */
#watch-dialog { background: var(--paper); }
#watch-form .inline-room-picker { border: 0; padding: 0; margin-block: 24px; }
.resort-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.resort-context > div { min-width: 0; }
.resort-context strong { font-size: .75rem; color: var(--muted); }
.resort-context p { margin: 3px 0 0; font-size: .9375rem; font-weight: 650; }
.resort-context > button { flex-shrink: 0; font-size: .875rem; }
.room-picker-panel { min-width: 0; }
.room-picker-panel .search-label { margin: 20px 0; color: var(--ink); font-size: .8125rem; }
.room-filter-summary { position: sticky; top: 0; z-index: 3; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.room-filter-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: .875rem; }
#edit-room-filters { white-space: nowrap; font-size: .8125rem; }
.active-room-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.active-room-filters:not(:empty) { margin-top: 8px; }
#watch-form :is(.room-filter-choice, .active-filter-chip) { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--surface); color: var(--ink); box-shadow: none; transform: none; font-size: .875rem; }
#watch-form .room-filter-choice[aria-pressed="true"] { background: var(--blue); color: var(--button-ink); border-color: var(--blue); }
#watch-form .active-filter-chip { display: inline-flex; gap: 10px; max-width: 100%; background: var(--surface-selected); font-size: .8125rem; text-align: left; }
.active-filter-chip span { font-size: 1.25rem; line-height: 1; }
#clear-room-filters { font-size: .8125rem; padding-inline: 0; }
#room-filter-message:empty { display: none; }
#room-filter-message { margin: 6px 0 0; font-size: .8125rem; }
#room-filter-controls { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 180px; }
#room-filter-controls h3 { margin: 0; font-size: 1.125rem; }
#watch-form .bedroom-choices-field { margin: 0; padding: 0; border: 0; }
.bedroom-choices-field legend, #room-filter-controls label { font-size: .8125rem; }
.bedroom-choices-field legend { margin-bottom: 7px; }
.bedroom-choices { display: flex; flex-wrap: wrap; gap: 7px; }
#room-filter-controls select:not([hidden]) { min-height: 48px; font-size: 1rem; padding: 10px 12px; }
#bedroom-filter[hidden] { display: none; }
#watch-dialog #room-picker { max-height: none; overflow: visible; scrollbar-gutter: auto; border: 0; }
#watch-dialog .room-group-heading { position: static; padding: 18px 0 10px; background: transparent; }
#watch-dialog .room-group-heading strong { font-size: 1.0625rem; }
#watch-dialog .select-all-rooms { white-space: nowrap; flex-shrink: 0; }
#watch-dialog .room-option { margin-bottom: 10px; padding-inline: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); scroll-margin-top: 180px; }
#watch-dialog .room-option:has(input:checked) { border-color: var(--blue); background: var(--surface-selected); }
#watch-dialog .room-description-toggle { background: transparent; box-shadow: none; }
.room-selection-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.room-selection-bar > div { min-width: 0; }
.room-selection-bar strong { display: block; font-size: .875rem; }
.room-selection-bar small { display: block; font-size: .75rem; color: var(--muted); }
.room-selection-bar > button { flex-shrink: 0; min-height: 44px; padding: 9px 12px; font-size: .875rem; }
.picker-sheet { width: min(680px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior-y: contain; }
.picker-sheet-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; background: var(--surface); }
.picker-sheet-header h2 { font-size: 1.4375rem; }
.picker-sheet-header .icon-button { flex-shrink: 0; width: 44px; height: 44px; }
.picker-sheet > .search-label { margin: 10px 20px 16px; font-size: .8125rem; }
.picker-sheet > .choice-list { margin-inline: 20px; max-height: none; overflow: visible; scrollbar-gutter: auto; }
.picker-sheet .resort-choice { min-height: 64px; align-items: center; }
.picker-sheet .resort-choice strong { font-size: .875rem; }
.picker-sheet-actions { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }
.picker-sheet-actions button { min-height: 44px; }
.catalog-info { margin: 18px 20px; }
.catalog-info > summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: var(--muted); font-size: .8125rem; }
.picker-sheet .selected-options { position: static; margin: 8px 20px 20px; border: 0; padding: 0; }
.picker-sheet .selection-chips { max-height: none; overflow: visible; }
.picker-sheet .selection-chip { width: 100%; border-radius: 10px; justify-content: space-between; }
.picker-sheet .selection-chip button { width: 44px; height: 44px; }
@media (max-width: 560px) {
  #watch-form .room-group-heading { flex-direction: row; align-items: center; }
  .room-selection-bar { padding-inline: 12px; }
  .picker-sheet { width: 100%; max-width: 100%; margin: auto auto 0; border-radius: 22px 22px 0 0; }
  .picker-sheet .catalog-toolbar { flex-wrap: wrap; }
}