/* ==========================================================================
   CodeMoot — warm light theme over Bootstrap 5
   Tokens from the design handoff; dark mode = warm espresso (#2B2018) via [data-theme].
   ========================================================================== */

:root {
  /* Unread badges: white on the light accent passes 4.5:1; the dark theme
     uses dark ink on a lighter orange instead of white on bright orange. */
  --cm-badge-bg: #C2410C;
  --cm-badge-ink: #FFFFFF;
  /* Surfaces */
  --cm-bg: #FAFAF8;
  --cm-panel: #F4F4F2;
  --cm-card: #FFFFFF;
  --cm-avatar-tint: #EEEEEA;
  --cm-divider-chip: #EEEEE9;

  /* Ink */
  --cm-ink: #1C1917;
  --cm-muted: rgba(28, 25, 23, 0.72);
  --cm-muted-soft: rgba(28, 25, 23, 0.68);
  --cm-muted-strong: rgba(28, 25, 23, 0.75);
  --cm-icon: #57534E;

  /* Accents */
  --cm-accent: #C2410C;
  --cm-accent-deep: #9A3412;
  --cm-grad-a: #EA580C;
  --cm-grad-b: #B45309;
  --cm-amber: #B45309;
  --cm-amber-deep: #92400E;
  --cm-gold: #A16207;
  --cm-olive: #4D7C0F;
  --cm-olive-deep: #3F6212;
  --cm-gold-deep: #854D0E;
  --cm-rose-deep: #881337;
  --cm-danger: #DC2626;
  --cm-danger-ink: #B91C1C;
  --cm-rose: #9F1239;

  /* Tints */
  --cm-accent-tint: rgba(194, 65, 12, 0.10);
  --cm-accent-tint-strong: rgba(194, 65, 12, 0.12);
  --cm-amber-tint: rgba(180, 83, 9, 0.12);
  --cm-gold-tint: rgba(161, 98, 7, 0.12);
  --cm-olive-tint: rgba(77, 124, 15, 0.12);
  --cm-olive-tint-soft: rgba(77, 124, 15, 0.14);
  --cm-danger-tint: rgba(220, 38, 38, 0.07);
  --cm-danger-fill: rgba(220, 38, 38, 0.05);
  --cm-rose-tint: rgba(159, 18, 57, 0.10);
  --cm-neutral-tint: rgba(28, 25, 23, 0.08);

  /* Borders */
  --cm-border: rgba(28, 25, 23, 0.10);
  --cm-border-mid: rgba(28, 25, 23, 0.14);
  --cm-border-input: rgba(28, 25, 23, 0.16);
  --cm-border-btn: rgba(28, 25, 23, 0.22);

  /* Effects */
  --cm-shadow-card: 0 8px 24px rgba(28, 25, 23, 0.06);
  --cm-shadow-card-lg: 0 16px 40px rgba(28, 25, 23, 0.1);
  --cm-shadow-screen: 0 24px 60px rgba(28, 25, 23, 0.14);
  --cm-shadow-lift: 0 18px 40px -18px rgba(28, 25, 23, 0.18);
  --cm-glow-btn: 0 10px 24px -10px rgba(194, 65, 12, 0.45);
  --cm-glow-btn-hover: 0 16px 32px -12px rgba(194, 65, 12, 0.5);

  /* Liquid glass: surfaces the background shines through, with a lit
     top rim. The network triplet is the canvas ink behind the hero. */
  --cm-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.26));
  --cm-glass-solid: #FAF9FA;
  --cm-card-glass: rgba(255, 255, 255, 0.62);
  --cm-glass-line: rgba(28, 25, 23, 0.12);
  --cm-rim: rgba(255, 255, 255, 0.9);
  --cm-rim-hi: rgba(255, 255, 255, 0.95);
  --cm-rim-low: rgba(255, 255, 255, 0.35);
  --cm-sheen: rgba(255, 255, 255, 0.55);
  --cm-glass-bright: 1.04;
  --cm-glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -12px 32px rgba(255, 255, 255, 0.28);
  --cm-fire-mid: #C2410C;
  --cm-net: 194, 65, 12;

  /* Violet: the sixth community colour, the one cool note in the warm
     set. Startups carries it. */
  --cm-violet: #57534E;
  --cm-violet-tint: rgba(87, 83, 78, 0.10);
  --cm-violet-deep: #44403C;
  --cm-shadow-modal: 0 30px 70px rgba(23, 21, 26, 0.35);
  --cm-focus-ring: rgba(194, 65, 12, 0.22);
  --cm-backdrop: rgba(28, 25, 23, 0.42);

  /* Skeleton */
  --cm-skel-a: #F0E8DA;
  --cm-skel-b: #E3D7C2;

  /* Nav */
  --cm-nav-bg: rgba(250, 250, 248, 0.8);

  /* Hero glows */
  --cm-glow-a: rgba(234, 88, 12, 0.08);
  --cm-glow-b: rgba(161, 98, 7, 0.06);

  /* Type */
  --cm-font-head: 'Space Grotesk', sans-serif;
  --cm-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Corners — the only radii in the product. Cards and other large
     surfaces take 16, controls and rows 12, small tiles and chips 8,
     and anything fully rounded takes the pill. Circles stay 50%.
     Spacing sits on the 4px grid: padding, margins and gaps of 8px or
     more are multiples of 4, and 1-7px is for optical fitting inside
     small elements. tools/grid_check.py holds both rules in CI. */
  --cm-radius-card: 16px;
  --cm-radius-panel: 28px;
  --cm-radius-control: 12px;
  --cm-radius-sm: 8px;
  --cm-radius-pill: 999px;

  /* The world map. The events globe and its flat fallback read every one
     of these, so light and dark are both designed rather than one being a
     filter over the other.

     Land against the ocean under it, measured over the whole disc and
     every sun position rather than at the middle of it, because the
     shading of a sphere varies from the subsolar point to the
     silhouette and so does the contrast. The reading that used to sit
     here (3.11, 3.82, 3.36 and 4.49 to one for the four illumination
     bands) was taken at the centre of the disc and held there only.

     Worst case by tenth of the radius, light then dark: 3.07 and 3.47
     at the middle, 2.89 and 2.80 at half way, 2.46 and 2.54 at four
     fifths, 1.77 and 1.32 in the outermost tenth. The 3:1 that WCAG
     1.4.11 asks of a graphic you need in order to understand the
     content holds over the inner four tenths of the radius in the light
     theme and the inner two in the dark one. Past that a land dot is
     foreshortened under a pixel across and carries the limb shade, so
     what the edge of the disc shows is the edge of the sphere and not a
     mark anyone reads a country off.

     tests/test_globe_contrast.py recomputes all twenty figures from
     these tokens and the renderer's own constants, so moving one fails
     a check instead of only a sentence. Sea dots are texture and are
     deliberately quiet. */
  --cm-map: #EFECE5;            /* the globe's ocean body, the night side */
  --cm-map-lit: #F7F5F1;        /* ocean under the sun */
  /* The graticule, painted on the canvas by globe.js. No rule here reads
     it; tests/test_globe_contract.py is what stops it being deleted. */
  --cm-map-line: rgba(28, 25, 23, 0.10);
  --cm-map-sea: #C9C4BA;        /* an ocean dot */
  --cm-map-sea-dim: #DCD8D0;    /* an ocean dot after dark */
  --cm-map-land: #8A857D;       /* a land dot */
  --cm-map-land-dim: #6F6B64;   /* land after dark, deeper not fainter */
  --cm-map-sheen: #FFFFFF;      /* specular water at the subsolar point */
  --cm-map-halo: #575452;       /* stone on the limb, the aurora gone grey */
  --cm-map-edge: #1C1917;       /* the shade that rounds the limb */

  /* Event pin colours, one per community family. live.js used to carry
     these as hexes that were right on the light theme and about 3:1 on
     the dark one; as tokens each theme gets its own value. Every one
     clears 4.5:1 against the card-coloured collar it is drawn on. */
  --cm-pin-accent: #C2410C;
  --cm-pin-amber: #B45309;
  --cm-pin-gold: #A16207;
  --cm-pin-rose: #B91C1C;
  --cm-pin-olive: #4D7C0F;
  --cm-pin-violet: #57534E;

  color-scheme: light;
}

/* ---- Dark mode: warm espresso variant on #2B2018, same ember accents ---- */
[data-theme="dark"] {
  --cm-badge-bg: #FB9A5B;
  --cm-badge-ink: #241C14;
  --cm-bg: #121212;
  --cm-panel: #1A1A1A;
  --cm-card: #1C1C1C;
  --cm-avatar-tint: #2A2A2A;
  --cm-divider-chip: #222222;

  --cm-ink: #F5F3F0;
  --cm-muted: rgba(245, 243, 240, 0.68);
  --cm-muted-soft: rgba(245, 243, 240, 0.58);
  --cm-muted-strong: rgba(245, 243, 240, 0.80);
  --cm-icon: #A8A29E;

  --cm-accent: #EA580C;
  --cm-accent-deep: #F97B3D;
  --cm-grad-a: #F97316;
  --cm-grad-b: #C2740B;
  --cm-amber: #E09A3A;
  --cm-amber-deep: #EDB264;
  --cm-gold: #D4AC3A;
  --cm-olive: #9CB44A;
  --cm-olive-deep: #B3C96A;
  --cm-gold-deep: #E2C163;
  --cm-rose-deep: #F07A9B;
  --cm-danger: #EF4444;
  --cm-danger-ink: #F98080;
  --cm-rose: #E5537C;

  --cm-accent-tint: rgba(234, 88, 12, 0.16);
  --cm-accent-tint-strong: rgba(234, 88, 12, 0.22);
  --cm-amber-tint: rgba(224, 154, 58, 0.16);
  --cm-gold-tint: rgba(212, 172, 58, 0.14);
  --cm-olive-tint: rgba(156, 180, 74, 0.16);
  --cm-olive-tint-soft: rgba(156, 180, 74, 0.18);
  --cm-danger-tint: rgba(239, 68, 68, 0.12);
  --cm-danger-fill: rgba(239, 68, 68, 0.08);
  --cm-rose-tint: rgba(229, 83, 124, 0.14);
  --cm-neutral-tint: rgba(245, 243, 240, 0.08);

  --cm-border: rgba(245, 243, 240, 0.10);
  --cm-border-mid: rgba(245, 243, 240, 0.13);
  --cm-border-input: rgba(245, 243, 240, 0.16);
  --cm-border-btn: rgba(245, 243, 240, 0.24);

  --cm-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --cm-shadow-card-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --cm-shadow-lift: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  --cm-glow-btn: 0 10px 24px -8px rgba(234, 88, 12, 0.3);
  --cm-glow-btn-hover: 0 14px 30px -10px rgba(234, 88, 12, 0.38);
  --cm-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  --cm-glass-solid: #1E1E1E;
  --cm-card-glass: rgba(30, 28, 35, 0.52);
  --cm-glass-line: rgba(245, 243, 240, 0.14);
  --cm-rim: rgba(255, 255, 255, 0.22);
  --cm-rim-hi: rgba(255, 255, 255, 0.5);
  --cm-rim-low: rgba(255, 255, 255, 0.08);
  --cm-sheen: rgba(255, 255, 255, 0.14);
  --cm-glass-bright: 1.08;
  --cm-glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -14px 34px rgba(0, 0, 0, 0.22);
  --cm-fire-mid: #FBBF24;
  --cm-net: 249, 115, 22;
  --cm-violet: #A8A29E;
  --cm-violet-tint: rgba(168, 162, 158, 0.16);
  --cm-violet-deep: #D6D3D1;
  --cm-shadow-screen: 0 24px 60px rgba(0, 0, 0, 0.5);
  --cm-shadow-modal: 0 30px 70px rgba(0, 0, 0, 0.65);
  --cm-focus-ring: rgba(249, 115, 22, 0.30);
  --cm-backdrop: rgba(8, 7, 10, 0.64);

  --cm-skel-a: #3A2C20;
  --cm-skel-b: #4A392A;

  --cm-nav-bg: rgba(19, 18, 22, 0.78);

  --cm-glow-a: rgba(249, 115, 22, 0.10);
  --cm-glow-b: rgba(212, 172, 58, 0.07);

  --cm-map: #17161F;
  --cm-map-lit: #24222E;
  --cm-map-line: rgba(245, 243, 240, 0.10);
  --cm-map-sea: #3A3747;
  --cm-map-sea-dim: #262430;
  --cm-map-land: #8C88A0;
  --cm-map-land-dim: #706D86;
  --cm-map-sheen: #FFFFFF;
  --cm-map-halo: #A8A29E;
  --cm-map-edge: #000000;

  --cm-pin-accent: #EA580C;
  --cm-pin-amber: #E09A3A;
  --cm-pin-gold: #D4AC3A;
  --cm-pin-rose: #E5537C;
  --cm-pin-olive: #9CB44A;
  --cm-pin-violet: #A8A29E;

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--cm-bg);
  color: var(--cm-ink);
  font-family: var(--cm-font-body);
  font-size: 15px;
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4, .cm-head { font-family: var(--cm-font-head); color: var(--cm-ink); }

a { color: var(--cm-accent); text-decoration: none; }
a:hover { color: var(--cm-accent-deep); }

::selection { background: rgba(194, 65, 12, 0.18); }

:focus-visible {
  outline: 3px solid var(--cm-focus-ring);
  outline-offset: 1px;
  border-radius: var(--cm-radius-sm);
}

.cm-muted { color: var(--cm-muted); }
.cm-muted-soft { color: var(--cm-muted-soft); }
.cm-micro {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm-muted-soft);
  font-weight: 600;
}
.cm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-glass);
  border: 1px solid var(--cm-glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 1px 0 var(--cm-rim);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cm-muted-strong);
  font-weight: 600;
}
.cm-tabular { font-variant-numeric: tabular-nums; }

/* Display / headings scale */
.cm-display {
  font-size: clamp(38px, 6.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.cm-h1 { font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.cm-h2 { font-size: clamp(22px, 2.8vw, 30px); font-weight: 600; }

/* A word set in the brand gradient inside a heading. */
.cm-grad-text {
  background: linear-gradient(120deg, var(--cm-grad-a), var(--cm-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Keyframes */
@keyframes cmpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.3); }
}
@keyframes cmshimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 400px 0; }
}

/* Scroll reveal */
.cm-reveal { opacity: 0; transform: translateY(16px); filter: blur(10px); transition: opacity .55s ease, transform .55s ease, filter .5s ease; transition-delay: calc(var(--cm-i, 0) * 70ms); }
.cm-reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .cm-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .cm-card, .cm-lift { transition: none; }
  a .cm-card:hover, .cm-card:has(> a):hover, button .cm-card:hover { transform: none; }
  .cm-header { transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   Navbar
   ========================================================================== */

.cm-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--cm-nav-bg);
  /* Liquid glass, not a blurred panel. The three things that separate
     them: saturation, so colour passing underneath stays colour rather
     than going grey; a specular rim on the top edge, which is what the
     eye reads as a lit surface; and a shadow, which is the only one of
     the three that says the bar is above the page rather than part of
     it. The brightness lift keeps text on the bar legible when
     something dark scrolls under it. */
  -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  backdrop-filter: blur(24px) saturate(1.9) brightness(1.04);
  border-bottom: 1px solid var(--cm-glass-line);
  box-shadow: inset 0 1px 0 var(--cm-rim), 0 1px 24px -12px rgba(0, 0, 0, .5);
  transition: box-shadow .25s ease, background-color .25s ease;
}
/* Deepens once the page has moved, so the bar reads as resting on the
   content rather than floating over nothing. `app.js` sets the flag. */
.cm-header.is-scrolled {
  box-shadow: inset 0 1px 0 var(--cm-rim), 0 10px 30px -18px rgba(0, 0, 0, .75);
}
.cm-navbar { padding: 0; }
.cm-nav-inner { min-height: 72px; padding: 8px 48px; }
@media (max-width: 991.98px) { .cm-nav-inner { min-height: 60px; padding: 8px 16px; } }

.cm-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cm-font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--cm-ink) !important;
}
.cm-logo {
  width: 26px;
  height: 26px;
  border-radius: var(--cm-radius-sm);
  background: linear-gradient(135deg, var(--cm-grad-a), var(--cm-grad-b));
  display: block;
}

/* Brand mark (inline SVG) + wordmark accent */
.cm-logo-svg { width: 26px; height: 26px; display: block; flex: none; }
.cm-oo { color: var(--cm-accent); }

.cm-nav-links .nav-link {
  padding: 8px 12px;
  border-radius: var(--cm-radius-control);
  font-size: 14px;
  font-weight: 500;
  color: var(--cm-muted);
}
.cm-nav-links .nav-link:hover { color: var(--cm-ink); }
.cm-nav-links .nav-link.active {
  color: var(--cm-violet-deep);
  background: var(--cm-violet-tint);
}
@media (max-width: 991.98px) {
  .cm-nav-links { padding: 8px 4px 16px; }
  .cm-nav-links .nav-link { padding: 12px 16px; }
}

.cm-icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--cm-radius-control);
  border: 1px solid var(--cm-border-mid);
  background: var(--cm-card);
  color: var(--cm-icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
  flex: none;
}
.cm-icon-btn:hover { border-color: var(--cm-border-btn); color: var(--cm-ink); }
@media (max-width: 991.98px) { .cm-icon-btn { width: 44px; height: 44px; border-radius: var(--cm-radius-control); } }

.cm-bell-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-badge-bg);
  color: var(--cm-badge-ink);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--cm-bg);
  z-index: 1;
}
.cm-bell-halo {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  border-radius: var(--cm-radius-pill);
  background: rgba(194, 65, 12, 0.35);
  animation: cmpulse 2s infinite;
}

.cm-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C2410C, #D97706);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  border: none;
  flex: none;
  cursor: pointer;
}

.navbar-toggler { box-shadow: none !important; }

/* Dropdown (avatar menu, sort, topics, notifications) */
.dropdown-menu {
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow-card-lg), inset 0 1px 0 var(--cm-rim);
  padding: 8px;
}
.dropdown-item {
  border-radius: var(--cm-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--cm-ink);
  padding: 8px 12px;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--cm-neutral-tint); color: var(--cm-ink); }
.dropdown-item.active,
.dropdown-item:active { background: var(--cm-accent-tint); color: var(--cm-accent-deep); }
.dropdown-item.cm-danger-item { color: var(--cm-danger-ink); }
.dropdown-item.cm-danger-item:hover { background: var(--cm-danger-tint); color: var(--cm-danger-ink); }
.dropdown-divider { border-color: var(--cm-border); }
.dropdown-header { color: var(--cm-muted-soft); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn { font-family: var(--cm-font-body); font-size: 14px; font-weight: 500; border-radius: var(--cm-radius-control); }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--cm-focus-ring); }

.btn-cm-primary {
  background: linear-gradient(120deg, color-mix(in srgb, var(--cm-grad-a) 90%, transparent), color-mix(in srgb, var(--cm-grad-b) 90%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--cm-radius-pill);
  box-shadow: var(--cm-glow-btn), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-cm-primary:hover, .btn-cm-primary:focus {
  background: linear-gradient(120deg, color-mix(in srgb, #9A3412 92%, transparent), color-mix(in srgb, #7C2D12 92%, transparent));
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--cm-glow-btn-hover);
}
[data-theme="dark"] .btn-cm-primary:hover, [data-theme="dark"] .btn-cm-primary:focus { background: #C2410C; border-color: rgba(255, 255, 255, 0.26); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn-cm-primary { background: linear-gradient(120deg, var(--cm-grad-a), var(--cm-grad-b)); }
  .btn-cm-ink { background: var(--cm-accent-tint-strong); }
  .btn-cm-outline { background: var(--cm-card); border-color: var(--cm-border-btn); }
  .btn-cm-ghost { background: transparent; }
}
@media (prefers-reduced-transparency: reduce) {
  .cm-glass { background: var(--cm-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cm-glass::before, .cm-glass::after { display: none; }
  .btn-cm-primary { background: linear-gradient(120deg, var(--cm-grad-a), var(--cm-grad-b)); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-cm-ink { background: var(--cm-accent-tint-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-cm-outline { background: var(--cm-card); border-color: var(--cm-border-btn); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn-cm-ghost { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.btn-cm-primary:disabled { background: var(--cm-accent); border-color: var(--cm-accent); opacity: .45; transform: none; }

/* The strong everyday button: the ember tint with ember ink, as the NCU
   pages set their second button. It was a solid ink bar, which read as
   black against every coloured thing around it. */
.btn-cm-ink {
  background: color-mix(in srgb, var(--cm-accent) 16%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--cm-accent) 28%, transparent);
  box-shadow: none;
  color: var(--cm-accent-deep);
  font-weight: 600;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--cm-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-cm-ink:hover, .btn-cm-ink:focus {
  color: var(--cm-accent-deep);
  background: color-mix(in srgb, var(--cm-accent) 24%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -12px rgba(194, 65, 12, 0.45);
}
.btn-cm-ink:disabled { opacity: .45; transform: none; }

.btn-cm-outline {
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  box-shadow: inset 0 1px 0 var(--cm-rim);
  color: var(--cm-ink);
  height: 44px;
  padding: 0 24px;
  border-radius: var(--cm-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .2s ease, border-color .2s ease;
}
.btn-cm-outline:hover, .btn-cm-outline:focus {
  border-color: rgba(194, 65, 12, 0.5);
  color: var(--cm-ink);
  transform: translateY(-3px);
}

.btn-cm-ghost {
  background: color-mix(in srgb, var(--cm-accent) 8%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--cm-accent) 16%, transparent);
  border-radius: var(--cm-radius-pill);
  color: var(--cm-accent-deep);
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-cm-ghost:hover, .btn-cm-ghost:focus { color: var(--cm-accent); }

.btn-cm-danger-outline {
  background: transparent;
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: var(--cm-danger-ink);
  height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-cm-danger-outline:hover, .btn-cm-danger-outline:focus { border-color: var(--cm-danger); color: var(--cm-danger-ink); background: var(--cm-danger-tint); }

.btn-cm-danger {
  background: #DC2626;
  border: 1px solid #DC2626;
  color: #fff;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-cm-danger:hover, .btn-cm-danger:focus { background: #B91C1C; border-color: #B91C1C; color: #fff; }

.btn-cm-dashed {
  background: transparent;
  border: 1px dashed rgba(194, 65, 12, 0.4);
  color: var(--cm-accent-deep);
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.btn-cm-dashed:hover { border-color: var(--cm-accent); color: var(--cm-accent-deep); }

.btn-cm-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-cm-sm { height: 40px; padding: 0 16px; font-size: 13px; }
@media (max-width: 767.98px) {
  .btn-cm-lg { height: 48px; font-size: 15px; }
}

/* ==========================================================================
   Chips & badges
   ========================================================================== */

.cm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--cm-radius-sm);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.cm-chip-lg { height: 28px; padding: 0 12px; }
.cm-chip-xl { height: 30px; padding: 0 16px; font-weight: 600; }
.cm-chip-accent { background: var(--cm-accent-tint); color: var(--cm-accent-deep); }
.cm-chip-amber { background: var(--cm-amber-tint); color: var(--cm-amber-deep); }
.cm-chip-gold { background: var(--cm-gold-tint); color: var(--cm-gold-deep); }
.cm-chip-olive { background: var(--cm-olive-tint); color: var(--cm-olive-deep); }
.cm-chip-rose { background: var(--cm-rose-tint); color: var(--cm-rose-deep); }
.cm-chip-neutral { background: var(--cm-neutral-tint); color: var(--cm-muted-strong); }
.cm-chip-danger { background: var(--cm-danger-tint); color: var(--cm-danger-ink); }
.cm-chip-dashed { background: var(--cm-card); border: 1px dashed rgba(28, 25, 23, 0.3); color: var(--cm-muted); cursor: pointer; }
[data-theme="dark"] .cm-chip-dashed { border-color: rgba(245, 243, 240, 0.3); }
.cm-chip-unread { background: rgba(220, 38, 38, 0.10); color: var(--cm-danger-ink); font-size: 11px; font-weight: 600; }

.cm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cm-olive); display: inline-block; flex: none; }
.cm-dot-pulse { animation: cmpulse 2s infinite; }

/* Filter chips (topic / source rows) */
.cm-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* inline-flex drops the text-node space before a count span */
  height: 34px;
  padding: 0 16px;
  border-radius: var(--cm-radius-control);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--cm-card);
  color: var(--cm-muted-strong);
  border: 1px solid var(--cm-border-input);
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.cm-filter:hover { border-color: var(--cm-border-btn); color: var(--cm-ink); }
.cm-filter.active { background: var(--cm-ink); color: var(--cm-bg); border-color: var(--cm-ink); }
@media (max-width: 767.98px) { .cm-filter { height: 36px; } }

/* Selectable interest chips */
.cm-select-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--cm-radius-control);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--cm-card);
  color: var(--cm-muted-strong);
  border: 1px solid rgba(28, 25, 23, 0.18);
  user-select: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
[data-theme="dark"] .cm-select-chip { border-color: rgba(245, 243, 240, 0.18); }
.cm-select-chip:hover { border-color: var(--cm-border-btn); }
.cm-select-chip.selected {
  background: var(--cm-accent-tint);
  color: var(--cm-accent-deep);
  border-color: rgba(194, 65, 12, 0.4);
}
@media (max-width: 767.98px) { .cm-select-chip { height: 36px; padding: 0 12px; } }

/* Monogram tiles */
.cm-mono {
  border-radius: var(--cm-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cm-font-head);
  font-weight: 600;
  flex: none;
}

/* The six official communities' pictures (frontend/assets/communities).
   Each has a light and a dark version; the page names both as custom
   properties and the theme picks one, so only that one is downloaded and
   a theme switch swaps it at once. Decorative: the name beside it says
   which community it is. */
.cm-art {
  display: block;
  flex: none;
  background-color: var(--cm-neutral-tint);
  background-image: var(--art-light);
  background-size: cover;
  background-position: center;
}
[data-theme="dark"] .cm-art { background-image: var(--art-dark); }
.cm-art-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--cm-radius-control); }
.cm-art-thumb { width: 44px; height: 44px; border-radius: var(--cm-radius-control); }
.cm-art-chip { width: 24px; height: 24px; border-radius: 50%; margin-left: -8px; }
/* The cover of a community with no picture: its monogram, large, on its tint. */
.cm-art-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cm-font-head);
  font-weight: 600;
  font-size: 32px;
}

/* Avatar stack + circles */
.cm-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cm-avatar-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--cm-accent-deep);
  flex: none;
}
.cm-stack { display: flex; }
.cm-stack .cm-face { border: 2px solid var(--cm-bg); margin-right: -8px; }
.cm-stack-panel .cm-face { border-color: var(--cm-panel); }

/* ==========================================================================
   Cards
   ========================================================================== */

.cm-card {
  position: relative;
  background: var(--cm-card-glass);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-card);
  /* Liquid glass, not a painted panel: the aurora drifts behind every
     page at z-index 0, and the blur plus saturation means that moving
     light passes through the card instead of stopping at it. The inset
     rim is the lit top edge, which is the part the eye reads as glass.
     The filter is written out literally twice because Safari does not
     reliably resolve custom properties inside -webkit-backdrop-filter. */
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--cm-shadow-card), inset 0 1px 0 var(--cm-rim);
  /* Every card answers the pointer. `.cm-lift` is the louder version
     and stays opt-in for cards that are doors; this is the quiet one
     that makes a page feel alive under the hand rather than printed. */
  transition: transform .18s cubic-bezier(.22,.61,.36,1),
              border-color .18s ease,
              box-shadow .18s ease;
}
a .cm-card:hover,
.cm-card:has(> a):hover,
button .cm-card:hover { transform: translateY(-2px); box-shadow: var(--cm-shadow-card-lg); }
.cm-lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cm-lift:hover { transform: translateY(-4px); border-color: rgba(194, 65, 12, 0.5); box-shadow: var(--cm-shadow-lift); }
.cm-lift-sm:hover { transform: translateY(-3px); }

/* A soft radial wash behind a hero, from the glow tokens both themes carry. */
.cm-hero-wash { background: radial-gradient(640px 320px at 50% -60px, var(--cm-glow-a), transparent 70%); }

/* Feature cards on a colour tint: the community surfaces' accent. */
.cm-card-tint-accent { background: var(--cm-accent-tint); border-color: transparent; }
.cm-card-tint-amber { background: var(--cm-amber-tint); border-color: transparent; }
.cm-card-tint-gold { background: var(--cm-gold-tint); border-color: transparent; }
.cm-card-tint-rose { background: var(--cm-rose-tint); border-color: transparent; }
.cm-card-tint-olive { background: var(--cm-olive-tint); border-color: transparent; }
.cm-card-tint-violet { background: var(--cm-violet-tint); border-color: transparent; }
.cm-chip-violet { background: var(--cm-violet-tint); color: var(--cm-violet-deep); }

/* The liquid glass material, six layers bottom to top: blurred backdrop,
   gradient fill, hairline, corner rim, sheen, then the outer lift and the
   inner thickness. The sheen is the before layer so it paints under the
   content; the rim is the after layer, over everything, a ring only. */
.cm-glass {
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.9) brightness(var(--cm-glass-bright));
  backdrop-filter: blur(22px) saturate(1.9) brightness(var(--cm-glass-bright));
  border: 1px solid var(--cm-glass-line);
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow-card-lg), var(--cm-glass-inner);
  position: relative;
}
.cm-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 70% at 15% -10%, var(--cm-sheen), transparent 55%),
              radial-gradient(80% 50% at 100% 110%, var(--cm-rim-low), transparent 60%);
}
.cm-glass::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--cm-rim-hi), var(--cm-rim-low) 30%, transparent 55%, var(--cm-rim-low) 80%, var(--cm-rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.cm-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--cm-ink);
  margin-bottom: 6px;
}
.cm-label .cm-hint { font-weight: 400; color: var(--cm-muted-soft); }
.cm-label.is-error { color: var(--cm-danger-ink); }

.form-control, .form-select {
  height: 44px;
  border-radius: var(--cm-radius-control);
  border: 1px solid var(--cm-border-input);
  background-color: var(--cm-card);
  padding: 0 16px;
  font-family: var(--cm-font-body);
  font-size: 14px;
  color: var(--cm-ink);
  box-shadow: none;
  transition: border-color .15s ease, outline-color .15s ease;
}
textarea.form-control { height: auto; min-height: 96px; padding: 12px 16px; line-height: 1.6; }
.form-control::placeholder { color: rgba(28, 25, 23, 0.5); }
[data-theme="dark"] .form-control::placeholder { color: rgba(245, 243, 240, 0.45); }
.form-control:focus, .form-select:focus {
  border-color: var(--cm-accent);
  outline: 3px solid var(--cm-focus-ring);
  outline-offset: 0;
  box-shadow: none;
  background-color: var(--cm-card);
  color: var(--cm-ink);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%235C5245'%3E%3Cpath d='m216 100-88 88-88-88 12-12 76 76 76-76Z'/%3E%3C/svg%3E");
  background-size: 14px;
  padding-right: 40px;
}
@media (max-width: 767.98px) { .form-control, .form-select { height: 46px; } }

/* Validation states (custom, mapped onto Bootstrap's class names) */
.form-control.is-valid, .was-validated .form-control:valid {
  border-color: rgba(77, 124, 15, 0.5);
  background-image: none;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--cm-danger);
  background-color: var(--cm-danger-fill);
  background-image: none;
}
.cm-feedback {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  margin-top: 6px;
  color: var(--cm-muted-soft);
}
.cm-feedback.is-valid { color: var(--cm-olive); }
.cm-feedback.is-error { color: var(--cm-danger-ink); }
.cm-feedback:empty { display: none; }

.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 5px;
  border: 1px solid rgba(28, 25, 23, 0.3);
  background-color: var(--cm-card);
  box-shadow: none !important;
  flex: none;
  cursor: pointer;
}
[data-theme="dark"] .form-check-input { border-color: rgba(245, 243, 240, 0.3); }
.form-check-input:checked { background-color: var(--cm-accent); border-color: var(--cm-accent); }
.form-check-label { font-size: 13px; color: var(--cm-muted-strong); cursor: pointer; }

/* A checkbox is 18px and a finger is not. The box keeps the size it is
   drawn at and the row around it becomes the target: the label is already
   bound to the input by `for`, so the whole row toggles it once the row is
   tall enough to hit. 44px is the floor this product holds itself to, and
   three rows on the campus console were 21. */
.form-check { display: flex; align-items: center; min-height: 44px; margin-bottom: 0; }
.form-check .form-check-input { margin-top: 0; }

/* Password strength meter */
.cm-strength { display: flex; gap: 4px; margin-top: 8px; }
.cm-strength span { height: 4px; flex: 1; border-radius: 2px; background: rgba(28, 25, 23, 0.12); transition: background-color .2s ease; }
[data-theme="dark"] .cm-strength span { background: rgba(245, 243, 240, 0.12); }

/* Error banner (login) */
.cm-banner-error {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--cm-danger-tint);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--cm-radius-control);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cm-danger-ink);
}

/* Search input with icon */
.cm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border-radius: var(--cm-radius-control);
  border: 1px solid var(--cm-border-input);
  background: var(--cm-card);
  padding: 0 16px;
}
.cm-search:focus-within { border-color: var(--cm-accent); outline: 3px solid var(--cm-focus-ring); }
.cm-search svg { flex: none; color: rgba(28, 25, 23, 0.5); }
[data-theme="dark"] .cm-search svg { color: rgba(245, 243, 240, 0.5); }
.cm-search input {
  border: none;
  outline: none !important;
  background: transparent;
  flex: 1;
  min-width: 0;
  font-family: var(--cm-font-body);
  font-size: 14px;
  color: var(--cm-ink);
  height: 100%;
}
.cm-search input::placeholder { color: rgba(28, 25, 23, 0.5); }
[data-theme="dark"] .cm-search input::placeholder { color: rgba(245, 243, 240, 0.45); }
@media (max-width: 767.98px) { .cm-search { height: 46px; } }

/* ==========================================================================
   Toasts
   ========================================================================== */

.cm-toast-region {
  position: fixed;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.cm-toast-region.top-right { top: 88px; right: 24px; }
.cm-toast-region.bottom-right { bottom: 24px; right: 24px; }
@media (max-width: 575.98px) {
  .cm-toast-region.top-right, .cm-toast-region.bottom-right { left: 16px; right: 16px; }
}

.cm-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-left: 3px solid var(--cm-accent);
  border-radius: var(--cm-radius-control);
  padding: 12px 16px;
  box-shadow: 0 12px 30px rgba(140, 100, 50, 0.2);
  font-size: 14px;
  color: var(--cm-ink);
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
[data-theme="dark"] .cm-toast { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.cm-toast.show { opacity: 1; transform: none; }
.cm-toast.olive { border-left-color: var(--cm-olive); border-color: rgba(77, 124, 15, 0.35); }
.cm-toast.olive .cm-toast-icon { color: var(--cm-olive); }
.cm-toast.accent { border-left-color: var(--cm-accent); border-color: rgba(194, 65, 12, 0.35); }
.cm-toast.accent .cm-toast-icon { color: var(--cm-accent); }
.cm-toast.danger { border-left-color: var(--cm-danger); border-color: rgba(220, 38, 38, 0.35); }
.cm-toast.danger .cm-toast-icon { color: var(--cm-danger-ink); }
.cm-toast-icon { flex: none; display: inline-flex; }
.cm-toast-action {
  border: none;
  background: transparent;
  color: var(--cm-accent-deep);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--cm-font-body);
  margin-left: auto;
  flex: none;
}

/* ==========================================================================
   Skeletons
   ========================================================================== */

.cm-skel {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cm-skel-a), var(--cm-skel-b), var(--cm-skel-a));
  background-size: 400px 100%;
  animation: cmshimmer 1.4s infinite linear;
}

/* ==========================================================================
   Modals (Bootstrap, restyled)
   ========================================================================== */

.modal-backdrop { background-color: var(--cm-backdrop); }
.modal-backdrop.show { opacity: 1; }
.cm-modal .modal-content {
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow-modal), inset 0 1px 0 var(--cm-rim);
  color: var(--cm-ink);
}
.cm-modal .modal-body { padding: 28px; }
.cm-modal-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--cm-radius-card);
  background: rgba(220, 38, 38, 0.10);
  color: var(--cm-danger-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

/* ==========================================================================
   Hero / sections
   ========================================================================== */

.cm-hero {
  background:
    radial-gradient(900px 420px at 12% 0%, var(--cm-glow-a), transparent 70%),
    radial-gradient(700px 400px at 88% 20%, var(--cm-glow-b), transparent 70%);
}
.cm-hero-center {
  background:
    radial-gradient(800px 500px at 50% 10%, var(--cm-glow-a), transparent 70%),
    radial-gradient(600px 400px at 85% 90%, var(--cm-glow-b), transparent 70%);
}
.cm-panel-bg { background: var(--cm-panel); }
.cm-strip { background: var(--cm-panel); border-top: 1px solid var(--cm-border); border-bottom: 1px solid var(--cm-border); }

.cm-section { padding: 0 64px 72px; }
.cm-container { max-width: 1312px; margin: 0 auto; }
@media (max-width: 991.98px) { .cm-section { padding: 0 20px 40px; } }

/* Benefit checklist */
.cm-check {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--cm-radius-sm);
  background: var(--cm-olive-tint-soft);
  color: var(--cm-olive-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Chat styles live in css/chat.css; the shared presence dot stays
   ========================================================================== */
.cm-presence { position: relative; }
.cm-presence .cm-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cm-panel);
}

/* ==========================================================================
   News
   ========================================================================== */

.cm-news-img { position: relative; height: 150px; }
.cm-news-source {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--cm-radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.92);
}
.cm-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--cm-radius-control);
  border: 1px solid var(--cm-border-input);
  background: var(--cm-card);
  color: var(--cm-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  font-family: var(--cm-font-body);
}
.cm-action-btn:hover { border-color: var(--cm-border-btn); color: var(--cm-ink); }
.cm-action-btn.active {
  background: var(--cm-accent-tint);
  color: var(--cm-accent-deep);
  border-color: rgba(194, 65, 12, 0.35);
}
@media (max-width: 767.98px) { .cm-action-btn { height: 36px; } }

/* ==========================================================================
   Events styles live in css/events.css
   ========================================================================== */

/* ==========================================================================
   Profile
   ========================================================================== */

.cm-cover {
  height: 140px;
  background: linear-gradient(120deg, rgba(234, 88, 12, 0.18), rgba(180, 83, 9, 0.14) 55%, rgba(77, 124, 15, 0.12));
}
@media (max-width: 767.98px) { .cm-cover { height: 90px; } }
.cm-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C2410C, #D97706);
  border: 4px solid var(--cm-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cm-font-head);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  flex: none;
}
@media (max-width: 767.98px) { .cm-profile-avatar { width: 76px; height: 76px; font-size: 22px; } }

.cm-stat-tile { min-width: 112px; padding: 12px 16px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control); background: var(--cm-card); }
.cm-stat-tile .n { font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cm-stat-tile .l { font-size: 12px; color: var(--cm-muted-soft); margin-top: 2px; }

.cm-platform-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-control);
}
.cm-platform-icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--cm-radius-control);
  background: var(--cm-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-icon);
}
.cm-connect-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--cm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--cm-olive-tint);
  color: var(--cm-olive-deep);
  font-family: var(--cm-font-body);
}
.cm-connect-chip.connect {
  background: var(--cm-card);
  color: var(--cm-accent-deep);
  border-color: rgba(194, 65, 12, 0.4);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.cm-footer { padding: 48px 64px; }
/* A footer hosting the halftone panel is nothing but the panel. */
.cm-footer.cm-hwf-host { padding: 0; }
@media (max-width: 991.98px) { .cm-footer { padding: 28px 20px 36px; } }
.cm-footer-head { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-muted-soft); margin-bottom: 12px; font-weight: 500; }
.cm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; font-size: 14px; }
.cm-footer ul a { color: var(--cm-muted-strong); display: inline-block; padding: 4px 8px; margin: 0 -8px; }
.cm-footer ul a:hover { color: var(--cm-accent-deep); }
.cm-social-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--cm-radius-control);
  border: 1px solid var(--cm-border-input);
  background: var(--cm-card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-muted-strong);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.cm-social-btn:hover { transform: translateY(-3px); border-color: rgba(194, 65, 12, 0.5); color: var(--cm-accent-deep); }
@media (max-width: 767.98px) { .cm-social-btn { width: 44px; height: 44px; } }

/* Video placeholder */
.cm-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--cm-radius-card);
  overflow: hidden;
  background: linear-gradient(135deg, #3A2A1C, #6B4423 55%, #9A5B2E);
  box-shadow: 0 20px 50px rgba(140, 100, 50, 0.25);
}
[data-theme="dark"] .cm-video { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.cm-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C2410C;
  box-shadow: 0 12px 30px rgba(20, 12, 4, 0.35);
  cursor: pointer;
}
.cm-video-time {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--cm-radius-sm);
  font-size: 12px;
  font-weight: 600;
  background: rgba(20, 12, 4, 0.65);
  color: #fff;
}

/* Utility */
.cm-divider { height: 1px; background: var(--cm-border); border: none; opacity: 1; }
.cm-scroll-x { overflow-x: auto; scrollbar-width: thin; }
.cm-pin-note { font-size: 12px; line-height: 1.55; color: var(--cm-muted-strong); }

/* ==========================================================================
   Page layout paddings (desktop 1440 rhythm → mobile 390)
   ========================================================================== */

.cm-hero-pad { padding: 88px 64px 72px; }
.cm-page-pad { padding: 48px 64px 64px; }
.cm-block-pad { padding: 0 64px 72px; }
.cm-strip-pad { padding: 28px 64px; }
@media (max-width: 991.98px) {
  /* g-5 rows sit in 20px pads here and their 24px negative margins
     would poke past the page edge; the columns are stacked at this
     width, so the gutter narrows to meet the pad. */
  .cm-hero-pad .g-5, .cm-block-pad .g-5, .cm-page-pad .g-5 { --gutter-x: 40px; }
  .cm-hero-pad { padding: 36px 20px 32px; }
  .cm-page-pad { padding: 24px 20px 40px; }
  .cm-block-pad { padding: 0 20px 28px; }
  .cm-strip-pad { padding: 20px; }
}

/* Auth split layout */
.cm-auth-side {
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(234, 88, 12, 0.12), transparent 70%),
    var(--cm-panel);
  border-right: 1px solid var(--cm-border);
}
[data-theme="dark"] .cm-auth-side {
  background:
    radial-gradient(700px 500px at 0% 0%, rgba(249, 115, 22, 0.12), transparent 70%),
    var(--cm-panel);
}
.cm-auth-card {
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-radius: var(--cm-radius-card);
  padding: 36px;
  box-shadow: var(--cm-shadow-card-lg), inset 0 1px 0 var(--cm-rim);
}
@media (max-width: 767.98px) { .cm-auth-card { padding: 20px; } }
.cm-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--cm-radius-control);
  background: linear-gradient(135deg, var(--cm-grad-a), var(--cm-grad-b));
  display: block;
}

/* ========== messages & friends moved to css/chat.css; the shared handle input stays ========== */
.cm-handle-wrap { position: relative; }
.cm-handle-wrap .cm-at {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cm-muted-soft);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
}
.cm-handle-wrap input { padding-left: 32px; }

/* ========== community requests (Section A) ========== */
.cm-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 991.98px) { .cm-wizard { grid-template-columns: 1fr; } }

.cm-steps { display: flex; align-items: center; gap: 0; margin-bottom: 24px; overflow-x: auto; padding-bottom: 4px; }
.cm-step { display: flex; align-items: center; gap: 8px; flex: none; }
.cm-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex: none;
  background: var(--cm-panel); color: var(--cm-muted-soft);
  border: 1px solid var(--cm-border-mid);
}
.cm-step.current .cm-step-dot { background: linear-gradient(135deg, var(--cm-grad-a), var(--cm-grad-b)); color: #fff; border: 0; }
.cm-step.done .cm-step-dot { background: var(--cm-olive-tint); color: var(--cm-olive-deep); border-color: transparent; }
.cm-step-label { font-size: 13px; font-weight: 500; color: var(--cm-muted-soft); white-space: nowrap; }
.cm-step.current .cm-step-label { color: var(--cm-ink); font-weight: 600; }
.cm-step.done .cm-step-label { color: var(--cm-muted-strong); }
.cm-step-line { height: 1px; background: var(--cm-border-mid); flex: 1 1 24px; min-width: 16px; margin: 0 12px; }

.cm-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575.98px) { .cm-type-grid { grid-template-columns: 1fr; } }
.cm-type-card {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: var(--cm-radius-control); cursor: pointer;
  border: 1px solid var(--cm-border-input); background: var(--cm-card);
}
.cm-type-card:hover { border-color: var(--cm-border-btn); }
.cm-type-card.selected { border-color: var(--cm-accent); background: var(--cm-accent-tint); }
.cm-type-card .cm-type-icon {
  width: 34px; height: 34px; border-radius: var(--cm-radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cm-neutral-tint); color: var(--cm-icon);
}
.cm-type-card.selected .cm-type-icon { background: linear-gradient(135deg, var(--cm-grad-a), var(--cm-grad-b)); color: #fff; }
.cm-type-card b { font-size: 13.5px; font-weight: 600; display: block; }
.cm-type-card span { font-size: 12px; color: var(--cm-muted-soft); }

.cm-slug-wrap { display: flex; align-items: center; border: 1px solid var(--cm-border-input); border-radius: var(--cm-radius-control); background: var(--cm-panel); overflow: hidden; }
.cm-slug-wrap .cm-slug-prefix { padding: 0 4px 0 16px; font-size: 13.5px; color: var(--cm-muted-soft); white-space: nowrap; }
.cm-slug-wrap output { font-size: 13.5px; font-weight: 600; padding-right: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm-sidecard { border: 1px solid var(--cm-border); border-radius: var(--cm-radius-card); background: var(--cm-card); box-shadow: var(--cm-shadow-card); padding: 20px; }
.cm-sidelist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: sd; }
.cm-sidelist li { display: flex; gap: 8px; font-size: 12.5px; color: var(--cm-muted); }
.cm-sidelist li::before {
  counter-increment: sd; content: counter(sd);
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cm-accent-tint); color: var(--cm-accent-deep);
  font-size: 11px; font-weight: 600;
}

.cm-seed-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control); background: var(--cm-card); }
.cm-seed-row .cm-face { width: 30px; height: 30px; font-size: 11px; flex: none; }
.cm-seed-row b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-seed-row small { font-size: 11.5px; color: var(--cm-muted-soft); display: block; }
.cm-plan-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; }

.cm-statebar { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: var(--cm-radius-pill); font-size: 12px; font-weight: 600; }
.cm-statebar .cm-dot { width: 7px; height: 7px; }
.cm-statebar.review { background: var(--cm-accent-tint); color: var(--cm-accent-deep); }
.cm-statebar.changes { background: var(--cm-amber-tint); color: var(--cm-amber-deep); }
.cm-statebar.approved { background: var(--cm-olive-tint); color: var(--cm-olive-deep); }
.cm-statebar.declined { background: var(--cm-danger-tint); color: var(--cm-danger-ink); }

.cm-sla { text-align: right; }
.cm-sla b { font-family: var(--cm-font-head); font-size: 30px; font-weight: 600; color: var(--cm-accent); line-height: 1; }
.cm-sla span { display: block; font-size: 11.5px; color: var(--cm-muted-soft); margin-top: 3px; }

.cm-nextstep { display: flex; gap: 12px; padding: 12px 16px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control); background: var(--cm-panel); }
.cm-nextstep .n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cm-card); border: 1px solid var(--cm-border-mid);
  font-size: 12px; font-weight: 600; color: var(--cm-muted-strong);
}
.cm-nextstep b { font-size: 13px; font-weight: 600; display: block; }
.cm-nextstep span { font-size: 12px; color: var(--cm-muted-soft); }

.cm-fix { border-left: 3px solid var(--cm-amber); background: var(--cm-amber-tint); border-radius: 0 var(--cm-radius-control) var(--cm-radius-control) 0; padding: 12px 16px; }
.cm-fix.ok { border-left-color: var(--cm-olive); background: var(--cm-olive-tint); }
.cm-fix b { font-size: 13.5px; font-weight: 600; display: block; }
.cm-fix span { font-size: 12.5px; color: var(--cm-muted); }

.cm-quote { border-left: 3px solid var(--cm-border-btn); background: var(--cm-panel); border-radius: 0 var(--cm-radius-control) var(--cm-radius-control) 0; padding: 12px 16px; font-size: 13.5px; color: var(--cm-muted-strong); }

.cm-thread-msg { display: flex; gap: 12px; }
.cm-thread-msg .cm-face { width: 32px; height: 32px; font-size: 11px; flex: none; }
.cm-thread-meta { font-size: 12px; color: var(--cm-muted-soft); margin-bottom: 3px; }
.cm-thread-meta b { color: var(--cm-muted-strong); font-weight: 600; }
.cm-thread-body { font-size: 13.5px; background: var(--cm-panel); border-radius: 4px var(--cm-radius-control) var(--cm-radius-control) var(--cm-radius-control); padding: 8px 12px; }

.cm-adminshell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 991.98px) { .cm-adminshell { grid-template-columns: 1fr; } }
.cm-adminnav { display: flex; flex-direction: column; gap: 4px; }
.cm-adminnav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: var(--cm-radius-control); font-size: 13.5px; font-weight: 500; color: var(--cm-muted-strong);
}
.cm-adminnav a:hover { background: var(--cm-neutral-tint); text-decoration: none; }
.cm-adminnav a.active { background: var(--cm-accent-tint); color: var(--cm-accent-deep); font-weight: 600; }
.cm-adminnav .count { font-size: 11.5px; font-weight: 600; background: var(--cm-panel); border: 1px solid var(--cm-border); border-radius: var(--cm-radius-pill); padding: 1px 8px; }
.cm-adminnav a.active .count { background: var(--cm-card); }

.cm-queue-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control);
  background: var(--cm-card); cursor: pointer;
}
.cm-queue-row:hover { border-color: var(--cm-border-btn); }
.cm-queue-row.active { border-color: var(--cm-accent); background: var(--cm-accent-tint); }
.cm-sla-chip { font-size: 11.5px; font-weight: 600; border-radius: var(--cm-radius-pill); padding: 3px 8px; white-space: nowrap; background: var(--cm-olive-tint); color: var(--cm-olive-deep); }
.cm-sla-chip.late { background: var(--cm-danger-tint); color: var(--cm-danger-ink); }
.cm-sla-chip.closed { background: var(--cm-neutral-tint); color: var(--cm-muted-strong); }

.cm-rubric-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--cm-border); }
.cm-rubric-item:last-child { border-bottom: 0; }
.cm-rubric-item input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--cm-accent); flex: none; }
.cm-rubric-item b { font-size: 13px; font-weight: 600; display: block; }
.cm-rubric-item span { font-size: 12px; color: var(--cm-muted-soft); }

.cm-audit-row { display: flex; gap: 8px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--cm-border); }
.cm-audit-row:last-child { border-bottom: 0; }
.cm-audit-row .t { color: var(--cm-muted-soft); white-space: nowrap; }

.cm-checkitem { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control); background: var(--cm-card); }
.cm-checkitem b { font-size: 13.5px; font-weight: 500; flex: 1; }

/* ---------- community feed ---------- */
.cm-vote {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: var(--cm-radius-pill);
  border: 1px solid var(--cm-border-btn); background: var(--cm-card);
  font-size: 13px; font-weight: 600; color: var(--cm-muted-strong); cursor: pointer;
}
.cm-vote:hover { border-color: var(--cm-accent); color: var(--cm-accent-deep); }
.cm-vote.on { background: var(--cm-accent-tint); border-color: transparent; color: var(--cm-accent-deep); }

/* ========== portfolios (Section C) ========== */
.cm-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
}
@media (max-width: 991.98px) { .cm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Faces: a set avatar fills its circle on every surface. */
.cm-avatar img, .cm-profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* The profile cover takes the member's banner, and its controls sit in
   the corner on the owner's page. */
.cm-cover { position: relative; background-size: cover; background-position: center; }
.cm-cover-acts { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.cm-cover-btn { height: 36px; padding: 0 16px; font-size: 13px; }
.cm-profile-avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.cm-profile-avatar { overflow: hidden; }
.cm-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cm-bg);
  background: var(--cm-accent);
  color: #FFFFFF;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--cm-shadow-card);
  transition: transform 0.2s ease;
}
.cm-avatar-edit:hover { transform: scale(1.08); }
.cm-avatar-edit:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.cm-avatar-edit::before { content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M208 56h-27l-14-21a8 8 0 0 0-7-4h-64a8 8 0 0 0-7 4L75 56H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h160a24 24 0 0 0 24-24V80a24 24 0 0 0-24-24Zm-80 116a40 40 0 1 1 40-40 40 40 0 0 1-40 40Z"/%3E%3C/svg%3E') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Cpath d="M208 56h-27l-14-21a8 8 0 0 0-7-4h-64a8 8 0 0 0-7 4L75 56H48a24 24 0 0 0-24 24v112a24 24 0 0 0 24 24h160a24 24 0 0 0 24-24V80a24 24 0 0 0-24-24Zm-80 116a40 40 0 1 1 40-40 40 40 0 0 1-40 40Z"/%3E%3C/svg%3E') center / contain no-repeat; }

.cm-bento-block {
  display: flex; flex-direction: column;
  background: var(--cm-card-glass);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-card);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: var(--cm-shadow-card), inset 0 1px 0 var(--cm-rim);
  padding: 20px;
  min-width: 0; overflow: hidden;
  position: relative;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1),
              box-shadow .22s ease, border-color .22s ease;
}
/* A quiet answer to the pointer: lift, deeper shadow, nothing else, per
   the two-property rule that keeps forty blocks cheap to hover. The
   editable grid keeps still because there the gesture is a drag. */
.cm-bento-block:hover {
  transform: translateY(-3px);
  border-color: var(--cm-border-mid);
  box-shadow: var(--cm-shadow-lift), inset 0 1px 0 var(--cm-rim);
}
.cm-bento-block.editable:hover { transform: none; box-shadow: var(--cm-shadow-card), inset 0 1px 0 var(--cm-rim); }

/* Glass needs somewhere to fall back. Without backdrop-filter the
   translucent fill would show raw aurora through unreadable text, so
   the solid card returns; the same when the person asked the OS for
   less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cm-card, .cm-bento-block { background: var(--cm-card); }
}
@media (prefers-reduced-transparency: reduce) {
  .cm-card, .cm-bento-block {
    background: var(--cm-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.cm-bento-block.w2 { grid-column: span 2; }
.cm-bento-block.h2 { grid-row: span 2; }
.cm-bento-block.t-image { padding: 8px; }
.cm-bento-block.t-link { justify-content: center; }
.cm-bento-block.editable { cursor: grab; }
.cm-bento-block.editable:hover { border-color: var(--cm-border-btn); }
.cm-bento-block.editable.sel { border-color: var(--pfa, var(--cm-accent)); outline: 3px solid var(--pfa-tint, var(--cm-focus-ring)); }

.cm-editor { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.cm-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
}
.cm-swatch.on { border-color: var(--cm-ink); outline: 2px solid var(--cm-card); outline-offset: -4px; }
.cm-dropend {
  margin-top: 16px; padding: 24px;
  border: 2px dashed var(--cm-border-btn);
  border-radius: var(--cm-radius-card); text-align: center;
  font-size: 13px; color: var(--cm-muted-soft);
}

/* ---------- notifications & pricing ---------- */
.cm-bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--cm-radius-pill);
  background: var(--cm-badge-bg); color: var(--cm-badge-ink);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
.cm-notif-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control);
  background: var(--cm-card);
}
.cm-notif-row.unread { background: var(--cm-accent-tint); border-color: transparent; }
.cm-notif-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cm-accent); flex: none; margin-top: 12px; }
.cm-notif-row.read .dot { background: transparent; }
.cm-stars { color: var(--cm-amber-deep); letter-spacing: 1px; }
.cm-stars .off { color: var(--cm-border); }
.cm-starpick { display: flex; gap: 4px; }
.cm-starpick button {
  border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: 26px; line-height: 1;
  color: var(--cm-border);
}
.cm-starpick button.on { color: var(--cm-amber-deep); }
.cm-starpick button:focus-visible { outline: 2px solid var(--cm-accent); border-radius: 4px; }
.cm-spread-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cm-spread-row .bar { flex: 1; height: 6px; border-radius: var(--cm-radius-pill); background: var(--cm-neutral-tint); overflow: hidden; }
.cm-spread-row .bar span { display: block; height: 100%; background: var(--cm-amber-deep); border-radius: var(--cm-radius-pill); }

.cm-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-stage { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 120px; }
.cm-stage .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--cm-neutral-tint); border: 2px solid var(--cm-border);
}
.cm-stage .lbl { font-size: 12px; color: var(--cm-muted-soft); }
.cm-stage.done .dot { background: var(--cm-olive-deep); border-color: var(--cm-olive-deep); }
.cm-stage.done .lbl { color: var(--cm-muted-strong); }
.cm-stage.now .dot { background: var(--cm-accent); border-color: var(--cm-accent); box-shadow: 0 0 0 4px var(--cm-accent-tint); }
.cm-stage.now .lbl { color: var(--cm-ink); font-weight: 600; }

.cm-meter {
  height: 6px; border-radius: var(--cm-radius-pill); background: var(--cm-neutral-tint);
  overflow: hidden; margin-top: 5px;
}
.cm-meter > span {
  display: block; height: 100%; border-radius: var(--cm-radius-pill);
  background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent-deep));
}

.cm-svc-card { overflow: hidden; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
a.cm-svc-card:hover { transform: translateY(-3px); border-color: rgba(194, 65, 12, 0.5); box-shadow: var(--cm-shadow-lift); }
.cm-svc-cover { height: 140px; background-size: cover; background-position: center; }

.cm-price-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--cm-card); border-top: 1px solid var(--cm-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}

.cm-cookie-note {
  position: fixed; left: 16px; bottom: 16px; z-index: 1080;
  display: flex; align-items: center; gap: 16px;
  max-width: min(480px, calc(100vw - 32px));
  padding: 16px; border-radius: var(--cm-radius-card);
  background: var(--cm-card); border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow-card-lg);
  font-size: 13px; color: var(--cm-muted-strong); line-height: 1.5;
}
.cm-mono-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.cm-notif-row .nicon {
  width: 32px; height: 32px; border-radius: var(--cm-radius-sm); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--cm-neutral-tint); color: var(--cm-muted-strong);
}
.cm-notif-row.unread .nicon { background: var(--cm-card); color: var(--cm-accent-deep); }

.cm-price-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--cm-glass-line); border-radius: var(--cm-radius-card); background: var(--cm-glass); -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7); box-shadow: var(--cm-shadow-card), inset 0 1px 0 var(--cm-rim); padding: 24px; }
.cm-price-card.hot { border-color: var(--cm-accent); box-shadow: var(--cm-shadow-card-lg), inset 0 1px 0 var(--cm-rim); }
.cm-price-card.hot::before { content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--cm-grad-a), var(--cm-grad-b)); }
.cm-price { font-family: var(--cm-font-head); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.cm-price small { font-size: 14px; font-weight: 500; color: var(--cm-muted-soft); letter-spacing: 0; }
.cm-price-feat { display: flex; gap: 8px; font-size: 13px; color: var(--cm-muted-strong); }
.cm-price-feat .cm-check { flex: none; margin-top: 1px; }

/* ---------- admin mode prompt (review queues) ---------- */
dialog.cm-admin-lock {
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-card);
  padding: 24px;
  width: min(420px, calc(100vw - 32px));
  background: var(--cm-card);
  color: var(--cm-ink);
  box-shadow: 0 20px 60px rgba(28, 25, 23, 0.25);
}
dialog.cm-admin-lock::backdrop { background: rgba(28, 25, 23, 0.45); }
dialog.cm-admin-lock h2 { font-size: 20px; margin: 0 0 6px; }
dialog.cm-admin-lock p { font-size: 14px; color: var(--cm-muted); margin: 0 0 16px; }
dialog.cm-admin-lock .cm-admin-lock-err { color: var(--cm-danger-ink); min-height: 20px; margin: 8px 0 0; }
.cm-admin-lock-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.cm-admin-lock-acts .btn { min-height: 44px; }

/* ---------- account and security (account.html, confirm.html) ---------- */
.cm-acct-alert, .cm-danger-card { border-color: var(--cm-danger); background: var(--cm-danger-fill); }
.cm-acct-note { font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; padding: 12px; border-radius: var(--cm-radius-control); background: var(--cm-amber-tint); color: var(--cm-ink); }
.cm-acct-link { font-size: 13.5px; font-weight: 500; color: var(--cm-accent-deep); }
.cm-acct-hint { font-size: 12.5px; line-height: 1.6; color: var(--cm-muted-soft); margin: 8px 0 0; max-width: 560px; }
.cm-acct-err { font-size: 13px; color: var(--cm-danger-ink); min-height: 20px; margin: 8px 0; }
.cm-acct-err:empty { margin: 4px 0; min-height: 4px; }
.cm-acct-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: var(--cm-radius-pill); padding: 4px 12px; background: var(--cm-neutral-tint); color: var(--cm-muted-strong); }
.cm-acct-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
.cm-acct-state.on::before { opacity: 1; }
.cm-acct-state.on { background: var(--cm-olive-tint); color: var(--cm-olive-deep); }
.cm-acct-text { font-size: 13.5px; line-height: 1.65; color: var(--cm-muted); margin: 0 0 16px; max-width: 600px; }
.cm-acct-steps { margin: 0 0 4px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.cm-acct-qr { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin: 16px 0; }
.cm-acct-qr figure { margin: 0; width: 184px; max-width: 100%; padding: 6px; background: #FFFFFF; border-radius: var(--cm-radius-control); border: 1px solid var(--cm-border-mid); }
.cm-acct-qr svg { display: block; width: 100%; height: auto; }
.cm-acct-qr .key { flex: 1; min-width: 220px; }
.cm-acct-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: 0.06em; word-break: break-all; background: var(--cm-panel); border-radius: var(--cm-radius-control); padding: 12px; margin: 6px 0 8px; }
.cm-acct-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 16px 0; padding: 16px 20px; list-style: none; max-width: 380px; background: var(--cm-panel); border-radius: var(--cm-radius-control); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 0.04em; }
.cm-acct-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cm-acct-actions .btn { min-height: 44px; }
.cm-acct-code-input { max-width: 180px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; letter-spacing: 0.2em; }
.cm-acct-device { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--cm-border); }
.cm-acct-device:first-child { border-top: 0; }
.cm-acct-device .what { flex: 1; min-width: 0; font-size: 14px; }
.cm-acct-device .what b { font-weight: 600; }
.cm-acct-device .meta { font-size: 12.5px; color: var(--cm-muted-soft); margin-top: 2px; overflow-wrap: anywhere; }
.cm-acct-device .btn { min-height: 40px; flex: none; }
.cm-acct-this { display: inline-block; font-size: 11px; font-weight: 600; color: var(--cm-olive-deep); background: var(--cm-olive-tint); border-radius: var(--cm-radius-pill); padding: 2px 8px; margin-left: 8px; vertical-align: 1px; }
.cm-acct-role { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--cm-radius-control); background: var(--cm-panel); }
.cm-acct-role .what { flex: 1; min-width: 200px; font-size: 14px; }
.cm-acct-role .meta { font-size: 12.5px; color: var(--cm-muted-soft); }
.cm-acct-role .btn { min-height: 40px; }

/* Settings link rows: a title, a one-line summary and a chevron. */
.cm-set-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius-control); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.cm-set-link:hover { border-color: var(--cm-border-btn); background: var(--cm-panel); text-decoration: none; }
.cm-set-link .t { display: block; font-size: 14px; font-weight: 500; color: var(--cm-ink); }
.cm-set-link .s { display: block; font-size: 12.5px; color: var(--cm-muted-soft); margin-top: 2px; }
.cm-set-link .chev { margin-left: auto; color: var(--cm-icon); flex: none; }
.cm-set-link.danger .t { color: var(--cm-danger-ink); }
.cm-set-link.danger:hover { border-color: var(--cm-danger); background: var(--cm-danger-fill); }
.cm-deleting-bar { background: var(--cm-danger-fill); border-bottom: 1px solid var(--cm-border-mid); font-size: 13.5px; }
.cm-deleting-bar .inner { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 12px 16px; }
.cm-deleting-bar a { font-weight: 600; color: var(--cm-danger-ink); }
@media (max-width: 575.98px) {
  .cm-acct-codes { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- chat: reporting and removing a message ---------- */
.cm-msg-act {
  border: 0; background: none; padding: 2px 6px; margin-left: 6px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; color: var(--cm-muted-soft);
  opacity: 0; transition: opacity .12s ease;
}
.cm-msg:hover .cm-msg-act, .cm-msg:focus-within .cm-msg-act { opacity: 1; }
.cm-msg-act:hover { color: var(--cm-accent-deep); background: var(--cm-accent-tint); }
.cm-msg-act:focus-visible { opacity: 1; outline: 2px solid var(--cm-accent); outline-offset: 1px; }
@media (hover: none) {
  .cm-msg-act { opacity: 1; min-height: 44px; min-width: 44px; margin-left: 2px; }
}
.cm-msg-removed { font-style: italic; color: var(--cm-muted-soft); background: var(--cm-neutral-tint); }
dialog.cm-admin-lock fieldset { border: 0; padding: 0; margin: 0; }
dialog.cm-admin-lock .form-check { min-height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 0; }
dialog.cm-admin-lock .form-check-input { margin: 0; flex: none; }

/* ---------- member Home (home.html) ---------- */
.cm-home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.cm-home-main, .cm-home-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cm-home-h { font-size: 18px; margin: 0 0 16px; }
.cm-home-more { font-size: 13px; font-weight: 500; color: var(--cm-accent-deep); }
.cm-home-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cm-home-count {
  display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--cm-radius-control);
  background: var(--cm-panel); color: var(--cm-ink); text-decoration: none; min-height: 44px;
}
.cm-home-count:hover { background: var(--cm-accent-tint); }
.cm-home-count .n { font-family: var(--cm-font-head); font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-home-count .l { font-size: 12.5px; color: var(--cm-muted); }
.cm-home-count.hot .n { color: var(--cm-accent-deep); }
.cm-home-count.hot { background: var(--cm-accent-tint); }
.cm-home-count.hot:hover { background: var(--cm-accent-tint-strong); }
.cm-home-count.hot .l { color: var(--cm-accent-deep); }
.cm-home-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cm-home-list > li { border-top: 1px solid var(--cm-border); }
.cm-home-list > li:first-child { border-top: 0; }
.cm-home-list a, .cm-home-list .row-static {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 12px 0;
  color: var(--cm-ink); text-decoration: none; font-size: 14px; min-height: 44px;
}
.cm-home-list a:hover .t { color: var(--cm-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.cm-home-list .t { min-width: 0; overflow-wrap: anywhere; }
.cm-home-list .s { flex: none; font-size: 12.5px; color: var(--cm-muted-soft); font-variant-numeric: tabular-nums; }
.cm-home-list .sub { display: block; font-size: 12.5px; color: var(--cm-muted-soft); margin-top: 2px; }
.cm-home-empty { font-size: 13.5px; color: var(--cm-muted); margin: 0; }
.cm-home-uni { padding: 16px; border-radius: var(--cm-radius-control); background: var(--cm-panel); }
.cm-home-uni .top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cm-home-uni b { font-size: 15px; }
.cm-home-chip { font-size: 11.5px; font-weight: 600; border-radius: var(--cm-radius-pill); padding: 2px 8px; background: var(--cm-neutral-tint); color: var(--cm-muted-strong); }
.cm-home-chip.ok { background: var(--cm-olive-tint); color: var(--cm-olive-deep); }
.cm-home-chip.wait { background: var(--cm-amber-tint); color: var(--cm-amber-deep); }
.cm-home-uni p { font-size: 13.5px; margin: 0 0 12px; }
.cm-home-uni .btn { min-height: 44px; }
.cm-card-tint-amber .cm-home-list .s { color: var(--cm-amber-deep); font-weight: 600; }

/* Jump back in: the member's rooms as glass chips under the greeting. */
.cm-home-jump { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cm-home-jchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--cm-radius-pill);
  border: 1px solid var(--cm-glass-line);
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--cm-ink);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cm-home-jchip:hover {
  transform: translateY(-2px);
  border-color: var(--cm-violet);
  color: var(--cm-ink);
  box-shadow: 0 10px 24px -12px rgba(87, 83, 78, 0.35);
}
@media (max-width: 991.98px) {
  .cm-home { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .cm-home-counts { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   The living hero
   The background is the product: nodes are people in the community
   colours, near ones link up, the visitor's cursor joins the network,
   and pulses travel the edges like messages. The aurora is the mood
   behind it. Both sit under everything and vanish for anyone who asks
   for reduced motion. js/fx.js drives them on the pages that opt in.
   ========================================================================== */

.cm-net { position: fixed; inset: 0; z-index: 0; opacity: .8; transition: opacity .4s ease; pointer-events: none; }
.cm-net-quiet { opacity: .45; }
[data-theme="dark"] .cm-net-quiet { opacity: .3; }
[data-theme="dark"] .cm-net { opacity: .5; }
.cm-aurora { position: fixed; inset: 0; z-index: 0; filter: blur(80px); opacity: .36; transition: opacity .6s ease; pointer-events: none; }
[data-theme="dark"] .cm-aurora { opacity: .55; }
.cm-aurora-quiet { opacity: .2; }
[data-theme="dark"] .cm-aurora-quiet { opacity: .3; }
.cm-aurora i { position: absolute; border-radius: 50%; }
.cm-aurora i:nth-child(1) { width: 620px; height: 620px; background: #3F3F42; top: -200px; left: -140px; animation: cmdrift1 18s ease-in-out infinite alternate; }
.cm-aurora i:nth-child(2) { width: 520px; height: 520px; background: #2A2A2E; top: 6%; right: -160px; animation: cmdrift2 22s ease-in-out infinite alternate; }
.cm-aurora i:nth-child(3) { width: 460px; height: 460px; background: #332E2B; bottom: -180px; left: 30%; animation: cmdrift3 26s ease-in-out infinite alternate; }
.cm-aurora i:nth-child(4) { width: 380px; height: 380px; background: #EA580C; top: 40%; left: -160px; animation: cmdrift2 30s ease-in-out infinite alternate-reverse; }

@keyframes cmdrift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes cmdrift2 { to { transform: translate(-100px, 120px) scale(.9); } }
@keyframes cmdrift3 { to { transform: translate(-140px, -90px) scale(1.2); } }
main, .cm-footer, .cm-chat-shell { position: relative; z-index: 1; }

/* Headline gradient that moves. The static .cm-grad-text stays for
   everything that should hold still. */
.cm-grad-fire {
  background: linear-gradient(110deg, var(--cm-accent) 15%, var(--cm-fire-mid) 40%, var(--cm-accent-deep) 62%, var(--cm-accent) 88%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cmfire 7s linear infinite;
}
@keyframes cmfire { to { background-position: 240% 0; } }
.btn-cm-live { background-size: 180% 100%; animation: cmfire 6s linear infinite; }

/* Split headline words arrive one by one; fx.js adds .in */
.fx-w { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--cm-i, 0) * 70ms); }
.fx-w.in { opacity: 1; transform: none; }

/* Liquid glass tilts under a fine pointer; magnets follow it */
.cm-tilt { transform-style: preserve-3d; }
.cm-magnet, .cm-tilt { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .cm-net, .cm-aurora { display: none; }
  .cm-grad-fire, .btn-cm-live { animation: none; }
  .fx-w { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   The hero collage: the live card with two quiet satellites, afloat
   ========================================================================== */

/* The liquid wordmark band: full bleed across the hero, transparent
   over the aurora, the cursor turning the word to liquid. */
.cm-liquid-stage {
  position: relative;
  height: clamp(160px, 23vw, 330px);
  margin: -40px calc(-1 * clamp(20px, 3.4vw, 64px)) 16px;
  touch-action: pan-y;
  /* Room for the particles the cursor throws past the word. The canvas
     reaches this far above and below the band and fades out across it,
     so a spray thins away instead of stopping on a straight edge. */
  --cm-liquid-bleed: clamp(48px, 8vw, 120px);
}
.cm-liquid-stage canvas,
.cm-liquid-stage img {
  position: absolute;
  display: block;
  max-width: none;
}
.cm-liquid-stage canvas {
  top: calc(-1 * var(--cm-liquid-bleed));
  left: 0;
  width: 100%;
  height: calc(100% + 2 * var(--cm-liquid-bleed));
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--cm-liquid-bleed), #000 calc(100% - var(--cm-liquid-bleed)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--cm-liquid-bleed), #000 calc(100% - var(--cm-liquid-bleed)), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cm-liquid-stage img { transition: opacity 0.5s ease; }
.cm-liquid-stage[data-gl="on"] canvas { opacity: 1; }
.cm-liquid-stage[data-gl="on"] img { opacity: 0; }
@media (max-width: 991.98px) {
  .cm-liquid-stage { margin: -16px -20px 8px; }
}

.cm-hero-in > * { opacity: 0; transform: translateY(16px); animation: cm-hero-up 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.cm-hero-in > *:nth-child(1) { animation-delay: 0.05s; }
.cm-hero-in > *:nth-child(2) { animation-delay: 0.16s; }
.cm-hero-in > *:nth-child(3) { animation-delay: 0.28s; }
.cm-hero-in > *:nth-child(4) { animation-delay: 0.4s; }
.cm-hero-in > *:nth-child(5) { animation-delay: 0.52s; }
.cm-hero-in > *:nth-child(6) { animation-delay: 0.64s; }
@keyframes cm-hero-up { to { opacity: 1; transform: none; } }

.cm-float-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-content: start;
}
.cm-float-card {
  opacity: 0;
  animation: cm-float-pop 0.5s ease-out forwards, cm-float 3.2s ease-in-out 0.5s infinite;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01) 55%),
    var(--cm-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow-card-lg), inset 0 1px 0 var(--cm-rim);
}
.cm-float-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--cm-muted); }
.cm-float-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cm-float-go { font-size: 14px; color: var(--cm-accent-deep); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1); }
a.cm-float-card { display: block; padding: 16px; text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1), box-shadow 0.25s ease; }
a.cm-float-card:hover { transform: translateY(-4px); box-shadow: var(--cm-shadow-screen), inset 0 1px 0 var(--cm-rim); }
a.cm-float-card:hover .cm-float-go { transform: translateX(4px); }
a.cm-float-card:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 3px; }
/* The live card leads full width with a breath of ember on its rim;
   the satellites checker below it on the same grid lines. */
.cm-float-1 {
  grid-column: 1 / -1;
  animation-delay: 0.35s, 0.85s;
  box-shadow: var(--cm-shadow-card-lg), inset 0 1px 0 color-mix(in srgb, var(--cm-accent) 36%, var(--cm-rim));
}
.cm-float-2 { grid-column: 2; animation-delay: 0.55s, 1.3s; }
.cm-float-3 { grid-column: 1; animation-delay: 0.75s, 1.75s; }
@keyframes cm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes cm-float-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 991.98px) {
  .cm-float-stack { grid-template-columns: minmax(0, 1fr); }
  .cm-float-1, .cm-float-2, .cm-float-3 { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-hero-in > *, .cm-float-card { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Touch targets
   On a coarse pointer every control reaches 44px. Hit areas grow through
   padding, with margins pulling the box back wherever the layout must not
   move, and the hover-revealed message actions stay visible because touch
   has no hover. Pointer layouts keep their density.
   ========================================================================== */

@media (pointer: coarse) {
  .cm-footer ul a { padding-block: 12px; }
  .cm-footer a[href^="mailto:"] { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .cm-footer .cm-brand { padding-block: 8px; margin-block: -4px; }
  .cm-navbar .navbar-brand { padding-block: 8px; }
  .cm-icon-btn, .cm-composer-icon, .cm-send-btn { width: 44px; height: 44px; }
  button.cm-avatar { width: 44px; height: 44px; }
  .cm-req-btn { width: 44px; height: 44px; }
  .cm-filter, .cm-select-chip, .btn-cm-sm, .cm-action-btn { min-height: 44px; }
  .dropdown-item { padding-block: 12px; }
  .cm-map-zoom button { min-width: 44px; min-height: 44px; }
  .cm-msg-act { opacity: 1; padding: 16px 8px; margin-block: -16px; }
}

/* ==========================================================================
   Page transitions
   ==========================================================================
   The site is one page after another, and until now every navigation
   was a hard cut: white flash, full repaint, start again. With
   cross-document view transitions the browser snapshots the old page
   and animates to the new one. Chrome and Edge have it from 126 and
   Safari from 18.2; a browser without it simply navigates, which is
   exactly what happened before, so nobody loses anything.

   The navbar and the footer carry their own transition names, so they
   hold still while the content between them travels. That is what makes
   two pages read as one application: the chrome persists, the page is
   the thing that changes. The names appear once per page each, which
   the API requires; a page without a footer simply has no such name.

   The cookie notice opts out. Snapshotted with the root it would fade
   out and back in on every navigation, drawing the eye to the one
   element that least deserves it. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: cm-page-out .16s ease both; }
::view-transition-new(root) { animation: cm-page-in .3s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes cm-page-out { to { opacity: 0; } }
@keyframes cm-page-in { from { opacity: 0; transform: translateY(10px); } }

.cm-header { view-transition-name: cm-nav; }
.cm-footer { view-transition-name: cm-foot; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Pointer light, film grain, progress, hero morphs
   ==========================================================================
   The static feel was not a missing animation, it was surfaces that
   ignore the pointer and gradients with no texture. Four additions, each
   gated so that touch screens, reduced-motion settings and browsers
   without the API lose nothing. */

/* A radial light inside a card, standing where the pointer stands. It
   is painted on ::after so it rides above the glass fill and under
   nothing, and it is ember so the light belongs to this product rather
   than to a template. app.js writes --mx/--my; without a pointer the
   layer never shows. */
@media (hover: hover) and (pointer: fine) {
  .cm-card::after,
  .cm-bento-block::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
                rgba(234, 88, 12, 0.13), transparent 65%);
    opacity: var(--spot, 0);
    transition: opacity .35s ease;
    pointer-events: none;
  }
  [data-theme="dark"] .cm-card::after,
  [data-theme="dark"] .cm-bento-block::after {
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
                rgba(249, 115, 22, 0.16), transparent 65%);
  }
}

/* Film grain over the aurora, under the content. 3 percent of
   fractal noise is what separates lit glass from an airbrushed
   gradient; it sits at z-index 0 with main at 1, so no text ever
   carries it. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity: .05; }

/* Reading progress, scroll-driven, no listener. app.js adds the bar
   only to pages taller than about two screens; the support guard means
   a browser without scroll timelines never shows a dead bar. It stays
   under reduced motion because it is driven by the reader's own hand. */
@supports (animation-timeline: scroll(root)) {
  .cm-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 2100;
    background: linear-gradient(90deg, var(--cm-grad-a), var(--cm-grad-b));
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: cm-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
  @keyframes cm-progress { to { transform: scaleX(1); } }
}

/* The clicked card becomes the next page's title. The grid page names
   only the card that was pressed, at press time, because two elements
   sharing a view-transition-name cancel the whole transition; the
   detail page carries the name on its h1 from first paint. */
.cm-vt-hero { view-transition-name: cm-hero; }
::view-transition-group(cm-hero) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Halftone wordmark, the landing page's closing mark
   ==========================================================================
   The band sits at the very bottom of index's footer: a hairline with
   the back-to-top on it, then the wordmark set enormous and cropped by
   the page edge, printed in halftone dots by home/halftone.js. The
   canvas is cleared, never painted, so the ground, the aurora and the
   grain stay visible between the dots. Every length here keeps the 4px
   grid and the 44px target. */
.cm-hwf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 48px 0 0;
  border-width: 1px 0 0;
  background: var(--cm-glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--cm-glass-line);
  border-width: 1px 0 0;
  box-shadow: inset 0 1px 0 var(--cm-rim);
  color: var(--cm-ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cm-hwf { background: var(--cm-panel); }
}
@media (prefers-reduced-transparency: reduce) {
  .cm-hwf { background: var(--cm-panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cm-hwf canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  /* The dots part around a pointer, so a touch that lands here must
     still scroll the page rather than be captured by the canvas. */
  touch-action: pan-y;
}
.cm-hwf-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 24px;
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.4vw, 44px) 0;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.75;
}
.cm-hwf-brand strong { display: block; font-weight: 600; font-size: 12.5px; }
.cm-hwf-brand span { display: block; opacity: 0.45; margin: 4px 0 12px; }
.cm-hwf-col h3 { margin: 0 0 4px; font: inherit; opacity: 0.4; font-weight: 500; }
.cm-hwf-col ul { list-style: none; margin: 0; padding: 0; }
.cm-hwf-col a,
.cm-hwf-brand a,
.cm-hwf-up {
  color: inherit;
  text-decoration: none;
  opacity: 0.78;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: opacity 0.25s ease, background-size 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.cm-hwf-col a:hover, .cm-hwf-brand a:hover, .cm-hwf-up:hover { opacity: 1; background-size: 100% 1px; }
.cm-hwf-col a:focus-visible, .cm-hwf-brand a:focus-visible, .cm-hwf-up:focus-visible {
  outline: 2px solid var(--cm-accent);
  outline-offset: 3px;
  opacity: 1;
}
.cm-hwf-up { min-height: 44px; padding: 0 4px; }
/* The newsletter keeps the product's own form voice inside the panel. */
.cm-hwf-news form {
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 8px;
}
.cm-hwf-rule {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: clamp(16px, 2.6vw, 32px) clamp(20px, 3.4vw, 44px) 0;
  padding-top: 12px;
  border-top: 1px solid var(--cm-border);
  border-top: 0.5px solid color-mix(in srgb, var(--cm-ink) 16%, transparent);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cm-hwf-copy { opacity: 0.45; }
/* The company and complaints lines stay legible: the body face, not
   the tracked mono. */
.cm-hwf-legal {
  position: relative;
  z-index: 1;
  margin: 8px clamp(20px, 3.4vw, 44px) 0;
  max-width: 720px;
}
.cm-hwf-legal p { margin: 0 0 4px; font-size: 11.5px; line-height: 1.6; color: var(--cm-muted-soft); }
.cm-hwf-legal a { color: inherit; text-decoration: underline; }
.cm-hwf-word { height: clamp(120px, 20vw, 280px); }
@media (max-width: 720px) {
  .cm-hwf-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cm-hwf-brand, .cm-hwf-news { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-hwf-col a, .cm-hwf-brand a, .cm-hwf-up { transition: none; }
}

/* ---------- Colour, as the NCU pages have it ----------
   The app and the site share one rule for colour. An element names its
   family with data-hue (CM.hue() picks one from a name, the same hash the
   app uses), and these rules turn that into a tint, an ink and a solid. */
[data-hue="accent"] { --hue: var(--cm-accent); --hue-tint: var(--cm-accent-tint); --hue-deep: var(--cm-accent-deep); }
[data-hue="amber"] { --hue: var(--cm-amber); --hue-tint: var(--cm-amber-tint); --hue-deep: var(--cm-amber-deep); }
[data-hue="gold"] { --hue: var(--cm-gold); --hue-tint: var(--cm-gold-tint); --hue-deep: var(--cm-gold-deep); }
[data-hue="rose"] { --hue: var(--cm-rose); --hue-tint: var(--cm-rose-tint); --hue-deep: var(--cm-rose-deep); }
[data-hue="olive"] { --hue: var(--cm-olive); --hue-tint: var(--cm-olive-tint); --hue-deep: var(--cm-olive-deep); }
[data-hue="violet"] { --hue: var(--cm-violet); --hue-tint: var(--cm-violet-tint); --hue-deep: var(--cm-violet-deep); }

/* Small uppercase section labels in ember, as the NCU pages set "IN 8 DAYS". */
.cm-micro { color: var(--cm-accent-deep); }

/* A face in a colour of its own (CM.tintFaces sets data-hue from the
   initials), so a list of people reads in colour. */
.cm-face[data-hue], .cm-profile-avatar[data-hue] { background: var(--hue-tint); color: var(--hue-deep); }

/* An icon as the platform's Settings draws one: a white glyph on a small
   square in its family colour. */
.cm-tile-ico {
  width: 30px; height: 30px; border-radius: var(--cm-radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hue, var(--cm-muted)); color: #fff;
}
.cm-notif-row .nicon[data-hue], .cm-notif-row.unread .nicon[data-hue] { background: var(--hue); color: #fff; }
.cm-art-tile { width: 30px; height: 30px; border-radius: var(--cm-radius-sm); }
/* A card heading led by its icon tile. */
.cm-head-tile { display: flex; align-items: center; gap: 12px; }
.cm-platform-icon[data-hue] { background: var(--hue); color: #fff; }
.cm-meter[data-hue] > span { background: var(--hue); }
.cm-mono-tile { width: 30px; height: 30px; border-radius: var(--cm-radius-sm); font-size: 11px; background: var(--hue-tint); color: var(--hue-deep); }
/* A list row that leads with a tile centres on it, the tile beside the words. */
.cm-home-list .lead { display: flex; gap: 12px; align-items: center; min-width: 0; }
.cm-home-list a:has(.lead), .cm-home-list .row-static:has(.lead) { align-items: center; }

/* Counts on their family's tint, zero included, so each tile is its colour. */
.cm-stat-tile[data-hue] { background: var(--hue-tint); border-color: transparent; }
.cm-stat-tile[data-hue] .n { color: var(--hue-deep); }
.cm-home-count[data-hue] { background: var(--hue-tint); }
.cm-home-count[data-hue] .n, .cm-home-count[data-hue] .l { color: var(--hue-deep); }
.cm-home-count[data-hue]:hover { background: color-mix(in srgb, var(--hue) 20%, transparent); }