:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #657268;
  --line: #dce4dc;
  --paper: #fbfdf9;
  --panel: #ffffff;
  --forest: #24533a;
  /* App page background theme (2026-07-18). Cards/panels stay white
     (--panel); only the surface *behind* them goes dark forest, matching
     the marketing site. Routed through variables so a future light/dark
     toggle is "define a second value set", not a repo-wide re-audit.
     --paper is intentionally left light — it still tints inner surfaces
     like .today-col that live *inside* white cards. */
  --app-bg: #12321f;
  --app-bg-top: #184127;
  --on-app: #eef4ee;
  --on-app-muted: #a9bcae;
  --leaf: #4e8f63;
  --sun: #e2a343;
  --sky: #d8ecf1;
  --rose: #c95e52;
  --lavender: #e9e3f5;
  --shadow: 0 18px 50px rgba(22, 38, 28, 0.12);
  /* Nav v3 icon sizing (2026-07-27). Every nav glyph reads from these two
     values so the tabs cannot drift apart again — the sizes previously lived
     in four separate declarations (30px, 46x32, 25px, 25px mobile). */
  --nav-icon: 30px;
  --nav-icon-more: 25px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--app-bg);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  /* Dark forest surface behind the white cards. Subtle top-lighter fade
     ties into the hero panel; body text stays --ink because nearly all of
     it lives inside white cards — the few on-background labels are
     lightened explicitly below. */
  background:
    linear-gradient(180deg, var(--app-bg-top), var(--app-bg) 460px),
    var(--app-bg);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.topbar,
.section-heading,
.heading-actions,
.brand-lockup,
.summary-grid article,
.score-tile,
.view-tabs,
.property-meta,
.card-actions,
.feed-actions,
.connection-row,
.toggle-row {
  display: flex;
  align-items: center;
}

.topbar {
  position: absolute;
  inset: clamp(12px, 2vw, 18px) clamp(14px, 3vw, 24px);
  z-index: 1;
  display: block;
  width: auto;
  min-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}

.brand-lockup {
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  min-width: 0;
  padding-top: 0;
  text-align: center;
  pointer-events: none;
}

.brand-copy {
  display: flex;
  justify-content: center;
  order: 1;
  z-index: 2;
}



.brand-copy h1 {
  margin: 0;
  /* Matches the cabinator.ai wordmark: Georgia Bold serif (the site's
     --font-serif stack). Letters stay white; the cabin "A" is filled green;
     ".ai" suffix in green. Softer shadow than before — just enough to hold the
     serif crisp over the hero photo (2026-07-19). */
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  white-space: nowrap; /* the wordmark is one word — never let it break */
}
/* Cabin "A" = Lucide House icon (outline, stroke=currentColor, strokeWidth 2.5)
   exactly as cabinator.ai renders it. text-primary on the site resolves to
   #4aaa6a (2026-07-19). Letters stay white; only the mark takes the green. */
.brand-copy h1 svg { color: #4aaa6a; }
/* ".ai" suffix — same green as the mark, sits after the R like the site. */
.brand-tld { color: #4aaa6a; font-size: 0.5em; font-weight: 700; letter-spacing: 0; }

.brand-caption {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(90%, 760px);
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 800;
  /* Deeper halo now that the photo behind it is bright (2026-07-29). */
  text-shadow: 0 1px 3px rgba(6, 18, 12, 0.85), 0 2px 18px rgba(0, 0, 0, 0.70);
}

.eyebrow,
.tile-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

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

h1 {
  margin-bottom: 0;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.05;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.25rem, 3vw, 1.85rem);
  line-height: 1.12;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.04rem;
}

.icon-button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--forest);
  background: var(--panel);
  display: grid;
  place-items: center;
  pointer-events: auto;
}

.notification-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rose);
  border: 2px solid var(--panel);
}

.hero-panel {
  position: relative;
  min-height: 264px;
  padding: 20px clamp(20px, 5vw, 34px) clamp(20px, 5vw, 34px);
  border-radius: 8px;
  /* Sunny hero (2026-07-29). The photo is a warm golden-morning grade and
     stays bright through the middle; the scrim is weighted to the top and
     bottom only, where the wordmark and caption sit, so legibility comes
     from those two bands rather than from dimming the whole picture. */
  background:
    linear-gradient(180deg,
      rgba(8, 20, 13, 0.58) 0%,
      rgba(8, 20, 13, 0.20) 34%,
      rgba(8, 20, 13, 0.12) 56%,
      rgba(8, 20, 13, 0.52) 100%),
    url("assets/cabin-hero-sunny.jpg") center/cover;
  color: var(--ink);
  display: grid;
  align-items: start;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.hero-panel .eyebrow,
.hero-panel p {
  color: var(--muted);
}

.hero-panel h2 {
  max-width: 650px;
  margin-bottom: 0;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.9);
}

.hero-panel p:last-child {
  max-width: 560px;
  margin-bottom: 0;
}

.hero-panel .brand-caption {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  margin: 0;
  color: #fff;
  text-align: center;
  z-index: 2;
}

.briefing-title {
  margin: 16px 0 0;
  text-align: center;
  font-size: clamp(1.45rem, 3.4vw, 2.15rem);
}

/* ── Summary grid ────────────────────────────────────────────────────────────── */

/* NOTE (2026-07-17): .summary-grid and the .sc-* summary cards are no longer
   used on the dashboard — Property Health became its own .health-section with
   a card per cabin, and Pending Actions shrank to .health-alert. Rules kept
   for now in case another view still leans on them; safe to delete once
   confirmed unused. */
.summary-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 12px;
  margin: 12px 0 16px;
  align-items: stretch;
}

/* Base card */
.summary-card {
  position: relative;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Colored accent strip at top */
.sc-accent {
  height: 4px;
  width: 100%;
  flex: 0 0 4px;
}
.sc-health  .sc-accent { background: linear-gradient(90deg, #0ea5e9, #06b6d4); }
.sc-cabins  .sc-accent { background: linear-gradient(90deg, #8b5cf6, #0d9488); }
.sc-actions .sc-accent { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.sc-actions.all-clear .sc-accent { background: linear-gradient(90deg, #10b981, #06b6d4); }

/* Card body */
.sc-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  flex: 1;
}

/* Label */
.sc-label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Health score row */
.sc-score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 4px 0 2px;
}

.score-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-value strong {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--forest);
}

.sc-denom {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}

.sc-badge {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0ea5e9;
}

.sc-big {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
  color: var(--forest);
}

.sc-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Score ring */
.score-ring {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  transform: rotate(-90deg);
}

.score-ring circle {
  fill: none;
  stroke: #e2e8f0;
  stroke-width: 6;
}

.score-ring circle:last-child {
  stroke: #0ea5e9;
  stroke-dasharray: calc(var(--score) * 1.19) 119;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

/* Cabin status list */
.cabin-status-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cabin-status-list {
  width: 100%;
}

.cabin-status-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--forest);
}

.cabin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
}
.cabin-dot.healthy      { background: #10b981; }
.cabin-dot.watch        { background: #f59e0b; }
.cabin-dot.action-needed { background: #ef4444; }

.cabin-status-label {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.cabin-status-label.healthy       { background: #d1fae5; color: #065f46; }
.cabin-status-label.watch         { background: #fef3c7; color: #92400e; }
.cabin-status-label.action-needed { background: #fee2e2; color: #991b1b; }
.cabin-status-label.unknown       { background: #e5e7eb; color: #4b5563; }
.cabin-dot.unknown { background: #9ca3af; }

/* ── Property Health: one card per cabin (2026-07-17) ───────────────────────
   History: a single portfolio ring → per-cabin rows in one box → this. Rich:
   "each cabin should have its own column... or 3 separate boxes - cards."
   Grid rather than fixed columns so 5-10 properties (the plan limits) wrap to
   another row instead of crushing. */
.health-section {
  margin: 12px 0 18px;
}

.health-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.health-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-app-muted);
}

/* Slim alert — replaced the full-size Pending Actions card, which was mostly
   empty. Derived from health, so it can't disagree with the cards below. */
.health-alert {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.health-alert.needs { background: #fee2e2; color: #991b1b; }
.health-alert.watch { background: #fef3c7; color: #92400e; }
.health-alert.clear { background: #d1fae5; color: #065f46; }
.health-alert.muted { background: #e5e7eb; color: #4b5563; }

.cabin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.cabin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 18px 18px;
  border-radius: var(--radius, 10px);
  background: #fff;
  box-shadow: var(--shadow, 0 4px 16px rgba(22,38,28,.10));
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.cabin-card:hover {
  box-shadow: var(--shadow-hover, 0 8px 24px rgba(22,38,28,.16));
  transform: translateY(-1px);
}

/* Status stripe across the top — colour carries the state at a glance. */
.cabin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.cabin-card.healthy::before       { background: linear-gradient(90deg, #10b981, #06b6d4); }
.cabin-card.watch::before         { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.cabin-card.action-needed::before { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.cabin-card.unknown::before       { background: linear-gradient(90deg, #9ca3af, #d1d5db); }

.cabin-card-top {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cabin-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--forest);
}

.cabin-card-score {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cabin-card-score strong {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cabin-card-score strong.healthy       { color: #059669; }
.cabin-card-score strong.watch         { color: #b45309; }
.cabin-card-score strong.action-needed { color: #dc2626; }
.cabin-card-score strong.unknown       { color: #6b7280; }

.cabin-card-denom {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.cabin-card .cabin-status-label { margin-left: 0; }

.cabin-card-factor {
  margin: 2px 0 0;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}
.cabin-card-factor.muted { font-weight: 500; opacity: 0.8; }

.cabin-card-penalty {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: #991b1b;
  font-weight: 800;
}

.cabin-health-empty {
  grid-column: 1 / -1;
  padding: 24px 4px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Pending actions tile-list (pill list when there are pending items) */
.tile-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.tile-list li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 0.8rem;
  font-weight: 700;
}

.tile-list:empty { display: none; }

/* Legacy kept for other uses */
.tile-content { display: grid; justify-items: center; gap: 8px; }
.tile-note    { max-width: 220px; margin: 0; font-size: 0.82rem; line-height: 1.35; }

.view-tabs {
  gap: 8px;
  margin: 4px 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  overflow-x: auto;
}

.tab {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.tab.active {
  color: var(--forest);
  background: var(--sky);
  font-weight: 750;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.section-heading {
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 12px;
}

.heading-actions {
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mode-switch {
  min-height: 42px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mode-option {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 0 12px;
  color: var(--muted);
  background: transparent;
  font-weight: 780;
}

.mode-option.active {
  color: var(--forest);
  background: var(--sky);
}

.analytics-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8f3;
}

.analytics-panel[hidden] {
  display: none;
}

.analytics-panel div {
  min-height: 86px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
}

.analytics-panel strong {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.analytics-panel span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.86rem;
}

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

.property-card,
.feed-item,
.settings-panel,
.connection-panel,
.timeline-item,
.readiness-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(22, 38, 28, 0.06);
}

.readiness-section {
  margin-bottom: 14px;
  padding: 18px;
}

.compact-heading {
  margin-top: 0;
}

/* Blue ribbon header on the dashboard Today + Guest Readiness cards, matching
   the Messages banner treatment (2026-07-21). The cards go padding-free +
   overflow-hidden so the ribbon bleeds edge-to-edge; content sits in .today-body. */
#today-section,
.readiness-section[aria-labelledby="readiness-title"] {
  padding: 0;
  overflow: hidden;
}
.card-ribbon {
  background: #2f7de0;
  padding: 15px 22px;
  text-align: center;
  color: #fff;
}
.card-ribbon-weekday {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #fff;
}
.card-ribbon-title { font-size: 1.3rem; }
.card-ribbon-sub {
  font-size: .86rem;
  color: rgba(255, 255, 255, .85);
  margin-top: 3px;
}
.ribbon-btn {
  margin-top: 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.ribbon-btn:hover { background: rgba(255, 255, 255, .26); }
.ribbon-btn svg { width: 15px; height: 15px; }
.today-body { padding: 16px 18px 18px; }
.today-body .today-grid { margin-top: 0; }
.today-body .readiness-feed { margin-top: 0; }

/* Upcoming look-ahead (inline expand under the Today card) */
.today-upcoming { margin-top: 14px; }
.today-upcoming[hidden] { display: none; }
.today-upcoming-inner {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.today-up-day { margin-bottom: 12px; }
.today-up-day:last-child { margin-bottom: 0; }
.today-up-date {
  font-size: .8rem;
  font-weight: 800;
  color: var(--forest, #24533a);
  margin: 0 0 5px;
}
.today-up-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
  padding: 3px 0;
  color: var(--ink, #17211b);
}
.today-up-row .today-prop-dot { flex: none; }
.today-up-tag {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: auto;
}
.today-up-tag.in { background: #e4f3dd; color: #3b6d11; }
.today-up-tag.out { background: #fdeede; color: #b06a12; }
.today-up-empty { font-size: .84rem; color: var(--muted); margin: 0; }

.readiness-feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.readiness-card {
  display: grid;
  gap: 12px;
  min-height: 270px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(36, 83, 58, 0.11);
  /* White card (2026-07-18) — was a pale white→blue gradient; per Rich the
     boxes should read plain white now that the page behind them is dark. */
  background: var(--panel);
  box-shadow: 0 10px 24px rgba(22, 38, 28, 0.06);
}

.readiness-card h3 {
  margin-bottom: 0;
}

.readiness-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.42;
}

.readiness-title p {
  margin-top: 2px;
  font-weight: 750;
}

.readiness-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.readiness-date {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

/* Readiness score badge — sits between status pill and arrival date */
.readiness-score {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.readiness-score.score-full {
  color: #1f5f38;
  background: #dff1e6;
}
.readiness-score.score-partial {
  color: #704400;
  background: #fff0cf;
}
.readiness-score.score-low {
  color: #7a261f;
  background: #fae5e1;
}

.guest-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.guest-details div,
.readiness-checklist div {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(36, 83, 58, 0.08);
}

.guest-details dt,
.readiness-checklist span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.guest-details dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.readiness-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.readiness-checklist strong {
  display: block;
  font-size: 0.9rem;
}

.value-good {
  color: #1f5f38;
}

.value-watch {
  color: #704400;
}

.value-needed {
  color: #7a261f;
}

.readiness-message {
  padding-top: 2px;
}

.readiness-action {
  align-self: end;
  color: var(--forest);
  font-weight: 800;
}

.property-card,
.feed-item {
  padding: 18px;
}

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

.property-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.status-pill,
.quiet-pill {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.status-needed {
  color: #7a261f;
  background: #fae5e1;
}

.status-watch {
  color: #704400;
  background: #fff0cf;
}

.status-healthy {
  color: #1f5f38;
  background: #dff1e6;
}

.quiet-pill {
  color: var(--muted);
  background: #eef3ee;
}

.property-meta {
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.metric-chip {
  flex: 1 1 110px;
  padding: 10px 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--line);
}

.metric-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
}

.metric-chip strong {
  display: block;
  margin-top: 2px;
}

.recommendation-text {
  margin: 0;
  color: var(--ink);
  font-weight: 780;
  line-height: 1.35;
}

/* Recommendation callout on property cards */
.rec-callout {
  background: var(--surface-raised, #f4f6f4);
  border-left: 3px solid var(--forest, #2d6a4f);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rec-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--forest, #2d6a4f);
}
.rec-headline {
  font-size: 0.95rem;
  font-weight: 780;
  color: var(--ink);
  line-height: 1.3;
}
.rec-why {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.card-actions,
.feed-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.primary-action,
.secondary-action,
.ghost-action {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  font-weight: 780;
  white-space: nowrap;
}

.primary-action {
  color: #fff;
  background: var(--forest);
}

.primary-action:disabled,
.approved-action {
  cursor: default;
  opacity: 0.82;
}

.secondary-action {
  color: var(--forest);
  background: var(--sky);
}

.ghost-action {
  color: var(--forest);
  background: var(--panel);
  border-color: var(--line);
}

.feed {
  display: grid;
  gap: 12px;
}

.feed-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 20px;
}

.feed-item p {
  margin-bottom: 10px;
  color: var(--muted);
}

.feed-item .recommendation-text {
  color: var(--ink);
}

.impact-note {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lavender);
  color: #3f3554;
  font-weight: 700;
  align-self: start;
}

.resolved-feed-item {
  opacity: 0.82;
}

.settings-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}

.settings-panel,
.connection-panel {
  padding: 18px;
}

.settings-panel {
  display: grid;
  gap: 14px;
}

.settings-group {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  background: #f4f8f3;
}

.settings-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

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

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

.cabin-setting-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(130px, 0.8fr) minmax(110px, 0.6fr);
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
}

.cabin-setting-row > strong {
  align-self: center;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

select,
input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  color: var(--ink);
  background: #fff;
}

.toggle-row {
  grid-template-columns: 1fr auto;
  color: var(--ink);
}

.toggle-row input {
  width: 22px;
  height: 22px;
}

.connection-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.connection-row {
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: #f4f8f3;
}

.connection-row p {
  margin: 4px 0 0;
  color: var(--muted);
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.status-dot.good {
  background: var(--leaf);
}

.status-dot.watch {
  background: var(--sun);
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  padding: 15px 18px;
}

.timeline-item p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* ── Notification drawer ──────────────────────────────────────────────────── */

.notif-drawer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: end;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 27, 21, 0.42);
  z-index: 25;
}

.notif-drawer.open {
  display: flex;
}

.notif-panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(600px, calc(100vh - 36px));
  overflow: auto;
  padding: 24px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-right: 44px;
}

.notif-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface);
  border-left: 3px solid var(--line);
}

.notif-item.notif-action {
  border-left-color: var(--rose);
}

.notif-item.notif-watch {
  border-left-color: var(--amber, #d97706);
}

.notif-item.notif-info {
  border-left-color: var(--forest);
}

.notif-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--panel);
  color: var(--forest);
}

.notif-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notif-item.notif-action .notif-icon {
  color: var(--rose);
}

.notif-item.notif-watch .notif-icon {
  color: var(--amber, #d97706);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-body strong {
  display: block;
  font-size: 0.88rem;
  color: var(--ink);
  margin-bottom: 2px;
}

.notif-body p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

.notif-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ── Detail sheet ─────────────────────────────────────────────────────────── */

.detail-sheet {
  position: fixed;
  inset: 0;
  display: none;
  align-items: end;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 27, 21, 0.42);
  z-index: 20;
}

.detail-sheet.open {
  display: flex;
}

.sheet-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  padding: 24px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.close-button {
  position: absolute;
  top: 14px;
  right: 14px;
}

.metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.analytics-toggle {
  margin-bottom: 12px;
}

.analytics-detail {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.analytics-detail[hidden] {
  display: none;
}

.analytics-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border-radius: 8px;
  background: #f4f8f3;
}

.analytics-row span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.analytics-bar {
  height: 10px;
  border-radius: 999px;
  background: #dce4dc;
  overflow: hidden;
}

.analytics-bar i {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: var(--leaf);
}

.analytics-row strong {
  min-width: 58px;
  text-align: right;
}

.recommendation-callout {
  padding: 16px;
  border-radius: 8px;
  background: #f4f8f3;
}

.recommendation-callout strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.2rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 20px);
  width: min(520px, calc(100% - 32px));
  padding: 13px 15px;
  border-radius: 8px;
  color: #fff;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 30;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .summary-grid,
  .property-grid,
  .readiness-feed,
  .analytics-panel,
  .settings-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-panel,
  .feed-item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .app-shell {
    padding: 12px;
  }

  .topbar {
    inset: 12px;
    min-height: 0;
  }

  .brand-lockup {
    gap: 6px;
    padding-top: 0;
  }

  .brand-copy h1 {
    /* 2026-07-24 (Rich, mobile screenshot): 13vw let the wordmark outgrow
       the hero and wrap after the house icon ("C🏠 / BINATOR.ai").
       Slimmer scale + nowrap keeps it one line on any phone. */
    font-size: clamp(1.55rem, 8.6vw, 3.1rem);
    white-space: nowrap;
  }

  .brand-caption {
    bottom: 0;
    font-size: 1rem;
  }

  .icon-button {
    right: 0;
    width: 40px;
    height: 40px;
  }

  .hero-panel {
    min-height: 250px;
  }

  .summary-grid,
  .property-grid,
  .readiness-feed,
  .analytics-panel,
  .settings-layout,
  .metric-list {
    grid-template-columns: 1fr;
  }

  .guest-details {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .heading-actions,
  .mode-switch {
    width: 100%;
  }

  .mode-option {
    flex: 1;
  }

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

  .analytics-row strong {
    text-align: left;
  }

  .settings-two-column,
  .cabin-setting-row {
    grid-template-columns: 1fr;
  }

  .summary-grid article {
    min-height: 96px;
  }

  .property-header {
    align-items: flex-start;
  }

  .primary-action,
  .secondary-action,
  .ghost-action {
    width: 100%;
  }

  .view-tabs {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

/* ── Modify modal ─────────────────────────────── */
.modify-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 38, 28, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  padding: 16px;
}

.modify-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modify-modal {
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 26px 20px;
  display: flex;
  flex-direction: column;
  transform: translateY(12px);
  transition: transform 180ms ease;
}

.modify-overlay.open .modify-modal {
  transform: translateY(0);
}

.modify-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.modify-header h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.modify-section {
  border-top: 1px solid var(--line);
  padding: 16px 0;
  display: grid;
  gap: 10px;
}

.modify-section-label {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
}

.modify-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-label {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}

.modify-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Impact analysis panel in modify modal */
.modify-impact {
  background: var(--surface-raised, #f4f6f4);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modify-impact p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink);
}
.modify-impact .impact-rec {
  color: var(--muted);
}
.modify-impact .impact-rate strong {
  color: var(--ink);
}
.modify-impact .impact-compare {
  color: var(--amber, #b45309);
  font-size: 0.78rem;
}
.modify-impact .impact-match {
  color: var(--forest, #2d6a4f);
}

.modify-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modify-slider-row input[type="range"] {
  flex: 1;
  min-height: auto;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  accent-color: var(--forest);
  cursor: pointer;
}

.slider-bound {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.modify-slider-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slider-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.slider-value {
  font-size: 1.1rem;
  color: var(--forest);
}

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
  font: inherit;
  min-height: 62px;
}

.modify-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}


/* ════════════════════════════════════════════════════════
   CLEAN & MODERN REFRESH
   ════════════════════════════════════════════════════════ */

/* ── Enhanced variables ─────────────────────────────────── */
:root {
  --forest: #1e4d35;
  --leaf: #2e7d52;
  --amber: #d97706;
  --rose: #c0392b;
  --shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(22,38,28,.10), 0 24px 48px rgba(22,38,28,.06);
  --shadow-hover: 0 4px 8px rgba(0,0,0,.06), 0 16px 40px rgba(22,38,28,.14);
  --radius: 10px;
  --surface: #f7faf7;
}

/* ── Typography ─────────────────────────────────────────── */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  /* Dark forest page surface (2026-07-18). This later rule was overriding
     the earlier body background — both now point at --app-bg so the theme
     is single-sourced. */
  background:
    linear-gradient(180deg, var(--app-bg-top), var(--app-bg) 460px),
    var(--app-bg);
}

.eyebrow,
.tile-label {
  letter-spacing: .06em;
  font-weight: 800;
  color: var(--muted);
}

.briefing-title {
  font-size: clamp(1.55rem, 3.6vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--on-app);
  margin: 20px 0 4px;
}

h2 {
  letter-spacing: -.015em;
}

/* ── Hero bar ────────────────────────────────────────────── */
.brand-copy h1 {
  /* Georgia Bold, tight crisp tracking (was wide .12em sans weight 900) to
     match the cabinator.ai wordmark (2026-07-19). */
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  font-weight: 700;
}

.icon-button {
  border-radius: var(--radius);
  border-color: rgba(36,83,58,.18);
  box-shadow: 0 2px 8px rgba(22,38,28,.08);
  transition: box-shadow .15s, border-color .15s;
}

.icon-button:hover {
  border-color: var(--leaf);
  box-shadow: 0 4px 16px rgba(22,38,28,.14);
}

/* ── Summary grid ────────────────────────────────────────── */
.summary-grid {
  gap: 14px;
  margin: 14px 0 20px;
}

.summary-grid article {
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
}

.summary-grid article:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

.summary-grid article::before {
  height: 3px;
  background: linear-gradient(90deg, var(--leaf), #6dd5a0, var(--sky));
  border-radius: var(--radius) var(--radius) 0 0;
}

.summary-grid strong {
  font-feature-settings: "tnum" 1;
  letter-spacing: -.025em;
}

/* ── View tabs ───────────────────────────────────────────── */
.view-tabs {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  padding: 5px;
  gap: 4px;
}

.tab {
  border-radius: 7px;
  font-weight: 700;
  transition: color .15s, background .15s;
  gap: 7px;
}

.tab:hover:not(.active) {
  color: var(--forest);
  background: rgba(46,125,82,.07);
}

.tab.active {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30,77,53,.28);
}

/* ── Section headings ────────────────────────────────────── */
.section-heading {
  margin: 20px 0 14px;
}

.section-heading h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* On-dark-background headings (2026-07-18). Only headings that are a
   DIRECT child of a .view sit on the dark page surface — e.g. "Properties",
   and each tab's top heading. Panel-nested headings (Today, Guest Readiness,
   AI Guest Guide) are grandchildren via their white section wrappers, so
   they're excluded here and correctly stay dark on white. */
.view > .section-heading h2 {
  color: var(--on-app);
}
.view > .section-heading p {
  color: var(--on-app-muted);
}

/* Dark-theme view fixes (2026-07-18). A few views render content bare on the
   page rather than inside a white card. Those grids/tables were designed for a
   light surface, so on the dark background their dark text/borders vanished.
   Fix per element: give the grid/table its own white panel (restores the
   original light-surface design intact), or lighten labels that sit directly
   on the dark page. ID-scoped so these win over the base class rules. */
#calendar > div:has(> .calx) {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px 10px;
}
#calendar .cal-legend-item { color: var(--on-app); }

#analytics .analytics-table-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 14px;
}
#analytics .analytics-prop-pill:not(.active),
#calendar .analytics-prop-pill:not(.active) {
  color: var(--on-app-muted);
  border-color: rgba(255, 255, 255, 0.28);
}

#pricing .pricing-history {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 14px;
}
#pricing .pricing-history-section > h3 { color: var(--on-app-muted); }

/* Quiet pills that sit in a top-level view heading (Action Log "Recent",
   Calendar/Analytics/Pricing "Live data") are on the dark page — lighten them.
   The identical pill nested inside the white Today panel is a grandchild of
   .view, so it's untouched and stays dark-on-light. */
.view > .section-heading .quiet-pill {
  color: var(--on-app-muted);
  background: rgba(255, 255, 255, 0.08);
}
/* Log empty-state text renders bare on the dark page (elsewhere .readiness-empty
   lives inside white panels, so scope this to #log only). */
#log .readiness-empty { color: var(--on-app-muted); }

/* ── Property cards ──────────────────────────────────────── */
.property-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s;
  overflow: hidden;
  position: relative;
}

.property-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}

.property-card:has(.status-needed)::before {
  background: linear-gradient(90deg, var(--rose), #e8837a);
}

.property-card:has(.status-watch)::before {
  background: linear-gradient(90deg, var(--amber), #f6c55e);
}

.property-card:has(.status-healthy)::before {
  background: linear-gradient(90deg, var(--leaf), #6dd5a0);
}

.property-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ── Status pills ────────────────────────────────────────── */
.status-pill,
.quiet-pill {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: .04em;
  border-radius: 6px;
  padding: 4px 9px;
}

.status-needed {
  color: #92241a;
  background: #fde8e5;
  box-shadow: inset 0 0 0 1px rgba(192,57,43,.18);
}

.status-watch {
  color: #7c4a00;
  background: #fff3d6;
  box-shadow: inset 0 0 0 1px rgba(217,119,6,.2);
}

.status-healthy {
  color: #16512f;
  background: #dcf0e5;
  box-shadow: inset 0 0 0 1px rgba(46,125,82,.18);
}

.quiet-pill {
  background: rgba(0,0,0,.05);
  color: var(--muted);
}

/* ── Feed items (recommendations) ───────────────────────── */
.feed-item {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: box-shadow .2s;
}

.feed-item:hover {
  box-shadow: var(--shadow-hover);
}

/* ── Buttons ─────────────────────────────────────────────── */
.primary-action {
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: .01em;
  transition: filter .15s, box-shadow .15s;
}

.primary-action:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(30,77,53,.28);
}

.secondary-action,
.ghost-action {
  border-radius: var(--radius);
  font-weight: 700;
  transition: background .15s, border-color .15s;
}

/* ── Property cards v2 (2026-07-18) ───────────────────────────────────────────
   Status stripe · centered italic name · kelly/amber/red capsule · teal metric
   boxes with the shared data-color system (good=green #4CBB17, bad=red #FF5A4D,
   neutral=white) · recommendation callout color-coded (chartreuse=act,
   green=hold) · full-width AI button + equal secondary row. Overrides the
   older .property-card layout above. Data-color rules: DECISIONS 2026-07-18. */
.property-card { padding: 0; display: flex; flex-direction: column; gap: 0; }
.property-card::before { display: none; }

.pc-stripe { height: 4px; }
.pc-stripe.status-healthy    { background: linear-gradient(90deg, #10b981, #06b6d4); }
.pc-stripe.status-watch      { background: linear-gradient(90deg, #DFFF00, #b8d900); }
.pc-stripe.status-needed     { background: linear-gradient(90deg, #ef4444, #f59e0b); }
/* Monitoring = rec applied, watching for occupancy to respond. Blue reads as
   informational / in-progress, distinct from the red/chartreuse/green health
   tiers (2026-07-19). */
.pc-stripe.status-monitoring { background: linear-gradient(90deg, #2f7de0, #5aa0f0); }

.pc-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }

.pc-head { text-align: center; margin-bottom: 8px; }
.pc-name { font-size: 1.25rem; font-weight: 700; font-style: italic; color: var(--ink); line-height: 1.2; }
.pc-capsule {
  display: inline-block; margin-top: 6px; font-size: 0.75rem; font-weight: 600;
  color: #fff; padding: 3px 12px; border-radius: 999px; letter-spacing: .02em;
}
.pc-capsule.status-healthy    { background: #4CBB17; }
.pc-capsule.status-watch      { background: #DFFF00; color: #3d4a00; }
.pc-capsule.status-needed     { background: #C0392B; }
.pc-capsule.status-monitoring { background: #2f7de0; }

.pc-summary { margin: 0 0 14px; font-size: 0.9rem; font-weight: 500; text-align: center; color: #2f6b4a; line-height: 1.4; }

.pc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.pc-metric { background: #14544f; border-radius: 8px; padding: 9px 11px; text-align: center; }
.pc-metric-label { display: block; font-size: 0.7rem; font-weight: 600; color: #fff; margin-bottom: 2px; }
.pc-metric-val { font-size: 0.95rem; font-weight: 600; }
.pc-metric-val.m-good    { color: #4CBB17; }
.pc-metric-val.m-bad     { color: #FF5A4D; }
.pc-metric-val.m-neutral { color: #fff; }
.pc-metric-ref { font-size: 0.7rem; color: #fff; }

.pc-rec { border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.pc-rec.rec-action { background: #DFFF00; border-left: 3px solid #9FB800; }
.pc-rec.rec-hold   { background: #E1F5EE; border-left: 3px solid #1D9E75; }
.pc-rec-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pc-rec.rec-action .pc-rec-label { color: #455200; }
.pc-rec.rec-hold   .pc-rec-label { color: #085041; }
.pc-rec-headline { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.pc-rec.rec-action .pc-rec-headline { color: #333D00; }
.pc-rec.rec-hold   .pc-rec-headline { color: #04342C; }
.pc-rec-why { margin: 3px 0 0; font-size: 0.78rem; line-height: 1.4; }
.pc-rec.rec-action .pc-rec-why { color: #455200; }
.pc-rec.rec-hold   .pc-rec-why { color: #0F6E56; }

/* "Recent recommendation applied" block on a card (2026-07-21): what/when/how
   much/how long, so a low-occupancy card reading "No new recommendations" is
   never confusing — the cut is already live and shown here. */
.pc-applied {
  display: flex; align-items: flex-start; gap: 8px;
  margin: -4px 0 14px; padding: 9px 11px;
  background: #eaf2fb; border-radius: 8px; border-left: 3px solid #2f7de0;
}
.pc-applied-check { color: #1e7d3e; font-weight: 800; line-height: 1.35; flex: none; }
.pc-applied-text strong { display: block; font-size: 0.82rem; font-weight: 700; color: #14395f; line-height: 1.3; }
.pc-applied-text span   { font-size: 0.74rem; color: #4f6076; line-height: 1.35; }

/* margin-top:auto on the actions wrapper pushes the button block to the card
   bottom regardless of the content height above it, so all cards' buttons align
   — and it works whether or not the primary Apply button is present (Healthy/
   hold cabins have no Apply button). Rich 2026-07-18. */
.pc-actions { margin-top: auto; }
.pc-btn-primary {
  width: 100%; background: var(--forest); color: #fff; border: none; border-radius: 8px;
  padding: 11px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: filter .15s;
}
.pc-btn-primary:hover { filter: brightness(1.08); }
.pc-btn-applied { background: #4CBB17; opacity: 0.9; cursor: default; }
.pc-btn-applied:hover { filter: none; }
/* Refresh recommendations — active re-check after a rec is applied. Blue ties
   it to the Monitoring capsule and reads as a re-check, distinct from the
   forest-green Apply button (2026-07-19). */
.pc-btn-refresh { background: #2f7de0; }
.pc-btn-row { display: flex; gap: 8px; margin-top: 8px; }
.pc-btn-secondary {
  flex: 1; background: transparent; color: var(--forest); border: 1.5px solid #8f9a8d;
  border-radius: 8px; padding: 9px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s;
}
.pc-btn-secondary:hover { background: var(--surface); border-color: var(--forest); }
/* Row 1: primary (Pull/Apply) shares a line with Dismiss (2026-07-19). Primary
   takes 2/3, Dismiss 1/3. If there's no primary (Healthy/hold), Dismiss fills. */
.pc-btn-row-lead { margin-top: 0; }
.pc-btn-row-lead .pc-btn-primary { width: auto; flex: 2; font-size: 0.8rem; padding: 11px 8px; }
.pc-btn-row-lead .pc-btn-secondary { flex: 1; }
/* Row 2: nav buttons (View change log · Go To Recommendations Tab) — smaller so
   the longer label fits without ugly wrapping. */
.pc-actions .pc-btn-row:last-child .pc-btn-secondary { font-size: 0.72rem; padding: 8px 6px; line-height: 1.2; }

/* ── Amenity Guide (A41, 2026-07-20) ─────────────────────────────────────── */
.ag-intro { font-size: 0.9rem; line-height: 1.55; color: var(--on-app-muted); margin: 0 0 16px; max-width: 920px; }
.ag-intro strong { color: var(--on-app); }

.ag-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; box-shadow: var(--shadow); margin-bottom: 18px; }
.ag-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 720px; }
.ag-table thead tr { background: #14544f; color: #fff; text-align: left; }
.ag-table th { padding: 10px 12px; font-weight: 700; font-size: 0.72rem; letter-spacing: .02em; }
.ag-table td { padding: 9px 12px; color: var(--ink); border-top: 1px solid #eef2ef; vertical-align: middle; }
.ag-table tbody tr:nth-child(even) { background: #fafcfb; }
.ag-table td:nth-child(1) { color: #8a948c; }
.ag-table td:nth-child(2) { font-weight: 600; }
.ag-table td:nth-child(5) { color: #5a6b60; }
.ag-table th:nth-child(6), .ag-table th:nth-child(7),
.ag-table td:nth-child(6), .ag-table td:nth-child(7) { text-align: center; white-space: nowrap; }

.roi-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.roi-pill.roi-excellent { background: #4CBB17; color: #fff; }
.roi-pill.roi-verygood  { background: #3ba54f; color: #fff; }
.roi-pill.roi-favorable { background: #3ba54f; color: #fff; }
.roi-pill.roi-good      { background: #b8d900; color: #3d4a00; }
.roi-pill.roi-moderate  { background: #e0a800; color: #4a3500; }
.roi-pill.roi-fair      { background: #e0a800; color: #4a3500; }
.roi-pill.roi-poor      { background: #C0392B; color: #fff; }
.roi-pill.roi-low       { background: #C0392B; color: #fff; }
.roi-pill.roi-depends   { background: #6b7d8f; color: #fff; }

.ag-table-note { margin: 0; padding: 9px 12px; font-size: 0.72rem; color: #6b7268; background: #f7faf8; border-top: 1px solid #eef2ef; }

.ag-framing { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ag-tier { background: #fff; border: 1px solid var(--line); border-left: 4px solid #ccc; border-radius: 10px; padding: 12px 14px; }
.ag-tier h4 { margin: 0 0 4px; font-size: 0.82rem; font-weight: 800; color: var(--ink); }
.ag-tier p { margin: 0; font-size: 0.78rem; line-height: 1.45; color: #5a6b60; }
.ag-tier-maker   { border-left-color: #4CBB17; }
.ag-tier-dep     { border-left-color: #e0a800; }
.ag-tier-protect { border-left-color: #2f7de0; }

.ag-callout { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; margin-bottom: 14px; }
.ag-callout h4 { margin: 0 0 6px; font-size: 0.85rem; font-weight: 800; color: var(--forest); }
.ag-callout p { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--ink); }
.ag-priority { margin: 4px 0 0; padding-left: 1.2rem; font-size: 0.82rem; line-height: 1.7; color: var(--ink); }

.ag-sources { font-size: 0.72rem; color: var(--on-app-muted); line-height: 1.55; }
.ag-sources a { color: #8fd3a6; text-decoration: none; }
.ag-sources a:hover { text-decoration: underline; }

/* Game Rooms explainer — informational aside, distinct from the ranked table */
.ag-gameroom { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); margin: 6px 0 16px; }
.ag-gameroom-head { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #14544f, #24533a); color: #fff; padding: 11px 16px; }
.ag-gameroom-head h4 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.ag-gameroom-icon { display: inline-flex; color: #9fe1cb; }
.ag-gameroom-body { padding: 14px 16px 16px; }
.ag-gameroom-body > p { margin: 0 0 10px; font-size: 0.83rem; line-height: 1.55; color: var(--ink); }
.ag-gameroom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 6px; }
.ag-gr-item { margin-bottom: 10px; }
.ag-gr-label { display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #14544f; margin-bottom: 2px; }
.ag-gr-item p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink); }
.ag-gr-highlight { margin-top: 6px; background: #e1f5ee; border-left: 4px solid #14544f; border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; line-height: 1.5; color: #0f3d34; }
.ag-gr-highlight strong { color: #0b2e28; }
@media (max-width: 640px) { .ag-gameroom-grid { grid-template-columns: 1fr; } }

/* Portfolio Pricing Pulse (2026-07-21) — live pricing-posture strip atop Pricing */
.portfolio-pulse { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.portfolio-pulse:empty { display: none; }
.pp-tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); }
.pp-label { margin: 0 0 3px; font-size: 0.68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pp-value { display: block; font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.pp-value.tone-good { color: #2e9e4f; }
.pp-value.tone-bad { color: #C0392B; }
.pp-value.tone-neutral { color: var(--ink); }
.pp-sub { margin: 3px 0 0; font-size: 0.7rem; color: var(--muted); }

/* "PROPERTY STATUS" — a colored band across the top of the property cards.
   Blue matches the Pull-recommendations pill (#2f7de0). Bold white, larger. */
.property-status-label {
  margin: 10px 0 14px;
  background: #2f7de0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
}

/* ── Guest readiness cards v2 (2026-07-18) — data-color system ───────────────
   Centered · green Complete / chartreuse Watch / red Action Needed · teal info
   boxes (white labels) · indicator pill boxes (dark labels) · phone/message
   icon buttons. Same green=handled / red=missing / white=neutral language as
   the property cards (DECISIONS 2026-07-18). */
.gr-card { padding: 16px 18px; }

.gr-head { text-align: center; margin-bottom: 12px; }
.gr-capsule {
  display: inline-block; font-size: 0.72rem; font-weight: 700; color: #fff;
  padding: 3px 12px; border-radius: 999px; letter-spacing: .02em;
}
.gr-capsule.status-healthy { background: #4CBB17; }
.gr-capsule.status-watch   { background: #DFFF00; color: #3d4a00; }
.gr-capsule.status-needed  { background: #C0392B; }
.gr-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 6px 0 0; line-height: 1.2; }
.gr-sub  { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.gr-head .readiness-score { display: inline-block; margin-top: 6px; }

.gr-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.gr-box  { background: #14544f; border-radius: 8px; padding: 8px 10px; text-align: center; }
.gr-box-label { font-size: 0.74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffffff; margin-bottom: 3px; }
.gr-box-val { color: #fff; font-weight: 600; font-size: 0.85rem; word-break: break-word; }
.gr-phone-actions { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.gr-icon-btn { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: filter .15s; }
.gr-icon-btn svg { width: 15px; height: 15px; }
.gr-icon-btn:hover { filter: brightness(1.1); }
.gr-call { background: #22b04b; }
.gr-text { background: #2f7de0; }

.gr-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gr-check { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: center; }
.gr-check-label { font-size: 0.62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 5px; }
.gr-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.gr-pill-good    { background: #4CBB17; color: #fff; }
.gr-pill-bad     { background: #C0392B; color: #fff; }
.gr-pill-neutral { background: #e5e7eb; color: #4b5563; }
.gr-check .checkin-edit-btn, .gr-check .protection-edit-btn { margin-left: 4px; }

.gr-msg { text-align: center; margin: 12px 0 0; }
.gr-action { display: block; text-align: center; margin-top: 4px; }

/* "Add Contact to [phone]" — vCard download + CRM staging (2026-07-31) */
.gr-crm {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 2px; padding: 10px 14px;
  border: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  background: var(--forest); color: #fff;
  transition: filter .15s, background .2s;
}
.gr-crm:hover { filter: brightness(1.08); }
.gr-crm:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.gr-crm svg { width: 16px; height: 16px; flex: none; }
.gr-crm.is-saving { background: #3a6b50; cursor: progress; }
.gr-crm.is-done { background: #e4f6de; color: #256b1a; cursor: default; }
.gr-crm-spin { animation: gr-crm-spin .8s linear infinite; }
@keyframes gr-crm-spin { to { transform: rotate(360deg); } }

/* ── Guest readiness cards ───────────────────────────────── */
.readiness-card {
  border-radius: var(--radius);
  border: 1px solid rgba(46,125,82,.12);
  box-shadow: var(--shadow);
  background: var(--panel);
  transition: box-shadow .2s;
}

.readiness-card:hover {
  box-shadow: var(--shadow-hover);
}

.readiness-section {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* ── Guest detail chips ──────────────────────────────────── */
.guest-details div,
.readiness-checklist div {
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ── Metric bar ──────────────────────────────────────────── */
.metric-bar {
  border-radius: 4px;
  overflow: hidden;
}

.metric-bar-fill {
  border-radius: 4px;
}

/* ── Analytics panel ─────────────────────────────────────── */
.analytics-panel {
  border-radius: var(--radius);
  background: var(--surface);
}

.analytics-panel div {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(22,38,28,.05);
}

.analytics-panel strong {
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ── Settings ────────────────────────────────────────────── */
.settings-panel,
.connection-panel {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.connection-row {
  border-radius: 8px;
  padding: 12px;
  transition: background .15s;
}

.connection-row:hover {
  background: var(--surface);
}

/* ── Scrollbars ──────────────────────────────────────────────
   2026-07-13: this block was truncated mid-rule (corruption) and the page
   scrollbar was a 6px sliver. Rich wants a grabbable bar for fine
   positioning — page-level gets a full-width bar; inner panels stay slim. */
::-webkit-scrollbar { width: 14px; height: 12px; }
::-webkit-scrollbar-track { background: #eef0ec; }
::-webkit-scrollbar-thumb { background: #9aa79c; border-radius: 7px; border: 3px solid #eef0ec; }
::-webkit-scrollbar-thumb:hover { background: #6e7d70; }
/* Slim scrollbars only inside compact panels (chat, feeds) */
#support-msgs::-webkit-scrollbar, .message-feed::-webkit-scrollbar, .readiness-feed::-webkit-scrollbar { width: 8px; }
html { scrollbar-width: auto; scrollbar-color: #9aa79c #eef0ec; } /* Firefox */

/* ── Guest card color coding ─────────────────────────────── */

.guest-name {
  color: #1a9e4a;
  font-weight: 800;
  font-size: 1rem;
}

/* Info boxes (stay, phone, source, door code) — sky blue */
.guest-details .info-box {
  background: #e8f4fd;
  border: 1px solid #b8d9f0;
}

/* Checklist item base */
.checklist-item {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.checklist-item span {
  display: block;
  margin-bottom: 3px;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.checklist-item strong {
  display: block;
  font-size: 0.9rem;
}

/* Completed — sky to bright blue */
.checklist-item.checklist-value-good {
  background: linear-gradient(135deg, #d0eaf8, #b3d9f5);
  border-color: #7bbfe8;
}

.checklist-item.checklist-value-good span {
  color: #1a5f8a;
}

.checklist-item.checklist-value-good strong {
  color: #0d4a72;
}

/* Incomplete — light red */
.checklist-item.checklist-value-needed {
  background: linear-gradient(135deg, #fde8e5, #faccc7);
  border-color: #f0a89f;
}

.checklist-item.checklist-value-needed span {
  color: #8b2018;
}

.checklist-item.checklist-value-needed strong {
  color: #7a1a12;
}

/* Watch / unclear — light amber */
.checklist-item.checklist-value-watch {
  background: linear-gradient(135deg, #fff3d6, #ffe9aa);
  border-color: #f0cc6a;
}

.checklist-item.checklist-value-watch span {
  color: #7c4a00;
}

.checklist-item.checklist-value-watch strong {
  color: #6b3e00;
}

/* Empty state */
.readiness-empty {
  grid-column: 1 / -1;
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Phone call/text buttons ─────────────────────────────── */

.phone-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .15s;
}

.phone-btn:first-child {
  background: #dcf0e5;
  color: #16512f;
  border: 1px solid rgba(46,125,82,.2);
}

.phone-btn:last-child {
  background: #e8f4fd;
  color: #1a5f8a;
  border: 1px solid rgba(26,95,138,.2);
}

.phone-btn:hover {
  filter: brightness(0.92);
}

/* ── Notification dismiss button ─────────────────────────── */

.notif-item {
  position: relative;
}

.notif-dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.08);
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}

.notif-dismiss:hover {
  background: rgba(0,0,0,.16);
  color: var(--ink);
}


/* ── Phone number display ────────────────────────────────── */
.phone-number {
  display: block;
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--ink);
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}

/* ── Message Center ──────────────────────────────────────────────────────────── */
/* ── Message Center Card ────────────────────────────────────────────────────── */
.msg-card {
  margin-top: 28px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(22,38,28,0.09);
  overflow: hidden;
}

/* Header band — royal blue to teal */
.msg-header-band {
  background: linear-gradient(120deg, #1e3a8a 0%, #1d4ed8 35%, #0891b2 70%, #0d9488 100%);
  padding: 18px 22px 16px;
  display: flex;
  flex-direction: column; /* center title + stats stacked (2026-07-21) */
  align-items: center;
  text-align: center;
  gap: 10px;
  flex-wrap: wrap;
}

.msg-header-left h2 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}

.msg-header-sub {
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
}

.msg-header-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.msg-stat-pill {
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
}

.msg-stat-pill.msg-stat-alert {
  background: rgba(245,158,11,0.35);
  border-color: rgba(245,158,11,0.5);
  color: #fef3c7;
}

.msg-stat-sync {
  background: rgba(16,185,129,0.25);
  border-color: rgba(16,185,129,0.4);
}

/* Filter bar inside card */
.msg-card .msg-filter-bar,
.message-section .msg-filter-bar {
  padding: 10px 20px 2px;
  border-bottom: 1px solid var(--line);
}

/* Message feed */
.message-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.msg-thread {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 2px 8px rgba(22,38,28,0.05);
}

.msg-thread:hover {
  border-color: var(--leaf);
  box-shadow: 0 4px 16px rgba(22,38,28,0.10);
}

.msg-thread.msg-unread {
  border-left: 3px solid var(--leaf);
  background: linear-gradient(135deg, rgba(78,143,99,0.04), var(--panel));
}

.msg-thread.msg-expanded {
  border-color: var(--leaf);
}

.msg-thread-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.msg-unread-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  margin-top: 6px;
}

.msg-thread-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-guest-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: #1a9e4a;
  line-height: 1.2;
}

.msg-property {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}

.msg-thread-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.msg-channel {
  font-size: 0.72rem;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--sky);
  color: var(--forest);
  letter-spacing: 0.01em;
}

/* Per-channel badge colors */
.msg-channel[data-channel="airbnb"] {
  background: #fde8e4;
  color: #c13515;
}
.msg-channel[data-channel="vrbo"] {
  background: #dbeafe;
  color: #1d4ed8;
}
.msg-channel[data-channel="booking.com"],
.msg-channel[data-channel="bookingcom"] {
  background: #e0e7ff;
  color: #3730a3;
}
.msg-channel[data-channel="direct_chat"] {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.msg-channel[data-channel="sms"] {
  background: #f3f4f6;
  color: #374151;
}

/* Direct booking thread — warm amber accent */
.msg-thread.msg-direct {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, rgba(245,158,11,0.05), var(--panel));
}
.msg-thread.msg-direct.msg-unread {
  border-left: 3px solid #d97706;
  background: linear-gradient(135deg, rgba(245,158,11,0.09), var(--panel));
}

.msg-ago {
  font-size: 0.72rem;
  color: var(--muted);
}

.msg-preview {
  margin: 8px 0 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-thread.msg-expanded .msg-preview {
  white-space: normal;
}

/* Inbox accordion (2026-07-21): each thread collapses to a one-line row; click
   the summary to expand the conversation + reply box. One open at a time (JS). */
.msg-summary { cursor: pointer; }
.msg-thread:not(.msg-open) .msg-thread-body,
.msg-thread:not(.msg-open) .msg-thread-footer,
.msg-thread:not(.msg-open) .msg-thread-actions { display: none; }
.msg-thread.msg-open .msg-preview { display: none; }

/* Combined top bar (watched channels + PMS link moved up 2026-07-21): flip the
   footer bar's divider to the bottom since it now sits above the feed. */
.msg-topbar-bar { border-top: none; border-bottom: 1px solid var(--line); }

/* Permanent-delete control, shown only inside an open thread. */
.msg-thread-actions { margin-top: 10px; text-align: right; }
.msg-delete-btn {
  background: none;
  border: none;
  color: #a2401a;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.msg-delete-btn:hover { color: #C0392B; background: #faece7; }
.msg-thread.msg-open { border-color: var(--leaf); }
.msg-chevron {
  font-size: .7rem;
  color: var(--muted);
  line-height: 1;
  transition: transform .15s ease;
}
.msg-thread.msg-open .msg-chevron { transform: rotate(180deg); }

.msg-thread-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.45;
  position: relative;
}

.msg-bubble.guest {
  background: var(--sky);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

.msg-bubble.host {
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  color: var(--ink);
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}

.msg-time {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 3px;
  text-align: right;
}

.msg-or-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
}

.msg-or-link:hover {
  text-decoration: underline;
}

.msg-direct-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.01em;
}

/* ── Empty state ─────────────────────────────────────────────── */
.msg-empty-state {
  padding: 28px 22px 10px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.msg-empty-left {
  flex: 1;
}

.msg-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.msg-empty-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px;
}

.msg-empty-sub {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.msg-ai-briefing {
  font-size: 0.78rem;
  color: #5b21b6;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 7px 11px;
  margin: 0;
  font-style: italic;
}

/* ── Watched channel pills ───────────────────────────────────── */
.msg-watched-channels {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.015);
}

.msg-watched-label {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
}

.msg-watch-pill {
  font-size: 0.70rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--sky);
  color: var(--forest);
  border: 1px solid rgba(0,0,0,0.07);
}

.msg-watch-airbnb  { background: #fde8e4; color: #c13515; }
.msg-watch-vrbo    { background: #dbeafe; color: #1d4ed8; }
.msg-watch-direct  { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.msg-watch-booking { background: #e0e7ff; color: #3730a3; }

/* ── Footer action bar ───────────────────────────────────────── */
.msg-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  gap: 12px;
}

.msg-footer-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.msg-footer-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
}

.msg-footer-sub {
  font-size: 0.70rem;
  color: var(--muted);
}

/* ── Message filter bar & dismiss ─────────────────────────────── */
.msg-filter-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 10px 0 4px;
  flex-wrap: wrap;
}
.msg-filter-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}
.msg-filter-btn:hover {
  border-color: var(--leaf);
  color: var(--leaf);
}
.msg-filter-btn.active {
  background: var(--leaf);
  border-color: var(--leaf);
  color: #fff;
}
.msg-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 0.74rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 2px;
  transition: color 0.15s;
}
.msg-clear-btn:hover {
  color: var(--text);
}
.msg-dismiss-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  padding: 4px 6px;
  border-radius: 4px;
  z-index: 2;
}
.msg-thread:hover .msg-dismiss-btn {
  opacity: 1;
}
.msg-dismiss-btn:hover {
  color: var(--text);
  background: var(--line);
}


.pill-alert {
  background: rgba(201,94,82,0.12) !important;
  color: var(--rose) !important;
  border: 1px solid rgba(201,94,82,0.25) !important;
  font-weight: 800 !important;
}

/* ── Message Center CTA button ───────────────────────────────────────────────── */
.msg-center-cta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.btn-or-messages {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.1rem;
  background: var(--forest);
  color: #fff;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.15s, opacity 0.15s;
}

.btn-or-messages:hover {
  background: var(--forest-dark, #2a5c3c);
  opacity: 0.92;
}
/* ── End Message Center ──────────────────────────────────────────────────────── */

/* ── Analytics Tab ─────────────────────────────────────────────────────── */
.analytics-prop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.analytics-prop-pill {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.analytics-prop-pill.active,
.analytics-prop-pill:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.analytics-ytd-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.ytd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
.ytd-card .tile-label { margin: 0 0 0.25rem; }
.ytd-card strong { font-size: 1.35rem; letter-spacing: -0.02em; }

.analytics-table-wrap { overflow-x: auto; }
.analytics-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.analytics-tbl th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: 0.4rem 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.analytics-tbl td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.analytics-tbl tr.dim-row td { opacity: 0.4; }
.amonth { font-weight: 600; white-space: nowrap; width: 7rem; }
.aadr   { font-weight: 600; text-align: right; width: 4.5rem; }
.anights { color: var(--text-secondary); text-align: right; width: 4rem; }
.abar {
  position: relative;
  height: 1.5rem;
  background: var(--border);
  border-radius: 4px;
  min-width: 60px;
  max-width: 220px;
  overflow: hidden;
}
.abar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: var(--accent);
  opacity: 0.25;
  border-radius: 4px;
}
.abar span {
  position: relative;
  z-index: 1;
  padding: 0 0.4rem;
  line-height: 1.5rem;
  font-weight: 600;
  font-size: 0.78rem;
}
.rev-bar::after { background: #2563eb; }

@media (max-width: 480px) {
  .analytics-ytd-row { grid-template-columns: 1fr 1fr; }
  .ytd-card strong    { font-size: 1.1rem; }
  .anights            { display: none; }
}
/* ─�

/* ── Protection override button & badge ───────────────────────────── */
.protection-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary, #888);
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.protection-edit-btn:hover { opacity: 1; color: var(--accent, #2563eb); }
.checkin-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-secondary, #888);
  padding: 0 0.25rem;
  margin-left: 0.25rem;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.checkin-edit-btn:hover { opacity: 1; color: var(--accent, #2563eb); }

.host-set-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ── Override modal ───────────────────────────────────────────────── */
.override-modal {
  border: none;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  max-width: 360px;
  width: 90vw;
}
.override-modal::backdrop { background: rgba(0,0,0,0.4); }

.override-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.override-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.
/* ── Pricing Tab ──────────────────────────────────────────────────── */
.pricing-property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pricing-prop-card {
  background: var(--panel);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 2px 8px rgba(22,38,28,.07);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.2s;
}
.pricing-prop-card.pricing-card-rec-active {
  border-color: var(--forest);
}

/* ── Today Panel (dashboard) ─────────────────────────────────────── */
.today-section {
  background: var(--panel);
  border-radius: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  margin-bottom: 1rem;
}
.today-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.today-col {
  background: var(--paper);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
}
.today-col-label {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin: 0 0 10px;
}
.today-guest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.today-guest-card:last-child { border-bottom: none; }
.today-prop-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.today-guest-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.today-prop-name {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1px;
}
.today-empty {
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  margin: 4px 0 0;
}

/* ── Calendar Tab ────────────────────────────────────────────────── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-nav-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.cal-nav-btn:hover { background: var(--line); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 8px 0 12px;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-day-hdr {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  padding: 4px 0 6px;
}
.cal-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 72px;
  padding: 4px 3px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cal-cell-empty {
  background: transparent;
  border-color: transparent;
}
.cal-today {
  border-color: var(--forest);
  background: #f0faf4;
}
.cal-day-num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  padding: 0 2px 2px;
  line-height: 1;
}
.cal-day-num-today {
  color: var(--forest);
  font-size: 0.8rem;
}
.cal-bar {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 4px;
  line-height: 1.2;
  min-height: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-bar-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-checkout-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 1px auto 0;
  opacity: .5;
}

@media (max-width: 480px) {
  .cal-cell { min-height: 58px; }
  .cal-bar  { font-size: 0.6rem; padding: 1px 3px; }
  .cal-day-num { font-size: 0.68rem; }
  .today-grid { grid-template-columns: 1fr; }
}

.pricing-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pricing-card-name {
  font-size: 1rem;
  font-weight: 720;
  color: var(--ink);
}
.pricing-card-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 99px;
}
.pricing-status-status-good { background: #d1fae5; color: #065f46; }
.pricing-status-status-watch { background: #fef3c7; color: #92400e; }
.pricing-status-status-needed { background: #fee2e2; color: #991b1b; }

.pricing-card-metrics {
  display: flex;
  gap: 1rem;
}
.pricing-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.pricing-metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.pricing-metric-value {
  font-size: 1.1rem;
  font-weight: 740;
  color: var(--ink);
}

.pricing-card-rec {
  background: var(--paper);
  border-left: 3px solid var(--forest);
  border-radius: 6px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pricing-card-rec-neutral {
  border-left-color: var(--line);
}

.pricing-card-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.pricing-quick-adjust {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
.pricing-dpt-link {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  text-decoration: none;
  color: var(--forest);
  border-color: var(--forest);
}
.pricing-dpt-link:hover { background: var(--forest); color: #fff; }

/* ── Dynamic Pricing Tool callout ────────────────────────────────── */
.pricing-tool-callout {
  background: var(--sky);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
}
.pricing-tool-callout-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.pricing-tool-callout-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.pricing-tool-callout h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 720;
  color: var(--ink);
}
.pricing-tool-callout p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.5;
}
.pricing-tool-list {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pricing-tool-list li {
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.45;
}
.pricing-tool-note {
  font-size: 0.78rem !important;
  color: var(--muted) !important;
  font-style: italic;
  margin-top: 0.5rem !important;
}

/* ── Pricing history ─────────────────────────────────────────────── */
.pricing-history-section {
  margin-top: 0.25rem;
}
.pricing-history-section h3 {
  font-size: 0.85rem;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.pricing-history {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pricing-history-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  background: var(--panel);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
}
.pricing-history-meta {
  flex-shrink: 0;
  min-width: 56px;
}
.pricing-history-date {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pricing-history-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pricing-history-body strong {
  font-size: 0.85rem;
  color: var(--ink);
}
.pricing-history-outcome {
  font-size: 0.75rem;
  color: var(--muted);
}
/* ── End Pricing Tab ─────────────────────────────────────────────── */

/* ── Modify Modal — checkbox-per-operation ──────────────────────── */
.modify-ops {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.modify-op {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.modify-op-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel);
  cursor: pointer;
  user-select: none;
}
.modify-op-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--leaf);
  flex-shrink: 0;
  cursor: pointer;
}
.modify-op-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.modify-op-body {
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg);
  border-top: 1px solid var(--line);
  transition: opacity 0.15s;
}
.modify-op-body.op-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.modify-op-body-row {
  flex-direction: row;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.modify-op-body-row > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.modify-op-hint {
  font-size: 0.75rem;
  color: var(--muted);
}
/* Slider rows inside ops */
.modify-slider-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* (Historic note 2026-07-26: the file ended for months with a dangling
   ".modify-sl" fragment — a truncation from the old OneDrive-era styles.css
   corruption. Browsers dropped it silently. Cleaned up during nav v2.) */

/* ── Nav v2 (2026-07-26, Rich's design) ─────────────────────────────── */
.nav-v2 {
  /* 2026-07-26 final (Rich's nav design v3): near-black bar, icon-over-label
     tabs, green active underline, dark dropdown.
     NO overflow-x:auto — it clipped the absolutely-positioned More menu into
     a scroll area (Rich: "requiring a sliding bar"). Tabs wrap instead. */
  background: #040e10;
  border: none;
  border-radius: 16px;
  align-items: center;
  flex-wrap: wrap;
  overflow: visible;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  padding: 10px 16px;
  gap: 8px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 18px 2px 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  margin-right: 12px;
  flex-shrink: 0;
}
.nav-brand img { width: 42px; height: 42px; }
.nav-brand-text strong {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
/* Tabs: icon stacked over label, transparent on the black bar. */
.nav-v2 > .tab {
  background: none;
  border: none;
  color: #eef2ef;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 8px;
  padding: 8px 14px 9px;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.nav-v2 > .tab > span {
  border-bottom: 3px solid transparent;
  padding-bottom: 3px;
}
.nav-v2 > .tab:hover:not(.active) { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-v2 > .tab.active {
  background: none;
  color: #6fdc6f;
  box-shadow: none;
}
.nav-v2 > .tab.active > span { border-bottom-color: #4caf50; }
/* Nav icons (2026-07-26): cropped straight from Rich's design artwork
   ("Cabinator navigation bar.png" → assets/nav/*-56.png), rendered bare on
   the dark chips exactly like the design's dark theme. */
.nav-icon-img { width: var(--nav-icon); height: var(--nav-icon); flex-shrink: 0; object-fit: contain; }
/* Automations is an inline Lucide "Sparkles" rather than an artwork crop, so it
   takes a CSS colour instead of baked-in pixels. Nav green = the same #6fdc6f
   the active tab label uses. It sits in the standard icon box: the old
   .nav-icon-wide 46x32 exception existed only to stop the gear composite
   shrinking, and is gone with it (2026-07-27). */
.nav-icon-svg { color: #6fdc6f; }
.nav-more-menu .nav-icon-img { width: var(--nav-icon-more); height: var(--nav-icon-more); }
.nav-badge-icon { width: 18px; height: 18px; border-radius: 4px; vertical-align: -4px; }
/* More button + dropdown */
.nav-more-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.nav-more-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.nav-more-btn:hover, .nav-more-btn.menu-open { background: rgba(255, 255, 255, 0.14); }
.nav-more-btn.active-section { color: #6fdc6f; border-color: #4caf50; }
.nav-more-dots { color: #4caf50; letter-spacing: 2px; font-size: 0.72rem; }
.nav-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  background: #1a2126;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  min-width: 280px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.nav-more-menu .tab {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: #f2f5f2;
  padding: 12px 14px;
  border-radius: 9px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  gap: 12px;
  align-items: center;
  background: none;
  border: none;
}
.nav-more-menu .tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-more-menu .tab.active { color: #6fdc6f; background: rgba(76, 175, 80, 0.1); }
.nav-more-divider { border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 7px 6px; }
/* Marketplace category tiles (2026-07-26, Rich's design) */
.mkt-tile {
  background: #0f2027;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 10px 12px;
  width: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.mkt-tile img { width: 64px; height: 64px; border-radius: 50%; }
.mkt-tile span { color: #fff; font-size: 0.86rem; font-weight: 700; line-height: 1.25; }
.nav-new-pill {
  background: #a78bfa;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 7px;
  padding: 1px 7px;
  margin-left: 4px;
  letter-spacing: 0.04em;
}
@media (max-width: 760px) {
  .nav-brand { display: none; } /* phones: tabs get the full width */
  .nav-v2 .tab {
    gap: 4px;
    font-size: 0.78rem;
    padding: 6px 9px 8px;
  }
  :root { --nav-icon: 25px; } /* scales the artwork crops and the inline SVG together */
  .nav-more-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* ══ Cabinator wordmark (2026-07-28) ═════════════════════════════════
   The lettering on transparency — extracted by difference matting from the
   black- and white-background renders, so the alpha is solved rather than
   keyed, and the glow survives intact. Recoloured from green to emerald/
   teal with cyan on the hottest edges; the bronze is untouched.
   The living glow is an animated drop-shadow, so it follows the letterforms
   and stays recolourable. Brand rule: static artwork for print, invoices and
   app icons; this live version everywhere digital. Motion spec, identical on
   every surface so the behaviour reads as ours: 6s cycle, ease-in-out. */
.cab-sign-wrap {
  display: block;
  line-height: 0;
  width: min(78%, 450px);
  margin: 0 auto 4px;
}
.cab-sign {
  display: block;
  width: 100%;
  height: auto;
  animation: cabSignBreathe 6s ease-in-out infinite;
}
@keyframes cabSignBreathe {
  0%, 100% { filter: drop-shadow(0 2px 10px rgba(6, 18, 12, 0.75))
                     drop-shadow(0 0 9px rgba(0, 191, 165, 0.30))
                     drop-shadow(0 0 24px rgba(0, 191, 165, 0.14)); }
  50%      { filter: drop-shadow(0 2px 10px rgba(6, 18, 12, 0.75))
                     drop-shadow(0 0 15px rgba(90, 255, 235, 0.58))
                     drop-shadow(0 0 40px rgba(0, 191, 165, 0.30)); }
}
@media (prefers-reduced-motion: reduce) {
  .cab-sign { animation: none;
    filter: drop-shadow(0 2px 10px rgba(6, 18, 12, 0.75))
            drop-shadow(0 0 12px rgba(0, 191, 165, 0.42))
            drop-shadow(0 0 32px rgba(0, 191, 165, 0.22)); }
}