/* RatePad.ca Meeting Planner — page styles. Loads after /styles.css and uses
   its brand tokens. The planner panel reuses the converter's light panel. */

.mp-planner[hidden],
.mp-planner [hidden] {
  display: none !important;
}

.mp-planner {
  --mp-gutter: 1.75rem;  /* overlap marker column */
  --mp-col: 5.5rem;      /* narrowest a city column gets; wider screens share the space */
  --mp-cols: 2;          /* set by planner.js */
  --mp-day: var(--color-white);
  --mp-overlap-day: #E7F2EB;   /* pale Success Green: daytime in every city */
  --mp-line: var(--color-cool-grey);
  --mp-hour-line: #B4C0CC;
}

.mp-noscript {
  padding: var(--space-3) var(--space-2);
}

.mp-field-label {
  font-weight: 600;
  font-size: 0.9375rem;
}

/* ---------- Selected cities ---------- */

.mp-cities {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-city {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-1);
  padding: 0.125rem 0.25rem 0.125rem 0.75rem;
  background: var(--color-arctic-white);
  border: 1px solid var(--color-cool-grey);
  border-radius: var(--radius-control);
}

.mp-city-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.375rem 0;
  line-height: 1.3;
}

.mp-city-name {
  font-weight: 600;
}

.mp-city-meta {
  font-size: 0.8125rem;
  color: var(--color-slate);
}

.mp-city-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.25rem;
}

.mp-city .btn-text {
  font-size: 0.875rem;
}

.mp-ref-badge {
  margin-right: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-navy);
  border-radius: 999px;
}

/* ---------- City search ---------- */

.mp-combo-box {
  position: relative;
}

.mp-city-input:disabled,
#mp-city-input:disabled {
  background: var(--color-arctic-white);
  cursor: not-allowed;
}

.mp-options {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 17rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}

.mp-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 0.375rem 0.625rem;
  line-height: 1.3;
  border-radius: 6px;
  cursor: pointer;
}

.mp-option:hover {
  background: var(--color-cool-grey);
}

.mp-option[aria-selected="true"] {
  color: var(--color-white);
  background: var(--color-navy);
}

.mp-option-name {
  font-weight: 600;
}

.mp-option-meta {
  font-size: 0.8125rem;
  color: var(--color-slate);
}

.mp-option[aria-selected="true"] .mp-option-meta {
  color: var(--color-cool-grey);
}

.mp-option-empty {
  padding: 0.625rem;
  color: var(--color-slate);
}

/* ---------- Results ---------- */

.mp-prompt {
  padding: 0 var(--space-2) var(--space-2);
  color: var(--color-slate);
}

.mp-results {
  padding: var(--space-2);
  border-top: 1px solid var(--color-cool-grey);
}

.mp-overlap {
  margin-bottom: var(--space-1);
  padding-left: 0.75rem;
  font-weight: 600;
  border-left: 4px solid var(--color-success);
}

.mp-overlap.is-none {
  font-weight: 500;
  border-left-color: var(--color-slate);
}

.mp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-slate);
}

.mp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.mp-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
}

.mp-swatch.is-day {
  background: var(--mp-day);
}

.mp-swatch.is-night {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.mp-swatch.is-overlap {
  color: var(--color-white);
  background: var(--color-success);
  border-color: var(--color-success);
}

/* ---------- Grid ---------- */

.mp-head-inner,
.mp-row {
  display: grid;
  grid-template-columns: var(--mp-gutter) repeat(var(--mp-cols), minmax(var(--mp-col), 1fr));
}

/* Column headings stick to the top of the screen while the rows scroll. They
   sit outside the horizontally scrollable area (which would stop them
   sticking) and planner.js keeps them in step with its scroll position. */
.mp-head {
  position: sticky;
  top: 0;
  z-index: 3;
  overflow: hidden;
  background: var(--color-white);
  border-bottom: 2px solid var(--color-navy);
}

.mp-head-cell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.5rem;
  line-height: 1.2;
}

.mp-head-name {
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mp-head-meta {
  font-size: 0.75rem;
  color: var(--color-slate);
}

.mp-head-ref {
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-red);
}

.mp-scroll {
  overflow-x: auto;
}

.mp-grid {
  border-bottom: 1px solid var(--mp-line);
}

.mp-row {
  position: relative;
  cursor: pointer;
  /* Keep a keyboard-selected row clear of the sticky headings and summary */
  scroll-margin-top: 5rem;
  scroll-margin-bottom: 12rem;
}

.mp-gutter {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--mp-line);
}

.mp-head-inner .mp-gutter {
  border-top: 0;
}

.mp-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  border-top: 1px solid var(--mp-line);
  border-left: 1px solid var(--mp-line);
}

.mp-row.is-hour .mp-cell,
.mp-row.is-hour .mp-gutter {
  border-top-color: var(--mp-hour-line);
}

.mp-cell.is-day {
  color: var(--color-navy);
  background: var(--mp-day);
}

.mp-row.is-overlap .mp-cell.is-day {
  background: var(--mp-overlap-day);
}

.mp-cell.is-night {
  color: var(--color-cool-grey);
  background: var(--color-navy);
  border-left-color: var(--line-on-navy);
  border-top-color: var(--line-on-navy);
}

.mp-row.is-hour .mp-cell.is-night {
  border-top-color: rgba(255, 255, 255, 0.32);
}

/* A new local date starts in this cell */
.mp-cell.is-new-day,
.mp-row.is-hour .mp-cell.is-new-day {
  border-top: 3px solid var(--color-red);
}

.mp-cell-date {
  margin-bottom: 0.125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mp-cell.is-night .mp-cell-date {
  color: var(--color-white);
}

.mp-cell-zone {
  font-size: 0.6875rem;
  color: var(--color-slate);
}

.mp-cell.is-night .mp-cell-zone {
  color: var(--color-cool-grey);
}

.mp-overlap-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-success);
  border-radius: 50%;
}

.mp-row:hover::after,
.mp-row[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 4px;
}

.mp-row:hover::after {
  border: 2px solid var(--color-slate);
}

/* Selected instant: red frame across every column (with a white inner line so
   it shows on navy too) and a red gutter. */
.mp-row[aria-selected="true"]::after {
  border: 3px solid var(--color-red);
  box-shadow: inset 0 0 0 1px var(--color-white);
}

.mp-row[aria-selected="true"] .mp-gutter {
  background: var(--color-red);
}

.mp-row[aria-selected="true"] .mp-cell-time {
  font-weight: 700;
}

/* ---------- Selected-time summary (sticks to the bottom of the screen) ---------- */

.mp-summary {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: var(--space-2);
  padding: 0.625rem 0.875rem;
  background: var(--color-arctic-white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}

.mp-summary-title {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-slate);
}

.mp-summary-list {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.35;
}

.mp-summary-list li {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  gap: 0 0.75rem;
}

.mp-summary-empty {
  font-size: 0.875rem;
  color: var(--color-slate);
}

@media (min-width: 40em) {
  .mp-results {
    padding: var(--space-3);
  }

  .mp-prompt {
    padding: 0 var(--space-3) var(--space-3);
  }

  .mp-cell {
    padding: 0.375rem 0.75rem;
  }
}