/* ============================================================
   TMMR App Mock Kit  —  app-mock.css
   ------------------------------------------------------------
   Inline HTML "screenshots" of the real TourTracker app UI.
   Replaces the off-brand placeholder SVGs in /assets/screenshots/.

   Source of truth for tokens:
     Happy-Wine-Tours-App/brand/tokens.cjs
     Happy-Wine-Tours-App/TourTracker-main/tailwind.config.js

   EVERYTHING is namespaced under .tmmr-mock so these styles can
   never collide with the marketing site CSS or the WP global CSS.
   ============================================================ */

.tmmr-mock {
  /* --- Real brand tokens (NOT the placeholder #2563EB indigo) --- */
  --m-primary:        #3BA4DC;   /* brand blue — CTAs, links, active */
  --m-primary-light:  #7CC8EE;   /* hover, highlights, secondary fill */
  --m-primary-dark:   #1A6FA0;   /* pressed, headings on blue */
  --m-active-nav:     #1565C0;   /* solid active sidebar pill */
  --m-success:        #059669;
  --m-success-bg:     #ECFDF5;
  --m-warning:        #D97706;
  --m-warning-bg:     #FEF3C7;
  --m-danger:         #DC2626;
  --m-danger-bg:      #FEE2E2;
  --m-info:           #3BA4DC;
  --m-info-bg:        #E1F1FA;

  --m-page-bg:        #FAFBFB;   /* real app main-bg */
  --m-card:           #FFFFFF;
  --m-sidebar:        #FFFFFF;
  --m-border:         #E5E7EB;
  --m-border-soft:    #F1F3F5;
  --m-text-heading:   #111827;
  --m-text-body:      #374151;
  --m-text-muted:     #6B7280;
  --m-text-faint:     #9CA3AF;

  --m-radius:         12px;
  --m-radius-sm:      8px;
  --m-radius-pill:    999px;
  --m-shadow:         0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --m-shadow-lg:      0 8px 24px rgba(16,24,40,.10);

  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--m-text-body);
  /* The mock is a fixed 16:10 canvas that scales to its container width.
     container-type lets children use cqw units for crisp scaling. */
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: var(--m-page-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  box-shadow: var(--m-shadow-lg);
  container-type: inline-size;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tmmr-mock *,
.tmmr-mock *::before,
.tmmr-mock *::after { box-sizing: border-box; }

/* Scale the whole canvas off container width so text stays sharp and
   proportional at any embed size. 1cqw = 1% of container width.
   clamp() floor+ceiling protects against the WP cascade resolving the
   container to a surprising width (which historically blew labels up
   on the live site even though preview looked fine). */
.tmmr-mock { font-size: clamp(11px, 1.7cqw, 17px); line-height: 1.45; }

/* ============================================================
   SHELL A — Desktop admin (sidebar + topbar + content)
   ============================================================ */
.tmmr-mock__app { display: grid; grid-template-columns: 18% 1fr; height: 100%; }

.tmmr-mock__sidebar {
  background: var(--m-sidebar);
  border-right: 1px solid var(--m-border);
  padding: 1.1em 0.7em;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  overflow: hidden;            /* nothing bleeds past the sidebar */
}
.tmmr-mock__brand {
  display: flex; align-items: center;
  padding: 0.2em 0.4em 1em;
}
.tmmr-mock__brand img {
  height: 2.1em; width: auto; max-width: 100%; display: block;
}
.tmmr-mock__navgroup-label {
  font-size: .7em; text-transform: uppercase; letter-spacing: .06em;
  color: var(--m-text-faint); margin: 0.8em 0.5em 0.3em;
}
.tmmr-mock__navitem {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.55em 0.6em; border-radius: var(--m-radius-sm);
  color: var(--m-text-body); font-size: .88em; font-weight: 500;
  line-height: 1.2; min-width: 0;   /* allow text to wrap/shrink, never overflow */
}
.tmmr-mock__navitem span {
  min-width: 0; overflow-wrap: break-word;
}
.tmmr-mock__navitem .ic { width: 1.1em; height: 1.1em; opacity: .7; flex: none; }
.tmmr-mock__navitem--active {
  background: var(--m-active-nav); color: #fff;
}
.tmmr-mock__navitem--active .ic { opacity: 1; }

.tmmr-mock__main { display: flex; flex-direction: column; min-width: 0; }
.tmmr-mock__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9em 1.4em; border-bottom: 1px solid var(--m-border);
  background: #fff;
}
.tmmr-mock__title { font-size: 1.35em; font-weight: 700; color: var(--m-text-heading); }
.tmmr-mock__subtitle { font-size: .85em; color: var(--m-text-muted); margin-top: 0.15em; }
.tmmr-mock__topbar-actions { display: flex; align-items: center; gap: 0.6em; }

.tmmr-mock__content { padding: 1.3em 1.4em; overflow: hidden; flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ============================================================
   SHELL B — Guest-facing card (no sidebar, branded header)
   ============================================================ */
.tmmr-mock--guest { background: var(--m-page-bg); }
.tmmr-mock__guestwrap { height: 100%; display: grid; place-items: center; padding: 1.4em; }
.tmmr-mock__guestcard {
  width: 78%; max-width: 78%; background: #fff;
  border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg);
  overflow: hidden; border: 1px solid var(--m-border);
}
.tmmr-mock__guesthead {
  background: linear-gradient(135deg, var(--m-primary) 0%, var(--m-primary-dark) 100%);
  color: #fff; padding: 1.3em 1.6em; text-align: center;
}
.tmmr-mock__guesthead h3 { font-size: 1.3em; font-weight: 700; margin: 0; }
.tmmr-mock__guesthead p { font-size: .85em; opacity: .9; margin: 0.3em 0 0; }
.tmmr-mock__guestbody { padding: 1.3em 1.6em; }

/* ============================================================
   SHELL C — Mobile phone frame
   ============================================================ */
.tmmr-mock--mobile { background: var(--m-page-bg); }
.tmmr-mock__phonewrap {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 4% 0; overflow: hidden;
}
.tmmr-mock__phone {
  height: 100%; width: auto; aspect-ratio: 10 / 20; max-width: 46%;
  background: #1E293B; border-radius: 1.8em; padding: 0.6em;
  box-shadow: var(--m-shadow-lg); flex: none;
}
.tmmr-mock__phonescreen {
  width: 100%; height: 100%; background: var(--m-page-bg);
  border-radius: 1.7em; overflow: hidden; display: flex; flex-direction: column;
}
.tmmr-mock__phonebar {
  background: var(--m-primary); color: #fff;
  padding: 0.8em 1em 0.7em; text-align: center;
  font-size: .9em; font-weight: 700;
}
.tmmr-mock__phonebody { padding: 0.9em; flex: 1; overflow: hidden; }

/* ============================================================
   SHELL D — Driver dashboard (stacked panels, no sidebar)
   Height follows content, so panels are never cut off.
   ============================================================ */
.tmmr-mock--driver {
  aspect-ratio: auto;
  background: var(--m-page-bg);
  padding: 1.3em;
  display: flex; flex-direction: column; gap: 1.2em;
}
.tmmr-mock__panel {
  background: #fff; border: 1px solid var(--m-border);
  border-radius: var(--m-radius); box-shadow: var(--m-shadow);
  overflow: hidden;
}
.tmmr-mock__panelhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8em; padding: 1em 1.2em 0;
}
.tmmr-mock__paneltitle {
  display: flex; align-items: center; gap: 0.5em;
  font-size: 1.3em; font-weight: 800; color: var(--m-text-heading);
}
.tmmr-mock__paneltitle .ic { width: 1.05em; height: 1.05em; color: var(--m-primary); flex: none; }
.tmmr-mock__weeknav { display: flex; align-items: center; gap: 0.45em; flex: none; }
.tmmr-mock__navbtn {
  width: 1.9em; height: 1.9em; border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border); background: #fff; color: var(--m-text-muted);
  display: grid; place-items: center; font-size: 1em; line-height: 1;
}
.tmmr-mock__todaybtn {
  padding: 0.45em 0.95em; border-radius: var(--m-radius-sm);
  border: 1px solid var(--m-border); background: #F9FAFB;
  color: var(--m-text-body); font-size: .9em; font-weight: 600;
}
.tmmr-mock__weekrange { padding: 0.55em 1.2em 0; font-size: .92em; color: var(--m-text-muted); }
.tmmr-mock__week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin: 0.7em 1.2em 1.2em; border: 1px solid var(--m-border-soft);
  border-radius: var(--m-radius-sm); overflow: hidden;
}
.tmmr-mock__weekcol { border-left: 1px solid var(--m-border-soft); padding: 0.7em 0.55em; min-width: 0; }
.tmmr-mock__weekcol:first-child { border-left: none; }
.tmmr-mock__dow { font-size: .7em; font-weight: 700; letter-spacing: .05em; color: var(--m-text-faint); }
.tmmr-mock__daynum { font-size: 1.2em; font-weight: 800; color: var(--m-text-heading); margin: 0.05em 0 0.7em; }
.tmmr-mock__weekbody { min-height: 4.6em; }
.tmmr-mock__tourchip {
  background: var(--m-success-bg); border: 1px solid #BBF7D0;
  border-radius: 6px; padding: 0.45em 0.55em;
}
.tmmr-mock__tourchip-name { font-size: .82em; font-weight: 700; color: #166534; line-height: 1.2; overflow-wrap: break-word; }
.tmmr-mock__tourchip-status { font-size: .74em; color: var(--m-success); margin-top: 0.15em; }
.tmmr-mock__chartbody { padding: 1em 1.2em 1.1em; }
.tmmr-mock__linechart { width: 100%; height: auto; display: block; overflow: visible; }
.tmmr-mock__linechart .grid { stroke: var(--m-border-soft); stroke-width: 1; }
.tmmr-mock__linechart .axislabel { fill: var(--m-text-faint); font-size: 12px; font-family: inherit; }
.tmmr-mock__linechart .area { fill: url(#tmmrTripsFill); }
.tmmr-mock__linechart .line { fill: none; stroke: var(--m-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tmmr-mock__linechart .dot { fill: var(--m-primary); stroke: #fff; stroke-width: 2.5; }

/* ============================================================
   SHELL D (compact) — Driver dashboard sized for half-column
   feature-row slots (~520px container). Inherits everything from
   .tmmr-mock--driver; only overrides what needs to be tightened so
   text doesn't squash or wrap to two lines.
   ============================================================ */
.tmmr-mock--driver-compact { padding: 1em; gap: 0.9em; }
.tmmr-mock--driver-compact .tmmr-mock__panelhead { padding: 0.75em 0.95em 0; }
.tmmr-mock--driver-compact .tmmr-mock__paneltitle { font-size: 1.1em; }
.tmmr-mock--driver-compact .tmmr-mock__weekrange { padding: 0.4em 0.95em 0; font-size: .85em; }
.tmmr-mock--driver-compact .tmmr-mock__week { margin: 0.55em 0.95em 0.95em; }
.tmmr-mock--driver-compact .tmmr-mock__weekcol { padding: 0.55em 0.4em; }
.tmmr-mock--driver-compact .tmmr-mock__daynum { font-size: 1.05em; margin: 0.05em 0 0.45em; }
.tmmr-mock--driver-compact .tmmr-mock__weekbody { min-height: 3em; }
.tmmr-mock--driver-compact .tmmr-mock__tourchip { padding: 0.35em 0.45em; }
.tmmr-mock--driver-compact .tmmr-mock__tourchip-name {
  font-size: .78em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmmr-mock--driver-compact .tmmr-mock__tourchip-status { font-size: .7em; }
.tmmr-mock--driver-compact .tmmr-mock__chartbody { padding: 0.75em 0.95em 0.85em; }

/* ============================================================
   SHELL F — Driver certifications card. Matches the
   "Certification and Compliance Tracking" section on
   driver-management.html: per-driver credentials with expiry
   dates and an Expiring Soon alert state. Half-column ready.
   ============================================================ */
.tmmr-mock--driver-certs {
  aspect-ratio: auto;
  background: var(--m-page-bg);
  padding: 1em;
  display: flex; flex-direction: column;
}
.tmmr-mock--driver-certs .tmmr-mock__panelhead {
  padding: 0.85em 1em 0.6em;
  border-bottom: 1px solid var(--m-border-soft);
  margin-bottom: 0;
}
.tmmr-mock--driver-certs .tmmr-mock__paneltitle { font-size: 1.05em; }
.tmmr-mock__alertpill {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: .72em; font-weight: 700;
  color: var(--m-warning);
  background: var(--m-warning-bg);
  border: 1px solid #FDE68A;
  border-radius: var(--m-radius-pill);
  padding: 0.3em 0.7em;
  white-space: nowrap;
}
.tmmr-mock__alertpill .ic { width: .85em; height: .85em; }
.tmmr-mock__driverhead {
  display: flex; align-items: center; gap: 0.7em;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--m-border-soft);
}
.tmmr-mock__avatar {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-dark));
  color: #fff; font-weight: 800; font-size: .9em;
  display: grid; place-items: center;
  letter-spacing: .02em;
  flex: none;
}
.tmmr-mock__drivername {
  font-size: .95em; font-weight: 700; color: var(--m-text-heading);
  line-height: 1.2;
}
.tmmr-mock__drivermeta {
  font-size: .75em; color: var(--m-text-muted);
  margin-top: 0.15em;
}
.tmmr-mock__certlist { padding: 0; }
.tmmr-mock__certrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7em;
  padding: 0.6em 1em;
  border-top: 1px solid var(--m-border-soft);
}
.tmmr-mock__certrow:first-child { border-top: none; }
.tmmr-mock__certicon {
  width: 1.05em; height: 1.05em;
  color: var(--m-text-muted);
  flex: none;
}
.tmmr-mock__certrow--warn .tmmr-mock__certicon { color: var(--m-warning); }
.tmmr-mock__certinfo { min-width: 0; }
.tmmr-mock__certname {
  font-size: .85em; font-weight: 600; color: var(--m-text-heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmmr-mock__certmeta {
  font-size: .72em; color: var(--m-text-muted);
  margin-top: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmmr-mock__certbadge {
  font-size: .68em; font-weight: 700;
  padding: 0.3em 0.6em;
  border-radius: var(--m-radius-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tmmr-mock__certbadge--ok    { background: var(--m-success-bg); color: var(--m-success); }
.tmmr-mock__certbadge--warn  { background: var(--m-warning-bg); color: var(--m-warning); }
.tmmr-mock__certbadge--danger { background: var(--m-danger-bg);  color: var(--m-danger); }
.tmmr-mock__certbadge--info  { background: var(--m-info-bg);    color: var(--m-info); }
.tmmr-mock__certbadge--muted { background: var(--m-border-soft); color: var(--m-text-muted); }

/* ============================================================
   SHELL I — Assignment History + workload summary. Per-driver
   recent assignment table with a workload/completion strip on
   top so dispatch sees both halves of the "Assignment History
   and Workload View" copy at once. Half-column ready (~520px).
   ============================================================ */
.tmmr-mock--workload {
  aspect-ratio: auto;
  background: var(--m-page-bg);
  padding: 1em;
  display: flex; flex-direction: column;
}
.tmmr-mock--workload .tmmr-mock__panelhead {
  padding: 0.85em 1em 0.6em;
  border-bottom: 1px solid var(--m-border-soft);
}
.tmmr-mock--workload .tmmr-mock__paneltitle { font-size: 1.05em; }
.tmmr-mock--workload .tmmr-mock__table { padding: 0 0.4em; }
.tmmr-mock--workload .tmmr-mock__table thead th { padding-left: 0.6em; padding-right: 0.6em; }
.tmmr-mock--workload .tmmr-mock__table tbody td { padding-left: 0.6em; padding-right: 0.6em; }

.tmmr-mock__weeklabel {
  font-size: .7em; font-weight: 700; color: var(--m-text-muted);
  background: var(--m-border-soft);
  padding: 0.3em 0.7em;
  border-radius: var(--m-radius-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tmmr-mock__avatar--sm {
  width: 2.2em; height: 2.2em;
  font-size: .72em;
}

/* Single-driver workload strip above the table */
.tmmr-mock__driverstrip {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75em;
  padding: 0.7em 1em 0.85em;
  border-bottom: 1px solid var(--m-border-soft);
}
.tmmr-mock__workinfo { min-width: 0; }
.tmmr-mock__workhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5em;
}
.tmmr-mock__workhead .tmmr-mock__drivername {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--m-text-heading); font-weight: 600;
}
.tmmr-mock__wkcomp {
  font-size: .78em; font-weight: 700; color: var(--m-success);
  flex: none;
}
.tmmr-mock__wkbar {
  height: 0.4em;
  background: var(--m-border-soft);
  border-radius: var(--m-radius-pill);
  overflow: hidden;
  margin: 0.4em 0 0.3em;
}
.tmmr-mock__wkbar-fill {
  display: block; height: 100%;
  background: var(--m-primary);
  border-radius: inherit;
}
.tmmr-mock__wkbar-fill--warn  { background: var(--m-warning); }
.tmmr-mock__wkbar-fill--muted { background: var(--m-text-faint); }
.tmmr-mock__drivermeta {
  font-size: .78em; color: var(--m-text-muted);
}

/* Status dot inside a certbadge — picks up the badge's color */
.tmmr-mock__statusdot {
  display: inline-block;
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.4em;
  vertical-align: 0.12em;
}

/* Panel footer with footnote + pager */
.tmmr-mock__panelfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5em;
  padding: 0.65em 1em 0.75em;
  border-top: 1px solid var(--m-border-soft);
}
.tmmr-mock__footnote {
  font-size: .78em; color: var(--m-text-muted);
}
.tmmr-mock__pager { display: flex; gap: 0.25em; }
.tmmr-mock__pagebtn {
  min-width: 1.6em;
  text-align: center;
  font-size: .75em; font-weight: 600;
  padding: 0.25em 0.5em;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  background: #fff;
  color: var(--m-text-muted);
}
.tmmr-mock__pagebtn--active {
  background: var(--m-primary);
  border-color: var(--m-primary);
  color: #fff;
}

/* ============================================================
   SHELL H — Onboarding wizard. Structured checklist that
   walks a new driver through the 4 setup steps. Visualizes
   the "Driver Onboarding Workflow" section. Half-column ready.
   ============================================================ */
.tmmr-mock--onboard {
  aspect-ratio: auto;
  background: var(--m-page-bg);
  padding: 1em;
  display: flex; flex-direction: column;
}
.tmmr-mock--onboard .tmmr-mock__panelhead {
  padding: 0.85em 1em 0.7em;
}
.tmmr-mock--onboard .tmmr-mock__paneltitle { font-size: 1.05em; }
.tmmr-mock__progress {
  margin: 0 1em 0.4em;
  height: 0.4em;
  background: var(--m-border-soft);
  border-radius: var(--m-radius-pill);
  overflow: hidden;
}
.tmmr-mock__progress-fill {
  display: block; height: 100%;
  background: var(--m-primary);
  border-radius: inherit;
}
.tmmr-mock__steplist { padding: 0.4em 0 0.4em; }
.tmmr-mock__steprow {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75em;
  padding: 0.6em 1em;
}
.tmmr-mock__stepicon {
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--m-border-soft);
  color: var(--m-text-faint);
  flex: none;
}
.tmmr-mock__stepicon svg {
  width: 0.95em; height: 0.95em;
}
.tmmr-mock__steprow--done .tmmr-mock__stepicon {
  background: var(--m-success);
  color: #fff;
}
.tmmr-mock__steprow--active .tmmr-mock__stepicon {
  background: var(--m-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59,164,220,.15);
}
.tmmr-mock__stepinfo { min-width: 0; }
.tmmr-mock__stepname {
  font-size: .9em; font-weight: 600;
  color: var(--m-text-heading);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tmmr-mock__steprow:not(.tmmr-mock__steprow--done):not(.tmmr-mock__steprow--active) .tmmr-mock__stepname {
  color: var(--m-text-muted);
  font-weight: 500;
}
.tmmr-mock__stepmeta {
  font-size: .72em;
  color: var(--m-text-muted);
  margin-top: 0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   SHELL E — Overview (app frame, height follows content)
   Booking pipeline rail + clean week calendar. Used on the
   marketing site as a wide product screenshot.
   ============================================================ */
.tmmr-mock--overview { aspect-ratio: auto; }
.tmmr-mock--overview .tmmr-mock__app { height: auto; }
.tmmr-mock--overview .tmmr-mock__content {
  overflow: visible; display: block; padding: 1.4em;
  background: var(--m-page-bg);
}
.tmmr-mock--overview .tmmr-mock__sidebar { padding-top: 1.4em; }

/* Section card used inside the overview */
.tmmr-mock__section {
  background: #fff; border: 1px solid var(--m-border);
  border-radius: var(--m-radius); box-shadow: var(--m-shadow);
  padding: 1.2em 1.4em;
}
.tmmr-mock__section + .tmmr-mock__section { margin-top: 1.2em; }
.tmmr-mock__section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8em; margin-bottom: 1.1em;
}
.tmmr-mock__section-title { font-size: 1.25em; font-weight: 800; color: var(--m-text-heading); }
.tmmr-mock__section-meta { font-size: .85em; color: var(--m-text-muted); }

/* Booking pipeline rail */
.tmmr-mock__rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }
.tmmr-mock__rail::before {
  content: ""; position: absolute; top: 1.5em; left: 10%; right: 10%;
  height: 2px; background: var(--m-border); z-index: 0;
}
.tmmr-mock__node { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.tmmr-mock__node-dot {
  width: 3em; height: 3em; border-radius: 50%;
  display: grid; place-items: center; color: #fff; box-shadow: var(--m-shadow);
}
.tmmr-mock__node-dot .ic { width: 1.4em; height: 1.4em; }
/* Guard the line-icons against any theme-wide `svg { fill }` rule —
   inline fill/stroke attrs have the lowest specificity and could be overridden. */
.tmmr-mock .ic { fill: none; stroke: currentColor; }
.tmmr-mock__node-dot--booked   { background: #2F8FD6; }
.tmmr-mock__node-dot--itin     { background: #7C5CD6; }
.tmmr-mock__node-dot--tourday  { background: #E8843C; }
.tmmr-mock__node-dot--posttour { background: #16A07A; }
.tmmr-mock__node-dot--done     { background: #E0A82E; }
.tmmr-mock__node-label { font-size: .82em; font-weight: 600; color: var(--m-text-muted); margin-top: 0.55em; }
.tmmr-mock__node-count { font-size: 1.5em; font-weight: 800; color: var(--m-text-heading); line-height: 1.1; }
.tmmr-mock__node-pills { display: flex; gap: 0.3em; margin-top: 0.45em; flex-wrap: wrap; justify-content: center; }
.tmmr-mock__pill {
  font-size: .68em; font-weight: 700; color: #fff;
  padding: 0.15em 0.5em; border-radius: var(--m-radius-pill);
  display: inline-flex; align-items: center; gap: 0.25em;
}
.tmmr-mock__pill--booked   { background: #2F8FD6; }
.tmmr-mock__pill--itin     { background: #7C5CD6; }
.tmmr-mock__pill--tourday  { background: #E8843C; }
.tmmr-mock__pill--posttour { background: #16A07A; }
.tmmr-mock__rail-foot { margin-top: 1.1em; font-size: .82em; color: var(--m-danger); font-weight: 600; }

/* Week calendar grid */
.tmmr-mock__calbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; margin-bottom: 0.9em; }
.tmmr-mock__callegend { display: flex; align-items: center; gap: 0.9em; font-size: .78em; color: var(--m-text-muted); }
.tmmr-mock__callegend span { display: inline-flex; align-items: center; gap: 0.35em; }
.tmmr-mock__legdot { width: .7em; height: .7em; border-radius: 3px; flex: none; }
.tmmr-mock__calgrid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--m-border-soft); border-radius: var(--m-radius-sm); overflow: hidden; }
.tmmr-mock__calhead { font-size: .74em; font-weight: 700; letter-spacing: .04em; color: var(--m-text-faint); text-align: center; padding: 0.6em 0; border-bottom: 1px solid var(--m-border-soft); background: #FAFBFC; }
.tmmr-mock__calhead + .tmmr-mock__calhead,
.tmmr-mock__calcell { border-left: 1px solid var(--m-border-soft); }
.tmmr-mock__calcell { padding: 0.5em; min-height: 7.4em; }
.tmmr-mock__calcell:nth-child(7n+1) { border-left: none; }
.tmmr-mock__caldate { font-size: .82em; font-weight: 700; color: var(--m-text-body); margin-bottom: 0.45em; }
.tmmr-mock__caldate--active {
  background: var(--m-active-nav); color: #fff; width: 1.7em; height: 1.7em;
  border-radius: 50%; display: inline-grid; place-items: center;
}
.tmmr-mock__event {
  background: var(--m-info-bg); border-left: 3px solid var(--m-primary);
  border-radius: 5px; padding: 0.4em 0.5em; margin-bottom: 0.4em;
}
.tmmr-mock__event-title { font-size: .76em; font-weight: 700; color: var(--m-primary-dark); line-height: 1.2; overflow-wrap: break-word; }
.tmmr-mock__event-row { font-size: .7em; color: var(--m-text-muted); margin-top: 0.15em; display: flex; align-items: center; gap: 0.3em; }
.tmmr-mock__event-row .ic { width: .85em; height: .85em; flex: none; opacity: .8; }
.tmmr-mock__event--unassigned { border-left-color: var(--m-warning); background: var(--m-warning-bg); }
.tmmr-mock__event--unassigned .tmmr-mock__event-title { color: #92400E; }

/* ============================================================
   SHELL F — Standalone Booking Pipeline card (hero-sized)
   Self-contained: its own white card, header, and 5-node rail.
   Compact + landscape so it sits nicely in the homepage hero.
   ============================================================ */
.tmmr-mock--pipeline {
  aspect-ratio: auto;
  background: #fff;
  border-radius: var(--m-radius);
  padding: 1.5em 1.7em;
  /* Own the max-width here instead of relying on a page-level inline
     override (which the WP/Genesis cascade can defeat). */
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  /* Container-aware base with hard floor + ceiling so the pipeline
     never blows up to phone-sized icons on the live site. */
  font-size: clamp(11px, 2.4cqw, 14px);
}
/* Icons-only pipeline: no connector line, no counts, no header. */
.tmmr-mock--pipeline .tmmr-mock__rail::before { content: none; }
.tmmr-mock--pipeline .tmmr-mock__node-dot { width: 3.2em; height: 3.2em; }
/* Prevent "Tour Day" / "Post-Tour" from wrapping. */
.tmmr-mock--pipeline .tmmr-mock__node-label { white-space: nowrap; }
/* First (Booked) and last (Bill) labels: bold + black. */
.tmmr-mock--pipeline .tmmr-mock__node-label--strong {
  font-weight: 800;
  color: var(--m-text-heading);
}

/* ============================================================
   COMPONENT KIT  (shared across all shells)
   ============================================================ */

/* KPI tiles */
.tmmr-mock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.tmmr-mock__kpis--3 { grid-template-columns: repeat(3, 1fr); }
.tmmr-mock__kpi {
  background: #fff; border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm); padding: 0.85em 0.95em;
}
.tmmr-mock__kpi-label {
  font-size: .72em; text-transform: uppercase; letter-spacing: .04em;
  color: var(--m-text-muted); font-weight: 600;
}
.tmmr-mock__kpi-value { font-size: 1.7em; font-weight: 800; color: var(--m-text-heading); margin-top: 0.15em; }
.tmmr-mock__kpi-trend { font-size: .78em; font-weight: 600; margin-top: 0.1em; }
.tmmr-mock__kpi-trend--up { color: var(--m-success); }
.tmmr-mock__kpi-trend--down { color: var(--m-danger); }

/* Generic card */
.tmmr-mock__card {
  background: #fff; border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm); padding: 1em;
}
.tmmr-mock__card-title { font-size: 1em; font-weight: 700; color: var(--m-text-heading); margin: 0 0 0.7em; }

/* Status badges (match real Badge.jsx variants) */
.tmmr-mock__badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: .78em; font-weight: 600; padding: 0.2em 0.7em;
  border-radius: var(--m-radius-pill);
}
.tmmr-mock__badge--success { background: var(--m-success-bg); color: var(--m-success); }
.tmmr-mock__badge--warning { background: var(--m-warning-bg); color: var(--m-warning); }
.tmmr-mock__badge--danger  { background: var(--m-danger-bg);  color: var(--m-danger); }
.tmmr-mock__badge--info    { background: var(--m-info-bg);    color: var(--m-primary-dark); }
.tmmr-mock__badge--neutral { background: #F3F4F6;             color: var(--m-text-muted); }
.tmmr-mock__badge .dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }

/* Buttons (match real Button.jsx) */
.tmmr-mock__btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: .85em; font-weight: 600; padding: 0.45em 0.95em;
  border-radius: var(--m-radius-sm); border: 1px solid transparent;
  white-space: nowrap;
}
.tmmr-mock__btn--primary   { background: var(--m-primary); color: #fff; }
.tmmr-mock__btn--secondary { background: #fff; color: var(--m-primary-dark); border-color: var(--m-primary); }
.tmmr-mock__btn--ghost     { background: transparent; color: var(--m-text-muted); }

/* Tables */
.tmmr-mock__table { width: 100%; border-collapse: collapse; font-size: .85em; }
.tmmr-mock__table thead th {
  text-align: left; font-size: .82em; text-transform: uppercase; letter-spacing: .03em;
  color: var(--m-text-muted); font-weight: 600;
  padding: 0.55em 0.7em; border-bottom: 1px solid var(--m-border);
}
.tmmr-mock__table tbody td {
  padding: 0.6em 0.7em; border-bottom: 1px solid var(--m-border-soft);
  color: var(--m-text-body);
}
.tmmr-mock__table tbody tr:last-child td { border-bottom: none; }
.tmmr-mock__t-strong { color: var(--m-text-heading); font-weight: 600; }
.tmmr-mock__t-sub { color: var(--m-text-muted); font-size: .9em; }

/* Pipeline stages */
.tmmr-mock__pipeline { display: flex; align-items: center; gap: 0.3em; }
.tmmr-mock__stage {
  flex: 1; text-align: center; padding: 0.6em 0.4em;
  border-radius: var(--m-radius-sm); background: #fff; border: 1px solid var(--m-border);
}
.tmmr-mock__stage-count { font-size: 1.5em; font-weight: 800; color: var(--m-text-heading); }
.tmmr-mock__stage-name { font-size: .76em; color: var(--m-text-muted); font-weight: 600; }
.tmmr-mock__stage--active { border-color: var(--m-primary); background: var(--m-info-bg); }
.tmmr-mock__stage--active .tmmr-mock__stage-count { color: var(--m-primary-dark); }
.tmmr-mock__stage-arrow { color: var(--m-text-faint); font-size: 1.1em; flex: none; }

/* Simple bar chart — bars in a flex track, labels in a separate row below.
   No negative positioning, so nothing ever overflows the card. */
.tmmr-mock__card--chart { display: flex; flex-direction: column; overflow: hidden; }
.tmmr-mock__card--chart .tmmr-mock__card-title,
.tmmr-mock__card--chart > .row { flex: none; }
.tmmr-mock__chart { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 0.6em; }
.tmmr-mock__bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 0.6em; }
.tmmr-mock__bar { flex: 1; background: var(--m-primary-light); border-radius: 4px 4px 0 0; min-height: 2px; }
.tmmr-mock__bar--accent { background: var(--m-primary); }
.tmmr-mock__xlabels { display: flex; gap: 0.6em; margin-top: 0.45em; flex: none; }
.tmmr-mock__xlabels span { flex: 1; text-align: center; font-size: .72em; color: var(--m-text-muted); }

/* Progress / donut helpers */
.tmmr-mock__progress { height: 0.5em; background: var(--m-border); border-radius: var(--m-radius-pill); overflow: hidden; }
.tmmr-mock__progress > span { display: block; height: 100%; background: var(--m-primary); border-radius: inherit; }

/* Checklist rows */
.tmmr-mock__check { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0; font-size: .9em; }
.tmmr-mock__check .box {
  width: 1.2em; height: 1.2em; border-radius: 5px; flex: none;
  display: grid; place-items: center; font-size: .8em; color: #fff;
}
.tmmr-mock__check .box--done { background: var(--m-success); }
.tmmr-mock__check .box--todo { background: #fff; border: 1.5px solid var(--m-border); }

/* Avatars */
.tmmr-mock__avatar {
  width: 2em; height: 2em; border-radius: 50%; flex: none;
  background: var(--m-info-bg); color: var(--m-primary-dark);
  display: grid; place-items: center; font-size: .8em; font-weight: 700;
}

/* Utility */
.tmmr-mock .row { display: flex; align-items: center; gap: 0.6em; }
.tmmr-mock .between { justify-content: space-between; }
.tmmr-mock .col { display: flex; flex-direction: column; }
.tmmr-mock .gap-sm { gap: 0.4em; }
.tmmr-mock .gap-md { gap: 0.8em; }
.tmmr-mock .mt { margin-top: 0.9em; }
.tmmr-mock .mt-sm { margin-top: 0.5em; }
.tmmr-mock .muted { color: var(--m-text-muted); }
.tmmr-mock .faint { color: var(--m-text-faint); }
.tmmr-mock .strong { color: var(--m-text-heading); font-weight: 700; }
.tmmr-mock .center { text-align: center; }
.tmmr-mock .fill { flex: 1; }

/* ============================================================
   SHELL G — Client <-> Operator conversation (Contact hero)
   Horizontal, simple: a message thread showing the back-and-forth
   between the operator and their client. No images.
   ============================================================ */
.tmmr-mock--comms {
  /* Horizontal hero: wide, content-height, centered — never stretches
     the page. Own the max-width here so the WP cascade can't widen it. */
  aspect-ratio: auto;
  width: 100%;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  font-size: clamp(11px, 1.45cqw, 15px);
}
/* Guard the header icon against any theme-wide `svg { fill }` rule. */
.tmmr-mock--comms .ic { fill: none; stroke: currentColor; }

.tmmr-mock__comms-head {
  display: flex; align-items: center; gap: 0.65em;
  padding: 1em 1.4em; border-bottom: 1px solid var(--m-border-soft);
}
.tmmr-mock__comms-head .ic { width: 1.35em; height: 1.35em; color: var(--m-primary); flex: none; }
.tmmr-mock__comms-title { font-weight: 700; color: var(--m-text-heading); font-size: 1em; line-height: 1.2; }
.tmmr-mock__comms-sub { font-size: .8em; color: var(--m-text-muted); margin-top: 0.1em; }

.tmmr-mock__thread {
  display: flex; flex-direction: column; gap: 1em;
  padding: 1.4em 1.4em 0.8em;
}
.tmmr-mock__msg { display: flex; align-items: flex-end; gap: 0.65em; max-width: 74%; }
.tmmr-mock__msg--op { align-self: flex-start; }
.tmmr-mock__msg--client { align-self: flex-end; flex-direction: row-reverse; }
.tmmr-mock__msg-avatar {
  width: 2.2em; height: 2.2em; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-size: .72em; font-weight: 800; letter-spacing: .02em;
}
.tmmr-mock__msg--op .tmmr-mock__msg-avatar { background: var(--m-primary); }
.tmmr-mock__msg--client .tmmr-mock__msg-avatar { background: var(--m-success); }
.tmmr-mock__bubble {
  padding: 0.75em 0.95em; border-radius: 16px;
  font-size: .92em; line-height: 1.45; color: var(--m-text-body);
}
.tmmr-mock__msg--op .tmmr-mock__bubble {
  background: var(--m-info-bg); border-bottom-left-radius: 5px;
}
.tmmr-mock__msg--client .tmmr-mock__bubble {
  background: var(--m-success-bg); border-bottom-right-radius: 5px;
}
.tmmr-mock__bubble-meta {
  display: flex; align-items: center; gap: 0.5em; margin-top: 0.5em; flex-wrap: wrap;
}
.tmmr-mock__msg--client .tmmr-mock__bubble-meta { justify-content: flex-end; }
.tmmr-mock__bubble-time { font-size: .76em; color: var(--m-text-faint); }

.tmmr-mock__compose {
  display: flex; align-items: center; gap: 0.7em;
  margin: 0.7em 1.4em 1.4em;
  padding: 0.5em 0.5em 0.5em 1.1em;
  border: 1px solid var(--m-border); border-radius: var(--m-radius-pill);
  background: #fff;
}
.tmmr-mock__compose-ph { flex: 1; color: var(--m-text-faint); font-size: .9em; }
.tmmr-mock__compose-send {
  background: var(--m-primary); color: #fff; font-weight: 700; font-size: .85em;
  padding: 0.55em 1.2em; border-radius: var(--m-radius-pill); flex: none;
}

/* ============================================================
   SHELL K — Incoming tour offer modal (Operator Network)
   ============================================================ */
.tmmr-mock--offer { background: rgba(0,0,0,.35); aspect-ratio: 4 / 5; }
.tmmr-mock__offerwrap { height: 100%; display: grid; place-items: center; padding: 1em; }
.tmmr-mock__offercard {
  width: 88%; background: #fff;
  border-radius: var(--m-radius); box-shadow: var(--m-shadow-lg);
  overflow: hidden;
}
.tmmr-mock__offerhead {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1em 1.2em 0;
}
.tmmr-mock__offertitle { font-size: 1.2em; font-weight: 700; color: var(--m-text-heading); }
.tmmr-mock__offerfrom { font-size: .82em; color: var(--m-text-muted); margin-top: 0.1em; }
.tmmr-mock__offerclose {
  font-size: 1.4em; line-height: 1; color: var(--m-text-faint); cursor: pointer;
}
.tmmr-mock__offerbody { padding: 0.8em 1.2em; }
.tmmr-mock__offerrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.45em 0; border-bottom: 1px solid var(--m-border-soft);
  font-size: .88em;
}
.tmmr-mock__offerrow:last-child { border-bottom: none; }
.tmmr-mock__offerrow span:first-child { color: var(--m-text-muted); }
.tmmr-mock__offerrow span:last-child { font-weight: 600; color: var(--m-text-heading); }
.tmmr-mock__offerrow--highlight span:last-child { font-size: 1.05em; }
.tmmr-mock__offeractions { padding: 0 1.2em 1.2em; display: flex; flex-direction: column; gap: 0.45em; }
.tmmr-mock__offerbtn {
  border: none; border-radius: var(--m-radius-sm); font-family: inherit;
  font-size: .88em; font-weight: 700; padding: 0.6em 1em; cursor: pointer;
  text-align: center; width: 100%;
}
.tmmr-mock__offerbtn--accept { background: var(--m-primary); color: #fff; }
.tmmr-mock__offerbtn-row { display: flex; gap: 0.45em; }
.tmmr-mock__offerbtn--counter {
  background: #fff; color: var(--m-primary); border: 1.5px solid var(--m-border); flex: 1;
}
.tmmr-mock__offerbtn--decline {
  background: var(--m-danger); color: #fff; flex: 1;
}