/* ===== TMC COMMUNITY - who is winning, what was just won, what the sales force is doing. Prefix .cm-* =====
   A CRM hub for directors and managers: a dark band that says the week in one sentence, a working column (leaderboard, map) and a
   live rail (wins, notes) that stays in view. Calm, spacious, nothing decorative.

   COLOUR RULES, as the rest of the app. Gold is chrome: the selected chip, the focus ring, the ONE gold figure on the band (the
   accounts-won tile) and the first place on the podium. A company's colour only ever identifies the company (the avatar ring, the
   badge); status colours are not borrowed: up and down are the polarity pair, always with an arrow and a word, never colour alone.
   Every theme-dependent value is declared twice (the OS media query and [data-theme="dark"]) so the toggle beats the OS both ways.
   MOTION: entrances animate FROM transparent with backwards fill (nothing rests at opacity 0), bars grow from their baseline,
   everything is off under prefers-reduced-motion. */

.cm-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.cm-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.cm-btn:hover { border-color: var(--accent-line); background: var(--accent-weak); }
.cm-btn:focus-visible, .cm-chipb:focus-visible, .cm-row:focus-visible, .cm-reg:focus-visible, .cm-tab:focus-visible, .cm-clap:focus-visible,
.cm-pc-b:focus-visible, .cm-mini-row:focus-visible, .cm-tile-s:focus-visible, .cm-refresh:focus-visible, .cm-info:focus-visible, .cm-more:focus-visible,
.cm-tile:focus-visible, .cm-pill:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.cm-skip:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.cm-skip { margin: 0 0 .6rem; }

/* ---------- THE BAND ---------- */
.cm-band {
  position: relative; overflow: hidden; border-radius: 14px; padding: 1.15rem 1.4rem 1.2rem; margin-bottom: 1rem;
  background: var(--shell-800); border: 1px solid var(--shell-line); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--lift-2, 0 6px 20px rgba(0, 0, 0, .16));
}
.cm-band::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: var(--grain); background-size: 160px 160px; }
.cm-band::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; z-index: 0; background: var(--gold-500); opacity: .7; }
.cm-band > * { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-band { background: var(--shell-700); } }
:root[data-theme="dark"] .cm-band { background: var(--shell-700); }

.cm-band-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.cm-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: #FFFFFF; letter-spacing: .02em; }
.cm-info, .cm-refresh {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, .78); transition: background-color .15s, color .15s, transform .3s;
}
.cm-info:hover, .cm-refresh:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }
.cm-refresh:active .bi { transform: rotate(180deg); }
.cm-refresh .bi { transition: transform .4s; }
.cm-fresh {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--shell-line); font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); cursor: help; white-space: nowrap;
}
.cm-fresh:empty { display: none; }
.cm-fresh .bi { font-size: .5rem; color: #7FD39A; }
.cm-fresh.is-late .bi { color: #F0B35A; }
.cm-refresh { margin-left: 0; }
.cm-lede { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.2; font-weight: 500; margin: 0 0 .35rem; max-width: 60ch; color: #FFFFFF; }
.cm-lede b { font-weight: 500; color: #FFFFFF; }
.cm-lede-s { color: rgba(255, 255, 255, .72); margin: 0; font-size: var(--fs-md); }
.cm-asofs { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: .2rem 0 1rem; }
.cm-asof { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); padding: .12rem .55rem .12rem .15rem; border-radius: 999px; background: rgba(255, 255, 255, .05); cursor: help; }
.cm-asof .bbadge { flex: none; }

.cm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.cm-tile {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .15rem; padding: .8rem .95rem .75rem; border-radius: 12px; min-width: 0;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); transition: background-color .2s, transform .2s, border-color .2s;
}
.cm-tile:hover { background: rgba(255, 255, 255, .08); border-color: rgba(223, 197, 147, .35); transform: translateY(-2px); }
.cm-tile-k { font-size: var(--fs-xs); color: rgba(255, 255, 255, .78); font-weight: var(--fw-medium); }
.cm-tile-v { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: 1.05; font-weight: 500; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.cm-tile-v.is-gold { color: var(--gold-300); }
.cm-tile-d { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-size: var(--fs-xs); color: rgba(255, 255, 255, .62); }
.cm-tile-d small { font-size: var(--fs-2xs); }
.cm-tile-sp { display: block; margin: .2rem 0 .1rem; min-height: 34px; }
.cm-tile-sub { font-size: var(--fs-xs); color: rgba(255, 255, 255, .72); line-height: 1.35; }
.cm-band-fail { padding: .5rem 0; color: #FFFFFF; }

/* up / down: the polarity pair, always with an arrow and a word */
.cm-dl { display: inline-flex; align-items: center; gap: .2rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cm-dl.is-up { color: var(--vz-up, #00897B); }
.cm-dl.is-down { color: var(--vz-down, #B02A46); }
.cm-dl.is-flat { color: var(--text-soft); font-weight: var(--fw-medium); }
.cm-band .cm-dl.is-up { color: #6FDCC6; }
.cm-band .cm-dl.is-down { color: #F59BAE; }
.cm-band .cm-dl.is-flat { color: rgba(255, 255, 255, .72); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-dl.is-up { color: #4FC9B2; } :root:not([data-theme="light"]) .cm-dl.is-down { color: #F07C96; } }
:root[data-theme="dark"] .cm-dl.is-up { color: #4FC9B2; }
:root[data-theme="dark"] .cm-dl.is-down { color: #F07C96; }

/* ---------- LAYOUT ---------- */
.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 26vw); gap: 1rem; align-items: start; }
.cm-main { display: grid; gap: 1rem; min-width: 0; }
.cm-panel { padding: 1.1rem 1.2rem 1.15rem; }
.cm-panel-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .9rem; margin-bottom: .8rem; }
.cm-h { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); }
.cm-h3 { margin: 1rem 0 .5rem; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); }
.cm-h-sub { font-size: var(--fs-sm); color: var(--text-soft); }
.cm-map-scheme { margin-left: auto; }
.cm-note { font-size: var(--fs-sm); color: var(--text-soft); margin: .6rem 0 0; line-height: var(--lh-normal); }
.cm-note .bi { margin-right: .25rem; }
.cm-rail { position: sticky; top: calc(var(--hdr-h, 62px) + .8rem); max-height: calc(100vh - var(--hdr-h, 62px) - 1.6rem); display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.cm-rail-h { padding: .35rem .55rem 0; border-bottom: 1px solid var(--border); }
.cm-rail-filters { padding: .7rem .8rem .2rem; }
.cm-rail-filters[hidden] { display: none; }
.cm-feed { overflow-y: auto; padding: .55rem .8rem .9rem; flex: 1 1 auto; min-height: 0; }
.cm-tabs { display: flex; gap: .2rem; }
.cm-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .55rem .6rem; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-soft); cursor: pointer; transition: color .15s, border-color .15s; }
.cm-tab:hover { color: var(--text); }
.cm-tab.is-on { color: var(--text); border-bottom-color: var(--gold-500); }
.cm-count { font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: .02rem .4rem; border-radius: 999px; background: var(--inset); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cm-chipb.is-on .cm-count { background: rgba(0, 0, 0, .1); color: inherit; }

/* ---------- CONTROLS ---------- */
.cm-toolbar { display: grid; gap: .5rem; margin-bottom: 1rem; }
.cm-tb-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cm-tb-k { width: 5.6rem; flex: none; font-size: var(--fs-xs); color: var(--text-soft); font-weight: var(--fw-medium); }
.cm-seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.cm-seg-wrap { gap: .3rem; }
.cm-chipb {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer; line-height: 1.2;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.cm-chipb .bbadge { flex: none; }
.cm-chipb:hover:not(.is-on):not(.is-off) { border-color: var(--accent-line); color: var(--text); background: var(--accent-weak); }
.cm-chipb.is-on { background: var(--accent-weak); border-color: var(--gold-500); color: var(--accent-ink); font-weight: var(--fw-bold); }
.cm-chipb.is-off { opacity: 1; color: var(--text-dim); border-style: dashed; cursor: not-allowed; }
.cm-chipb.is-sm { padding: .2rem .6rem; font-size: var(--fs-xs); }
.cm-chipb.is-quiet:not(.is-on) { color: var(--text-dim); }
.cm-pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: 999px; cursor: pointer;
  background: var(--accent-weak); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.cm-pill.is-static { cursor: default; }
.cm-pill .bi-x-lg { font-size: .65rem; }

/* ---------- AVATARS: a company's colour ring around the initials; identity is never the colour alone (the initials and the badge are beside it) ---------- */
.cm-av {
  --cmc: var(--c-eff-ui); display: inline-grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text); background: var(--surface); box-shadow: 0 0 0 2px var(--cmc), 0 0 0 4px var(--surface);
}
.cm-av.co-messenger { --cmc: var(--c-messenger-ui); } .cm-av.co-thumbies { --cmc: var(--c-thumbies-ui); } .cm-av.co-cemsites { --cmc: var(--c-cemsites-ui); }
.cm-av.is-xs { width: 1.3rem; height: 1.3rem; font-size: var(--fs-3xs); box-shadow: 0 0 0 1.5px var(--cmc); }
.cm-av.is-sm { width: 1.75rem; height: 1.75rem; font-size: var(--fs-3xs); box-shadow: 0 0 0 2px var(--cmc); }
.cm-av.is-lg { width: 3.6rem; height: 3.6rem; font-size: var(--fs-xl); }
.cm-av.is-xl { width: 3.2rem; height: 3.2rem; font-size: var(--fs-lg); }

/* ---------- THE PODIUM ---------- */
.cm-pod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: end; margin: .2rem 0 1.1rem; }
.cm-pc { display: grid; justify-items: stretch; min-width: 0; }
.cm-pc-b {
  display: grid; justify-items: center; gap: .3rem; padding: 1.1rem .8rem .9rem; border-radius: 14px 14px 0 0; text-align: center; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom: 0; transition: background-color .2s, transform .2s, box-shadow .2s; min-width: 0;
}
div.cm-pc-b { cursor: default; }
button.cm-pc-b:hover { background: var(--accent-weak); transform: translateY(-3px); box-shadow: var(--lift-2, 0 6px 20px rgba(0, 0, 0, .12)); }
.cm-pc.is-1 .cm-pc-b { padding-top: 1.5rem; padding-bottom: 1.2rem; background: var(--accent-weak); border-color: var(--accent-line); }
.cm-pc-rank { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--text-soft); line-height: 1; }
.cm-pc.is-1 .cm-pc-rank { color: var(--accent-ink); }
.cm-pc-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pc-co { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-pc-v { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.cm-pc-v.is-gold { color: var(--accent-ink); font-size: var(--fs-4xl); }
.cm-pc-m { display: inline-flex; align-items: center; gap: .5rem; min-height: 1.2rem; }
.cm-pc-step { display: block; border: 1px solid var(--border); border-top: 0; background: var(--inset); }
.cm-pc.is-1 .cm-pc-step { height: 14px; background: linear-gradient(var(--accent-line), var(--accent-weak)); border-color: var(--accent-line); }
.cm-pc.is-2 .cm-pc-step { height: 8px; } .cm-pc.is-3 .cm-pc-step { height: 4px; }
.cm-pc.is-empty { min-height: 1px; }

.cm-mv { display: inline-flex; align-items: center; gap: .15rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; cursor: help; }
.cm-mv.is-up { color: var(--vz-up, #00897B); } .cm-mv.is-down { color: var(--vz-down, #B02A46); } .cm-mv.is-flat { color: var(--text-dim); }
.cm-mv.is-new { padding: .02rem .45rem; border-radius: 999px; background: var(--accent-weak); border: 1px solid var(--accent-line); color: var(--accent-ink); font-size: var(--fs-2xs); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-mv.is-up { color: #4FC9B2; }
  :root:not([data-theme="light"]) .cm-mv.is-down { color: #F07C96; }
}
:root[data-theme="dark"] .cm-mv.is-up { color: #4FC9B2; }
:root[data-theme="dark"] .cm-mv.is-down { color: #F07C96; }

/* ---------- THE RANKED LIST ---------- */
.cm-rows { display: grid; }
.cm-rows-h, .cm-row {
  display: grid; align-items: center; gap: .7rem; padding: .55rem .7rem;
  grid-template-columns: 1.6rem 3.2rem minmax(10rem, 1.2fr) minmax(9rem, 1.5fr) 4rem 6.2rem 3rem;
}
.cm-rows-h { font-size: var(--fs-2xs); color: var(--text-dim); font-weight: var(--fw-medium); border-bottom: 1px solid var(--border); padding-top: .2rem; padding-bottom: .35rem; }
.cm-rows-h > :nth-child(n+4) { text-align: left; }
.cm-row { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .15s, transform .15s; }
div.cm-row { cursor: default; }
button.cm-row:hover { background: var(--accent-weak); }
.cm-r-rank { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--text-soft); text-align: right; }
.cm-r-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cm-r-name { display: grid; min-width: 0; line-height: 1.25; }
.cm-r-name b { font-weight: var(--fw-bold); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-r-name small { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-r-val { display: grid; gap: .25rem; min-width: 0; }
.cm-r-val b { font-variant-numeric: tabular-nums; color: var(--text); font-size: var(--fs-md); cursor: help; }
.cm-r-sp { display: block; min-height: 26px; }
.cm-r-sh { color: var(--text-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cm-bar { display: block; height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.cm-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--gold-500); transform-origin: left center; }
.cm-board.is-first .cm-bar > i, .cm-map-body.is-first .cm-bar > i { animation: cmGrowX .7s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes cmGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cm-board.is-first .cm-pc { animation: cmRise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.cm-board.is-first .cm-pc.is-1 { animation-delay: .05s; } .cm-board.is-first .cm-pc.is-2 { animation-delay: .15s; } .cm-board.is-first .cm-pc.is-3 { animation-delay: .25s; }
.cm-board.is-first .cm-row { animation: cmRise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.cm-board.is-first .cm-row:nth-child(2) { animation-delay: .3s; } .cm-board.is-first .cm-row:nth-child(3) { animation-delay: .34s; } .cm-board.is-first .cm-row:nth-child(4) { animation-delay: .38s; }
.cm-board.is-first .cm-row:nth-child(5) { animation-delay: .42s; } .cm-board.is-first .cm-row:nth-child(n+6) { animation-delay: .46s; }
@keyframes cmRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cm-board { outline: none; }
.cm-board-swap { animation: cmFade .3s ease-out backwards; }
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }

.cm-basis { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.cm-basis-l { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: var(--fs-xs); color: var(--text-soft); line-height: var(--lh-normal); }
.cm-basis-l b { color: var(--text); }

/* ---------- PER-COMPANY MINI BOARDS (money across all companies: one board each, in its own measure) ---------- */
.cm-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.cm-mini { display: flex; flex-direction: column; gap: .35rem; padding: .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.cm-mini-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cm-mini-co { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-lg); color: var(--text); }
.cm-kindchip { font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: .08rem .5rem; border-radius: 999px; cursor: help; white-space: nowrap; border: 1px solid var(--border); color: var(--text-soft); background: var(--surface); }
.cm-kindchip.is-earned { color: var(--accent-ink); background: var(--accent-weak); border-color: var(--accent-line); }
.cm-mini-m { margin: 0; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-mini-rows { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .1rem; }
.cm-mini-row { display: grid; grid-template-columns: 1.1rem 1.75rem minmax(0, 1fr) auto auto; align-items: center; gap: .55rem; width: 100%; padding: .4rem .3rem; border-radius: 8px; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s; }
div.cm-mini-row { cursor: default; }
button.cm-mini-row:hover { background: var(--accent-weak); }
.cm-mini-rank { font-weight: var(--fw-bold); color: var(--text-soft); font-variant-numeric: tabular-nums; text-align: right; }
.cm-mini-rank.is-first { color: var(--accent-ink); }
.cm-mini-n { display: grid; gap: .25rem; min-width: 0; }
.cm-mini-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--text); }
.cm-mini-v { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text); cursor: help; }
.cm-mini-f { margin-top: auto; padding-top: .5rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-mini-empty { font-size: var(--fs-sm); color: var(--text-soft); }
.cm-mini-open { align-self: flex-start; background: none; border: 0; padding: .2rem 0; color: var(--accent-ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; }
.cm-mini-open:hover { text-decoration: underline; }
.cm-mini-open .bi { transition: transform .2s; } .cm-mini-open:hover .bi { transform: translateX(3px); }

/* ---------- THE MAP ---------- */
.cm-map-body { min-height: 12rem; }
.cm-map-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cm-tilemap { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 4px; }
.cm-tile-s {
  aspect-ratio: 1; display: grid; place-content: center; gap: 0; padding: 0; border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.05; text-align: center; min-width: 0;
  background: var(--cm-t0); border: 1px solid var(--border); color: var(--text-soft); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cm-tile-s b { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .02em; }
.cm-tile-s small { font-size: var(--fs-3xs); font-variant-numeric: tabular-nums; }
.cm-tile-s:hover { transform: scale(1.1); z-index: 2; box-shadow: var(--lift-2, 0 6px 20px rgba(0, 0, 0, .2)); }
.cm-tile-s.is-sel { outline: 2px solid var(--gold-500); outline-offset: 1px; }
.cm-t1 { background: var(--cm-t1); } .cm-t2 { background: var(--cm-t2); } .cm-t3 { background: var(--cm-t3); } .cm-t4 { background: var(--cm-t4); } .cm-t5 { background: var(--cm-t5); }
.cm-tile-s.cm-t1, .cm-tile-s.cm-t2, .cm-tile-s.cm-t3 { color: var(--cm-ink-lo); border-color: transparent; }
.cm-tile-s.cm-t4, .cm-tile-s.cm-t5 { color: var(--cm-ink-hi); border-color: transparent; }
.cm-map-body.is-first .cm-tile-s { animation: cmPop .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.cm-map-body.is-first .cm-tile-s:nth-child(3n) { animation-delay: .1s; } .cm-map-body.is-first .cm-tile-s:nth-child(3n+1) { animation-delay: .2s; } .cm-map-body.is-first .cm-tile-s:nth-child(3n+2) { animation-delay: .3s; }
@keyframes cmPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.cm-legend { display: flex; align-items: center; gap: .3rem; margin-top: .7rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-legend i { width: 1.4rem; height: .7rem; border-radius: 3px; display: inline-block; }
.cm-regs { display: grid; gap: .35rem; }
.cm-reg { display: grid; grid-template-columns: minmax(7rem, 1fr) auto; grid-template-areas: "n v" "l l"; gap: .3rem .8rem; width: 100%; padding: .65rem .75rem; border-radius: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--border); transition: background-color .15s, border-color .15s, transform .15s; }
.cm-reg:hover { background: var(--accent-weak); border-color: var(--accent-line); transform: translateX(2px); }
.cm-reg.is-sel { background: var(--accent-weak); border-color: var(--gold-500); }
.cm-reg-n { grid-area: n; display: grid; gap: .3rem; min-width: 0; } .cm-reg-n b { color: var(--text); }
.cm-reg-v { grid-area: v; text-align: right; display: grid; } .cm-reg-v b { font-variant-numeric: tabular-nums; color: var(--text); } .cm-reg-v small { font-size: var(--fs-xs); color: var(--text-soft); }
.cm-reg-l { grid-area: l; display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-lead em { font-style: normal; font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; }
.cm-lead.is-none { color: var(--text-dim); }

/* ---------- THE LIVE RAIL ---------- */
.cm-feed-l { display: grid; gap: .6rem; }
.cm-win, .cm-note-c { display: grid; gap: .3rem; padding: .8rem .9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s, transform .2s; }
.cm-win:hover, .cm-note-c:hover { border-color: var(--accent-line); box-shadow: var(--lift-1, 0 2px 8px rgba(0, 0, 0, .08)); }
.cm-win-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cm-kind { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-ink); }
.cm-win.is-moving_up .cm-kind, .cm-win.is-renewal .cm-kind { color: var(--text-soft); }
.cm-when { font-size: var(--fs-xs); color: var(--text-soft); cursor: help; }
.cm-win-name { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); text-decoration: none; line-height: 1.25; overflow-wrap: anywhere; }
a.cm-win-name:hover { text-decoration: underline; color: var(--accent-ink); }
.cm-win-where { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-win-what { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: var(--lh-normal); }
.cm-win-foot { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .2rem; }
.cm-win-amt b { font-variant-numeric: tabular-nums; color: var(--text); } .cm-win-amt em { font-style: normal; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-win-rep, .cm-who { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-soft); cursor: help; }
.cm-who { cursor: default; color: var(--text); }
.cm-clap { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 999px; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-xs); font-weight: var(--fw-medium); transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.cm-clap:hover { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent-ink); }
.cm-clap:active .bi { transform: scale(1.35) rotate(-8deg); }
.cm-clap .bi { transition: transform .2s; }
.cm-clap.is-mine { background: var(--accent-weak); border-color: var(--gold-500); color: var(--accent-ink); }
.cm-feed-more { width: 100%; justify-content: center; margin-top: .7rem; }
.cm-end { text-align: center; }
.cm-feed-l.is-arriving .cm-win { animation: cmRise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.cm-feed-l.is-arriving .cm-win:nth-child(2) { animation-delay: .06s; } .cm-feed-l.is-arriving .cm-win:nth-child(3) { animation-delay: .12s; } .cm-feed-l.is-arriving .cm-win:nth-child(4) { animation-delay: .18s; } .cm-feed-l.is-arriving .cm-win:nth-child(n+5) { animation-delay: .24s; }
.cm-srcs { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; font-size: var(--fs-xs); color: var(--text-soft); line-height: var(--lh-normal); }
.cm-srcs b { color: var(--text); }
.cm-srcs .is-off { padding: .5rem .65rem; border-radius: 8px; background: var(--inset); border: 1px dashed var(--border); }
.cm-authors { font-size: var(--fs-xs); color: var(--text-soft); margin: 0 0 .7rem; line-height: var(--lh-normal); } .cm-authors em { font-style: normal; font-weight: var(--fw-bold); color: var(--text); }
.cm-note-c { margin-bottom: .6rem; }
.cm-note-t { margin: 0; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-prose); white-space: pre-line; overflow-wrap: anywhere; }
.cm-more { justify-self: start; background: none; border: 0; padding: 0; color: var(--accent-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; } .cm-more:hover { text-decoration: underline; }

/* ---------- SKELETONS: they mirror the shape of what is loading ---------- */
.cm-sk { display: block; border-radius: 12px; background: linear-gradient(90deg, var(--inset) 25%, var(--surface-2) 50%, var(--inset) 75%); background-size: 200% 100%; animation: cmShim 1.3s ease-in-out infinite; }
@keyframes cmShim { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.cm-pod.is-sk { align-items: end; }
.cm-sk-pod { height: 9rem; } .cm-sk-pod.is-1 { height: 11rem; } .cm-sk-pod.is-3 { height: 7.5rem; }
.cm-rows.is-sk { gap: .45rem; } .cm-sk-row { height: 2.6rem; }

/* ---------- THE REP CARD ---------- */
.cm-wide { max-width: 980px; }
.cm-card { padding: 1.3rem 1.5rem 1.4rem; }
.cm-card-h { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.cm-card-h > div { flex: 1; min-width: 0; }
.cm-card-t { margin: 0; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 500; color: var(--text); }
.cm-card-s { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-sm); color: var(--text-soft); margin-top: .2rem; }
.cm-card-kp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.cm-kpi { display: grid; gap: .15rem; padding: .75rem .9rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cm-kpi span { font-size: var(--fs-xs); color: var(--text-soft); } .cm-kpi b { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; cursor: help; } .cm-kpi small { font-size: var(--fs-2xs); color: var(--text-soft); }
.cm-card-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem; margin-top: .6rem; }
.cm-card-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.cm-card-wins li { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: .5rem; align-items: baseline; font-size: var(--fs-sm); color: var(--text); }
.cm-card-wins li em { font-style: normal; font-size: var(--fs-xs); color: var(--text-soft); } .cm-card-wins li .bi { color: var(--accent-ink); } .cm-card-wins li.is-none { color: var(--text-soft); display: block; }
.cm-card-wins a { color: var(--text); font-weight: var(--fw-medium); } .cm-card-wins a:hover { color: var(--accent-ink); }
.cm-card-load { padding: 3rem 1rem; }
.cm-how p, .cm-how li { font-size: var(--fs-md); line-height: var(--lh-prose); color: var(--text); } .cm-how-l { padding-left: 1.1rem; display: grid; gap: .4rem; }

/* ---------- THEME: the map ramp (light and dark, declared twice) ---------- */
:root { --cm-t0: var(--surface-2); --cm-t1: #F4ECD8; --cm-t2: #E8D4A2; --cm-t3: #D2B068; --cm-t4: #8E6822; --cm-t5: #5A4114; --cm-ink-lo: #3E2C0D; --cm-ink-hi: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cm-t0: #1E1C18; --cm-t1: #3A3220; --cm-t2: #5C4B27; --cm-t3: #7A5E2B; --cm-t4: #C9A55F; --cm-t5: #E9D3A1; --cm-ink-lo: #F5F1E8; --cm-ink-hi: #1A150A; } }
:root[data-theme="dark"] { --cm-t0: #1E1C18; --cm-t1: #3A3220; --cm-t2: #5C4B27; --cm-t3: #7A5E2B; --cm-t4: #C9A55F; --cm-t5: #E9D3A1; --cm-ink-lo: #F5F1E8; --cm-ink-hi: #1A150A; }

/* ---------- RESPONSIVE (laptop 1366 is the budget; tablet stacks the rail; phone is out of scope) ---------- */
@media (max-width: 1500px) {
  .cm-tile-s small { display: none; }
  .cm-tile-v { font-size: var(--fs-3xl); }
  .cm-tile { padding: .7rem .75rem .65rem; }
  .cm-rows-h, .cm-row { grid-template-columns: 1.6rem 3rem minmax(9rem, 1.2fr) minmax(8rem, 1.4fr) 3.6rem 5.4rem 2.6rem; }
}
@media (max-width: 1280px) { .cm-minis { grid-template-columns: 1fr; } .cm-map-grid { grid-template-columns: 1fr; } .cm-layout { grid-template-columns: minmax(0, 1fr) 330px; } }
@media (max-width: 1100px) { .cm-layout { grid-template-columns: 1fr; } .cm-rail { position: static; max-height: none; } .cm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1700px) { .cm-layout { grid-template-columns: minmax(0, 1fr) 30vw; } .cm-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .cm-board.is-first .cm-pc, .cm-board.is-first .cm-row, .cm-board.is-first .cm-bar > i, .cm-map-body.is-first .cm-bar > i, .cm-map-body.is-first .cm-tile-s,
  .cm-feed-l.is-arriving .cm-win, .cm-board-swap, .cm-sk { animation: none; }
  .cm-tile, .cm-tile-s, .cm-reg, .cm-clap, .cm-pc-b, .cm-chipb, .cm-refresh .bi, .cm-mini-open .bi { transition: none; }
}

.cm-card > .cm-basis-l { margin-top: 1.1rem; display: block; }
.cm-card-wins a { text-decoration: none; }
.cm-rows-more { margin: .8rem auto 0; display: flex; }

/* ===================== ROUND 3: WHAT'S NEW, MILESTONES, RING, TIMELINE, STICKY FILTERS ===================== */
/* ---------- WHAT'S NEW ---------- */
.cm-news { margin-bottom: 1rem; }
.cm-nw { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.05rem 1.3rem 1.15rem; box-shadow: var(--shadow, none); }
.cm-nw-h { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .8rem; margin-bottom: .7rem; }
.cm-nw-t { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); display: inline-flex; align-items: center; gap: .45rem; }
.cm-nw-t .bi { color: var(--accent-ink); font-size: 1.05em; }
.cm-nw-ai { font-size: var(--fs-xs); padding: .12rem .6rem; border-radius: 999px; border: 1px dashed var(--accent-line); color: var(--accent-ink); background: var(--accent-weak); cursor: help; font-weight: var(--fw-medium); }
.cm-nw-age { margin-left: auto; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-nw-age.is-old { color: var(--text); font-weight: var(--fw-bold); }
.cm-nw-age:empty { display: none; }
.cm-nw-busy { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--text-soft); }
.cm-nw-lede { margin: 0 0 .8rem; font-size: var(--fs-lg); line-height: 1.4; color: var(--text); font-weight: var(--fw-medium); max-width: 78ch; }
.cm-nw-l { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: nw; }
.cm-nw-i { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .65rem; padding: .6rem 0; border-top: 1px solid var(--border); align-items: start; }
.cm-nw-n { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--inset); color: var(--text-soft); font-size: var(--fs-2xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.cm-nw-b p, .cm-nw-co p { margin: 0 0 .35rem; font-size: var(--fs-md); line-height: 1.45; color: var(--text); }
.cm-nw-chip {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .12rem .6rem; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: var(--inset); border: 1px solid var(--border); color: var(--text-soft); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cm-nw-chip:hover { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent-ink); }
.cm-nw-chip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.cm-nw-chip.is-static { cursor: default; } .cm-nw-chip.is-static:hover { background: var(--inset); border-color: var(--border); color: var(--text-soft); }
.cm-nw-lede .cm-nw-chip { vertical-align: middle; margin-left: .3rem; }
.cm-nw-cos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .6rem; }
.cm-nw-cos:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.cm-nw-co { padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--inset); }
.cm-nw-co.is-celebrate { background: var(--accent-weak); border-color: var(--accent-line); }
.cm-nw-cok { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .25rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-soft); }
.cm-nw-co.is-celebrate .cm-nw-cok { color: var(--accent-ink); }
.cm-nw-fail { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; padding: .45rem .7rem; border-radius: 8px; background: var(--inset); border: 1px dashed var(--border); font-size: var(--fs-sm); color: var(--text); }
.cm-nw-sk { display: grid; gap: .6rem; } .cm-nw-sk-h { height: 2.6rem; max-width: 70ch; } .cm-nw-sk-i { height: 1.7rem; }
.cm-nw.is-first .cm-nw-lede { animation: cmRise .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.cm-nw.is-first .cm-nw-i { animation: cmRise .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.08s + var(--i, 0) * .06s); }
.cm-nw.is-first .cm-nw-co { animation: cmRise .5s cubic-bezier(.2, .7, .2, 1) .45s backwards; }

/* ---------- MILESTONES ---------- */
.cm-miles { margin-bottom: 1rem; }
.cm-miles[hidden] { display: none; }
.cm-ms { display: flex; align-items: center; gap: .8rem; padding: .55rem .9rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.cm-ms-k { flex: none; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-soft); }
.cm-ms-k .bi { color: var(--accent-ink); }
.cm-ms-l { list-style: none; margin: 0; padding: .1rem .1rem .3rem; display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; min-width: 0; scrollbar-width: thin; }
.cm-ms-l li { flex: none; scroll-snap-align: start; }
.cm-ms-i { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; background: var(--inset); border: 1px solid var(--border); color: var(--text); font-size: var(--fs-sm); white-space: nowrap; transition: background-color .15s, border-color .15s; }
.cm-ms-i:hover { background: var(--accent-weak); border-color: var(--accent-line); }
.cm-ms-i:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.cm-ms-i > .bi { color: var(--accent-ink); }
.cm-ms-i b { font-weight: var(--fw-bold); }

/* ---------- PODIUM RING: how close each of the three is to the leader's figure ---------- */
.cm-ring { --p: 0; --cmr: var(--text-soft); display: grid; place-items: center; width: 4.4rem; height: 4.4rem; margin: 0 auto; border-radius: 50%; padding: .3rem; cursor: help;
  background: conic-gradient(var(--cmr) calc(var(--p) * 1%), var(--border) 0); }
.cm-pc.is-1 .cm-ring { --cmr: var(--gold-500); }
.cm-ring .cm-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cmc); }

/* ---------- THE FEED IS A TIMELINE: a heading per day ---------- */
.cm-day { display: grid; gap: .55rem; margin-bottom: .4rem; }
.cm-day-h { position: sticky; top: -.55rem; z-index: 2; margin: 0; padding: .4rem 0 .25rem; display: flex; align-items: baseline; justify-content: space-between; background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-soft); border-bottom: 1px solid var(--border); }
.cm-day-h em { font-style: normal; font-weight: var(--fw-medium); color: var(--text-dim); }
.cm-rf { margin-bottom: .45rem; }
button.cm-win-rep { background: none; border: 0; padding: .1rem .3rem .1rem .1rem; margin-left: -.1rem; border-radius: 999px; cursor: pointer; transition: background-color .15s, color .15s; }
button.cm-win-rep:hover { background: var(--accent-weak); color: var(--accent-ink); }
button.cm-win-rep:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* ---------- STICKY FILTERS: on a tall screen the period, company and measure stay in reach while the board is read ---------- */
@media (min-height: 860px) and (min-width: 1101px) {
  .cm-toolbar { position: sticky; top: calc(var(--hdr-h, 62px) + .25rem); z-index: 5; background: var(--surface); padding: .45rem 0 .55rem; margin-top: -.45rem; border-bottom: 1px solid var(--border); }
}
@media (max-width: 1280px) { .cm-nw-l, .cm-nw-cos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cm-nw.is-first .cm-nw-lede, .cm-nw.is-first .cm-nw-i, .cm-nw.is-first .cm-nw-co { animation: none; }
  .cm-nw-chip, .cm-ms-i, button.cm-win-rep { transition: none; }
}
.cm-ms-l { -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }