/* Community Recovery's own look, shared by every page in this section and
   by nothing outside it.

   THE SOURCE IS THE BLOCK 'brand' in Community Recovery's place on the
   beach (https://beach.happyseaurchin.com/w/community-recovery, block
   brand): its colours (brand 1), its three faces (brand 2), its marks
   (brand 3) and its shapes (brand 5). Nothing here is borrowed from anyone's
   personal pages or from other projects. When the block changes, change
   this file to match it; the block wins.

   One adjustment, made for brand 1.5 (body text keeps at least 4.5 to 1):
   quiet notes on the light ground use #746882, a touch deeper than the
   block's #7A6E88, which falls just short of 4.5 to 1 on #F6F2FA. */

/* brand 2: Oswald for headings, Nunito Sans for everything else, Caveat for
   one handwritten line at most. */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Nunito+Sans:ital,wght@0,400;0,700;0,800;1,400&family=Oswald:wght@400..700&display=swap");

:root {
  /* brand 1.1: near-black, the dark panel, and the logo's own black */
  --cr-night: #1B1424;
  --cr-panel: #2A1F38;
  --cr-logo-black: #000000;
  /* brand 1.2: the purples */
  --cr-purple: #7B3FBF;
  --cr-deep: #4A2275;
  --cr-bright: #9B5FE0;
  --cr-lilac: #C9A6F0;
  /* brand 1.3: the light ground */
  --cr-ground: #F6F2FA;
  --cr-card: #FDFBFF;
  --cr-pale: #E9DDF6;
  --cr-glow: #EADFF7;
  /* brand 1.4: text on light, and on dark */
  --cr-head: #1E1828;
  --cr-body: #4A4156;
  --cr-quiet: #746882;
  --cr-head-dark: #F3EDF9;
  --cr-body-dark: #DCD0EA;
  --cr-quiet-dark: #A99BBB;
  /* brand 2 */
  --cr-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --cr-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cr-hand: "Caveat", "Segoe Print", cursive;
  /* brand 5.1: rounded cards with a purple top edge */
  --cr-radius: 14px;
  --cr-edge: 4px solid var(--cr-purple);

  /* The names every page here already uses, on the light ground. */
  --bg: var(--cr-ground);
  --card: var(--cr-card);
  --ink: var(--cr-body);
  --head: var(--cr-head);
  --muted: var(--cr-quiet);
  --faint: #D3C3E6;
  --line: #E4D9F0;
  --accent: var(--cr-purple);
  --accent-soft: var(--cr-pale);
  --quiet-bg: var(--cr-pale);
  --on-accent: #ffffff;
  --glow: var(--cr-glow);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--cr-night);
    --card: var(--cr-panel);
    --ink: var(--cr-body-dark);
    --head: var(--cr-head-dark);
    --muted: var(--cr-quiet-dark);
    --faint: #4B3B60;
    --line: #3A2D4C;
    --accent: var(--cr-lilac);
    --accent-soft: var(--cr-deep);
    --quiet-bg: var(--cr-panel);
    --on-accent: var(--cr-night);
    --glow: rgba(74, 34, 117, 0.55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--cr-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  position: relative;
}
/* brand 5.1: a soft lilac circle glowing in a corner of light pages. */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(26rem, 80vw);
  height: 26rem;
  background: radial-gradient(circle at 100% 0, var(--glow) 0%, var(--glow) 32%, transparent 62%);
  pointer-events: none;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
h1, h2, h3 {
  font-family: var(--cr-display);
  color: var(--head);
  font-weight: 600;
  letter-spacing: 0.01em;
}
h1 { text-transform: uppercase; font-weight: 700; }
.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* brand 2.2: eyebrows in capitals with wide letter-spacing. */
.eyebrow {
  font-family: var(--cr-text);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
/* brand 2.3: one handwritten line at most. */
.hand {
  font-family: var(--cr-hand);
  font-weight: 600;
  font-size: 1.6em;
  line-height: 1.15;
}
/* brand 3.1: the logo always sits on black. */
.logo-on-black {
  display: block;
  background: var(--cr-logo-black);
}
.logo-on-black img { display: block; width: 100%; height: auto; }

/* THE NAVIGATION (nav.js draws it from one list). A slim bar on black, so the
   logo is always on black (brand 3.1): the logo and the name on the left, a
   purple Join us and the Menu button on the right. */
.masthead {
  background: var(--cr-logo-black);
  border-bottom: 3px solid var(--cr-purple);
}
.cr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.cr-home {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--cr-head-dark);
  text-decoration: none;
}
.cr-logo { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 6px; overflow: hidden; }
.cr-logo img { width: 100%; height: 100%; }
.cr-name {
  font-family: var(--cr-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cr-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.cr-join, .cr-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--cr-text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}
.cr-join {
  color: #ffffff;
  background: var(--cr-purple);
  border: 1px solid var(--cr-purple);
  text-decoration: none;
}
.cr-join:hover { background: var(--cr-bright); border-color: var(--cr-bright); }
.cr-join[aria-current="page"] { box-shadow: 0 0 0 2px var(--cr-logo-black), 0 0 0 4px var(--cr-lilac); }
.cr-menu-btn {
  color: var(--cr-head-dark);
  background: transparent;
  border: 1px solid #5B4A73;
}
.cr-menu-btn:hover, .cr-menu-btn[aria-expanded="true"] { border-color: var(--cr-lilac); color: #ffffff; }
.cr-burger { font-size: 1.05rem; line-height: 1; }
.masthead a:focus-visible, .masthead button:focus-visible { outline: 2px solid var(--cr-lilac); outline-offset: 3px; }
@media (min-width: 600px) {
  .cr-name { font-size: 1.25rem; }
}

/* The menu panel: dark purple; a full-screen sheet on a phone, a panel that
   drops from the bar on a wider screen. Each step is numbered, the page you are
   on marked "You are here"; More sits small at the foot. */
.cr-menu[hidden] { display: none; }
.cr-menu-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.35); }
.cr-menu-sheet {
  position: fixed;
  z-index: 61;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cr-deep);
  color: var(--cr-head-dark);
  padding: 0.8rem 1rem 1.6rem;
  font-family: var(--cr-text);
}
html.cr-menu-open { overflow: hidden; }
@media (min-width: 720px) {
  html.cr-menu-open { overflow: visible; }
  .cr-menu-backdrop { background: transparent; }
  .cr-menu-sheet {
    inset: auto;
    top: 4.2rem;
    right: max(1rem, calc((100vw - 42rem) / 2 - 6rem));
    width: 26rem;
    max-height: calc(100vh - 5.2rem);
    border-radius: var(--cr-radius);
    border-top: var(--cr-edge);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  }
}
.cr-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; }
.cr-menu-title {
  margin: 0;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-lilac);
}
.cr-menu-close {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--cr-head-dark);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
}
.cr-menu-close:hover { border-color: var(--cr-lilac); }
.cr-steps { list-style: none; margin: 0; padding: 0; }
.cr-step {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.7rem 0.6rem;
  margin: 0 -0.6rem;
  border-radius: 10px;
  color: var(--cr-head-dark);
  text-decoration: none;
}
.cr-step:hover { background: rgba(255, 255, 255, 0.07); }
.cr-step[aria-current="page"] { background: rgba(255, 255, 255, 0.1); box-shadow: inset 3px 0 0 var(--cr-lantern); }
.cr-num {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--cr-lilac);
  font-family: var(--cr-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}
.cr-step[aria-current="page"] .cr-num { background: var(--cr-lilac); color: var(--cr-deep); }
.cr-step-words { flex: 1; min-width: 0; }
.cr-step-label {
  display: block;
  font-family: var(--cr-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}
.cr-step-line { display: block; font-size: 0.92rem; line-height: 1.4; color: var(--cr-body-dark); }
.cr-here {
  flex: none;
  align-self: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cr-lantern);
}
.cr-more { margin: 1rem 0 0; padding: 0.8rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.cr-more-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-quiet-dark);
}
.cr-more-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.cr-more-link { display: inline-flex; gap: 0.6rem; align-items: center; font-size: 0.92rem; color: var(--cr-body-dark); }
.cr-more-link:hover { color: #ffffff; }
.cr-menu a:focus-visible, .cr-menu button:focus-visible { outline: 2px solid var(--cr-lantern); outline-offset: 2px; }

/* The Next step card, at the foot of every page in the journey. */
.cr-next { margin-top: 2rem; margin-bottom: 1.6rem; }
.cr-next-card {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: var(--cr-radius);
  background: var(--cr-deep);
  color: var(--cr-head-dark);
  text-decoration: none;
  border-top: 4px solid var(--cr-bright);
  font-size: 1rem;
  line-height: 1.45;
}
.cr-next-card:hover { background: var(--cr-purple); }
.cr-next-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cr-next-k {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-lilac);
}
.cr-next-label { font-family: var(--cr-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em; }
.cr-next-sep { color: var(--cr-body-dark); }
.cr-next-line { color: var(--cr-body-dark); }
.cr-next-arrow { font-weight: 800; color: var(--cr-lantern); }
.cr-prev { margin: 0.7rem 0 0; font-size: 0.95rem; }
.cr-prev a { color: var(--muted); }

/* Present mode on the presentation hides the bar, the menu and the Next step card. */
.is-presenting .cr-next, .is-presenting .cr-menu { display: none !important; }

/* The site's strapline (brand 3.5), now kept on the index page only. */
.brand-strap {
  font-family: var(--cr-hand);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--accent);
  margin: 0.4rem 0 0;
}
.brand-sub { font-size: 0.95rem; line-height: 1.4; color: var(--muted); margin: 0.2rem 0 0; }

main.wrap { padding-top: 1.8rem; padding-bottom: 2rem; }
h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.4rem 0 0.8rem;
}
p { margin: 0 0 1rem; }
code {
  font-family: inherit;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}
.calm, .none, .private {
  color: var(--muted);
  font-style: italic;
}
.none, .private { margin: 0; }

/* Reflections, comments and notes */
.reflection, .comment {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.reflection:last-child, .comment:last-child { border-bottom: 0; }
.reflection-who, .comment-meta {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 0.2rem;
}
.reflection-who strong, .comment-meta strong { color: var(--head); }
.reflection-who a strong { color: var(--accent); }
.reflection-text, .comment-text {
  white-space: pre-line;
  overflow-wrap: break-word;
  margin: 0 0 0.5rem;
}
.replies {
  margin-left: 1rem;
  border-left: 2px solid var(--line);
  padding-left: 0.8rem;
}
.thread-empty { color: var(--muted); font-style: italic; }
.more, .comment-more {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Forms */
.form-foot {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  overflow-wrap: anywhere;
}
form label {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--head);
  margin: 0.7rem 0 0.25rem;
}
form input,
form textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--head);
  background: var(--card);
  border: 1px solid var(--faint);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}
form textarea { min-height: 6rem; resize: vertical; }
form input:focus,
form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
}
form button[type=submit] {
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 1.5rem;
  margin-top: 0.8rem;
  cursor: pointer;
}
form button:disabled { opacity: 0.6; cursor: default; }
.count { font-size: 0.85rem; color: var(--muted); margin: 0.2rem 0 0; }
.count:empty { display: none; }
.form-status { margin: 0.6rem 0 0; font-size: 0.95rem; }
.form-status:empty { display: none; }
.mic-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; flex-wrap: wrap; }
form button.mic {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  background: none;
  border: 1px solid var(--faint);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
}
form button.mic.listening { border-color: var(--accent); background: var(--accent-soft); }
.mic-note { font-size: 0.85rem; color: var(--muted); margin: 0; }
.mic-note:empty { display: none; }

/* brand 5.1: pill-shaped chips for short phrases. Folding follows the
   pscale-commons Community Recovery pages (MIT licence), so these pages
   fold as theirs do. */
.pill {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cr-deep);
  background: var(--cr-pale); border: 0; border-radius: 999px; padding: 0.1rem 0.7rem; margin: 0.6rem 0 0;
}
@media (prefers-color-scheme: dark) {
  .pill { color: var(--cr-head-dark); background: var(--cr-deep); }
}
a.pill { text-decoration: none; }
.how { color: var(--muted); margin: 0.8rem 0 1.2rem; }

/* A frame, folded: parts (cards with a purple top edge), then sections,
   then the clauses themselves */
.part { background: var(--card); border: 1px solid var(--line); border-top: var(--cr-edge); border-radius: var(--cr-radius); margin: 0 0 0.7rem; }
button.fold {
  display: flex; width: 100%; justify-content: space-between; align-items: flex-start; gap: 0.8rem;
  text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 0.85rem 1rem; cursor: pointer;
}
button.fold:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--cr-radius); }
.fold-words, .fold-title, .fold-gloss { display: block; }
.fold-title { color: var(--head); }
.part > .fold .fold-title { font-family: var(--cr-display); font-weight: 600; font-size: 1.12em; letter-spacing: 0.01em; }
.fold-gloss { font-size: 0.9rem; color: var(--muted); font-weight: 400; margin-top: 0.1rem; }
.chev { color: var(--accent); flex: none; transition: transform 0.15s; }
.open > .fold .chev { transform: rotate(180deg); }
.part.open > .fold { border-bottom: 1px solid var(--line); }
.part > .kids { padding: 0 1rem 0.3rem; }
.sect { border-top: 1px solid var(--line); }
.part > .kids > .sect:first-child { border-top: 0; }
.sect > .fold { padding: 0.75rem 0; }
.sect.open > .fold .fold-title { color: var(--accent); font-weight: 700; }

/* Footer, and a way home that only its owner looks for. */
footer {
  border-top: 1px solid var(--line);
  padding: 1.2rem 0 2.4rem;
  color: var(--muted);
  font-size: 0.88rem;
}
footer p { margin: 0 0 0.5rem; }
/* Where a page lives on the beach: a long address breaks rather than
   widening the page. */
footer .where { overflow-wrap: anywhere; }
/* How this was made: a quiet way to made.html, at the foot of every page. */
footer .made { margin-top: 0.9rem; }
footer .made a { color: var(--muted); }
footer .made a[aria-current="page"] { text-decoration: none; }
footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* The footer's legal words (nav.js draws them from the block 'policies'):
   who we are and our standing, how to reach us, a calm highlighted help
   line, the disclaimer smaller, and the six policies; the page's own beach
   line and live dot sit beneath them, smaller. */
.cr-legal { color: var(--ink); font-size: 0.92rem; line-height: 1.55; overflow-wrap: break-word; }
.cr-legal p { margin: 0 0 0.7rem; }
.cr-legal strong { color: var(--head); }
.cr-legal .cr-help {
  margin: 1rem 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  color: var(--head);
  font-size: 0.95rem;
}
.cr-help a { font-weight: 800; white-space: nowrap; }
.cr-legal .cr-small { font-size: 0.8rem; color: var(--muted); }
/* Each link has its dot before it; the dot that starts a line falls outside
   the clipped edge, so a wrapped row never begins with one. The 4px of
   padding keeps a focused link's outline in view. */
.cr-policy-links { overflow: hidden; margin: 0.6rem -4px 0.2rem; padding: 4px; }
.cr-policy-links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -1.3rem;
  padding: 0;
}
.cr-policy-links li { display: inline-flex; align-items: center; }
.cr-policy-links a { display: inline-block; padding: 0.2rem 0; font-weight: 700; }
.cr-sep { display: inline-block; width: 1.3rem; text-align: center; color: var(--muted); }
.cr-legal .cr-draft { margin: 0.1rem 0 0; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--muted); }
.cr-beach { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8rem; }
.cr-beach p { margin: 0 0 0.4rem; }
.cr-beach .home { margin-top: 1.1rem; }
.home {
  display: block;
  width: max-content;
  margin: 1.6rem auto 0;
  padding: 0.2rem 0.5rem;
  color: var(--faint);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1;
}
.home:hover, .home:focus { color: var(--muted); }

@keyframes settle {
  from { opacity: 0; transform: translateY(0.4rem); }
  to { opacity: 1; transform: none; }
}
.arrived { animation: settle 0.5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .arrived { animation: none; }
  .chev { transition: none; }
}
@media (min-width: 600px) {
  body { font-size: 1.125rem; }
}

/* ---- brand 7: MOTION AND LIFE ------------------------------------------------
   Motion drawn from what the beach holds, never pasted on; one orchestrated
   moment per section, everything around it quiet, and every page complete at
   rest. Lantern gold is the one colour added, for what is alive right now;
   leaf green and petal pink belong to the garden only. */
:root {
  --cr-lantern: #F4C86A;
  --cr-leaf: #8FD3A1;
  --cr-petal: #F7A7C3;
  --cr-live: #2E9E58;
  --cr-amber: #C77A12;
}
@media (prefers-color-scheme: dark) {
  :root { --cr-live: #5BD08A; --cr-amber: #F0A541; }
}

/* brand 7.7: the sprout mark stays with the reader once the masthead has
   scrolled away, as a slim bar at the top. */
.markbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  background: var(--cr-night);
  border-bottom: 2px solid var(--cr-purple);
  transform: translateY(-110%);
  transition: transform 0.25s ease-out;
}
.markbar.shown { transform: none; }
.markbar .wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.markbar a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cr-head-dark);
  text-decoration: none;
  font-family: var(--cr-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.markbar a { white-space: nowrap; font-size: 1rem; }
.markbar .here {
  margin-left: auto;
  min-width: 0;
  color: var(--cr-lilac);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.markbar a:focus-visible { outline: 2px solid var(--cr-lilac); outline-offset: 3px; }

/* brand 7.7: a live dot in the footer, the same on every page: grey while
   the page opens the beach, green once it is reading the beach now, amber
   if the read failed (Beach.dot in beach.js sets it, and its word). */
.live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.live-dot {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--faint);
  transition: background 0.4s, box-shadow 0.4s;
}
.live-dot.on {
  background: var(--cr-live);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-live) 25%, transparent);
}
.live-dot.off {
  background: var(--cr-amber);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-amber) 25%, transparent);
}

/* brand 7.5: a burst of gold sparks from a button that has just been
   pressed. Each spark is placed by the page with --dx and --dy. */
.spark {
  position: absolute;
  z-index: 5;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--cr-lantern);
  box-shadow: 0 0 6px var(--cr-lantern);
  pointer-events: none;
  animation: spark 0.75s ease-out forwards;
}
@keyframes spark {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .markbar { transition: none; }
  .spark { display: none; }
}