/* ============ REVENUE CALENDAR ============
   Mobile-first. One layout for every device: CSS variables set how wide the
   property column is and how many days fit on screen, and media queries adjust
   them for landscape phones, tablets and desktop. The date header, booking rows
   and Daily Revenue row share one scroll container and one --day-w, so they stay
   aligned at every size. */

.rc {
  --prop-w: 100px;      /* sticky property column */
  --days: 8;            /* days visible at once */
  --min-day: 34px;      /* never squeeze a day narrower than this */
  --row-h: 46px;
  --bar-h: 28px;
  --head-h: 42px;
  --drow-h: 46px;       /* Daily Revenue row */
  --thumb: 26px;
  --rc-bleed: 18px;     /* matches .app-wrap side padding so the board runs edge to edge */
  /* Approximate height of everything above/below the board, so the board fits the
     viewport and its header + Daily Revenue row stay on screen with many properties. */
  --rc-chrome: 230px;
  --daily-bg: #fff;
  --rc-section-line: #DDDDDD; /* thin divider under the date header and above Daily Revenue */
  --past-bg: #FFFFFF;   /* past dates stay pure white; only their text and bars are dimmed */
}

/* The Calendar page background is pure white (#FFFFFF), set explicitly here. */
html:has(body.rc-wide), body.rc-wide, #revenueView { background: #FFFFFF; }
/* No soft shadow under the logo bar here (it greyed the top of the page); the hairline stays. */
body.rc-wide .brand-strip { box-shadow: none; }

