/* Tokens taken directly from the real cleanwhale.se (checked live, not
   guessed): header/button blue rgb(36,87,198) = #2457c6, darker blue
   #1c47a6 used for hover per base.css, price-tag yellow #ffc73b, black
   headline/body text. futura-pt is the site's real Adobe Fonts (Typekit)
   font, kit kei7aql — Typekit authorizes by domain, and /live shares the
   cleanwhale.se domain, so the actual licensed webfont loads here too.
   No navy, no serif display font — those were /ratings' own sub-brand
   choices, not cleanwhale.se's. */
:root {
  --cw-blue: #2457c6;
  --cw-blue-dark: #1c47a6;
  --cw-yellow: #ffc73b;
  --cw-bg: #ffffff;
  --cw-card-bg: #fafafa;
  --cw-text: #000000;
  --cw-text-muted: rgba(0, 0, 0, .6);
  --cw-border: rgba(0, 0, 0, .16);
  --cw-green: #59b78b;
  --cw-red: #e4410d;
  --cw-blue-tint: #eaf0fc;
  --cw-red-tint: #fbeaea;
  --font-display: "futura-pt", sans-serif;
  --font-sans: "futura-pt", sans-serif;
  --shadow-sm: 0 0 .7vw rgba(0, 0, 0, .05);
  --shadow-md: 0 0 1.6vw rgba(0, 0, 0, .07);
  --shadow-lg: 0 0 2.6vw rgba(0, 0, 0, .12);
  --cw-radius: .3vw;
}

* { box-sizing: border-box; }

body.cw-live {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cw-bg);
  color: var(--cw-text);
  -webkit-font-smoothing: antialiased;
}

/* Header — solid brand blue, matches the real cleanwhale.se header exactly
   (no gradient, no dark navy — that was never a real site color). */
/* Light app-console header, matching the ops-dashboard reference: white bar,
   brand-blue logo disc and section links, one solid CTA. */
.cw-live-header { background: #fff; color: var(--cw-text); border-bottom: 1px solid var(--cw-border); }
/* The rest of the brand uses vw sizing, which is fine for a marketing page
   but makes a data dashboard balloon on a wide monitor — at 2560px a 2.5vw
   heading is 64px and the whole board reads as stretched. The board is
   capped and switched to fixed units instead. */
.cw-live-header-inner {
  width: 88vw; max-width: 1480px; margin: 0 auto; padding: 12px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.cw-live-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.cw-live-logo-disc {
  width: 38px; height: 38px; border-radius: 50%; background: var(--cw-blue);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.cw-live-logo-disc img { height: 20px; width: auto; display: block; }
.cw-live-logo-tag {
  color: var(--cw-blue); font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em;
}
.cw-live-nav { display: flex; align-items: center; gap: 22px; font-size: .92rem; font-weight: 700; }
.cw-live-nav a { color: rgba(0, 0, 0, .62); text-decoration: none; transition: color .15s; }
.cw-live-nav a:hover { color: var(--cw-blue); }
.cw-live-nav-cta {
  background: var(--cw-blue); color: #fff !important; padding: 9px 18px; border-radius: 999px;
  font-weight: 700; transition: background .15s ease, transform .15s ease;
}
.cw-live-nav-cta:hover { background: var(--cw-blue-dark); transform: translateY(-1px); }

.cw-live-main { width: 88vw; max-width: 1480px; margin: 0 auto; padding: 3vw 0 5vw; position: relative; }
.cw-live-main::before {
  content: "";
  position: absolute;
  top: 1vw;
  left: 3vw;
  width: 44vw;
  height: 28vw;
  background: url("https://cleanwhale.se/assets/frontend/images/icons/main-bg.svg") center / contain no-repeat;
  opacity: .32;
  pointer-events: none;
  z-index: -1;
}

/* Hero */
.cw-live-product-hero {
  min-height: 33vw;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(31rem, 1.14fr);
  align-items: center;
  gap: 4vw;
  margin-bottom: 28px;
}
.cw-live-eyebrow { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: var(--cw-blue); }
.cw-live-heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 4vw, 4.7rem); line-height: 1; margin: 0 0 14px; color: var(--cw-text); }
.cw-live-intro { color: var(--cw-text); opacity: .6; max-width: 38rem; line-height: 1.6; margin: 0 0 10px; font-size: 1.02rem; }
.cw-live-updated { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--cw-text-muted); }
.cw-live-updated svg { flex-shrink: 0; opacity: 0.7; }
.cw-live-updated strong { color: var(--cw-text); font-weight: 700; }
.cw-live-hero-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.cw-live-hero-links a {
  min-height: 42px;
  padding: 10px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10vw;
  background: var(--cw-blue);
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.cw-live-hero-links a:hover { background: var(--cw-blue-dark); }
.cw-live-hero-links a + a { background: #fff; color: var(--cw-blue); box-shadow: var(--shadow-sm); }
.cw-live-hero-links a + a:hover { color: var(--cw-blue-dark); box-shadow: var(--shadow-md); }
.cw-live-hero-empty {
  min-height: 240px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cw-radius);
  background: var(--cw-card-bg);
  box-shadow: var(--shadow-lg);
  color: var(--cw-text-muted);
  line-height: 1.6;
}

/* Risk hero — the single most important number on the page, given its own
   visual weight above the regular totals strip rather than buried as one
   tile among several. */
.cw-live-risk-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cw-red-tint);
  border-radius: var(--cw-radius);
  padding: 22px 26px;
  margin: 28px 0 20px;
  flex-wrap: wrap;
}
.cw-live-product-hero .cw-live-risk-hero {
  min-height: 265px;
  margin: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-content: center;
  align-items: center;
  background: var(--cw-card-bg);
  box-shadow: var(--shadow-lg);
}
.cw-live-product-hero .cw-live-risk-hero-icon { grid-row: 1; grid-column: 1; }
.cw-live-product-hero .cw-live-risk-hero-value { grid-row: 1; grid-column: 2; }
.cw-live-product-hero .cw-live-risk-hero-copy { grid-column: 1 / -1; margin-top: 16px; }
.cw-live-product-hero .cw-live-risk-hero-note { max-width: none; }
.cw-live-risk-hero-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(197, 52, 52, 0.12);
  color: var(--cw-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-live-risk-hero-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--cw-red);
  line-height: 1;
  flex-shrink: 0;
}
/* Good state: a low problem share is good news and must not look like an
   alarm. Text green is #1f7a57, NOT the brand --cw-green (#59b78b measures
   2.45:1 on white and fails AA; this one is 5.28:1) — the same accessible
   pairing DESIGN.md documents as --cw99-green-dark for the board. */
