/* Site-specific blocks (BEM, CUBE composition); sits on top of default.css. */

/* Stacking scale: every layer that can overlap another.

     auto  page content
     1     sticky editor toolbar   .rich-editor__toolbar
     2     sticky editor tabs      .lyric-editor__tabs (phones; over the toolbar)
     20    sticky song player      .song__player
     30    sticky feed filter rail .feed__rail
     50    masthead + everything inside it (the notifications bell, account and
           manage dropdowns) .masthead
     40    sticky group switcher band .group-nav-band (sticky top on wide
           screens: above the feed rail and song player, under the masthead's
           dropdowns while both are on screen)
     45    week playlist now-playing strip .now-playing (fixed bottom; over the
           page's sticky chrome, under the masthead's dropdowns)
     100   phone-pinned group switcher .group-nav-band, skip link .u-skip-link
           (both sit outside the masthead and must clear it)

   The masthead carries position: relative + z-index so it is a single
   stacking context; its dropdowns' own z-index values (film 9, panel 10)
   are purely local to it. */

.masthead {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-s);
  padding-inline: var(--space-l);
  border-block-end: var(--rule-thick);
}

.masthead__wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

/* The template renders this only when something precedes it, so the nav
   never opens on a rule. */
.masthead__divider {
  align-self: center;
  inline-size: 0;
  block-size: var(--step-1);
  border-inline-start: var(--rule-soft);
}

/* Chrome, not content, so it never grows past one line. */
.site-footer {
  padding-block: var(--space-2xs);
  padding-inline: var(--space-l);
  margin-block-start: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  border-block-start: var(--rule-thin);
}

.site-footer__nav {
  gap: var(--space-2xs) var(--space-m);
}

.site-footer a {
  color: inherit;
}

/* Same details-popover pattern as .manage-menu below. */
.account-menu {
  position: relative;
}

.account-menu__summary {
  display: inline-flex;
  gap: var(--space-3xs);
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.account-menu__summary::-webkit-details-marker {
  display: none;
}

.account-menu[open]::before {
  position: fixed;
  inset: 0;
  z-index: 9;
  content: "";
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.account-menu[open] > .account-menu__summary {
  position: relative;
  z-index: 10;
}

.account-menu__chevron::before {
  display: inline-block;
  font-size: var(--step--2);
  content: "\25BE"; /* ▾ */
  transition: transform 0.12s ease;
}
.account-menu[open] .account-menu__chevron::before {
  transform: rotate(180deg);
}

.account-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-end: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-inline-size: 10rem;
  padding: var(--space-2xs);
  background: var(--color-bg);
  border: var(--rule-thin);
}

.account-menu__link {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink);
  text-decoration: none;
}
.account-menu__link:hover {
  color: var(--color-accent);
}

/* Strip button chrome so it reads as a menu item, like the anchors beside it. */
.account-menu__logout {
  margin: 0;
}
.account-menu__logout-button {
  padding: 0;
  text-align: start;
  cursor: pointer;
  background: none;
  border: none;
}

/* Media queries, not container queries: a size container is the containing
   block for its fixed-position descendants, which would pin the playlist's
   now-playing strip to its section instead of the viewport. */
.feed-grid {
  --feed-margin: 12rem;

  padding-inline: var(--space-l);
}

@media (width >= 56rem) {
  .feed-grid {
    display: grid;
    grid-template-columns:
      [margin-start] var(--feed-margin)
      [margin-end content-start] minmax(0, var(--content-max))
      [content-end];
    column-gap: var(--space-l);
    align-items: start;
  }

  .feed-grid > * {
    grid-column: content;
  }
}

@media (width >= 80rem) {
  .feed-grid {
    grid-template-columns:
      [margin-start] minmax(var(--feed-margin), 1fr)
      [margin-end content-start] minmax(0, var(--content-max))
      [content-end aside-start] minmax(var(--feed-margin), 1fr)
      [aside-end];
  }
}

/* Stacked by default; on the feed grid the week meta takes the margin, the
   prompt the content column, and the CTA sits under the week meta until the
   right-hand margin opens up for it. */
.prompt-strip {
  display: grid;
  row-gap: var(--space-m);
  padding-block: var(--space-l);
  border-block-end: var(--rule-thin);
}

.prompt-strip__week {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.prompt-strip__term {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.prompt-strip__week-marker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
}

.prompt-strip__week-date {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.prompt-strip__lede {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.prompt-strip__heading {
  max-inline-size: 30ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.05;
}

.prompt-strip__heading-accent {
  font-style: italic;
  color: var(--color-accent);
}

.prompt-strip__brief {
  max-inline-size: 50ch;
  margin: 0;
  font-size: var(--step-0);
  color: var(--color-ink-soft);
}

/* Native details/summary, no JS. */
.feed-charter {
  margin-block: var(--space-s);
  border-block: var(--rule-thin);
}

.feed-charter__summary {
  display: flex;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-xs);
  padding-inline: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  cursor: pointer;
  list-style: none;
}

.feed-charter__summary::-webkit-details-marker {
  display: none;
}

.feed-charter__summary:hover .feed-charter__label {
  color: var(--color-accent);
}

.feed-charter__cue {
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.feed-charter__cue::after {
  content: attr(data-closed) " ↓";
}

.feed-charter[open] .feed-charter__cue::after {
  content: attr(data-open) " ↑";
}

.feed-charter__body {
  max-inline-size: var(--measure);
  padding-block: var(--space-2xs) var(--space-m);
  padding-inline: var(--space-l);
  font-size: var(--step-0);
  color: var(--color-ink-soft);
}

/* Authored in markdown; any .prompt-md container holds goldmark's block
   elements. Flush at both ends so the surrounding layout's spacing stays in
   charge. */
.prompt-md p,
.prompt-md ul,
.prompt-md ol {
  margin-block: var(--space-2xs);
}

.prompt-md ul,
.prompt-md ol {
  padding-inline-start: 1.2em;
}

.prompt-md > :first-child {
  margin-block-start: 0;
}

.prompt-md > :last-child {
  margin-block-end: 0;
}

.prompt-strip__requirements {
  margin-block-start: var(--space-2xs);
}

.prompt-strip__requirements-heading {
  margin-block: 0 var(--space-3xs);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.prompt-strip__requirements-text {
  max-inline-size: 50ch;
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.prompt-strip__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: var(--rule-soft);
}

.prompt-strip__submit {
  display: inline-block;
  align-self: start;
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  text-decoration: none;
  background: var(--color-accent);
}

.prompt-strip__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.prompt-strip__meta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

@media (width >= 56rem) {
  .prompt-strip {
    grid-template-rows: auto 1fr;
  }
  .prompt-strip__week {
    grid-row: 1;
    grid-column: margin;
  }
  .prompt-strip__lede {
    grid-row: 1 / span 2;
  }
  .prompt-strip__cta {
    grid-row: 2;
    grid-column: margin;
  }
}

@media (width >= 80rem) {
  .prompt-strip__cta {
    grid-row: 1;
    grid-column: aside;
    align-items: end;
    padding-block-start: 0;
    text-align: end;
    border-block-start: 0;
  }
  .prompt-strip__submit {
    align-self: end;
  }
}

.feed {
  padding-block: var(--space-l);
}

.week__back {
  padding-block-start: var(--space-m);
  padding-inline: var(--space-l);
  margin-block-end: 0;
}
.week__back-link {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}
.week__back-link:hover {
  color: var(--color-accent);
}

.feed__rail {
  /* Composited layer (translateZ) so native <audio> controls, which Chrome
     promotes to their own layer, scroll behind the sticky rail. z-index 30
     per the stacking scale at the top of this file. */
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  align-self: start;
  padding-block: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  background: rgb(from var(--color-bg) r g b / 0.72);
  isolation: isolate;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  transform: translateZ(0);
}

/* Below the feed grid the rail bleeds its blurred backdrop to the section's
   edges so it reads as a band, not a floating pill. */
@media (width < 56rem) {
  .feed__rail {
    padding-inline: var(--space-l);
    margin-block-end: var(--space-l);
    margin-inline: calc(var(--space-l) * -1);
  }
}

@media (width >= 56rem) {
  .feed__rail {
    grid-column: margin;
  }
}

.feed__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.filter-strip {
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.filter-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.filter-strip__item {
  margin: 0;
}

.filter-strip__option {
  display: inline-block;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}

.filter-strip__option:hover {
  color: var(--color-ink);
}

.filter-strip__option--active {
  font-weight: 500;
  color: var(--color-ink);
  border-block-end-color: var(--color-accent);
}

.filter-strip__count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}

.filter-strip__option--disabled {
  color: var(--color-ink-muted);
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}
.filter-strip__option--disabled .filter-strip__count {
  color: inherit;
}

@media (width >= 56rem) {
  .feed__rail .filter-strip__list {
    flex-direction: column;
    gap: var(--space-3xs);
  }
  .feed__rail .filter-strip__option {
    border-block-end: 0;
    border-inline-start: 2px solid transparent;
  }
  .feed__rail .filter-strip__option--active {
    border-inline-start-color: var(--color-accent);
  }
}

.feed__empty {
  padding-block: var(--space-2xl);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-ink-muted);
  text-align: center;
}

/* Hidden until playlist.js takes over. */
.playlist {
  padding-block-start: var(--space-m);
  padding-inline: var(--space-l);
}

/* The playlist partial is shared with the profile page; the wrapper owns
   the gutters here. */
.feed-grid > .playlist {
  padding-inline: 0;
}

.playlist[hidden],
.now-playing[hidden] {
  display: none;
}

.playlist__bar {
  gap: var(--space-xs);
}

.playlist__play-all {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  min-block-size: var(--space-l);
  padding-block: var(--space-3xs);
  padding-inline: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-bg);
  cursor: pointer;
  background: var(--color-ink);
  border: 0;
  border-radius: var(--radius);
}

.playlist__play-all:hover {
  background: var(--color-accent);
}

.playlist__icon {
  inline-size: var(--space-2xs);
  block-size: var(--space-xs);
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.playlist__count {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

/* z-index 45 on the stacking scale: over the page's sticky chrome, under the
   masthead. The composited layer keeps the cards' native <audio> controls
   from painting through. */
.now-playing {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 45;
  display: flex;
  gap: var(--space-xs) var(--space-s);
  align-items: center;
  padding-block: var(--space-xs) calc(var(--space-xs) + env(safe-area-inset-bottom));
  padding-inline: var(--space-l);
  background: var(--color-bg);
  border-block-start: var(--rule-thick);
  isolation: isolate;
  transform: translateZ(0);
}

.now-playing__controls {
  display: flex;
  flex: none;
  gap: var(--space-3xs);
}

.now-playing__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-xl);
  min-block-size: var(--space-xl);
  padding: 0;
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
  border-radius: var(--radius);
}

.now-playing__button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.now-playing__button--toggle {
  color: var(--color-bg);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.now-playing__button--toggle:hover {
  color: var(--color-bg);
  background: var(--color-accent);
}

.now-playing__icon {
  inline-size: var(--space-xs);
  block-size: var(--space-xs);
  background: currentcolor;
}

.now-playing__button--toggle .now-playing__icon {
  clip-path: polygon(10% 0, 100% 50%, 10% 100%);
}

.now-playing__button--playing .now-playing__icon {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.now-playing__button--next .now-playing__icon {
  clip-path: polygon(0 0, 75% 50%, 75% 0, 100% 0, 100% 100%, 75% 100%, 75% 50%, 0 100%);
}

.now-playing__button--prev .now-playing__icon {
  clip-path: polygon(100% 0, 25% 50%, 25% 0, 0 0, 0 100%, 25% 100%, 25% 50%, 100% 100%);
}

.now-playing__text {
  flex: 1 1 0;
  min-inline-size: 0;
}

.now-playing__track,
.now-playing__up-next {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing__title {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--color-ink);
}

.now-playing__artist,
.now-playing__up-next {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.now-playing__artist {
  margin-inline-start: var(--space-2xs);
}

/* Room at the end of the page so the strip never covers the last entry. */
body:has(.now-playing:not([hidden])) .site-footer {
  padding-block-end: var(--space-3xl);
}

@media (max-width: 40rem) {
  .now-playing {
    padding-inline: var(--space-s);
  }
  /* On the feed the phone's bottom tab bar is pinned under it: stack above. */
  body:has(.group-nav-band) .now-playing {
    inset-block-end: calc(var(--group-nav-h) + env(safe-area-inset-bottom));
    padding-block-end: var(--space-xs);
  }
  body:has(.group-nav-band):has(.now-playing:not([hidden])) .site-footer {
    padding-block-end: calc(var(--space-3xl) + var(--group-nav-h));
  }
}

/* Shown in place of the prompt strip + feed when no week is live. */
.feed-no-week {
  padding-block: var(--space-3xl);
  padding-inline: var(--space-l);
  text-align: center;
}

.feed-no-week__heading {
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
}

.feed-no-week__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-ink-muted);
}

/* A ruled band, not a dialog: it's a signpost, not an interruption. */
.catchup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-xs);
  padding-inline: var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  background: var(--color-highlight);
  border-block-end: var(--rule-thin);
}

.catchup__copy {
  margin: 0;
  color: var(--color-ink-soft);
}

.catchup__link {
  color: var(--color-accent);
  text-decoration: none;
  border-block-end: 1px solid currentcolor;
}

.catchup__link:hover {
  color: var(--color-ink);
}

/* Takes the song page's column (--content-max), so its rows, the feed's
   cards and the songs they lead to all share one width. */
.weeks {
  box-sizing: content-box;
  max-inline-size: var(--content-max);
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.weeks__head {
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.weeks__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.weeks__lede {
  max-inline-size: var(--measure);
  margin-block: var(--space-2xs) 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.weeks__caught-up {
  padding: var(--space-xs) var(--space-s);
  margin-block: var(--space-m) 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  background: var(--color-highlight);
  border-inline-start: var(--rule-thick);
}

.weeks__term {
  margin-block-start: var(--space-l);
}

.weeks__term-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.weeks__list {
  padding: 0;
  margin-block: var(--space-m) 0;
  list-style: none;
}

.week-row {
  padding-block: var(--space-s);
  border-block-start: var(--rule-soft);
}

.week-row:last-child {
  border-block-end: var(--rule-soft);
}

.week-row__marker {
  gap: var(--space-2xs) var(--space-s);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.week-row__number {
  color: var(--color-ink);
}

.week-row__current {
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.week-row__prompt {
  margin-block: var(--space-2xs) 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.3;
}

.week-row__link {
  color: inherit;
  text-decoration: none;
}

.week-row__link:hover {
  color: var(--color-accent);
}

.week-row__stats {
  gap: var(--space-2xs) var(--space-m);
  margin-block: var(--space-2xs) 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.week-row__count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
}

.week-row__stat--open {
  color: var(--color-ink-soft);
}

.week-row__stat--open .week-row__count {
  color: var(--color-accent);
}

.week-row__stat--done {
  font-style: italic;
}

/* The underline alone signals these are links into the week's filtered list. */
a.week-row__stat {
  color: var(--color-ink-muted);
  text-decoration-color: var(--color-rule-soft);
}

a.week-row__stat--open {
  color: var(--color-ink-soft);
}

a.week-row__stat:hover {
  color: var(--color-accent);
}

.week-row[data-status="past"] .week-row__prompt {
  color: var(--color-ink-soft);
}

.weeks__empty {
  padding-block: var(--space-2xl);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-ink-muted);
  text-align: center;
}

.group-chooser {
  max-inline-size: var(--measure);
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.group-chooser__heading {
  margin-block: 0 var(--space-m);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
}

.group-chooser__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.group-chooser__item {
  border-block-start: var(--rule-thin);
}

.group-chooser__item:last-child {
  border-block-end: var(--rule-thin);
}

.group-chooser__link {
  display: block;
  padding-block: var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  text-decoration: none;
}

.group-chooser__link:hover {
  color: var(--color-accent);
}

.group-chooser__empty {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--color-ink-muted);
}

.song {
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-inline-size: var(--content-max);
  padding-block: var(--space-l);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.song__back {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.song__back:hover {
  color: var(--color-accent);
}

.song__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-end: var(--space-m);
  border-block-end: var(--rule-thin);
}

.song__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 1.05;
}

.song__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.song__contributor {
  color: var(--color-ink-soft);
}

.song__role-badge {
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  border: var(--rule-thin);
}

/* z-index 20 per the stacking scale at the top of this file, clearing the
   natively-layered <audio> controls below. */
.song__player {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
  background: var(--color-bg);
  border-block-end: var(--rule-soft);
}

/* Phones: only the transport row (pin buttons + native controls) stays
   stuck; the wave scrolls away so the keyboard leaves room to read the
   thread. */
@media (max-width: 40rem) {
  /* display: contents dissolves the box so the transport's sticky containing
     block is the whole article, not a player box that ends at the composer. */
  .song__player {
    display: contents;
  }

  .song__transport {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-block: var(--space-2xs);
    background: var(--color-bg);
    border-block-end: var(--rule-soft);
  }
}

/* Stretches to the player width via the svg's preserveAspectRatio="none". */
.song__waveform {
  display: block;
  inline-size: 100%;
  block-size: var(--space-2xl);
  fill: var(--color-ink);
}

/* With no JS the track never appears; the bare waveform and native controls
   remain the whole player. */
.song__waveform-track {
  position: relative;
  inline-size: 100%;
  cursor: pointer;
}

/* --played (0..1) is set per frame from the audio's timeupdate. clip-path
   keeps the reveal to the bar shapes. */
.song__waveform--played {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--played, 0)) * 100%) 0 0);
  fill: var(--color-accent);
}

.song__playhead {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--played, 0) * 100%);
  inline-size: 2px;
  pointer-events: none;
  background: var(--color-ink);
}

/* Markers sit beside (not inside) the track because the track's slider role
   makes its descendants presentational to assistive tech. */
.song__wave {
  position: relative;
}

.song__markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The button box is wider than the tick so it is tappable. */
.song__marker {
  position: absolute;
  inset-block: 0;
  inline-size: 12px;
  padding: 0;
  margin-inline-start: -6px;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.song__marker::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1px);
  inline-size: 2px;
  content: "";
  background: var(--color-accent);
}

.song__marker::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% - 3px);
  inline-size: 6px;
  block-size: 6px;
  content: "";
  background: var(--color-accent);
}

/* Inert so a stray click passes through to the wave. */
.song__marker--pending {
  pointer-events: none;
  opacity: 0.55;
}

.song__pin-actions {
  align-items: baseline;
}

.song__pin-button {
  padding-block: 0;
  padding-inline: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.8;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.song__pin-button:disabled {
  color: var(--color-ink-muted);
  cursor: default;
}

.song__pin-button[aria-pressed="true"] {
  color: var(--color-bg);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.song__place-hint {
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.song__waveform-track--placing {
  cursor: crosshair;
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.song__audio {
  inline-size: 100%;
}

.song__section-heading {
  padding-block-end: var(--space-2xs);
  margin-block: 0 var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  border-block-end: var(--rule-soft);
}

/* Goldmark output: a blank line in the source is one paragraph break, so the
   gap between paragraphs matches it rather than a tightened one. */
.song__description {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.song__description p {
  margin-block: var(--space-m);
}
.song__description p:first-child {
  margin-block-start: 0;
}
/* Every heading level shares the look (the editor keeps whatever level old
   text used), with the lower ones a touch smaller. */
.song__description :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--space-m) var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}
.song__description :is(h3, h4, h5, h6) {
  font-size: var(--step-0);
}
.song__description > :first-child {
  margin-block-start: 0;
}
/* :where keeps this at the same specificity as `.song__description p`, which
   it follows in source order and so still overrides. */
.song__description :where(h1, h2, h3, h4, h5, h6) + p {
  margin-block-start: var(--space-2xs);
}

/* Goldmark output with hard-wraps: every newline becomes a <br>, so
   paragraphs read like a printed lyric sheet. */
.song__lyrics {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--color-ink);
}
/* Gap lives below each stanza only, so a heading's tight bottom margin isn't
   overridden by the next paragraph's top margin collapsing past it. */
.song__lyrics p {
  margin-block: 0 var(--space-l);
}
/* ## is the documented form, but any level reads the same so a stray # or
   ### doesn't turn into a giant browser heading. */
.song__lyrics :is(h1, h2, h3, h4, h5, h6) {
  margin-block: var(--space-l) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}
.song__lyrics > :first-child {
  margin-block-start: 0;
}
.song__lyrics > :last-child {
  margin-block-end: 0;
}

.song__edit-link {
  margin-inline-start: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.song__delete-link {
  margin-inline-start: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.song__comment-count {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-soft);
}

.comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: 0;
  margin-block: 0 var(--space-l);
  list-style: none;
}

.comments__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.comments__replies {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-m);
  margin-block: var(--space-2xs) 0;
  list-style: none;
  border-inline-start: var(--rule-soft);
}

.comment {
  font-family: var(--font-serif);
  color: var(--color-ink);
}

.comment__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: baseline;
  margin-block: 0 var(--space-3xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

/* Must clear the sticky player; three wave-heights approximates the stuck
   stack of wave + pin row + native controls. */
.comment {
  scroll-margin-block-start: calc(3 * var(--space-2xl));
}

.comment__author {
  font-weight: 600;
  color: var(--color-ink);
}

.comment__role-badge {
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  border: var(--rule-thin);
}

/* It's a button (click seeks the player there), so flatten the UA styling. */
.comment__at {
  padding-block: 0;
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
  border-color: currentColor;
}

.comment__posted,
.comment__edited {
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.comment__body {
  margin: 0;
  line-height: 1.5;
}
.comment__body p {
  margin-block: var(--space-s);
}
.comment__body > :first-child {
  margin-block-start: 0;
}
.comment__body > :last-child {
  margin-block-end: 0;
}

.comment__tombstone {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.comments__empty,
.comments__locked {
  margin-block: 0 var(--space-l);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-ink-muted);
}

.comments__reply > summary {
  inline-size: max-content;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-s);
}

.comment-form--moment {
  padding: var(--space-xs);
  border: var(--rule-thin);
}

/* Load-bearing: .comment-form's display: flex would otherwise beat the UA's
   display: none for [hidden]. */
.comment-form--moment[hidden] {
  display: none;
}

.moment-form__head {
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
  margin: 0;
  font-size: var(--step--1);
}

.moment-form__time {
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.moment-form__nudge {
  padding-block: 0;
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.comment-form__cancel {
  align-self: start;
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}
.comment-form--reply {
  margin-block-start: var(--space-2xs);
}

.comment-form__label {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.comment-form__input {
  inline-size: 100%;
  padding: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  color: var(--color-ink);
  resize: vertical;
  background: var(--color-bg);
  border: var(--rule-thin);
}

.comment-form__submit {
  align-self: start;
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-bg);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: var(--color-ink);
  border: var(--rule-thin);
}

.comment-form__error {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent);
}

.comment__actions {
  display: flex;
  gap: var(--space-m);
  margin-block-start: var(--space-3xs);
}

.comment__action > summary {
  inline-size: max-content;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* Child combinators below keep a reply's open editor from swapping its
   parent's body. */
.comment__edit-form {
  display: none;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-start;
}

.comment:has(> .comment__actions > .comment__action--edit[open]) > .comment__body {
  display: none;
}

.comment:has(> .comment__actions > .comment__action--edit[open]) > .comment__edit-form {
  display: flex;
}

.comment__edit-input {
  inline-size: 100%;
  font-family: var(--font-serif);
  line-height: 1.5;
  field-sizing: content;
  min-block-size: 3lh;
}

.comment__edit-remove-memo {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.comment__action--edit[open] > summary > .comment__action-when-closed,
.comment__action--edit:not([open]) > summary > .comment__action-when-open {
  display: none;
}

/* The native <audio> is the no-JS player; memo-player.js hides its controls
   and reveals the square button. */
.memo-player {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  max-inline-size: var(--measure);
  margin-block: var(--space-2xs) 0;
}

.memo-player__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-l);
  min-block-size: var(--space-l);
  padding: 0;
  color: var(--color-bg);
  cursor: pointer;
  background: var(--color-ink);
  border: 0;
  border-radius: var(--radius);
}

.memo-player__toggle[hidden] {
  display: none;
}

.memo-player__toggle:hover {
  background: var(--color-accent);
}

.memo-player__icon {
  inline-size: var(--space-2xs);
  block-size: var(--space-xs);
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.memo-player__toggle--playing .memo-player__icon {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.memo-player__wave {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
}

.memo-player__wave[role="slider"] {
  cursor: pointer;
}

.memo-player__waveform {
  display: block;
  inline-size: 100%;
  block-size: var(--space-l);
  fill: var(--color-ink-muted);
}

.memo-player__waveform--played {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--played, 0)) * 100%) 0 0);
  fill: var(--color-accent);
}

.memo-player__duration {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.memo-player__audio {
  flex: 1 1 100%;
  inline-size: 100%;
}

.memo-transcript {
  max-inline-size: var(--measure);
  margin-block-start: var(--space-3xs);
}

.memo-transcript__toggle {
  inline-size: max-content;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* pre-line keeps the worker's line breaks without honouring runs of spaces. */
.memo-transcript__text {
  padding-inline-start: var(--space-xs);
  margin-block: var(--space-2xs) 0;
  font-family: var(--font-serif);
  line-height: 1.5;
  white-space: pre-line;
  border-inline-start: var(--rule-soft);
}

.memo-rec {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.memo-rec[hidden],
.memo-rec__record[hidden],
.memo-rec__upload[hidden],
.memo-rec__live[hidden],
.memo-rec__take[hidden],
.memo-rec__preview[hidden],
.memo-rec__button[hidden] {
  display: none;
}

.memo-rec__start {
  align-items: center;
}

/* Without JS this is a caption beside the native file input. */
.memo-rec__upload {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
}

.memo-rec__input::file-selector-button {
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
  border-radius: var(--radius);
}

/* With JS the native input is visually hidden and the label is the button;
   the listen-back player stands in for the chosen file name. */
.memo-rec--enhanced .memo-rec__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.memo-rec--enhanced .memo-rec__upload {
  position: relative;
  padding: var(--space-3xs) var(--space-xs);
  cursor: pointer;
  border: var(--rule-thin);
}

.memo-rec--enhanced .memo-rec__upload:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.memo-rec--enhanced .memo-rec__upload:has(.memo-rec__input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.memo-rec__record {
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  align-self: start;
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.memo-rec__record:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.memo-rec__mic {
  inline-size: var(--space-2xs);
  block-size: var(--space-2xs);
  background: var(--color-accent);
}

.memo-rec__live,
.memo-rec__take {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: var(--rule-thin);
}

/* The trace strokes in this element's computed colour (see capture.js). */
.memo-rec__canvas {
  inline-size: 100%;
  block-size: var(--space-l);
  color: var(--color-accent);
  background: var(--color-bg);
  border: var(--rule-soft);
}

.memo-rec__controls {
  align-items: center;
}

.memo-rec__timer {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
}

.memo-rec__button {
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.memo-rec__button:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.memo-rec__button--stop {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.memo-rec__preview {
  inline-size: 100%;
}

.memo-rec__hint {
  max-inline-size: var(--measure);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.memo-rec__message {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-accent);
}

.comment__delete-prompt {
  margin-block: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.notif {
  position: relative;
}

.notif__summary {
  display: inline-flex;
  gap: var(--space-3xs);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.notif__summary::-webkit-details-marker {
  display: none;
}

/* Dismiss film: as a pseudo-element of the <details>, clicks on it hit-test
   to the details itself, which notifications.js reads as "outside" and
   closes. */
.notif[open]::before {
  position: fixed;
  inset: 0;
  z-index: 9;
  content: "";
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.notif[open] > .notif__summary {
  position: relative;
  z-index: 10;
}

.notif__chevron::before {
  display: inline-block;
  font-size: var(--step--2);
  content: "\25BE"; /* ▾ */
  transition: transform 0.12s ease;
}
.notif[open] .notif__chevron::before {
  transform: rotate(180deg);
}

.notif__count {
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.3;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: var(--rule-thin);
}

.notif__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-end: 0;
  z-index: 10;
  inline-size: 22rem;
  max-inline-size: 90vw;
  max-block-size: 24rem;
  padding: var(--space-2xs);
  overflow-y: auto;
  background: var(--color-bg);
  border: var(--rule-thin);
}

.notif__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}

.notif__item {
  border-block-end: var(--rule-soft);
}
.notif__item:last-child {
  border-block-end: none;
}
.notif__item--unread {
  background: var(--color-accent-wash, transparent);
}

.notif__link {
  display: block;
  padding: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--color-ink);
  text-decoration: none;
}
.notif__link:hover {
  text-decoration: underline;
}

.notif__actor,
.notif__song {
  font-weight: 600;
}

.notif__empty {
  margin: var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--color-ink-muted);
}

.notif__actions {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--space-2xs);
  margin: 0;
  border-block-start: var(--rule-soft);
}
.notif__actions[hidden] {
  display: none;
}

.notif__mark-all {
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  border: var(--rule-thin);
}
.notif__mark-all:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Same details-popover pattern as the notifications bell above. */
.manage-menu {
  position: relative;
}

.manage-menu__summary {
  display: inline-flex;
  gap: var(--space-3xs);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.manage-menu__summary::-webkit-details-marker {
  display: none;
}

.manage-menu[open]::before {
  position: fixed;
  inset: 0;
  z-index: 9;
  content: "";
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
}

.manage-menu[open] > .manage-menu__summary {
  position: relative;
  z-index: 10;
}

.manage-menu__chevron::before {
  display: inline-block;
  font-size: var(--step--2);
  content: "\25BE"; /* ▾ */
  transition: transform 0.12s ease;
}
.manage-menu[open] .manage-menu__chevron::before {
  transform: rotate(180deg);
}

.manage-menu__panel {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2xs));
  inset-inline-end: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-inline-size: 12rem;
  padding: var(--space-2xs);
  background: var(--color-bg);
  border: var(--rule-thin);
}

.manage-menu__link {
  font-size: var(--step--1);
  color: var(--color-ink);
  text-decoration: none;
}
.manage-menu__link:hover {
  color: var(--color-accent);
}

/* On phones the masthead nav wraps, so a panel anchored to its trigger's
   right edge can run off the left of the screen; anchor to the masthead
   instead and span the viewport (with gutters). */
@media (max-width: 40rem) {
  .masthead__divider {
    display: none;
  }
  .notif,
  .manage-menu,
  .account-menu {
    position: static;
  }
  .notif__panel,
  .manage-menu__panel,
  .account-menu__panel {
    inset-block-start: calc(100% + var(--space-3xs));
    inset-inline: var(--space-s);
    inline-size: auto;
    max-inline-size: none;
  }
}

.auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 30rem;
  padding-block: var(--space-xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.auth__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 500;
}

.auth__lede {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--color-ink-soft);
}

.auth__error {
  padding: var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent);
  background: rgb(from var(--color-accent) r g b / 0.05);
  border: var(--rule-thin);
  border-color: var(--color-accent);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.auth__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.auth__label {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.auth__input {
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.auth__input:focus {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.auth__hint {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.auth__submit {
  align-self: start;
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.auth__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.auth__passkey {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: start;
}

.auth__or {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.auth__passkey-button {
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  background: var(--color-bg);
  border: var(--rule-thin);
}

.auth__passkey-button:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

/* Rendered open with the summary hidden (a plain form) until
   signup-passkey.js flips both. */
.auth__password > * + * {
  margin-block-start: var(--space-s);
}

.auth__password-summary {
  width: fit-content;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  cursor: pointer;
}

.auth__password-summary:hover {
  color: var(--color-ink);
}

.auth__alt {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.auth__note {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.landing {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 36rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.landing__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.landing__lede {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.landing__cta {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
}

.landing__cta-divider {
  padding-inline: var(--space-2xs);
  color: var(--color-ink-muted);
}

.about {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 36rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.invite {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 36rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}
.invite__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-3);
}
.invite__copy {
  margin: 0;
}
.invite__cancel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.about__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.about__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.about__aside {
  font-size: var(--step-0);
  color: var(--color-ink-muted);
}

.formatting {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-inline-size: 44rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.formatting__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.formatting__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.formatting__aside {
  font-size: var(--step-0);
  color: var(--color-ink-muted);
}

.formatting__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin: 0;
}

.formatting__example {
  padding-block-start: var(--space-m);
  border-block-start: var(--rule-thin);
}

.formatting__label {
  margin-block-end: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.formatting__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
  align-items: start;
  margin: 0;
}

.formatting__source {
  padding: var(--space-s);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.6;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.formatting__rendered {
  padding: var(--space-s);
  border: var(--rule-thin);
}

@media (max-width: 40rem) {
  .formatting__pair {
    grid-template-columns: 1fr;
  }
}

.about__toc {
  margin-block: var(--space-m) var(--space-l);
}

.about__toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-l);
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  list-style: none;
}

/* scroll-margin keeps the heading clear of the viewport top when reached
   from the contents links. */
.about__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  scroll-margin-block-start: var(--space-m);
  border-block-start: var(--rule-soft);
}

.about__subheading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
}

.about__upcoming-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-inline-start: var(--space-l);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.privacy {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 44rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.privacy__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.privacy__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.privacy__aside {
  font-size: var(--step-0);
  color: var(--color-ink-muted);
}

.privacy__toc {
  margin-block: var(--space-2xs) var(--space-s);
}

.privacy__toc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-inline-start: var(--space-l);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  list-style: decimal;
}

.privacy__toc-list li::marker {
  color: var(--color-ink-muted);
}

/* scroll-margin keeps the heading clear of the viewport top when reached
   from the contents links. */
.privacy__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  scroll-margin-block-start: var(--space-m);
  border-block-start: var(--rule-soft);
}

.privacy__subheading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 400;
}

.privacy__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline-start: var(--space-l);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

/* On the feed this pins to the bottom on mobile (thumb zone); on the chat
   page it stays at the top (the composer owns the bottom there). */
.group-nav-band {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--color-bg);
  border-block-end: var(--rule-thin);
}

.group-nav {
  display: flex;
  max-inline-size: 78rem;
  margin-inline: auto;
  font-family: var(--font-sans);
  font-size: var(--step--1);
}
.group-nav__seg {
  display: inline-flex;
  flex: 1 1 0;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-m);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-block-end: 2px solid transparent;
}
.group-nav__seg:hover {
  color: var(--color-accent);
}
.group-nav__seg--active {
  font-weight: 600;
  color: var(--color-ink);
  border-block-end-color: var(--color-accent);
}
.group-nav__count {
  display: inline-block;
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

@media (max-width: 40rem) {
  /* Fixed block-size (--group-nav-h, in default.css) so the chat composer
     and playlist strip can stack exactly above it. */
  .group-nav-band {
    position: fixed;
    inset-block-start: auto; /* unset the sticky-top anchor or fixed stretches full-height */
    inset-block-end: 0;
    inset-inline: 0;
    /* z-index 100 per the stacking scale at the top of this file: pinned
       outside the masthead, so it has to clear that layer too. */
    z-index: 100;
    padding-block-end: env(safe-area-inset-bottom);
    border-block-start: var(--rule-thin);
    border-block-end: 0;
    isolation: isolate;
    transform: translateZ(0);
  }
  .group-nav {
    max-inline-size: none;
    block-size: var(--group-nav-h);
  }
  /* Reserve room so the fixed switcher doesn't cover the end of the page. */
  body:has(.group-nav-band) .site-footer {
    padding-block-end: var(--space-2xl);
  }
}

.chat {
  display: flex;
  flex-direction: column;
  max-inline-size: 52rem;
  padding-block: var(--space-s) 0;
  padding-inline: var(--space-m);
  margin-inline: auto;
}

/* Last child of .chat, so sticky bottom keeps it in view through the whole
   history. */
.chat__foot {
  position: sticky;
  inset-block-end: 0;
  padding-block: var(--space-2xs) var(--space-s);
  padding-block-end: max(var(--space-s), env(safe-area-inset-bottom));
  background: var(--color-bg);
}

/* Stacks directly above the phone's bottom tab bar (.group-nav-band),
   which owns the safe-area inset below. */
@media (max-width: 40rem) {
  .chat__foot {
    inset-block-end: calc(3rem + env(safe-area-inset-bottom));
    padding-block-end: var(--space-2xs);
  }
}

.chat__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  align-items: baseline;
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thin);
}
.chat__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chat__context {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
}

.chat__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: 0;
  margin-block: var(--space-s);
  list-style: none;
}

.chat__empty {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  color: var(--color-ink-muted);
}

.chat__error {
  padding: var(--space-2xs) var(--space-s);
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.msg {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
}
.msg__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
  background: var(--color-bg);
  border: var(--rule-thin);
}
.msg__content {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.msg__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: baseline;
  margin-block: 0 var(--space-3xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}
.msg__author {
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.msg__author:hover {
  color: var(--color-accent);
}
.msg__you {
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-accent-ink);
  letter-spacing: 0.04em;
  background: var(--color-accent);
}
.msg__role-badge {
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink);
  letter-spacing: 0.04em;
  border: var(--rule-thin);
}
.msg__time {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}
.msg__body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.msg__tombstone {
  font-style: italic;
  color: var(--color-ink-muted);
}
.msg__edited {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.msg__actions {
  display: flex;
  gap: var(--space-s);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}
.msg__action summary {
  color: var(--color-ink-muted);
  cursor: pointer;
}
.msg__action summary:hover {
  color: var(--color-accent);
}
.msg__action-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-2xs);
}

.msg--me .msg__body {
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-highlight);
  border-inline-start: 2px solid var(--color-accent);
}
.msg--me .msg__avatar {
  color: var(--color-surface);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

/* A continuation of the same author's run drops the avatar and byline and
   tucks up closer to the message above it. */
.msg--cont {
  margin-block-start: calc(-1 * var(--space-2xs));
}
.msg--cont .msg__avatar {
  visibility: hidden;
}
.msg--cont .msg__byline {
  display: none;
}

/* No underline, so it reads as a person rather than a generic link. */
.mention {
  padding-inline: 2px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-highlight);
}
.mention:hover {
  color: var(--color-accent);
}

/* Autolinked by renderChatBody to that week's archive page. */
.prompt-ref {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
  white-space: nowrap;
  text-decoration: none;
  border-block-end: 1px solid var(--color-accent);
}
.prompt-ref::before {
  content: "▸ ";
}

.chat__typing {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
  min-block-size: 1.5rem;
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.chat__typing[hidden] {
  display: none;
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
}
.typing-dots span {
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  background: var(--color-ink-muted);
  animation: blink 1.2s infinite both;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

.composer {
  position: relative;
  display: flex;
  gap: var(--space-2xs);
  align-items: stretch;
  padding-block-start: var(--space-s);
  border-block-start: var(--rule-thin);
}
.composer__field {
  flex: 1 1 auto;
  min-block-size: 3rem;
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  resize: vertical;
  background: var(--color-surface);
  border: var(--rule-thin);
}
.composer__btn {
  flex: 0 0 auto;
  padding-inline: var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink);
  background: var(--color-bg);
  border: var(--rule-thin);
}
.composer__btn--send {
  font-weight: 600;
  color: var(--color-surface);
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.composer__btn--send:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* chat.js sets data-editing so the rendered body gives way to the edit
   field in place, and Edit/Delete step aside for Save/Cancel. With JS off,
   data-editing is never set. */
[data-editing] .msg__body,
[data-editing] .msg__actions summary {
  display: none;
}
[data-editing] .msg__actions {
  margin-block-start: 0;
}
[data-editing] .msg__action-form {
  flex-flow: row wrap;
  align-items: start;
  margin-block-start: 0;
}
[data-editing] .msg__action-form .composer__field {
  flex-basis: 100%;
}

/* Built by chat.js; hidden until "@" opens it. */
.mention-menu {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2xs));
  inset-inline: 0;
  z-index: 5;
  max-block-size: 14rem;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  list-style: none;
  background: var(--color-surface);
  border: var(--rule-thin);
}
.mention-menu__item {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  padding: var(--space-2xs) var(--space-s);
  cursor: pointer;
}
.mention-menu__item--active {
  color: var(--color-surface);
  background: var(--color-ink);
}
.mention-menu__handle {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
}
.mention-menu__name {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}
.mention-menu__item--active .mention-menu__name {
  color: var(--color-surface);
}

.card {
  position: relative;
  display: grid;
  grid-template-areas:
    "head    meta"
    "audio   audio"
    "about   about"
    "markers .";
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs) var(--space-l);
  align-items: start;
  padding-block: var(--space-m);
  border-block-end: var(--rule-soft);
}

.card:last-child {
  border-block-end: 0;
}

.card__head {
  display: flex;
  flex-direction: column;
  grid-area: head;
  gap: var(--space-3xs);
}

.card__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
}