/* ---------- header ---------- */
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 12px; }
.rc-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-today {
  width: auto; margin: 0; flex: none; padding: 6px 15px; border-radius: 999px;
  font-size: 0.85em; font-weight: 650;
  background: var(--card-solid); color: var(--text);
  border: 1px solid var(--divider-strong); box-shadow: 0 1px 2px var(--shadow-soft);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rc-today:hover { filter: none; background: var(--lavender-wash); border-color: rgba(var(--lavender-rgb), 0.45); color: var(--accent); }
.rc-head h1 { white-space: nowrap; font-size: 1.35em; font-weight: 750; letter-spacing: -0.025em; color: var(--text); }

/* Month label + board. Adds no box at any size: the board runs edge to edge. */
.rc-card { display: contents; }

/* ---------- month label (follows the scroll position) ---------- */
.rc-toolbar { display: flex; align-items: center; min-height: 24px; margin: 4px 2px 10px; }
.rc-basis { margin-left: auto; padding-left: 10px; font-size: 0.78em; font-weight: 600; color: var(--muted); text-align: right; line-height: 1.25; cursor: help; }
.rc-basis[hidden] { display: none; }
.rc-month { font-size: 0.95em; font-weight: 650; color: var(--text-soft); white-space: nowrap; letter-spacing: -0.005em; }

/* ---------- board (the one scroll container) ----------
   No card or shadow around it: the board bleeds past the page padding and runs edge
   to edge across the screen, with just a thin line above the days and below Daily Revenue. */
.rc-board {
  margin: 0 calc(-1 * var(--rc-bleed));
  border-top: 1px solid var(--rc-section-line); border-bottom: 1px solid var(--rc-section-line);
  overflow: auto;
  max-height: max(260px, calc(100vh - var(--rc-chrome) - var(--brand-strip-h, 0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity; scroll-padding-left: var(--prop-w);
  container-type: inline-size;
  background: #FFFFFF;
  scrollbar-width: none; /* scrolls by touch, trackpad, wheel or drag; no visible slider */
}
.rc-board::-webkit-scrollbar { display: none; }
@supports (height: 100dvh) {
  .rc-board { max-height: max(260px, calc(100dvh - var(--rc-chrome) - var(--brand-strip-h, 0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
}
.rc-grid {
  --day-w: 44px;
  position: relative;
  width: calc(var(--prop-w) + var(--day-w) * var(--cells, 122));
}
@supports (width: 1cqw) {
  .rc-grid { --day-w: max(var(--min-day), calc((100cqw - var(--prop-w)) / var(--days))); }
}

/* Date header: sticks to the top of the board */
.rc-hrow {
  position: sticky; top: 0; z-index: 5; display: flex; height: var(--head-h);
  background: var(--card-solid);
}
/* Divider under the date header, drawn as its own 1px strip above the sticky corner and
   day cells so nothing (sticky column, today highlight) can paint over it. */
.rc-hrow::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 7;
  background: var(--rc-section-line); pointer-events: none;
}
.rc-corner {
  position: sticky; left: 0; z-index: 6; flex: 0 0 var(--prop-w);
  display: flex; align-items: flex-end; padding: 0 8px 8px 10px;
  background: var(--card-solid); border-right: 1px solid var(--divider-strong);
  font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.15;
}
.rc-days { display: flex; }
.rc-day {
  flex: 0 0 var(--day-w); scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.rc-dow { font-size: 10.5px; font-weight: 600; color: var(--muted); line-height: 1; }
.rc-mon { color: var(--accent); text-transform: uppercase; font-size: 10px; font-weight: 750; letter-spacing: 0.02em; }
.rc-dom { font-size: 13.5px; font-weight: 650; color: var(--text); line-height: 1; padding: 3px 5px; border-radius: 7px; min-width: 24px; text-align: center; }
.rc-day.we .rc-dom { color: var(--text-subtle); }
.rc-day.pastday { background: var(--past-bg); }
.rc-day.pastday .rc-dom { color: var(--muted); font-weight: 550; }
.rc-day.today { background: var(--today-bg); }
.rc-day.today .rc-dom { background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(var(--plum-rgb), 0.25); }
.rc-day.today .rc-dow { color: var(--accent); font-weight: 700; }

/* Day columns drawn once behind all rows (weekend tint, month starts, today line). */
.rc-cols { position: absolute; top: 0; bottom: 0; left: var(--prop-w); display: flex; z-index: 0; pointer-events: none; }
.rc-col { position: relative; flex: 0 0 var(--day-w); border-left: 1px solid rgba(var(--overlay-rgb), 0.05); }
.rc-col.m1 { border-left-color: rgba(var(--overlay-rgb), 0.18); }
.rc-col.pastday { background: var(--past-bg); }
.rc-col.today { background: var(--today-bg); }
.rc-col.today::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: rgba(var(--lavender-rgb), 0.45); border-radius: 1px;
}

.rc-row { position: relative; display: flex; height: var(--row-h); border-bottom: 1px solid var(--divider); }
.rc-row:has(+ .rc-drow) { border-bottom: none; } /* the Daily Revenue line takes its place */
.rc-prop {
  position: sticky; left: 0; z-index: 2; flex: 0 0 var(--prop-w);
  display: flex; align-items: center; gap: 6px; padding: 0 6px 0 8px;
  background: var(--card-solid); border-right: 1px solid var(--divider-strong);
}
/* Shadow down the right edge of the sticky property column (header corner, rows and
   Daily Revenue label), so the column reads as sitting above the dates scrolling under it.
   A gradient strip rather than box-shadow keeps it one unbroken line from row to row. */
.rc-corner::after, .rc-prop::after, .rc-dlabel::after {
  content: ''; position: absolute; top: 0; bottom: -1px; left: 100%; width: 14px;
  margin-left: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--shadow-rgb), 0.16), rgba(var(--shadow-rgb), 0.05) 45%, rgba(var(--shadow-rgb), 0));
}
.rc-thumb {
  position: relative; flex: none; width: var(--thumb); height: var(--thumb); border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: rgba(var(--lavender-rgb), 0.16); color: var(--lavender);
}
.rc-thumb svg { width: 16px; height: 16px; opacity: 0.7; }
.rc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-pname {
  min-width: 0; font-size: 11.5px; font-weight: 650; line-height: 1.2; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
/* Measuring pass for fitPropColumn() in revenue-calendar.js: names on one line,
   corner and Daily Revenue labels at their narrowest (they may wrap to two lines). */
.rc-measure .rc-prop { flex: none; width: max-content; }
.rc-measure .rc-pname { display: block; white-space: nowrap; }
.rc-measure .rc-corner, .rc-measure .rc-dlabel { flex: none; width: min-content; }
.rc-track { position: relative; z-index: 1; flex: 0 0 calc(var(--day-w) * var(--cells, 122)); }

/* ---------- booking bars ---------- */
.rc-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--day-w) * var(--s) + 2px); width: calc(var(--day-w) * var(--w) - 4px); height: var(--bar-h);
  margin: 0; padding: 0 9px 0 3px; border-radius: 999px;
  display: flex; align-items: center; gap: 5px; min-width: 0;
  overflow: hidden; white-space: nowrap; text-align: left;
  font-size: 13px; line-height: 1;
}
.rc-bar:active { transform: translateY(-50%); }
.rc-bar.upcoming { background: var(--bar-upcoming); color: var(--bar-upcoming-text); box-shadow: 0 2px 6px rgba(var(--plum-rgb), 0.18); }
.rc-bar.past { background: var(--bar-past); color: var(--bar-past-text); }
/* Amount hidden (no exchange rate yet): "—", never a 0 figure. */
.rc-bar.no-amt .rc-amt { opacity: 0.7; }
.rc-bar.cut-start { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rc-bar.cut-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rc-bar.selected, .rc-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Channel mark: small and muted so the amount stays the focus */
.rc-ch {
  flex: none; width: calc(var(--bar-h) - 8px); height: calc(var(--bar-h) - 8px); border-radius: 50%;
  display: grid; place-items: center;
}
.rc-bar.upcoming .rc-ch { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.rc-bar.past .rc-ch { background: rgba(var(--overlay-rgb), 0.07); color: var(--text-soft); }
.rc-ch svg { width: 78%; height: 78%; }
.rc-amt { flex: none; font-weight: 750; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rc-short { display: none; }
.rc-n { flex: none; font-size: 11.5px; font-weight: 500; opacity: 0.75; }
.rc-sep { margin-right: 4px; }

/* Label tiers for shorter bars (set by fitLabels in revenue-calendar.js):
   0 icon + amount + nights, 1 amount + nights, 2 amount, 3 compact amount, 4 compact + tight */
.rc-bar:not([data-fit="0"]) .rc-ch { display: none; }
.rc-bar:not([data-fit="0"]) { padding-left: 8px; padding-right: 8px; }
.rc-bar[data-fit="2"] .rc-n, .rc-bar[data-fit="3"] .rc-n, .rc-bar[data-fit="4"] .rc-n { display: none; }
.rc-bar[data-fit="2"], .rc-bar[data-fit="3"], .rc-bar[data-fit="4"] { justify-content: center; padding: 0 4px; }
.rc-bar[data-fit="3"] .rc-full, .rc-bar[data-fit="4"] .rc-full { display: none; }
.rc-bar[data-fit="3"] .rc-short, .rc-bar[data-fit="4"] .rc-short { display: inline; }
.rc-bar[data-fit="4"] { font-size: 11px; letter-spacing: -0.03em; padding: 0 2px; }

/* ---------- Daily Revenue row: the hero figure, sticks to the bottom of the board ----------
   Cells show whole amounts with the currency symbol; tap/hover for the exact amount. */
.rc-drow {
  position: sticky; bottom: 0; z-index: 5; display: flex; height: var(--drow-h);
  background: var(--daily-bg); border-top: 1px solid var(--rc-section-line);
}
.rc-dlabel {
  position: sticky; left: 0; z-index: 6; flex: 0 0 var(--prop-w);
  display: flex; flex-direction: column; justify-content: center; padding: 0 6px 0 10px;
  background: var(--daily-bg); border-right: 1px solid var(--divider-strong);
  font-size: 12px; font-weight: 750; color: var(--text); line-height: 1.15;
}
.rc-dcells { display: flex; }
.rc-dcell {
  flex: 0 0 var(--day-w); width: var(--day-w); height: 100%; margin: 0; padding: 0 2px; border-radius: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  background: transparent; color: var(--text); font-size: 13.5px; font-weight: 750; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; border-left: 1px solid rgba(var(--overlay-rgb), 0.05); cursor: pointer;
}
.rc-dcell:active { transform: none; }
.rc-dcell:hover { filter: none; background: rgba(var(--lavender-rgb), 0.14); }
.rc-dcell.pastday { color: var(--text-subtle); font-weight: 650; background: var(--past-bg); }
.rc-dcell.pastday:hover { background: rgba(var(--lavender-rgb), 0.14); }
.rc-dcell.today { background: rgba(var(--lavender-rgb), 0.2); color: var(--accent); }
.rc-dcell.empty { color: rgba(var(--overlay-rgb), 0.25); font-weight: 500; }
.rc-dcell.selected { background: rgba(var(--lavender-rgb), 0.3); }
.rc-dcell[data-fit="1"] .rc-full, .rc-dcell[data-fit="2"] .rc-full { display: none; }
.rc-dcell[data-fit="1"] .rc-short, .rc-dcell[data-fit="2"] .rc-short { display: inline; }
.rc-dcell[data-fit="2"] { font-size: 11.5px; letter-spacing: -0.03em; padding: 0 1px; }

.rc-empty { padding: 32px 18px; text-align: center; color: var(--muted); font-size: 0.9em; width: 100cqw; }
/* Not connected to Lodgify yet */
.rc-connect { padding: 40px 18px; line-height: 1.5; }
.rc-connect-title { font-size: 1.1em; font-weight: 750; color: var(--text); margin-bottom: 4px; }
.rc-connect button { width: auto; padding: 12px 22px; margin-top: 16px; }
.rc-connect button + button { margin-left: 8px; }

/* ---------- read-only detail popups (booking + daily breakdown) ---------- */
.rc-pop-bg { position: fixed; inset: 0; z-index: 59; }
.rc-pop {
  position: fixed; z-index: 60; width: min(300px, calc(100vw - 20px));
  max-height: calc(100vh - 20px); overflow-y: auto;
  background: var(--card-solid); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float-modal);
  padding: 14px 16px 15px; font-size: 13.5px; color: var(--text);
}
.rc-pop.peek { pointer-events: none; }
.rc-pop[hidden], .rc-pop-bg[hidden] { display: none; }
.rc-pop-amt { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--divider); }
.rc-pop-l {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.rc-pop-v { margin-top: 3px; font-size: 1.55em; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.rc-pop-v.is-est { color: var(--text-soft); }
.rc-pop-v.rc-pop-hidden { font-size: 1.2em; color: var(--muted); }
.rc-pop-note { margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.rc-pop-note.est { color: var(--gold); }
.rc-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: none;
  padding: 2px 8px; border-radius: 999px;
}
.rc-badge.exact { color: var(--green); background: var(--income-soft); }
.rc-badge.est { color: var(--gold); background: var(--warning-tint); }
.rc-overlap { color: var(--gold); font-weight: 650; }
.rc-est { font-size: 10.5px; font-weight: 650; color: var(--gold); margin-left: 4px; }
.rc-dim { color: var(--muted); font-weight: 500; margin-left: 4px; }
.rc-pop dd > .rc-dim:first-child { margin-left: 0; }
.rc-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; }
.rc-pop dt { color: var(--muted); }
.rc-pop dd { font-weight: 600; display: flex; align-items: baseline; flex-wrap: wrap; min-width: 0; font-variant-numeric: tabular-nums; }
.rc-pop dd.rc-strong { font-weight: 800; color: var(--text-bright); }
.rc-pop-ch {
  display: inline-grid; place-items: center; align-self: center; width: 20px; height: 20px; margin-right: 7px;
  border-radius: 50%; background: rgba(var(--plum-rgb), 0.07); color: var(--brand-ink);
}
.rc-pop-ch svg { width: 80%; height: 80%; }
.rc-pop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rc-pop-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rc-pop-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rc-pop-pv { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Break-even comparison (Subleased properties with a target only) */
.rc-pop dl.rc-pop-be { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.rc-pop dl.rc-pop-be.top { margin-top: 0; padding-top: 0; border-top: none; }
.rc-pop-benote { margin: 6px 0 0; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--divider); }
.rc-pop dd.rc-diff { font-weight: 800; }
.rc-pop dd.rc-diff.up { color: var(--green); }
.rc-pop dd.rc-diff.down { color: var(--red); }
.rc-pop dd.rc-diff .rc-dim { font-weight: 500; }
.rc-pop-foot { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--divider); font-size: 11.5px; color: var(--muted); }

/* Booking card: brand stripe, plum headline, then Stay / Payout / Currency / Break-even
   groups. Labels sit left and values right, so every group lines up the same way. */
.rc-pop:has(> .rc-bk) {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-plum)) top / 100% 4px no-repeat, var(--card-solid);
  padding-top: 18px; width: min(340px, calc(100vw - 20px));
}
.rc-bk-v {
  margin-top: 4px; font-size: 1.8em; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--brand-plum); font-variant-numeric: tabular-nums;
}
.rc-bk-approx { font-weight: 600; opacity: 0.6; margin-right: 4px; }
.rc-bk-v.rc-bk-hidden { font-size: 1.2em; color: var(--muted); }
.rc-bk-note { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--text-subtle); }
.rc-bk-note[title] { cursor: help; }
/* "Room: £950 + Extras: £80 = £1,030" when income was assigned to the stay in Add Income */
.rc-bk-sum {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 8px;
  font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--green); background: var(--income-soft);
}
.rc-bk dt.rc-bk-extra { max-width: 170px; overflow: hidden; text-overflow: ellipsis; color: var(--green); }
.rc-bk dt.rc-bk-extra[title] { cursor: help; }
/* Direct Booking income added to the stay is room revenue, not an extra */
.rc-bk dt.rc-bk-extra.room { color: inherit; }
.rc-bk-info { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -2px; color: var(--brand-teal-ink); }
.rc-bk-sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }
.rc-bk-fx { cursor: help; }
.rc-bk .rc-bk-fx dd { white-space: nowrap; flex-wrap: wrap; }
.rc-bk-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-plum);
}
.rc-bk-h::before { content: ''; width: 3px; height: 11px; border-radius: 2px; background: var(--brand-teal); }
.rc-bk dl { grid-template-columns: auto minmax(0, 1fr); }
.rc-bk dt { white-space: nowrap; }
.rc-bk dd { justify-self: end; justify-content: flex-end; flex-wrap: nowrap; text-align: right; }
.rc-bk dd.rc-strong { color: var(--brand-plum); }
.rc-pop .rc-bk dd > .rc-dim { margin-left: 5px; }
.rc-bk .rc-est, .rc-bk dd.rc-diff { white-space: nowrap; }
.rc-bk-stay {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.rc-bk-stay.now { color: var(--brand-teal-ink); background: rgba(var(--brand-teal-rgb), 0.14); }
.rc-bk-stay.next { color: var(--brand-plum); background: rgba(var(--brand-plum-rgb), 0.08); }
.rc-bk-stay.done { color: var(--muted); background: var(--lavender-wash); }
.rc-bk dd.rc-diff.up, .rc-bk dd.rc-diff.down { padding: 2px 9px; margin: -2px 0; border-radius: 999px; }
.rc-bk dd.rc-diff.up { background: var(--income-soft); }
.rc-bk dd.rc-diff.down { background: var(--expense-soft); }

/* Portrait phones: popups become a bottom sheet */
@media (max-width: 767px) and (orientation: portrait) {
  .rc-pop-bg { background: rgba(var(--overlay-rgb), 0.28); }
  .rc-pop {
    left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80vh;
    border-radius: 22px 22px 0 0; border-bottom: none;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); font-size: 14.5px;
    animation: rc-sheet-in 0.22s ease-out;
  }
  .rc-pop::before {
    content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px; background: rgba(var(--overlay-rgb), 0.15);
  }
  .rc-pop dl { gap: 9px 16px; }
  .rc-pop:has(> .rc-bk) { padding-top: 24px; width: auto; }
  .rc-bk-sec { margin-top: 14px; padding-top: 14px; }
  .rc-pop-list { gap: 9px; }
}
@keyframes rc-sheet-in { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 400px) {
  .rc { --rc-bleed: 14px; --prop-w: 96px; --days: 7; --thumb: 24px; }
  .rc-head h1 { font-size: 1.25em; }
}