.cw-live-risk-hero.is-good .cw-live-risk-hero-icon { background: rgba(31, 122, 87, .1); color: #1f7a57; }
.cw-live-risk-hero.is-good .cw-live-risk-hero-value { color: #1f7a57; }
/* The denominator: same baseline as the number, deliberately quiet, so the
   eye reads "3.6 out of 100" as one phrase rather than two figures. */
.cw-live-risk-hero-outof {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--cw-text-muted);
  margin-left: .45rem;
  white-space: nowrap;
}
.cw-live-risk-hero-label { font-size: 1.05rem; font-weight: 700; color: var(--cw-text); margin-bottom: 6px; }
.cw-live-risk-hero-note { font-size: 0.84rem; color: var(--cw-text-muted); line-height: 1.55; margin: 0; max-width: 620px; }
.cw-live-metric-risk { color: var(--cw-red) !important; }

/* Global totals strip */
.cw-live-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 32px 0 28px; }
.cw-live-total-tile {
  display: flex; align-items: center; gap: 14px;
  background: var(--cw-card-bg); border-radius: var(--cw-radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.cw-live-total-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--cw-blue-tint); color: var(--cw-blue);
  display: flex; align-items: center; justify-content: center;
}
.cw-live-total-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--cw-blue); line-height: 1.15; }
.cw-live-total-value small { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; color: var(--cw-text-muted); }
.cw-live-total-label { font-size: 0.8rem; color: var(--cw-text-muted); font-weight: 700; margin-top: 2px; }

/* Pulse chart (line, single blue series) + country breakdown side panel,
   laid out as a two-column row matching the reference: chart card ~62%,
   breakdown card ~38%, stacking on narrow viewports. */
.cw-live-pulse-row { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; margin-bottom: 24px; align-items: stretch; }

.cw-live-pulse-card { background: var(--cw-card-bg); border-radius: var(--cw-radius); padding: 22px 24px 14px; box-shadow: var(--shadow-sm); }
.cw-live-pulse-header { margin-bottom: 4px; }
.cw-live-pulse-current-label { font-size: 0.85rem; font-weight: 700; color: var(--cw-text-muted); }
.cw-live-pulse-window-note { font-size: 0.8rem; color: var(--cw-text-muted); margin-top: 8px; }
.cw-live-pulse-empty { font-size: 0.86rem; color: var(--cw-text-muted); line-height: 1.55; margin: 6px 0 4px; max-width: 640px; }

.cw-live-pulse-tabs { display: flex; gap: 4px; margin: 14px 0 6px; border-bottom: 1px solid var(--cw-border); }
.cw-live-pulse-tab {
  border: none;
  background: none;
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cw-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cw-live-pulse-tab:hover { color: var(--cw-text); }
.cw-live-pulse-tab.is-active { color: var(--cw-blue); border-bottom-color: var(--cw-blue); }
.cw-live-pulse-card.is-loading .cw-live-pulse-chart-wrap { opacity: 0.45; transition: opacity 0.1s ease; }

.cw-live-pulse-chart-area { position: relative; }
.cw-live-pulse-chart-wrap { width: 100%; }
.cw-live-pulse-svg { display: block; width: 100%; height: auto; }
.cw-live-pulse-grid { stroke: var(--cw-border); stroke-width: 1; }
.cw-live-pulse-axis-label { font-size: 9px; fill: var(--cw-text-muted); font-family: var(--font-sans); }
.cw-live-pulse-line { stroke: var(--cw-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-live-pulse-area { fill: var(--cw-blue); opacity: 0.08; }
.cw-live-pulse-gap { stroke: rgba(36, 87, 198, .3); stroke-width: 1.4; stroke-dasharray: 3 4; }
.cw-live-pulse-dot { fill: #fff; stroke: var(--cw-blue); stroke-width: 2; }

/* Floating "Current (…)" callout, pinned top-right of the chart area. */
.cw-live-pulse-current-box {
  position: absolute; top: 4px; right: 0; z-index: 2;
  background: #fff; border-radius: var(--cw-radius);
  padding: 10px 16px; box-shadow: var(--shadow-md); text-align: right; min-width: 130px;
}
.cw-live-pulse-current-time { font-size: 0.72rem; color: var(--cw-text-muted); font-weight: 700; }
.cw-live-pulse-current-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--cw-text); line-height: 1.2; }
.cw-live-pulse-current-value small { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 500; color: var(--cw-text-muted); }
.cw-live-pulse-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 700; margin-top: 2px; }
.cw-live-pulse-trend-up { color: var(--cw-blue); }
.cw-live-pulse-trend-down { color: var(--cw-red); }
.cw-live-pulse-trend svg { flex-shrink: 0; }

@media (max-width: 760px) {
  .cw-live-pulse-current-box { position: static; margin-bottom: 10px; text-align: left; box-shadow: none; border: none; background: var(--cw-bg); }
}

/* Country breakdown side panel */
.cw-live-breakdown-card { background: var(--cw-card-bg); border-radius: var(--cw-radius); padding: 22px 22px 18px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.cw-live-breakdown-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--cw-text); }
.cw-live-breakdown-sub { font-size: 0.78rem; color: var(--cw-text-muted); font-weight: 700; margin-bottom: 10px; }
.cw-live-breakdown-list { display: flex; flex-direction: column; flex: 1; }
.cw-live-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--cw-border); }
.cw-live-breakdown-row:last-child { border-bottom: none; }
.cw-live-breakdown-name { font-size: 0.88rem; font-weight: 700; color: var(--cw-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-live-breakdown-completed { font-size: 0.82rem; color: var(--cw-text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cw-live-breakdown-rating {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 0.76rem; font-weight: 700; color: var(--cw-blue);
  background: var(--cw-blue-tint); border-radius: 999px; padding: 3px 9px;
}
.cw-live-breakdown-rating svg { color: var(--cw-yellow); flex-shrink: 0; }
.cw-live-breakdown-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 0.84rem; font-weight: 700; color: var(--cw-blue); text-decoration: none;
}
.cw-live-breakdown-link:hover { color: var(--cw-blue-dark); }
.cw-live-breakdown-link svg { flex-shrink: 0; }

/* About-the-data summary strip */
.cw-live-about-box {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  background: var(--cw-blue-tint); border-radius: 14px; padding: 16px 20px; margin-bottom: 44px;
}
.cw-live-about-icon { flex-shrink: 0; color: var(--cw-blue); margin-top: 1px; }
.cw-live-about-text { flex: 1; min-width: 220px; font-size: 0.84rem; color: #1c2b4d; line-height: 1.55; }
.cw-live-about-text strong { color: var(--cw-text); }
.cw-live-about-link {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; align-self: center;
  font-size: 0.84rem; font-weight: 700; color: var(--cw-blue); text-decoration: none; white-space: nowrap;
}
.cw-live-about-link:hover { color: var(--cw-blue-dark); }
.cw-live-about-link svg { flex-shrink: 0; }

/* Section headings */
.cw-live-section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0 0 6px; color: var(--cw-text); }
.cw-live-section-note { font-size: 0.86rem; color: var(--cw-text-muted); margin: 0 0 20px; line-height: 1.55; max-width: 680px; }

/* Country cards */
.cw-live-country-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 48px; }
.cw-live-country-card { background: var(--cw-card-bg); border-radius: var(--cw-radius); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.cw-live-country-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cw-live-country-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--cw-text); margin: 0; }
.cw-live-country-period { font-size: 0.82rem; color: var(--cw-text-muted); }

.cw-live-metric-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cw-live-metric { display: flex; flex-direction: column; gap: 3px; }
.cw-live-metric-value { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--cw-text); }
.cw-live-metric-value.is-muted { color: var(--cw-text-muted); font-family: var(--font-sans); font-weight: 500; font-size: 1.1rem; }
.cw-live-metric-label { font-size: 0.78rem; color: var(--cw-text-muted); font-weight: 700; }