.card__title-link {
  color: var(--color-ink);
  text-decoration: none;
}

.card__title-link:hover {
  color: var(--color-accent);
}

/* Stretch the title link over the whole card so clicking anywhere opens the
   song; the audio player is raised above this overlay (z-index below). */
.card__title-link::after {
  position: absolute;
  inset: 0;
  content: "";
}

.card__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.card__contributor {
  color: var(--color-ink-soft);
}

.card__role-badge {
  padding-block: 0;
  padding-inline: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  border: var(--rule-thin);
}

.card__posted {
  color: var(--color-ink-muted);
}

/* z-index lifts the player above the stretched title-link overlay so play,
   seek and native controls still take clicks. */
.card-player {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  grid-area: audio;
  gap: var(--space-xs);
  align-items: center;
}

/* The glyph is a clip-path polygon on one span, so play (triangle) and pause
   (two bars) swap with a single class and no icon markup. */
.card-player__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--space-l);
  min-block-size: var(--space-l);
  padding: 0;
  color: var(--color-bg);
  cursor: pointer;
  background: var(--color-ink);
  border: 0;
  border-radius: var(--radius);
}

.card-player__toggle[hidden] {
  display: none;
}

.card-player__toggle:hover {
  background: var(--color-accent);
}

.card-player__icon {
  inline-size: var(--space-2xs);
  block-size: var(--space-xs);
  background: currentcolor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.card-player__toggle--playing .card-player__icon {
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.card-player__wave {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
}

.card-player__wave[role="slider"] {
  cursor: pointer;
}

.card-player__waveform {
  display: block;
  inline-size: 100%;
  block-size: var(--space-l);
  fill: var(--color-ink-muted);
}

.card-player__waveform--played {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--played, 0)) * 100%) 0 0);
  fill: var(--color-accent);
}

/* The no-JS player, and the whole player for a track with no peaks. */
.card-player__audio {
  flex: 1 1 100%;
  inline-size: 100%;
}

.card[data-now-playing]::before {
  position: absolute;
  inset-block: var(--space-m);
  inset-inline-start: calc(var(--space-s) * -1);
  inline-size: var(--space-3xs);
  content: "";
  background: var(--color-accent);
}

.card__about {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  grid-area: about;
  max-inline-size: var(--measure);
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.card__markers {
  display: flex;
  flex-wrap: wrap;
  grid-area: markers;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

.card__marker {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.card__marker--needs-feedback,
.card__marker--needs-listening {
  color: var(--color-accent);
}

.card__meta {
  grid-area: meta;
  align-self: center;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.card__comments {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  .card {
    grid-template-areas:
      "head"
      "audio"
      "about"
      "markers"
      "meta";
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }
  .card__meta {
    align-self: start;
  }
}

/* Resend posts to /verify/resend; the page reloads with ?verification_sent=1
   which swaps the banner to the confirmation copy. */
.verify-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  background: var(--color-highlight);
  border-block-end: var(--rule-thin);
}

.verify-banner__copy,
.verify-banner__sent {
  max-inline-size: 60ch;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink);
}

.verify-banner__sent {
  font-weight: 500;
}

.verify-banner__form {
  margin: 0;
}

.verify-banner__resend {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-bg);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: var(--color-ink);
  border: 0;
}

.verify-banner__resend:hover {
  background: var(--color-accent);
}

/* Two columns: rail with week context + submit, main column with the
   editor. Collapses to single column under 64rem. */
.submit-page {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: 0;
  min-block-size: calc(100vh - 5rem);
}

.submit-done {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 36rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.submit-done__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 400;
}

.submit-done__copy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.submit-done__actions {
  display: flex;
  gap: var(--space-m);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
}

.submit-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  background: var(--color-bg);
  border-inline-end: var(--rule-thin);
}

.submit-page__week {
  padding-block-end: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  border-block-end: var(--rule-thin);
}

.submit-page__week strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-ink);
}

.submit-page__prompt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.3;
}

.submit-page__brief {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.submit-page__divider {
  margin: 0;
  border: 0;
  border-block-start: var(--rule-thin);
}

.draft-strip:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  align-items: center;
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--color-highlight);
  border-inline-start: var(--rule-thick);
}

.draft-strip__button {
  padding-block: var(--space-3xs);
  padding-inline: var(--space-xs);
  font: inherit;
  color: var(--color-bg);
  cursor: pointer;
  background: var(--color-ink);
  border: var(--rule-thin);
}

.draft-strip__button--quiet {
  color: var(--color-ink);
  background: transparent;
}

.submit-page__error {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.submit-page__late-notice {
  padding-block: var(--space-2xs);
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--color-ink-muted);
  border-block-start: var(--rule-soft);
}

.submit-page__field {
  display: block;
}

.submit-page__label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.submit-page__input {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.submit-page__input:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

/* A <label> wrapping the file input so clicking anywhere in the dashed box
   opens the system picker. */
.submit-page__dropzone {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-s);
  cursor: pointer;
  background: var(--color-surface);
  border: 2px dashed var(--color-ink);
  transition: background 0.15s;
}

.submit-page__dropzone:hover {
  background: var(--color-highlight);
}

.submit-page__file-input {
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.submit-page__dropzone-cue {
  font-family: var(--font-serif);
  font-size: var(--step-0);
}

.submit-page__dropzone-hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

/* Server-rendered hidden; recorder.js reveals it only where recording is
   possible, so unsupported browsers keep the picker alone. */
.recorder {
  margin-block-start: var(--space-2xs);
}

.recorder__toggle {
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.recorder__toggle:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.recorder__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-s);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.recorder__panel[hidden] {
  display: none;
}

.recorder__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* strokeStyle is read from this element's computed `color` (see
   recorder.js), so the live trace tracks the theme. */
.recorder__canvas {
  inline-size: 100%;
  block-size: var(--space-xl);
  color: var(--color-accent);
  background: var(--color-bg);
  border: var(--rule-soft);
}

.recorder__timer {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  letter-spacing: 0.04em;
}

.recorder__button {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.recorder__button:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.recorder__button--record,
.recorder__button--use {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.recorder__button--record:hover,
.recorder__button--use:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.recorder__preview {
  inline-size: 100%;
}

.recorder__preview[hidden] {
  display: none;
}

.recorder__attached {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-soft);
}

.recorder__message {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-accent);
}

.submit-page__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: auto;
}

.submit-page__actions--top {
  margin-block-start: 0;
}

.submit-page__actions--footer {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  margin-block-start: var(--space-m);
}

.submit-page__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  cursor: pointer;
  background: var(--color-accent);
  border: 0;
}

.submit-page__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.submit-page__cancel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.submit-page__cancel:hover {
  color: var(--color-accent);
}

.submit-page__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.submit-page__main {
  display: flex;
  flex-direction: column;
  padding: var(--space-l) var(--space-m);
}

/* No separate Title box: the title is an in-place editable serif input,
   underlined like a heading. */
.edit-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--rule-thin);
}

.edit-head:focus-within {
  border-block-end-color: var(--color-accent);
}

.edit-head__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.edit-head__title {
  inline-size: 100%;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-ink);
  background: transparent;
  border: 0;
}

.edit-head__title:focus {
  outline: 0;
}
/* :focus-visible keeps pointer clicks clean (the :focus-within underline
   above already cues those). */
.edit-head__title:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Posts to its own form (form="edit-audio-form") so it stays distinct from
   the Save-changes form it sits inside. */
.edit-audio {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.edit-audio__current {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.edit-audio__submit {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-content: center;
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  background: transparent;
  border: var(--rule-thin);
}

.edit-audio__submit:hover {
  color: var(--color-accent-ink);
  background: var(--color-ink);
}

.edit-extras {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.edit-extras__link {
  align-self: start;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-ink);
}

.edit-extras__hint {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.edit-danger {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-l);
}

.edit-danger__link {
  align-self: start;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent);
}

.edit-danger__hint {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.snapshot-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-inline-size: 44rem;
  padding-block: var(--space-2xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
}

.snapshot-page__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.snapshot-page__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.snapshot-page__privacy {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

.snapshot-page__back {
  align-self: start;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink);
}

.snapshot-drop__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-l) var(--space-s);
  cursor: pointer;
  background: var(--color-surface);
  border: 2px dashed var(--color-ink);
  transition: background 0.15s;
}

.snapshot-drop__label:hover,
.snapshot-drop--over .snapshot-drop__label {
  background: var(--color-highlight);
}

.snapshot-drop__input {
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.snapshot-drop__cue {
  font-family: var(--font-serif);
  font-size: var(--step-0);
}

.snapshot-drop__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.snapshot-page__error {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.snapshot-page__error[hidden],
.snapshot-report[hidden] {
  display: none;
}

.snapshot-page__error-text {
  margin: 0;
}

.snapshot-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.snapshot-report__copy,
.snapshot-report__done {
  margin: 0;
  font-size: var(--step--2);
}

.snapshot-report__send {
  align-self: start;
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent-ink);
  cursor: pointer;
  background: transparent;
  border: 1px solid currentcolor;
}

.snapshot-report__send[disabled] {
  cursor: default;
  opacity: 0.6;
}

.snapshot-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.snapshot-preview[hidden] {
  display: none;
}

.snapshot-preview__heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 700;
}

.snapshot-preview__subheading {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.snapshot-preview__source {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.snapshot-preview__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3xs) var(--space-s);
  margin: 0;
}

.snapshot-preview__fact-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.snapshot-preview__fact-value {
  margin: 0;
  font-size: var(--step--1);
}

.snapshot-preview__tracks,
.snapshot-preview__channels {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
}

.snapshot-preview__kind {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.snapshot-preview__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-start: var(--space-s);
  border-block-start: var(--rule-thin);
}

.snapshot-preview__approve {
  align-self: start;
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent-ink);
  cursor: pointer;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.snapshot-preview__approve[disabled] {
  cursor: default;
  opacity: 0.6;
}

.snapshot-preview__approve-note {
  margin: 0;
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.track-sheet__facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3xs) var(--space-s);
  margin-block: 0 var(--space-s);
}

.track-sheet__fact-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.track-sheet__fact-value {
  margin: 0;
  font-size: var(--step--1);
}

.track-sheet__subheading {
  margin-block: var(--space-s) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.track-sheet__tracks,
.track-sheet__channels {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.6;
}

.track-sheet__kind {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

/* Server-rendered SVG styled entirely with theme tokens (no inline colour
   in the markup). */
.flow-scroller {
  padding: var(--space-s);
  overflow-x: auto;
  background: var(--color-surface);
  border: var(--rule-soft);
}

.flow {
  display: block;
  min-inline-size: 48rem;
  font-family: var(--font-mono);
  /* Raw 12px, not a --step token, on purpose: the server lays out box
     widths against a hard-coded 12px monospace metric (internal/flow
     fontW), so the rendered text size must match that constant or labels
     stop fitting their boxes. */
  font-size: 12px;
}

.flow__edge {
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1;
}

.flow__edge--send {
  stroke: var(--color-accent);
}

.flow__node rect {
  fill: var(--color-bg);
  stroke: var(--color-rule);
}

.flow__node text {
  fill: var(--color-ink);
}

.flow__node--ret rect {
  stroke-dasharray: 3 2;
}

.flow__node--mix rect,
.flow__node--out rect {
  fill: var(--color-ink);
}

.flow__node--mix text,
.flow__node--out text {
  fill: var(--color-bg);
}

/* Click-to-isolate (flow.js): .is-lit overrides the dim below. */
.flow__node {
  cursor: pointer;
}

.flow__node,
.flow__edge {
  transition: opacity 0.15s ease;
}

.flow--focus .flow__node,
.flow--focus .flow__edge {
  opacity: 0.15;
}

.flow--focus .is-lit {
  opacity: 1;
}

.submit-page__lyrics-label {
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

/* Borderless; .lyric-editor__panel--write owns the visible border +
   background so the panel reads as a single field. */
.submit-page__lyrics {
  flex: 1;
  min-block-size: 22rem;
  padding: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  line-height: 1.6;
  resize: vertical;
  outline: 0;
  background: transparent;
  border: 0;
}

.submit-page__lyrics:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.submit-page__description {
  flex: 1;
  min-block-size: 22rem;
  padding: var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  resize: vertical;
  outline: 0;
  background: transparent;
  border: 0;
}
.submit-page__description:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.submit-page__lyrics-hint {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.submit-page__lyrics-hint code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* Match the textarea's inset; the panel itself has no padding. */
.lyric-editor__panel--write .submit-page__lyrics-hint,
.lyric-editor__panel--about .submit-page__lyrics-hint {
  padding-block-end: var(--space-xs);
  padding-inline: var(--space-s);
}

/* CSS-only tab switching driven by two hidden radios; :has() lets the
   parent react to the checked state without JS. */
.lyric-editor {
  /* Height of the tab row: one line of tab text plus its block padding. */
  --lyric-editor-tabs-size: calc(var(--step--1) * 1.5 + 2 * var(--space-2xs));

  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}

.lyric-editor__state {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
  opacity: 0;
}

.lyric-editor__tabs {
  display: flex;
  gap: 0;
  border-block-end: var(--rule-thin);
}

.lyric-editor__tab {
  padding: var(--space-2xs) var(--space-s);
  margin-block-end: -1px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  cursor: pointer;
  background: var(--color-bg);
  border-block-start: var(--rule-thin);
  border-inline-start: var(--rule-thin);
  border-inline-end: var(--rule-thin);
}

.lyric-editor__tab:hover {
  color: var(--color-accent);
}

.lyric-editor:has(#editor-write:checked) .lyric-editor__tab--write,
.lyric-editor:has(#editor-about:checked) .lyric-editor__tab--about {
  color: var(--color-ink);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-surface);
}

/* The focusable control is the visually-hidden radio, so the ring is drawn
   on its corresponding tab label. */
.lyric-editor:has(#editor-write:focus-visible) .lyric-editor__tab--write,
.lyric-editor:has(#editor-about:focus-visible) .lyric-editor__tab--about {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.lyric-editor__panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 24rem;
  background: var(--color-surface);
  border-block-end: var(--rule-thin);
  border-inline: var(--rule-thin);
}

.lyric-editor__panel--write,
.lyric-editor__panel--about {
  display: none;
}

.lyric-editor:has(#editor-write:checked) .lyric-editor__panel--write,
.lyric-editor:has(#editor-about:checked) .lyric-editor__panel--about {
  display: flex;
}
/* Mounted over the About and Lyrics textareas. The editing surface also
   carries .song__lyrics / .song__description, so text reads exactly as the
   song page will show it; these rules only add the field chrome. */
.rich-editor {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
}

.rich-editor__toolbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-surface);
  border-block-end: var(--rule-soft);
}

.rich-editor__button {
  min-inline-size: var(--space-l);
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  border: var(--rule-soft);
}
.rich-editor__button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.rich-editor__button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}
.rich-editor__button[aria-pressed="true"] {
  color: var(--color-surface);
  background: var(--color-ink);
  border-color: var(--color-ink);
}
.rich-editor__button:disabled {
  color: var(--color-rule-soft);
  cursor: default;
  border-color: var(--color-rule-soft);
}
.rich-editor__button:disabled:hover {
  color: var(--color-rule-soft);
}
.rich-editor__button--markdown {
  margin-inline-start: auto;
  font-family: var(--font-sans);
}
.rich-editor--source {
  flex: 0 0 auto;
}
.rich-editor__button--bold {
  font-weight: 700;
}
.rich-editor__button--italic {
  font-family: var(--font-serif);
  font-style: italic;
}

/* ProseMirror's required base rules (prosemirror-view/style/prosemirror.css)
   plus the textarea's field treatment. */
.rich-editor__surface {
  position: relative;
  flex: 1;
  min-block-size: 22rem;
  padding: var(--space-s);
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  outline: 0;
}
.rich-editor__surface:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}
.rich-editor__surface li {
  position: relative;
}
/* ProseMirror wraps each list item's text in a <p>; goldmark doesn't, so
   drop the gap to match. :where matches `.song__* p`'s specificity; source
   order after it is what makes this win. */
.rich-editor__surface :where(li) > p {
  margin-block: 0;
}
.rich-editor__link {
  text-decoration: underline;
}
.ProseMirror-hideselection *::selection {
  background: transparent;
}
.ProseMirror-hideselection {
  caret-color: transparent;
}
.ProseMirror-selectednode {
  outline: var(--focus-ring);
}
/* Beats the global img { display: block } reset without !important. */
.rich-editor__surface img.ProseMirror-separator {
  display: inline;
  margin: 0;
  border: 0;
}

/* editing.js decorates the lone empty paragraph with the hint; absolutely
   placed so the caret still sits at the start. */
.rich-editor__placeholder::before {
  position: absolute;
  inset-inline: var(--space-s);
  color: var(--color-ink-muted);
  pointer-events: none;
  content: attr(data-placeholder);
}

.rich-editor__fallback {
  padding: var(--space-2xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--color-ink-soft);
  background: var(--color-highlight);
  border-block-end: var(--rule-soft);
}

/* Visually hide an element but keep it accessible to screen readers. */
.u-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 64rem) {
  .submit-page {
    grid-template-columns: 1fr;
  }
  .submit-page__rail {
    border-block-end: var(--rule-thin);
    border-inline-end: 0;
  }
  /* Let the editor fill the viewport and pin the tabs; background + z-index
     stop the textarea bleeding through the gap beside the sticky tabs. */
  .submit-page__main {
    padding-block: 0;
  }
  .lyric-editor {
    min-block-size: 100dvh;
  }
  .lyric-editor__tabs {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--color-bg);
  }
  .rich-editor__toolbar {
    inset-block-start: var(--lyric-editor-tabs-size);
  }
}