/* Tablet / desktop: the page uses the full screen width and the board bleeds past the
   page padding to both screen edges (--rc-bleed matches .app-wrap's side padding). */
@media (min-width: 768px) {
  body.rc-wide .app-wrap { max-width: none; }
  .rc {
    --rc-bleed: 28px; --prop-w: 190px; --days: 14; --row-h: 54px; --bar-h: 32px; --thumb: 38px;
    --head-h: 48px; --drow-h: 52px; --rc-chrome: 310px;
  }
  .rc-head { margin: 0 2px 18px; }
  .rc-head h1 { font-size: 1.6em; }
  .rc-toolbar { margin: 0 2px 12px; }
  .rc-month { font-size: 1.05em; letter-spacing: -0.01em; }
  .rc-bar { font-size: 13.5px; }
  .rc-pname { font-size: 13px; }
  .rc-thumb { border-radius: 10px; }
  .rc-corner { padding-left: 14px; font-size: 12px; }
  .rc-prop { padding-left: 14px; gap: 10px; }
  .rc-dlabel { padding-left: 14px; font-size: 13.5px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; }
  .rc-dcell { font-size: 14px; }
}
@media (min-width: 1100px) {
  .rc { --rc-bleed: 48px; --prop-w: 230px; --days: 21; --row-h: 56px; --thumb: 40px; --rc-chrome: 320px; }
  .rc-head h1 { font-size: 1.8em; }
  body.rc-wide .app-wrap { padding-left: 48px; padding-right: 48px; }
}
@media (min-width: 1500px) {
  .rc { --days: 28; }
}

/* Phone in landscape: use the full width, fit many more days, and put the
   title and month label on one compact strip so the timeline gets the height. */
@media (orientation: landscape) and (max-height: 540px) {
  body.rc-wide .app-wrap {
    max-width: none;
    padding: calc(env(safe-area-inset-top) + 8px) max(16px, env(safe-area-inset-right))
             calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px) max(16px, env(safe-area-inset-left));
  }
  .rc {
    --rc-bleed: 0px; --prop-w: 136px; --days: 16; --min-day: 32px; --row-h: 38px; --bar-h: 26px;
    --head-h: 36px; --drow-h: 38px; --thumb: 26px; --rc-chrome: 110px;
  }
  .rc { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; }
  .rc > :not(.rc-head):not(.rc-card) { grid-column: 1 / -1; }
  .rc-card { display: contents; padding: 0; border: none; box-shadow: none; }
  .rc-card > :not(.rc-toolbar) { grid-column: 1 / -1; }
  .rc-today { padding: 4px 13px; }
  .rc-head { margin: 0; justify-content: flex-start; }
  .rc-head h1 { font-size: 1.05em; }
  .rc-toolbar { margin: 6px 2px 5px; }
  .rc-dlabel { flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; }
  .rc-month { font-size: 0.92em; }
  .rc-pname { font-size: 12px; -webkit-line-clamp: 1; }
  .rc-bar { font-size: 12.5px; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 900px) {
  .rc { --days: 20; --prop-w: 160px; }
}