.cw-live-balance-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--cw-border); margin-bottom: 6px; }
.cw-live-balance-ok { background: var(--cw-blue); }
.cw-live-balance-problem { background: var(--cw-red); }
.cw-live-balance-legend { display: flex; gap: 16px; font-size: 0.82rem; color: var(--cw-text-muted); flex-wrap: wrap; }
.cw-live-balance-legend .ok { color: var(--cw-blue); font-weight: 700; }
.cw-live-balance-legend .problem { color: var(--cw-red); font-weight: 700; }

.cw-live-cities-toggle { margin-top: 14px; }
.cw-live-cities-toggle summary { cursor: pointer; font-size: 0.86rem; font-weight: 700; color: var(--cw-blue); list-style: none; }
.cw-live-cities-toggle summary::-webkit-details-marker { display: none; }
.cw-live-city-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cw-live-city-table { width: 100%; min-width: 690px; border-collapse: collapse; margin-top: 12px; font-size: 0.86rem; }
.cw-live-city-table th, .cw-live-city-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cw-border); }
.cw-live-city-table th { color: var(--cw-text-muted); font-weight: 700; font-size: 0.78rem; }
.cw-live-city-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Review stream */
.cw-live-stream-list { display: flex; flex-direction: column; gap: 0; border-radius: var(--cw-radius); overflow: hidden; background: var(--cw-card-bg); box-shadow: var(--shadow-sm); max-height: 520px; overflow-y: auto; }
.cw-live-stream-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--cw-border); }
.cw-live-stream-row:last-child { border-bottom: none; }
.cw-live-stream-stars { flex-shrink: 0; margin-top: 3px; }
.cw-live-stream-stars-bg { fill: #e3e1d8; }
.cw-live-stream-stars-fg { fill: var(--cw-yellow); }
.cw-live-stream-meta { flex: 1; min-width: 0; font-size: 0.9rem; }
.cw-live-stream-meta-top { display: flex; flex-wrap: wrap; }
.cw-live-stream-city { font-weight: 700; color: var(--cw-text); }
.cw-live-stream-type { color: var(--cw-text-muted); }
.cw-live-stream-comment { margin-top: 4px; font-size: 0.86rem; color: #333; line-height: 1.45; font-style: italic; }
.cw-live-stream-time { font-size: 0.8rem; color: var(--cw-text-muted); flex-shrink: 0; margin-top: 3px; }
.cw-live-stream-empty { padding: 24px 20px; color: var(--cw-text-muted); font-size: 0.9rem; }

/* Source disclaimers */
.cw-live-disclaimer { font-size: 0.8rem; color: var(--cw-text-muted); margin-top: 6px; }
.cw-live-source-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: #000; background: var(--cw-yellow); border-radius: 999px; padding: 3px 10px; }

/* Footer is the single dark surface. */
.cw-live-footer { background: #242424; color: #fff; margin-top: 56px; }
.cw-live-footer-inner { width: 88vw; margin: 0 auto; padding: 2.6vw 0 3vw; }
.cw-live-footer-logo { display: block; width: 9vw; height: auto; margin-bottom: 1.5vw; }
.cw-live-footer p { font-size: 0.86rem; color: #fff; opacity: .6; line-height: 1.6; width: 42vw; margin: 0 0 18px; }
.cw-live-footer-back { color: var(--cw-yellow); text-decoration: none; font-size: 0.9rem; font-weight: 700; }
.cw-live-footer-back:hover { color: var(--cw-blue-dark); text-decoration: underline; }

/* "Ask Kit" — embedded page section, not a floating popup. Talks directly
   to the existing CleanWhale AI agent's own endpoints (/agent/api/chat for
   text, /agent/api/rtc-session + OpenAI Realtime/WebRTC for voice — same
   origin in prod). This is a second, lighter front-end for that one real
   backend, not a new agent. */
.cw-live-agent {
  margin: 56px 0 8px;
  padding: 40px 32px;
  background: var(--cw-blue);
  border-radius: var(--cw-radius);
  text-align: center;
}
.cw-live-agent-greeting { margin-bottom: 22px; transition: opacity 0.15s ease, max-height 0.2s ease; overflow: hidden; }
.cw-live-agent-greeting.is-hidden { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
.cw-live-agent-heading { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; margin: 0 0 8px; }
.cw-live-agent-sub { color: rgba(255, 255, 255, 0.8); font-size: 0.96rem; margin: 0; }

.cw-live-agent-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto 14px;
  text-align: left;
  max-height: 420px;
  overflow-y: auto;
}
.cw-live-agent-messages:empty { display: none; }
.cw-live-agent-bubble {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.cw-live-agent-bubble-user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.94);
  color: var(--cw-text);
  border-bottom-right-radius: 4px;
}
.cw-live-agent-bubble-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-bottom-left-radius: 4px;
}
.cw-live-agent-bubble-hint { align-self: flex-start; background: none; color: var(--cw-yellow); font-size: 0.82rem; font-weight: 700; padding: 0 4px; }
.cw-live-agent-typing { opacity: 0.7; font-style: italic; }

.cw-live-agent-status {
  min-height: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cw-yellow);
  margin-bottom: 8px;
}
.cw-live-agent-status:empty { display: none; }

.cw-live-agent-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 999px;
  padding: 6px 6px 6px 8px;
  box-shadow: 0 0 1.5vw rgba(0, 0, 0, .15);
}
.cw-live-agent-mic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--cw-bg);
  color: var(--cw-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cw-live-agent-mic:hover { background: #ece9e2; }
.cw-live-agent-mic.is-live { background: var(--cw-red); color: #fff; animation: cw-live-agent-pulse 1.4s ease-in-out infinite; }
@keyframes cw-live-agent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 52, 52, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(197, 52, 52, 0); }
}
.cw-live-agent-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 6px;
  font-size: 0.94rem;
  font-family: var(--font-sans);
  color: var(--cw-text);
  background: transparent;
  min-width: 0;
}
.cw-live-agent-send {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--cw-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cw-live-agent-send:hover { background: var(--cw-blue-dark); }
.cw-live-agent-send:disabled, .cw-live-agent-input:disabled { opacity: 0.6; cursor: default; }

.cw-live-agent-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  transition: opacity 0.15s ease, max-height 0.2s ease;
  overflow: hidden;
}
.cw-live-agent-suggestions.is-hidden { opacity: 0; max-height: 0; margin: 0; pointer-events: none; }
.cw-live-agent-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--cw-yellow);
  color: #000;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cw-live-agent-suggestion:hover { background: #ffea84; }
.cw-live-agent-suggestion svg { flex-shrink: 0; }

/* LIVE badge next to the eyebrow */
.cw-live-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  background: rgba(89, 183, 139, 0.14); color: var(--cw-green);
  border-radius: 999px; padding: 2px 9px 2px 7px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  vertical-align: middle;
}
.cw-live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--cw-green); display: inline-block; animation: cw-live-badge-pulse 1.8s ease-in-out infinite; }
@keyframes cw-live-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Operational footprint — city cards ranked by volume, real data only (no
   fabricated cleaner counts or stock photography — see the section note
   in home.ejs for why). */
.cw-live-city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 44px; }
.cw-live-city-card {
  background: var(--cw-card-bg); border: 1px solid var(--cw-border); border-radius: var(--cw-radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cw-live-city-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cw-live-city-card-banner {
  height: 64px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-blue-dark) 100%); color: rgba(255, 255, 255, 0.85);
}
.cw-live-city-card-banner.has-photo { padding: 0; }
.cw-live-city-card-banner.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-live-city-card-body { padding: 14px 16px 16px; }
.cw-live-photo-credits { margin: 1.2rem 0 .8rem; font-size: .72rem; }
.cw-live-photo-credits summary { cursor: pointer; opacity: .75; }
.cw-live-photo-credits ul { margin: .6rem 0 0; padding-left: 1.1rem; line-height: 1.6; opacity: .7; }
.cw-live-photo-credits a { color: inherit; }
.cw-live-city-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--cw-text); }
.cw-live-city-card-country { font-size: 0.78rem; color: var(--cw-text-muted); margin-bottom: 10px; }
.cw-live-city-card-stats { display: flex; gap: 18px; }
.cw-live-city-card-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cw-blue); }
.cw-live-city-card-label { display: block; font-size: 0.7rem; color: var(--cw-text-muted); font-weight: 700; }

/* ── Live ops board ──────────────────────────────────────────────────────
   The dashboard at the top of the page: stat tiles, map, today's board.
   Panels sit on a very light blue field so the white cards read as raised,
   matching the ops-console look while staying on the brand's flat blue. */
.cw-board { margin: 0 0 40px; }
.cw-board-top {
  display: grid; grid-template-columns: 1fr 2.35fr; gap: 24px;
  align-items: center; margin-bottom: 18px;
}
.cw-board-title {
  font-family: var(--font-display); font-weight: 700; font-size: 2rem;
  line-height: 1.1; margin: 0 0 10px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cw-board-sub { margin: 0; font-size: .92rem; color: var(--cw-text-muted); line-height: 1.5; max-width: 34ch; }

.cw-board-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.cw-board-tile {
  background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 40, 90, .06), 0 6px 18px rgba(16, 40, 90, .05);
  padding: 14px 15px;
  display: flex; align-items: flex-start; gap: 9px; min-width: 0;
}
.cw-board-tile-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cw-blue-tint); color: var(--cw-blue);
  display: flex; align-items: center; justify-content: center;
}
.cw-board-tile-body { min-width: 0; }
.cw-board-tile-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .04em;
  color: var(--cw-text-muted); text-transform: uppercase;
  line-height: 1.25; margin-bottom: .1rem;
}
.cw-board-tile-value {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  line-height: 1.2; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.cw-board-tile-note { font-size: .68rem; color: var(--cw-text-muted); }
.cw-board-delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; font-weight: 700; }
.cw-board-delta.is-up { color: var(--cw-green); }
.cw-board-delta.is-down { color: var(--cw-red); }
.cw-board-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cw-green);
  animation: cw-board-pulse 2s ease-in-out infinite;
}
@keyframes cw-board-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* The map is a full-bleed stage; filters, the live feed, the legend and the
   zoom control float ON it as cards, as in the reference layout. */
.cw-board-stage {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--cw-border); box-shadow: var(--shadow-sm);
  background: #f3f7fe; min-height: 560px;
}
.cw-board-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: .7rem;
}
.cw-board-panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.cw-board-viewall { font-size: .78rem; font-weight: 700; color: var(--cw-blue); text-decoration: none; }
.cw-board-viewall:hover { text-decoration: underline; }

/* Floating legend card (was a filter rail — see home.ejs) */
.cw-board-legendcard {
  position: absolute; top: 18px; left: 18px; width: 210px; z-index: 3;
  background: #fff; border: 1px solid var(--cw-border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: .9rem;
}
.cw-board-legendcard-title {
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  margin-bottom: .6rem;
}
.cw-board-filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.cw-board-filters-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.cw-board-filters-reset {
  border: none; background: none; cursor: pointer; font: inherit;
  font-size: .72rem; color: var(--cw-text-muted); padding: 0;
}
.cw-board-filters-reset:hover { color: var(--cw-blue); }
.cw-board-field { display: block; margin-bottom: .55rem; }
.cw-board-field-label {
  display: flex; align-items: center; gap: .3rem; font-size: .66rem;
  color: var(--cw-text-muted); font-weight: 700; margin-bottom: .15rem;
}
.cw-board-field select {
  width: 100%; font: inherit; font-size: .8rem; font-weight: 700;
  padding: .35rem .4rem; border: 1px solid var(--cw-border);
  border-radius: .3rem; background: #fff; color: var(--cw-text);
}
.cw-board-status { margin: .55rem 0 .2rem; }
.cw-board-status-title { font-size: .66rem; color: var(--cw-text-muted); font-weight: 700; margin-bottom: .3rem; }
.cw-board-status-grid { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.cw-board-status-pill {
  display: flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700;
  padding: .3rem .4rem; border: 1px solid var(--cw-border); border-radius: .3rem;
  background: #fff; color: var(--cw-text); cursor: default;
}
.cw-board-status-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cw-board-status-pill.is-order_new i { background: var(--cw-blue); }
.cw-board-status-pill.is-cleaner_assigned i { background: #6b46d6; }
.cw-board-status-pill.is-order_completed i { background: var(--cw-green); }
.cw-board-status-pill.is-rating i { background: var(--cw-yellow); }
.cw-board-apply {
  width: 100%; margin-top: .5rem; border: none; cursor: pointer; font: inherit;
  font-weight: 700; font-size: .84rem; color: #fff; background: var(--cw-blue);
  padding: .55rem; border-radius: .35rem; transition: background .15s;
}
.cw-board-apply:hover { background: var(--cw-blue-dark); }

/* Cleaner faces pinned beside their city. The city label sits centred ABOVE
   its dot, so the face is pushed right and slightly down — up or left would
   cover the name. */
.cw-board-face {
  position: absolute; z-index: 2; transform: translate(20%, -10%);
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(28, 61, 128, .25);
  background: var(--cw-blue-tint); transition: opacity .2s ease;
}
.cw-board-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-board-face.is-dimmed { opacity: .18; }

/* Floating live feed */
.cw-board-feed {
  position: absolute; top: 18px; right: 18px; width: 300px; z-index: 3;
  background: #fff; border: 1px solid var(--cw-border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: .9rem; display: flex; flex-direction: column;
  /* Pinned to the stage with a reserved strip below, so the zoom control in
     the bottom-right corner can never sit on top of the panel; the row list
     scrolls inside instead of growing the card (mockup behaviour). */
  bottom: 130px;
}
.cw-board-feed-list { flex: 1; min-height: 0; overflow-y: auto; }
.cw-board-feed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.cw-board-feed-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.cw-board-event {
  display: flex; align-items: flex-start; gap: .55rem; padding: .4rem 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.cw-board-event:first-child { border-top: none; }
.cw-board-event.is-hidden { display: none; }
.cw-board-event-icon {
  flex: none; width: 30px; height: 30px; border-radius: .35rem;
  display: flex; align-items: center; justify-content: center;
}
.cw-board-event-icon.is-order_new { background: var(--cw-blue-tint); color: var(--cw-blue); }
.cw-board-event-icon.is-cleaner_assigned { background: #efeafd; color: #6b46d6; }
.cw-board-event-icon.is-order_completed { background: #e7f6ee; color: #2f9d68; }
.cw-board-event-body { min-width: 0; flex: 1; }
.cw-board-event-kind { display: block; font-size: .8rem; font-weight: 700; }
.cw-board-event-kind.is-order_new { color: var(--cw-blue); }
.cw-board-event-kind.is-cleaner_assigned { color: #6b46d6; }
.cw-board-event-kind.is-order_completed { color: #2f9d68; }
.cw-board-event-where { display: block; font-size: .74rem; color: var(--cw-text-muted); }
.cw-board-event-time { font-size: .68rem; color: var(--cw-text-muted); white-space: nowrap; padding-top: .15rem; }
.cw-board-feed-all {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid rgba(0, 0, 0, .06);
  font-size: .78rem; font-weight: 700; color: var(--cw-blue); text-decoration: none;
}

/* Legend + zoom, bottom of the stage */
.cw-board-map-legend {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 1rem; background: #fff; border: 1px solid var(--cw-border);
  border-radius: 999px; padding: .45rem .95rem; box-shadow: var(--shadow-sm);
  font-size: .72rem; color: var(--cw-text-muted); white-space: nowrap;
}
.cw-board-map-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.cw-board-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cw-blue); display: inline-block; }
.cw-board-legend-dot.is-idle { background: rgba(0, 0, 0, .22); }
.cw-board-legend-line {
  width: 16px; height: 0; display: inline-block;
  border-top: 1.5px dashed rgba(36, 87, 198, .5);
}
.cw-board-zoom {
  position: absolute; right: 18px; bottom: 16px; z-index: 3;
  display: flex; flex-direction: column; border-radius: .35rem; overflow: hidden;
  border: 1px solid var(--cw-border); box-shadow: var(--shadow-sm);
}
.cw-board-zoom button {
  width: 32px; height: 32px; border: none; background: #fff; cursor: pointer;
  font-size: 1.05rem; font-weight: 700; color: var(--cw-text); line-height: 1;
}
.cw-board-zoom button + button { border-top: 1px solid var(--cw-border); }
.cw-board-zoom button:hover { background: var(--cw-blue-tint); color: var(--cw-blue); }

.cw-board-mapwrap { position: absolute; inset: 0; z-index: 1; }
.cw-board-mapwrap svg { transition: none; }
.cw-board-map { position: absolute; inset: 0; }

/* Animated event layer: real order/rating events replayed as pings over
   their own city (see board.js). Now a <g> inside the map's own <svg> rather
   than an absolutely-positioned sibling svg — see lib/cityMap.js for why.
   Radius and stroke are set inline by board.js, scaled to the live viewBox so
   a ping is the same size on screen at every zoom level. */
#cw-board-pings { pointer-events: none; }
.cw-ping-ring {
  fill: none; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: cw-ping 1.6s ease-out forwards;
}
.cw-ping.is-order_new .cw-ping-ring { stroke: var(--cw-blue); }
.cw-ping.is-cleaner_assigned .cw-ping-ring { stroke: #6b46d6; }
.cw-ping.is-order_completed .cw-ping-ring { stroke: var(--cw-green); }
.cw-ping.is-rating .cw-ping-ring { stroke: var(--cw-yellow); }
@keyframes cw-ping {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(9); }
}

/* Live ticker strip along the bottom of the map */
.cw-board-ticker {
  position: absolute; left: 18px; bottom: 58px; z-index: 3;
  width: 300px; display: flex; flex-direction: column; gap: .3rem;
  pointer-events: none;
}
.cw-ticker-row {
  display: flex; align-items: center; gap: .45rem;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--cw-border);
  border-radius: 999px; padding: .32rem .7rem; box-shadow: var(--shadow-sm);
  font-size: .72rem; white-space: nowrap; overflow: hidden;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .35s ease, transform .35s ease;
}
.cw-ticker-row.is-in { opacity: 1; transform: none; }
/* Older rows fade back so the newest one reads first. */
.cw-ticker-row:nth-child(2) { opacity: .75; }
.cw-ticker-row:nth-child(3) { opacity: .5; }
.cw-ticker-row:nth-child(4) { opacity: .3; }
.cw-ticker-row:nth-child(5) { opacity: .15; }
.cw-ticker-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cw-ticker-row.is-order_new .cw-ticker-dot { background: var(--cw-blue); }
.cw-ticker-row.is-cleaner_assigned .cw-ticker-dot { background: #6b46d6; }
.cw-ticker-row.is-order_completed .cw-ticker-dot { background: var(--cw-green); }
.cw-ticker-row.is-rating .cw-ticker-dot { background: var(--cw-yellow); }
.cw-ticker-kind { font-weight: 700; }
.cw-ticker-row.is-order_new .cw-ticker-kind { color: var(--cw-blue); }
.cw-ticker-row.is-cleaner_assigned .cw-ticker-kind { color: #6b46d6; }
.cw-ticker-row.is-order_completed .cw-ticker-kind { color: #2f9d68; }
.cw-ticker-row.is-rating .cw-ticker-kind { color: #b8860b; }
.cw-ticker-where { color: var(--cw-text-muted); overflow: hidden; text-overflow: ellipsis; }
.cw-ticker-time { margin-left: auto; color: var(--cw-text-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .cw-ping-ring { animation: none; }
  .cw-ticker-row { transition: none; opacity: 1; transform: none; }
}
.cw-map-svg { display: block; width: 100%; height: 100%; }
/* Stroke widths are in viewBox user units too (see .cw-map-label). */
.cw-map-grid { stroke: rgba(36, 87, 198, .05); stroke-width: .6; }
.cw-map-land { fill: #d3e3fa; stroke: #c2d8f6; stroke-width: .5; }
.cw-map-link { fill: none; stroke: rgba(36, 87, 198, .3); stroke-width: .8; stroke-dasharray: 2.5 3.5; }
.cw-map-halo { fill: url(#cw-map-glow-grad); animation: cw-map-breathe 3.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.cw-map-glow { fill: rgba(36, 87, 198, .22); }
.cw-map-dot { fill: rgba(36, 87, 198, .55); }
.cw-map-core { fill: #fff; }
.cw-map-planned { fill: none; stroke: rgba(36, 87, 198, .55); stroke-width: .9; stroke-dasharray: 2 2; }
.cw-map-planned-core { fill: rgba(36, 87, 198, .5); }
.cw-board-legend-ring {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  border: 1.5px dashed var(--cw-blue); box-sizing: border-box;
}
.cw-map-pin.is-idle .cw-map-glow { fill: rgba(0, 0, 0, .07); }
.cw-map-pin.is-idle .cw-map-dot { fill: rgba(0, 0, 0, .2); }
/* font-size / stroke-width come from presentation attributes in cityMap.js
   because they must be expressed in viewBox user units, not CSS px. */
.cw-map-label {
  font-family: var(--font-display); font-weight: 700;
  fill: #1c3d80; paint-order: stroke; stroke: rgba(255, 255, 255, .92);
}
.cw-map-label-n { fill: var(--cw-blue); }
@keyframes cw-map-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .15; transform: scale(1.25); } }

.cw-board-feed-count { font-size: .72rem; color: var(--cw-text-muted); margin: -.3rem 0 .5rem; }
.cw-board-feed-list { overflow-y: auto; max-height: 380px; }
/* One real, unfinished cleaning per row: the cleaner's face, where it is,
   and what kind of clean it is. */
.cw-board-job {
  display: flex; align-items: center; gap: .55rem; padding: .4rem 0;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.cw-board-job:first-child { border-top: none; }
.cw-board-job-body { min-width: 0; flex: 1; }
.cw-board-job-where { display: block; font-size: .82rem; font-weight: 700; color: var(--cw-text); }
.cw-board-job-type {
  display: flex; align-items: center; gap: .3rem;
  font-size: .72rem; color: var(--cw-text-muted);
}
.cw-board-job-icon { width: 14px; height: 14px; opacity: .65; flex: none; }
.cw-board-job-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cw-green); flex: none;
  animation: cw-board-pulse 2s ease-in-out infinite;
}
/* A 404'd avatar keeps its circle but drops the broken-image glyph. */
.cw-board-avatar.is-missing, .cw-board-face img.is-missing { content-visibility: hidden; }
.cw-board-feed-empty { font-size: .82rem; color: var(--cw-text-muted); padding: 1rem 0; }

/* The table needs room for five columns; the card strip scrolls, so it can
   live with less. Weighted toward the table rather than an even split. */
.cw-board-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; margin-top: 12px; }
/* Grid items default to min-width:auto, so a child wider than its track
   pushes the track — and the whole page — wider instead of scrolling inside
   itself. The city strip (8+ cards at 140px) and the areas table both did
   exactly that, which is what made the page scroll sideways. */
.cw-board-bottom > * { min-width: 0; }
.cw-board-table-wrap { overflow: visible; }
.cw-board-table { width: 100%; min-width: 0; table-layout: fixed; }
.cw-board-table .cw-board-th-num { width: 2rem; color: var(--cw-text-muted); }
.cw-board-table th, .cw-board-table td { padding: .5rem .35rem; }
.cw-board-table th.num, .cw-board-table td.num { text-align: right; }
/* Headers are long words in Polish ("Zamówione dziś"); let them wrap rather
   than force the column wider than its share. */
.cw-board-table th { white-space: normal; line-height: 1.2; vertical-align: bottom; font-size: .74rem; }
.cw-board-table td { font-size: .82rem; }
.cw-board-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.cw-board-row-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cw-blue);
  display: inline-block; margin-right: .45rem; vertical-align: middle;
}
.cw-board-row-dot.is-green { background: var(--cw-green); }
.cw-board-num-blue { color: var(--cw-blue); font-weight: 700; }
.cw-board-cities { position: relative; }
.cw-board-strip-next {
  position: absolute; right: .6rem; bottom: 2.6rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cw-border); background: #fff; color: var(--cw-text);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.cw-board-strip-next:hover { background: var(--cw-blue); color: #fff; border-color: var(--cw-blue); }
.cw-board-city-card.is-hidden { display: none; }
.cw-board-areas, .cw-board-cities {
  background: #fff; border: 1px solid var(--cw-border); border-radius: var(--cw-radius);
  box-shadow: var(--shadow-sm); padding: 1rem 1.1rem 1.1rem;
}
.cw-board-areas .cw-board-panel-title, .cw-board-cities .cw-board-panel-title { margin-bottom: .7rem; }
.cw-board-area-city { color: var(--cw-text-muted); font-size: .72rem; display: block; padding-left: 1.15rem; }
.cw-board-city-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .4rem; }
.cw-board-city-card {
  flex: none; width: 140px; border: 1px solid var(--cw-border);
  border-radius: var(--cw-radius); overflow: hidden; background: #fff;
}
.cw-board-city-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .3rem; padding: .6rem .65rem .4rem; }
/* Card is only ~140px wide, so the full "LIVE" wordmark wraps — the card
   keeps just the pulsing dot, the label lives in the map legend. */
.cw-board-city-live { font-size: 0; padding: 4px; gap: 0; flex: none; }
.cw-board-city-name { font-family: var(--font-display); font-weight: 700; font-size: .88rem; }
.cw-board-city-country { font-size: .68rem; color: var(--cw-text-muted); }
.cw-board-city-banner {
  height: 56px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cw-blue) 0%, var(--cw-blue-dark) 100%);
  color: rgba(255, 255, 255, .85); overflow: hidden;
}
/* Photo cities keep the gradient underneath, so a slow or 404'd image still
   shows the brand block rather than a white gap. */
.cw-board-city-banner.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-board-city-stats { display: flex; gap: 1.1rem; padding: .55rem .65rem .7rem; }
.cw-board-city-stats > div { display: flex; flex-direction: column-reverse; }
.cw-board-city-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cw-text); }
.cw-board-city-label { display: block; font-size: .62rem; color: var(--cw-text-muted); font-weight: 700; }

.cw-board-note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 12px 0 0;
  font-size: .74rem; color: var(--cw-text-muted); line-height: 1.5;
}
.cw-board-note svg { flex: none; margin-top: 1px; }

@media (max-width: 1200px) {
  .cw-board-top { grid-template-columns: 1fr; gap: 18px; }
  .cw-board-title { font-size: 1.7rem; }
  .cw-board-tiles { grid-template-columns: repeat(3, 1fr); }
  .cw-board-bottom { grid-template-columns: 1fr; }
  .cw-board-legendcard, .cw-board-feed { width: 230px; }
}
/* Below tablet the floating cards would cover the map entirely, so they
   drop back into normal flow underneath it. */
@media (max-width: 900px) {
  .cw-board-stage { min-height: 0; overflow: visible; border: none; box-shadow: none; background: none; }
  /* The wrap must collapse to the map box: as an inset-0 overlay it spanned
     the whole (now tall) stage and silently ate every tap on the panels
     below — "на телефоне ничего не работает" was exactly this. */
  .cw-board-mapwrap { position: relative; inset: auto; }
  .cw-board-map {
    position: relative; inset: auto; height: 420px; border-radius: var(--cw-radius);
    border: 1px solid var(--cw-border); overflow: hidden;
  }
  .cw-board-legendcard, .cw-board-feed, .cw-board-activity {
    position: static; width: auto; margin-top: .8rem; box-shadow: var(--shadow-sm);
  }
  .cw-board-feed { bottom: auto; }
  .cw-board-feed-list { max-height: 420px; }
  /* Zoom stays — anchored to the map box, thumb-sized targets. */
  .cw-board-zoom { right: 10px; bottom: 10px; }
  .cw-board-zoom button { width: 44px; height: 44px; }
  .cw-board-face, .cw-board-map-legend, .cw-board-activepill { display: none; }
}
@media (max-width: 760px) {
  .cw-board-title { font-size: 1.45rem; }
  .cw-board-sub { max-width: none; }
  .cw-board-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cw-board-tile { padding: 14px; }
}

@media (min-width: 761px) and (max-width: 1025px) {
  :root { --cw-radius: .5vw; }
  .cw-live-header-inner, .cw-live-main, .cw-live-footer-inner { width: 92vw; }
  .cw-live-product-hero { min-height: 50vw; grid-template-columns: .82fr 1.18fr; gap: 3vw; }
  .cw-live-heading { font-size: 4.8vw; }
  .cw-live-pulse-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --cw-radius: 1vw; }
  .cw-live-header-inner, .cw-live-main, .cw-live-footer-inner { width: 90vw; }
  .cw-live-product-hero { min-height: 0; grid-template-columns: 1fr; gap: 7vw; padding: 6vw 0 4vw; }
  .cw-live-product-hero .cw-live-risk-hero { min-height: 0; padding: 6vw; border-radius: 1vw; }
  .cw-live-hero-empty { min-height: 0; padding: 8vw 6vw; border-radius: 1vw; }
  .cw-live-hero-links a { flex: 1 1 42%; text-align: center; }
  .cw-live-pulse-row { grid-template-columns: 1fr; }
  .cw-live-intro, .cw-live-footer p { width: auto; }
  .cw-live-footer-logo { width: 32vw; }
  .cw-live-heading { font-size: 10vw; }
  .cw-live-country-top { flex-direction: column; align-items: flex-start; }
  .cw-live-agent { padding: 28px 18px; margin: 40px 0 8px; }
  .cw-live-agent-heading { font-size: 1.6rem; }
  .cw-live-agent-suggestion { font-size: 0.8rem; padding: 8px 12px; }
}

@media (max-width: 760px) and (min-aspect-ratio: 7/10) {
  .cw-live-main { padding-top: 5vw; }
}


/* ============================================================
   Mockup-fidelity layer (2026-08-07): status counts card, recent-activity
   card, "active now" pill, job status chips, map glow blobs + labels + badge.
   Appended as one block so the diff against the pre-mockup page stays legible.
   ============================================================ */

/* Status card: colour-keyed rows with real day-counts */
.cw-board-status-list { display: flex; flex-direction: column; }
.cw-board-status-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .1rem; font-size: .78rem; font-weight: 700;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.cw-board-status-row:first-child { border-top: none; }
.cw-board-status-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cw-board-status-row em { font-style: normal; flex: 1; min-width: 0; }
.cw-board-status-row b { font-weight: 700; color: var(--cw-text); }
.cw-board-status-row.is-order_new i { background: var(--cw-blue); }
.cw-board-status-row.is-cleaner_assigned i { background: #6b46d6; }
.cw-board-status-row.is-order_completed i { background: var(--cw-green); }
.cw-board-status-row.is-rating i { background: var(--cw-yellow); }

/* Recent-activity card (bottom-left), wrapping the live ticker */
.cw-board-activity {
  position: absolute; left: 18px; bottom: 64px; z-index: 3; width: 300px;
  background: #fff; border: 1px solid var(--cw-border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: .8rem .9rem;
}
.cw-board-activity-title {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem;
}
/* Ticker rows become card rows instead of floating pills */
.cw-board-activity .cw-board-ticker {
  position: static; width: auto; gap: 0; pointer-events: auto;
}
.cw-board-activity .cw-ticker-row {
  background: none; border: none; border-radius: 0; box-shadow: none;
  border-top: 1px solid rgba(0, 0, 0, .05); padding: .38rem 0;
}
.cw-board-activity .cw-ticker-row:first-child { border-top: none; }
.cw-board-activity .cw-ticker-row:nth-child(2) { opacity: 1; }
.cw-board-activity .cw-ticker-row:nth-child(3) { opacity: .9; }
.cw-board-activity .cw-ticker-row:nth-child(4) { opacity: .8; }
.cw-board-activity .cw-ticker-row:nth-child(5) { opacity: .65; }
.cw-ticker-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cw-ticker-time { color: var(--cw-text-muted); }

/* "Active now" pill, bottom-centre over the map */
.cw-board-activepill {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 4; display: flex; align-items: center; gap: .6rem;
  background: #fff; border: 1px solid var(--cw-border); border-radius: 999px;
  padding: .35rem .5rem .35rem .4rem; box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.cw-board-activepill-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #e7f6ee; color: #2f9d68; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .28rem .65rem;
}
.cw-board-activepill-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: #2f9d68;
  animation: cw-board-pulse 1.8s ease-out infinite;
}
.cw-board-activepill-text { font-size: .8rem; font-weight: 700; }
.cw-board-activepill-stack { display: inline-flex; align-items: center; }
.cw-board-activepill-stack img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -8px; background: var(--cw-blue-tint);
}
.cw-board-activepill-stack img:first-child { margin-left: 0; }
.cw-board-activepill-more {
  margin-left: -8px; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cw-blue); color: #fff; font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* The old bottom-centre legend yields that spot to the pill: top-centre,
   clear of the status card (left) and the jobs panel (right) */
.cw-board-map-legend { top: 18px; bottom: auto; }

/* Job status chip: whether the scheduled slot has begun — never the time */
.cw-board-job-chip {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; border-radius: 999px; padding: .22rem .55rem;
}
.cw-board-job-chip i { width: 6px; height: 6px; border-radius: 50%; }
.cw-board-job-chip.is-live { background: #e7f6ee; color: #2f9d68; }
.cw-board-job-chip.is-live i { background: #2f9d68; }
.cw-board-job-chip.is-planned { background: var(--cw-blue-tint); color: var(--cw-blue); }
.cw-board-job-chip.is-planned i { background: var(--cw-blue); }

.cw-board-feed-viewall {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid rgba(0, 0, 0, .06);
  font-size: .78rem; font-weight: 700; color: var(--cw-blue); text-decoration: none;
}
.cw-board-feed-viewall:hover { text-decoration: underline; }

/* Map: glow blobs, curated city labels, count badge.
   Font sizes are viewBox units on purpose (the svg is ~444 units wide at the
   default crop) — CSS rem here would render 30-100px tall. */
.cw-map-blob { opacity: .55; pointer-events: none; }
.cw-map-citylabel {
  font-family: var(--font-sans); font-size: 4.6px; font-weight: 700;
  fill: #23395d; paint-order: stroke; stroke: rgba(255, 255, 255, .85);
  stroke-width: 1.1px; pointer-events: none;
}
.cw-map-badge rect { fill: var(--cw-blue); stroke: #fff; stroke-width: .8; }
.cw-map-badge text { fill: #fff; font-size: 5px; font-weight: 700; font-family: var(--font-sans); }


/* Mobile re-hide. The pill/activity rules above set display:flex at equal
   specificity LATER in the file than the 900px media hide, which silently
   re-showed the pill and produced +11px page overflow at 390w. Media queries
   add no specificity — order decides — so the hide must repeat after them. */
@media (max-width: 900px) {
  .cw-board-activepill { display: none; }
}


/* 1026-1439 (canonical laptop band): six tiles in one row leave ~40px of
   text width and clip "ZAMÓWIENIA"/"niezakończone" — 3x2 fits the words.
   1440+ keeps the approved single-row layout. */
@media (min-width: 1026px) and (max-width: 1439px) {
  .cw-board-tiles { grid-template-columns: repeat(3, 1fr); }
}


/* Partner-joined feed events: existing palette dark blue, distinct from the
   order-blue without inventing a new colour. */
.cw-ticker-row.is-partner_joined .cw-ticker-dot { background: var(--cw-blue-dark); }
.cw-ticker-row.is-partner_joined .cw-ticker-kind { color: var(--cw-blue-dark); }
.cw-ping.is-partner_joined .cw-ping-ring { stroke: var(--cw-blue-dark); }


/* Scheduled slot start on board rows — owner-approved 2026-08-08 */
.cw-board-job-time { color: var(--cw-text-muted); font-weight: 500; white-space: nowrap; }