.admin-prompt {
  max-inline-size: 48rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.admin-prompt__title {
  margin-block: 0 var(--space-2xs);
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.admin-prompt__intro {
  max-inline-size: var(--measure);
  padding-block-end: var(--space-m);
  margin-block: 0 var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  border-block-end: var(--rule-thin);
}

.admin-prompt__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.admin-prompt__error {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.admin-prompt__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.admin-prompt__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.admin-prompt__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.admin-prompt__input,
.admin-prompt__textarea {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  margin-block-start: var(--space-3xs);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-prompt__input {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
}

.admin-prompt__textarea {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  resize: vertical;
}

.admin-prompt__input:focus,
.admin-prompt__textarea:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.admin-prompt__submit {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 0;
}

.admin-prompt__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-schedule {
  max-inline-size: 56rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.admin-schedule__back {
  display: inline-block;
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.admin-schedule__back:hover {
  color: var(--color-accent);
}

.admin-schedule__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.admin-schedule__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.admin-schedule__new {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-schedule__new:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

/* Shared across create/edit flows (see _flash.html). */
.flash {
  padding: var(--space-xs) var(--space-s);
  margin-block: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--color-highlight);
  border-inline-start: var(--rule-thick);
}

.admin-schedule__list {
  padding: 0;
  margin-block: var(--space-m) 0;
  list-style: none;
}

.admin-schedule__row {
  display: grid;
  grid-template-columns: 1.25rem 5rem 13rem 1fr 7rem min-content;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-start: var(--rule-soft);
}

.admin-schedule__row:last-child {
  border-block-end: var(--rule-soft);
}

.admin-schedule__week {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

/* Pointer-only enhancement; the arrows stay for keyboard and no-JS. */
.admin-schedule__handle {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.admin-schedule__handle:active {
  cursor: grabbing;
}

.admin-schedule__row--dragging {
  opacity: 0.4;
}

.admin-schedule__drop-line {
  border-block-start: 2px solid var(--color-accent);
}

.admin-schedule__row[data-just-moved="yes"] {
  animation: admin-schedule-landed 1.2s ease-out 1;
}

@keyframes admin-schedule-landed {
  from {
    background: var(--color-highlight);
  }

  to {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-schedule__row[data-just-moved="yes"] {
    background: var(--color-highlight);
    animation: none;
  }
}

.admin-schedule__dates {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.admin-schedule__prompt {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.3;
}

.admin-schedule__status {
  justify-self: start;
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  white-space: nowrap;
  border: var(--rule-thin);
}

.admin-schedule__move {
  gap: var(--space-3xs);
}

.admin-schedule__move-button {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-schedule__move-button:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-schedule__row[data-status="current"] .admin-schedule__status {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.admin-schedule__row[data-status="past"] {
  color: var(--color-ink-muted);
}

.admin-schedule__row[data-status="past"] .admin-schedule__status {
  color: var(--color-ink-muted);
  border-color: var(--color-rule-soft);
}

.admin-schedule__empty {
  margin-block: var(--space-l) 0;
  color: var(--color-ink-muted);
}

.admin-schedule__term {
  margin-block-start: var(--space-l);
}

.admin-schedule__term-head {
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-2xs);
  border-block-end: var(--rule-thin);
}

.admin-schedule__term-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
}

.admin-schedule__term-form {
  align-items: baseline;
}

.admin-schedule__term-input {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-schedule__term-button {
  padding: var(--space-3xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-schedule__term-button:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-schedule__term-empty {
  margin-block: var(--space-s);
  color: var(--color-ink-muted);
}

.admin-schedule__term-error,
.admin-schedule__notice {
  padding: var(--space-xs) var(--space-s);
  margin-block: var(--space-m) 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.admin-prompt__nudge {
  max-inline-size: var(--measure);
  padding: var(--space-s) var(--space-m);
  background: var(--color-surface);
  border-inline-start: var(--rule-thick);
}

.admin-prompt__nudge p {
  margin: 0;
}

.admin-schedule__term-create {
  max-inline-size: var(--measure);
  padding-block-start: var(--space-m);
  margin-block-start: var(--space-xl);
  border-block-start: var(--rule-thick);
}

.admin-schedule__term-create-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 700;
}

.admin-schedule__term-create-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.admin-schedule__term-create-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.admin-schedule__term-create .admin-schedule__term-button {
  align-self: start;
}

@media (max-width: 48rem) {
  .admin-schedule__row {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }

  .admin-schedule__handle,
  .admin-schedule__week {
    grid-column: auto;
  }
}

a.admin-schedule__prompt {
  text-decoration: none;
}
a.admin-schedule__prompt:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.manage-members {
  max-inline-size: 56rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.manage-members__back {
  display: inline-block;
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.manage-members__back:hover {
  color: var(--color-accent);
}

.manage-members__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.manage-members__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.manage-members__section {
  margin-block-start: var(--space-l);
}

.manage-members__subtitle {
  margin: 0 0 var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-ink-muted);
}

.manage-members__list,
.manage-members__invites {
  padding: 0;
  margin: 0;
  list-style: none;
}

.manage-members__row,
.manage-members__invite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-start: var(--rule-soft);
}

.manage-members__row:last-child,
.manage-members__invite:last-child {
  border-block-end: var(--rule-soft);
}

.manage-members__name {
  font-family: var(--font-serif);
  font-size: var(--step-1);
}

.manage-members__handle {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.manage-members__role,
.manage-members__invite-role {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  border: var(--rule-thin);
}

.manage-members__row[data-role="manager"] .manage-members__role,
.manage-members__invite[data-role="manager"] .manage-members__invite-role {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.manage-members__invite-to {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.manage-members__invite-kind {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.manage-members__invite-url {
  flex: 1 1 18rem;
  min-inline-size: 0;
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  background: var(--color-surface);
  border: var(--rule-thin);
}

/* The action group (not each form) takes the auto margin, so its buttons
   stay adjacent and wrap to their own line as a unit on narrow screens. */
.manage-members__who {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
}

.manage-members__actions {
  display: flex;
  gap: var(--space-2xs);
  margin-inline-start: auto;
}

.manage-members__revoke {
  margin-inline-start: auto;
}

.manage-members__remove-btn,
.manage-members__revoke-btn {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-members__remove-btn:hover,
.manage-members__revoke-btn:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.manage-members__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.manage-members__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.manage-members__input,
.manage-members__select {
  padding: var(--space-2xs) var(--space-xs);
  font: inherit;
  font-size: var(--step--1);
  background: var(--color-bg);
  border: var(--rule-thin);
}

.manage-members__submit {
  align-self: end;
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-members__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.manage-members__empty {
  margin-block: var(--space-s) 0;
  color: var(--color-ink-muted);
}

.admin-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 48rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.admin-detail__back {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.admin-detail__back:hover {
  color: var(--color-accent);
}

.admin-detail__head {
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.admin-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  margin-block: 0 var(--space-xs);
}

.admin-detail__week {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.admin-detail__dates {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.admin-detail__status {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  border: var(--rule-thin);
}

.admin-detail__status[data-status="current"] {
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.admin-detail__status[data-status="past"] {
  color: var(--color-ink-muted);
  border-color: var(--color-rule-soft);
}

.admin-detail__prompt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.admin-detail__section {
  margin: 0;
}

.admin-detail__label {
  margin-block: 0 var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.admin-detail__text {
  max-inline-size: var(--measure);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  white-space: pre-wrap;
}

.admin-detail__edit {
  align-self: start;
  padding: var(--space-xs) var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  text-decoration: none;
  background: var(--color-accent);
}

.admin-detail__edit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: start;
}

/* Pure <details>, no JS, no one-click delete. */
.admin-detail__remove {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.admin-detail__remove-toggle {
  padding-block: var(--space-xs);
  color: var(--color-ink-muted);
  cursor: pointer;
  list-style: none;
}

.admin-detail__remove-toggle::-webkit-details-marker {
  display: none;
}

.admin-detail__remove-toggle:hover,
.admin-detail__remove[open] .admin-detail__remove-toggle {
  color: var(--color-accent);
}

.admin-detail__remove-confirm {
  max-inline-size: 28rem;
  padding: var(--space-s);
  margin-block-start: var(--space-2xs);
  border: 1px solid var(--color-accent);
}

.admin-detail__remove-warning {
  margin-block: 0 var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

.admin-detail__remove-button {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent-ink);
  cursor: pointer;
  background: var(--color-accent);
  border: 0;
}

.admin-detail__remove-button:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

/* chat.js / song-comments.js stamp data-live-new on an item that streamed
   in over SSE while you were watching. Inset box-shadow, not a border, so
   nothing reflows as it fades. */
[data-live-new] {
  animation: live-new 2.4s ease-out both;
}

@keyframes live-new {
  from {
    background-color: var(--color-highlight);
    box-shadow: inset 2px 0 0 0 var(--color-accent);
  }
  to {
    background-color: transparent;
    box-shadow: inset 2px 0 0 0 transparent;
  }
}

/* Hard-edged (radius 0) per the no-rounded-corners rule. */
.spinner {
  display: inline-block;
  inline-size: 0.7em;
  block-size: 0.7em;
  margin-inline-end: 0.45em;
  vertical-align: -0.06em;
  border: 2px solid currentColor;
  border-block-start-color: transparent; /* the gap makes the rotation legible */
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* The project's no-!important lint rules out the canonical universal reset,
   so this stills each motion source by name, after it in source order. Add
   new animated selectors here when they land. */
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
  [data-live-new] {
    background-color: var(--color-highlight);
    box-shadow: inset 2px 0 0 0 var(--color-accent);
    animation: none;
  }
  .account-menu__chevron::before,
  .notif__chevron::before,
  .manage-menu__chevron::before,
  .submit-page__dropzone,
  .snapshot-drop__label,
  .flow__node,
  .flow__edge {
    transition: none;
  }
}

/* forms.js sets aria-busy + disabled on a submit button mid-request. */
button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* display toggling (not just opacity) reserves no space when idle. */
.htmx-indicator {
  display: none;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}
.htmx-indicator.htmx-request {
  display: inline-flex;
}

.error-page {
  max-inline-size: 32rem;
  padding-block: var(--space-2xl) var(--space-xl);
  padding-inline: var(--space-l);
  margin-inline: auto;
  text-align: center;
}
.error-page__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-muted);
}
.error-page__heading {
  margin-block: var(--space-2xs) var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--color-ink);
}
.error-page__message {
  margin-block: 0 var(--space-l);
  font-family: var(--font-sans);
  color: var(--color-ink-soft);
}
.error-page__back {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-accent);
}

.profile {
  padding-block: var(--space-l) var(--space-2xl);
}
.profile__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
  padding-block-end: var(--space-l);
  border-block-end: var(--rule-thin);
}
.profile__identity {
  flex: 1 1 20rem;
}
.profile__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.profile__handle {
  margin-block: var(--space-3xs) 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.profile__bio {
  margin-block: var(--space-l) 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
}

.avatar {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  inline-size: 120px;
  block-size: 120px;
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  user-select: none;
  background: var(--avatar-bg, var(--color-ink-soft));
}
.avatar--photo {
  display: block;
  object-fit: cover;
}
.avatar--0 {
  --avatar-bg: #4a6c6f;
}
.avatar--1 {
  --avatar-bg: #8a4b2f;
}
.avatar--2 {
  --avatar-bg: #5b6b73;
}
.avatar--3 {
  --avatar-bg: #6b6234;
}
.avatar--4 {
  --avatar-bg: #7a4a5a;
}
.avatar--5 {
  --avatar-bg: #3f5a4a;
}
.avatar--6 {
  --avatar-bg: #b8330a;
}
.avatar--7 {
  --avatar-bg: #4f5a6e;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin-block-start: var(--space-m);
}
.link {
  display: inline-flex;
  gap: var(--space-3xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
}
.link:hover .link__platform {
  color: var(--color-accent);
}
.icon {
  display: inline-block;
  flex-shrink: 0;
  inline-size: 1.15em;
  block-size: 1.15em;
  vertical-align: -0.15em;
  fill: currentColor;
}
.svg-sprite {
  display: none;
}

.catalogue {
  margin-block-start: var(--space-xl);
}
.catalogue__heading {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
}
.catalogue__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.catalogue > .playlist {
  padding-block: 0 var(--space-s);
  padding-inline: 0;
}
.song-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: var(--space-m);
  align-items: baseline;
  padding-block: var(--space-s);
  text-decoration: none;
  border-block-start: var(--rule-soft);
}
.song-row__week {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.song-row__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
}
.song-row:hover .song-row__title {
  color: var(--color-accent);
}
.song-row[data-now-playing] {
  padding-inline-start: var(--space-xs);
  border-inline-start: var(--space-3xs) solid var(--color-accent);
}
.song-row[data-now-playing] .song-row__title {
  color: var(--color-accent);
}
.song-row__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.catalogue__empty {
  padding-block: var(--space-s);
  font-family: var(--font-serif);
  color: var(--color-ink-muted);
  border-block-start: var(--rule-soft);
}

@media (max-width: 40rem) {
  .song-row {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }
}

.profile__edit {
  align-self: start;
  padding: var(--space-3xs) var(--space-xs);
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: nowrap;
  text-decoration: none;
  border: var(--rule-thin);
}
.profile__edit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.settings {
  max-inline-size: 48rem;
  padding-block: var(--space-l) var(--space-2xl);
}
.settings__title {
  margin: 0 0 var(--space-m);
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 700;
}
.settings__error {
  padding: var(--space-2xs) var(--space-s);
  margin-block: 0 var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}
/* The fieldset owns its top rule on purpose: a rule from the wrapping
   form/section instead renders a new wrapper's legend below the line. */
.settings__section {
  padding-block: var(--space-m);
  margin: 0;
  border: 0;
  border-block-start: var(--rule-thin);
}
.settings__legend {
  padding: 0;
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  letter-spacing: 0.06em;
}
.settings__hint {
  max-inline-size: var(--measure);
  margin-block: 0 var(--space-s);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.settings__danger-link {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-accent);
}
.avatar-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
}
.avatar-editor .avatar {
  inline-size: 96px;
  block-size: 96px;
  font-size: var(--step-2);
}
.avatar-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}
/* A label for the visually-hidden file input, so the input's focus ring is
   drawn on it instead. */
.avatar-editor__choose {
  cursor: pointer;
}
.avatar-editor:has(#avatar-file:focus-visible) .avatar-editor__choose {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.settings__actions {
  display: flex;
  gap: var(--space-m);
  align-items: center;
  padding-block-start: var(--space-m);
  border-block-start: var(--rule-thin);
}
.settings__cancel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.settings__passkeys-intro,
.settings__passkeys-empty {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.settings__passkey-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.settings__passkey-row {
  display: flex;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-soft);
}
.settings__passkey-row:last-child {
  border-block-end: none;
}
.settings__passkey-label {
  font-family: var(--font-serif);
  font-size: var(--step-0);
}
.settings__passkey-meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.settings__passkey-rename {
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
}
.settings__passkey-name {
  inline-size: 12rem;
  max-inline-size: 100%;
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--color-surface);
  border: var(--rule-thin);
}
.settings__passkey-remove-btn,
.settings__passkey-save-btn {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}
.settings__passkey-remove-btn:hover,
.settings__passkey-save-btn:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}
.field {
  display: block;
}
.field + .field {
  margin-block-start: var(--space-m);
}
.field__label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}
.field__hint {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}
.input-text,
.textarea {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: 1.4;
  background: var(--color-surface);
  border: var(--rule-thin);
}
.textarea {
  min-block-size: 6rem;
  resize: vertical;
}
.input-text:focus,
.textarea:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}
.link-field {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-s);
  align-items: center;
}
.link-field + .link-field {
  margin-block-start: var(--space-2xs);
}
.link-field__label {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.button-primary {
  padding: var(--space-xs) var(--space-l);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--color-bg);
  background: var(--color-ink);
  border: var(--rule-thin);
}
.button-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

@media (max-width: 40rem) {
  .link-field {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }
}

/* No rule here: each .settings__section draws its own, so the legend
   notches into it. */
.settings + .settings {
  padding-block-start: 0;
}

.settings--lead {
  padding-block-end: 0;
}

.manage-library {
  max-inline-size: 56rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.manage-library__back {
  display: inline-block;
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.manage-library__back:hover {
  color: var(--color-accent);
}

.manage-library__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.manage-library__title {
  margin: 0;
  margin-inline-end: auto;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.manage-library__intro {
  max-inline-size: var(--measure);
  margin-block: var(--space-m) 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.manage-library__section {
  margin-block-start: var(--space-l);
}

.manage-library__subtitle {
  margin: 0 0 var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-ink-muted);
}

.manage-library__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.manage-library__entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block: var(--space-m);
  border-block-start: var(--rule-soft);
}

.manage-library__entry:last-child {
  border-block-end: var(--rule-soft);
}

.manage-library__entry-prompt {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.3;
}

.manage-library__entry-brief {
  max-inline-size: var(--measure);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
}

.manage-library__entry-reqs {
  max-inline-size: var(--measure);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

.manage-library__entry-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.manage-library__entry-author {
  color: var(--color-ink-muted);
  text-decoration: none;
}

.manage-library__entry-author:hover {
  color: var(--color-accent);
}

.manage-library__entry-controls {
  margin-block-start: var(--space-2xs);
}

.manage-library__use,
.manage-library__edit {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  text-decoration: none;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-library__use:hover,
.manage-library__edit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.manage-library__delete-btn {
  padding: var(--space-3xs) var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-library__delete-btn:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.manage-library__empty {
  margin-block: var(--space-l) 0;
  color: var(--color-ink-muted);
}

/* Mirrors the new-prompt form (.admin-prompt__*). */
.manage-library__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.manage-library__error {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.manage-library__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.manage-library__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.manage-library__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.manage-library__input,
.manage-library__textarea {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  margin-block-start: var(--space-3xs);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-library__input {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.4;
}

.manage-library__textarea {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  resize: vertical;
}

.manage-library__input:focus,
.manage-library__textarea:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.manage-library__submit {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 0;
}

.manage-library__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-groups {
  max-inline-size: 56rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.admin-groups__head {
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.admin-groups__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.admin-groups__section {
  margin-block-start: var(--space-l);
}

.admin-groups__subtitle {
  margin: 0 0 var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--color-ink-muted);
}

.admin-groups__intro {
  max-inline-size: var(--measure);
  margin-block: 0 var(--space-m);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
}

/* Mirrors the new-prompt form (.admin-prompt__*). */
.admin-groups__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.admin-groups__error {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.admin-groups__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.admin-groups__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.admin-groups__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.admin-groups__input,
.admin-groups__select {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  margin-block-start: var(--space-3xs);
  font: inherit;
  font-size: var(--step-0);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.admin-groups__input:focus,
.admin-groups__select:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.admin-groups__submit {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 0;
}

.admin-groups__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.admin-groups__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-groups__row {
  display: grid;
  grid-template-columns: 1fr 1fr 10rem 7rem;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-start: var(--rule-soft);
}

.admin-groups__row:last-child {
  border-block-end: var(--rule-soft);
}

.admin-groups__name {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  text-decoration: none;
}

.admin-groups__name:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.admin-groups__slug,
.admin-groups__tz {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.admin-groups__count {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  white-space: nowrap;
}

.admin-groups__empty {
  margin-block: var(--space-l) 0;
  color: var(--color-ink-muted);
}

@media (max-width: 48rem) {
  .admin-groups__row {
    grid-template-columns: 1fr;
    gap: var(--space-3xs);
  }
}

.manage-settings {
  max-inline-size: 56rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.manage-settings__back {
  display: inline-block;
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.manage-settings__back:hover {
  color: var(--color-accent);
}

.manage-settings__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: baseline;
  padding-block-end: var(--space-s);
  border-block-end: var(--rule-thick);
}

.manage-settings__title {
  margin: 0;
  margin-inline-end: auto;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1.1;
}

.manage-settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}

.manage-settings__error {
  padding: var(--space-xs) var(--space-s);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.manage-settings__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.manage-settings__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.manage-settings__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.manage-settings__input,
.manage-settings__textarea,
.manage-settings__select {
  inline-size: 100%;
  padding: var(--space-xs) var(--space-s);
  margin-block-start: var(--space-3xs);
  font: inherit;
  font-size: var(--step-0);
  background: var(--color-surface);
  border: var(--rule-thin);
}

.manage-settings__textarea {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  resize: vertical;
}

.manage-settings__input:focus,
.manage-settings__textarea:focus,
.manage-settings__select:focus {
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.manage-settings__submit {
  display: inline-flex;
  align-items: center;
  align-self: start;
  padding: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border: 0;
}

.manage-settings__submit:hover {
  color: var(--color-bg);
  background: var(--color-ink);
}

.tally {
  max-inline-size: 72rem;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  margin-inline: auto;
}

.tally__back {
  margin-block-end: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.tally__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--step-4);
  line-height: 1.05;
}

.tally__lede {
  max-inline-size: var(--measure);
  margin-block: var(--space-2xs) var(--space-l);
  color: var(--color-ink-muted);
}

.tally__terms {
  gap: var(--space-xs) var(--space-s);
  margin-block-end: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.tally__term {
  color: var(--color-ink-muted);
}

.tally__term--active {
  color: var(--color-ink);
  text-decoration: underline;
}

.tally__scroll {
  overflow-x: auto;
}

.tally__table {
  min-inline-size: 100%;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  border-collapse: collapse;
}

.tally__table th,
.tally__table td {
  padding: var(--space-xs) var(--space-s);
  text-align: start;
  border-block-end: 1px solid var(--color-rule-soft);
}

.tally__member-head,
.tally__week-head,
.tally__totals-head {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

.tally__week-head[data-status="current"] .tally__now {
  display: block;
  color: var(--color-accent);
}

.tally__member {
  font-weight: 400;
  white-space: nowrap;
}

.tally__name {
  font-family: var(--font-serif);
  font-size: var(--step-0);
}

.tally__handle {
  margin-inline-start: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
  text-decoration: none;
}

.tally__cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tally__mark {
  display: inline-block;
  min-inline-size: 1.2em;
  color: var(--color-ink-muted);
}

.tally__mark--yes {
  color: var(--color-accent);
}

.tally__notes {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-soft);
}

.tally__notes--done {
  color: var(--color-accent);
}

.tally__na {
  color: var(--color-ink-muted);
}

.tally__cell[data-status="current"] {
  opacity: 0.55;
}

.tally__totals {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  white-space: nowrap;
}

.tally__total {
  margin-inline-end: var(--space-2xs);
}

.tally__legend {
  margin-block-start: var(--space-s);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--color-ink-muted);
}

.tally__empty {
  color: var(--color-ink-muted);
}