/* Two header rows, then the board, everywhere except landscape phones (their compact strip is above).
   Row 1: "Calendar" on the left; the Upload Airbnb CSV button sits on the right (see airbnb-import.css).
   Row 2: month label on the left, Today on the right. */
@media not all and (orientation: landscape) and (max-height: 540px) {
  #revenueView { position: relative; }
  .rc { --rc-chrome: 190px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .rc > *, .rc-card > * { grid-column: 1 / -1; }
  .rc-head { display: contents; }
  .rc-title { grid-column: 1; grid-row: 1; min-height: var(--rc-title-h, 32px); margin: 2px 2px 0; }
  .rc-head h1 { line-height: 1.2; }
  .rc-toolbar { grid-column: 1; grid-row: 2; margin: 6px 2px 8px; }
  .rc-today { grid-column: 2; grid-row: 2; margin: 6px 2px 8px 10px; padding: 5px 14px; }
  .rc-board { grid-row: 3; }
}
/* Tablet / desktop: taller title row and roomier spacing (landscape phones excluded, as above). */
@media (min-width: 768px) and (orientation: portrait), (min-width: 768px) and (min-height: 541px) {
  #revenueView { --rc-title-h: 40px; }
  .rc { --rc-chrome: 260px; }
  .rc-title { margin-top: 0; }
  .rc-toolbar { margin: 10px 2px 12px; }
  .rc-today { margin: 10px 2px 12px 12px; padding: 6px 15px; }
}
@media (min-width: 1100px) and (orientation: portrait), (min-width: 1100px) and (min-height: 541px) {
  #revenueView { --rc-title-h: 44px; }
  .rc { --rc-chrome: 270px; }
}

/* ---------- Long-Term Rentals ----------
   A tenancy is a muted teal bar marked "LT"; its rent counts in Daily Revenue. */
.rc-toolbar { flex-wrap: wrap; row-gap: 6px; }
.rc-filter.view-toggle { margin: 0 0 0 auto; padding: 3px; gap: 2px; border-radius: 11px; box-shadow: none; }
.rc-filter.view-toggle[hidden] { display: none; }
.rc-filter.view-toggle button { padding: 4px 10px; border-radius: 8px; font-size: 0.78em; white-space: nowrap; }
.rc-filter:not([hidden]) ~ .rc-basis { flex-basis: 100%; text-align: left; padding-left: 0; }
.rc-bar.lt.upcoming {
  background: linear-gradient(90deg, rgba(var(--brand-teal-rgb), 0.2), rgba(var(--brand-teal-rgb), 0.13));
  color: var(--brand-teal-ink); box-shadow: inset 0 0 0 1px rgba(var(--brand-teal-rgb), 0.32);
}
.rc-bar.lt.past { background: rgba(var(--brand-teal-rgb), 0.08); color: var(--text-soft); }
.rc-ch.rc-lt {
  width: auto; padding: 0 5px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
}
.rc-bar.lt.upcoming .rc-ch.rc-lt { background: rgba(var(--brand-teal-rgb), 0.22); color: var(--brand-teal-ink); }
.rc-bar.lt.past .rc-ch.rc-lt { background: rgba(var(--brand-teal-rgb), 0.12); color: var(--brand-teal-ink); }
.rc-bar.lt[data-fit="1"] .rc-lt-who, .rc-bar.lt[data-fit="2"] .rc-lt-who { display: none; }
.rc-bar.lt[data-fit="3"] .rc-short, .rc-bar.lt[data-fit="4"] .rc-short { display: inline; }
.rc-lt-lead { flex: none; width: calc(var(--day-w) * var(--lead)); }
.rc-lt-add {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(var(--day-w) * var(--s) + 2px); width: auto; max-width: calc(var(--day-w) * var(--w) - 4px); height: var(--bar-h);
  margin: 0; padding: 0 12px; border-radius: 999px; background: var(--card-solid); box-shadow: none; z-index: 1;
  border: 1px dashed rgba(var(--brand-teal-rgb), 0.5); color: var(--brand-teal-ink);
  font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden;
}
.rc-lt-add:active { transform: translateY(-50%); }
.rc-lt-dot {
  position: absolute; right: -3px; bottom: -3px; z-index: 1; padding: 1px 3px; border-radius: 5px;
  font-size: 7.5px; font-weight: 800; letter-spacing: 0.03em; line-height: 1.1;
  background: var(--card-solid); color: var(--brand-teal-ink); box-shadow: 0 0 0 1px rgba(var(--brand-teal-rgb), 0.35);
}
.rc-thumb { overflow: visible; }
.rc-thumb img { border-radius: inherit; }
.rc-lt-tag {
  margin-right: 6px; padding: 1px 5px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  background: rgba(var(--brand-teal-rgb), 0.14); color: var(--brand-teal-ink); vertical-align: 1px;
}
.rc-badge.lt { color: var(--brand-teal-ink); background: rgba(var(--brand-teal-rgb), 0.14); }
.rc-bk-per { font-size: 0.5em; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.rc-pop:has(> .rc-bk-lt) { background: linear-gradient(90deg, var(--brand-teal), rgba(var(--brand-teal-rgb), 0.5)) top / 100% 4px no-repeat, var(--card-solid); }
.rc-pop dl.rc-pop-profit { margin: 10px 0; padding: 10px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }