/*
  RoadmapSpark — the page shell's own arrangement.

  Loaded after the MemberSpark design system's tokens.css and
  components.css. Every colour, font and measure here comes from
  a --ms- token; this file restates no token and invents no
  colour. It arranges the shell's heroes, board cards, roadmap
  columns and empty state on top of the system's components.
*/

.rs-main {
  padding-bottom: var(--ms-space-8);
}

.rs-hero {
  padding: var(--ms-space-7) 0 var(--ms-space-6);
}

.rs-hero--board {
  padding-bottom: var(--ms-space-5);
}

.rs-hero__eyebrow {
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-base);
  font-weight: var(--ms-type-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rs-hero h1 {
  max-width: 13em;
  margin-bottom: var(--ms-space-4);
  font-size: var(--ms-type-size-display);
}

.rs-hero--board h1 {
  font-size: var(--ms-type-size-h1);
}

.rs-lede {
  max-width: var(--ms-size-reading);
  margin: 0;
  color: var(--ms-color-text-muted);
  font-size: var(--ms-type-size-lg);
}

.rs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-5);
}

.rs-board-identity {
  display: flex;
  align-items: center;
  gap: var(--ms-space-4);
  margin-bottom: var(--ms-space-4);
}

.rs-board-identity .ms-logo {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--ms-radius-md);
}

.rs-board-identity .ms-logo svg {
  width: 2rem;
  height: 2rem;
}

.rs-board-identity__name {
  margin: 0;
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  line-height: var(--ms-type-line-height-tight);
}

.rs-board-identity__kind {
  margin: 0;
  color: var(--ms-color-text-muted);
}

.rs-switcher {
  margin: 0 0 var(--ms-space-6);
  border-top: 1px solid var(--ms-color-line);
  border-bottom: 1px solid var(--ms-color-line);
}

.rs-switcher__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: var(--ms-space-2) 0;
  list-style: none;
}

.rs-switcher__list li {
  flex: none;
}

.rs-switcher a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-4);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.rs-switcher a:hover,
.rs-switcher a[aria-current="page"] {
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
}

.rs-section {
  margin-top: var(--ms-space-7);
}

.rs-section__head {
  max-width: var(--ms-size-reading);
}

.rs-section__head h2 {
  margin-top: 0;
}

.rs-section__head p {
  color: var(--ms-color-text-muted);
}

.rs-board-grid,
.rs-card-grid,
.rs-roadmap-grid {
  display: grid;
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-board-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rs-card-grid,
.rs-roadmap-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rs-board-grid > li,
.rs-card-grid > li,
.rs-roadmap-grid > li {
  min-width: 0;
}

/*
  The design system's components are written for the default
  content box. The shell's cards set height: 100% beside their
  padding and border, so they take the border box — without it
  each card stands taller than its grid row by its padding and
  border together, and covers the row below (found by looking
  at the issue #4 screenshots, not by a test score).
*/
.rs-board-card,
.rs-note-card,
.rs-roadmap-card {
  box-sizing: border-box;
}

.rs-board-card {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-3);
  min-width: 0;
  min-height: 15rem;
  height: 100%;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-line);
  border-top: 6px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  color: var(--ms-color-text);
  text-decoration: none;
}

.rs-board-card:hover {
  box-shadow: var(--ms-shadow-raised);
}

.rs-board-card h3 {
  margin: 0;
}

.rs-board-card p {
  margin: 0;
  color: var(--ms-color-text-muted);
}

.rs-board-card__meta {
  margin-top: auto;
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-medium);
}

.rs-board-card__go {
  color: var(--ms-color-link);
  font-weight: var(--ms-type-weight-bold);
}

.rs-note-card,
.rs-roadmap-card {
  min-width: 0;
  height: 100%;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.rs-note-card h3,
.rs-roadmap-card h3 {
  margin-top: 0;
}

.rs-note-card p,
.rs-roadmap-card p {
  color: var(--ms-color-text-muted);
}

.rs-roadmap-card {
  border-top: 6px solid var(--ms-color-accent);
}

.rs-roadmap-card__slot {
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  line-height: var(--ms-type-line-height-tight);
}

.rs-check-list {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.rs-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--ms-space-2);
}

.rs-check-list svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--ms-color-accent);
}

.rs-standing-line {
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-empty {
  padding: var(--ms-space-7) var(--ms-space-5);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  text-align: center;
}

.rs-empty__spark {
  width: 3rem;
  height: 3rem;
  color: var(--ms-color-accent);
}

.rs-empty h3 {
  margin: var(--ms-space-3) 0 var(--ms-space-2);
  font-size: var(--ms-type-size-h2);
}

/* A page whose empty state follows the h1 directly (the
   changelog) titles it with an h2 — same face, same size. */
.rs-empty h2 {
  margin: var(--ms-space-3) 0 var(--ms-space-2);
  font-size: var(--ms-type-size-h2);
}

.rs-empty p {
  max-width: var(--ms-size-reading);
  margin-right: auto;
  margin-left: auto;
  color: var(--ms-color-text-muted);
}


/* The roadmap columns (issue #13): one panel per slot,
   wearing the page's product accent on its top edge. They
   stack full-width on a phone and stand three abreast on a
   wide screen — never squeezed side by side. */
.rs-roadmap-columns {
  display: grid;
  gap: var(--ms-space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: var(--ms-space-4);
}

.rs-roadmap-column {
  min-width: 0;
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-line-strong);
  border-top: 6px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
}

.rs-roadmap-column > h2 {
  margin: 0 0 var(--ms-space-4);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  line-height: var(--ms-type-line-height-tight);
}

.rs-roadmap-column .rs-empty {
  padding: var(--ms-space-4) var(--ms-space-3);
  border: none;
  background: transparent;
}

@media (min-width: 60rem) {
  .rs-roadmap-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.rs-signed-out {
  max-width: var(--ms-size-reading);
  padding-top: var(--ms-space-7);
}

@media (max-width: 60rem) {
  .rs-board-grid,
  .rs-card-grid,
  .rs-roadmap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  /*
    On a phone the header tightens — row padding and gaps down,
    the brand word at the base size — so the whole word
    RoadmapSpark stands beside the four header buttons. At the
    desktop measures the word was cut short with an ellipsis,
    33px short at 390px wide (measured in Chromium after the
    issue #4 screenshots showed the cut).
  */
  .ms-header__row {
    gap: var(--ms-space-1);
    padding-inline: var(--ms-space-3);
  }

  .ms-header__group {
    gap: var(--ms-space-1);
  }

  .ms-header__brand {
    gap: var(--ms-space-1);
    font-size: var(--ms-type-size-base);
  }

  .rs-hero {
    padding-top: var(--ms-space-6);
  }

  .rs-hero h1,
  .rs-hero--board h1 {
    font-size: var(--ms-type-size-h1);
  }

  .rs-board-grid,
  .rs-card-grid,
  .rs-roadmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rs-actions .ms-btn {
    flex: 1 1 100%;
  }

  .rs-board-identity {
    align-items: flex-start;
  }
}

/*
  My Activity (issue #7): the profile form and its choices.
  A choice is a whole row a person can tap — the radio stands
  inside a label at least one tap tall, and the chosen row is
  marked by its border and ground, never by colour alone (the
  radio itself stays filled).
*/
.rs-me-form {
  display: grid;
  gap: var(--ms-space-5);
  max-width: var(--ms-size-reading);
}

.rs-me-email {
  margin: 0;
  font-weight: var(--ms-type-weight-medium);
}

.rs-saved {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0;
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-saved svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ms-color-accent);
}

.rs-choice-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.rs-choice-group legend {
  margin-bottom: var(--ms-space-2);
}

.rs-choices {
  display: grid;
  gap: var(--ms-space-2);
}

.rs-choice {
  display: flex;
  align-items: center;
  gap: var(--ms-space-3);
  min-height: var(--ms-size-tap);
  padding: var(--ms-space-2) var(--ms-space-4);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface);
  cursor: pointer;
}

.rs-choice input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin: 0;
  accent-color: var(--ms-color-accent);
}

.rs-choice:has(input:checked) {
  border-color: var(--ms-color-accent);
  background: var(--ms-color-surface-muted);
  font-weight: var(--ms-type-weight-medium);
}

/*
  Reading the boards (issue #9): item cards, the board's sort
  and filter controls, pagination, an item's own page and its
  comments. Tokens only, like the rest of this file; the cards
  take the border box for the same reason the shell's cards
  do (issue #4).
*/
.rs-board-card__shipped {
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-item-list,
.rs-comment-list {
  display: grid;
  gap: var(--ms-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-item-list > li,
.rs-comment-list > li {
  min-width: 0;
}

.rs-item-card {
  box-sizing: border-box;
  display: flex;
  gap: var(--ms-space-4);
  min-width: 0;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-line);
  border-top: 6px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.rs-item-card__main {
  min-width: 0;
}

.rs-item-card__votes {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: var(--ms-space-1);
  min-width: 4.25rem;
  padding: var(--ms-space-3) var(--ms-space-2);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
  text-align: center;
}

.rs-item-card__count {
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  line-height: var(--ms-type-line-height-tight);
}

.rs-item-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  margin: 0 0 var(--ms-space-2);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-item-card__product {
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
}

.rs-item-card h3 {
  margin: 0 0 var(--ms-space-2);
}

.rs-item-card h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  color: var(--ms-color-text);
  text-decoration: none;
}

.rs-item-card h3 a:hover {
  color: var(--ms-color-link);
  text-decoration: underline;
}

.rs-item-card__body {
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-color-text-muted);
}

.rs-item-card__by {
  margin: 0;
  color: var(--ms-color-text-muted);
}

/*
  A status is a word as well as a colour (spec, Phase 0 item
  5): the word always stands; the ground only tints it.
*/
.rs-status {
  padding: var(--ms-space-1) var(--ms-space-3);
  border: 1px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
  white-space: nowrap;
}

.rs-badge {
  padding: var(--ms-space-1) var(--ms-space-3);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-surface);
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
  white-space: nowrap;
}

.rs-controls {
  display: grid;
  gap: var(--ms-space-2);
  margin-bottom: var(--ms-space-5);
}

.rs-controls__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
}

.rs-controls__label {
  min-width: 3.5rem;
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-bold);
}

.rs-controls__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-controls__list li {
  flex: none;
}

.rs-controls__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-4);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.rs-controls__list a:hover,
.rs-controls__list a[aria-current="true"] {
  border-color: var(--ms-color-accent);
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
}

.rs-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-5);
  font-weight: var(--ms-type-weight-medium);
}

.rs-pagination a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-4);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-pill);
  color: var(--ms-color-text);
  text-decoration: none;
}

.rs-back {
  margin: var(--ms-space-5) 0 0;
  font-weight: var(--ms-type-weight-medium);
}

.rs-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}

.rs-item-head {
  display: flex;
  gap: var(--ms-space-4);
  align-items: flex-start;
  padding-top: var(--ms-space-4);
}

.rs-item-head__main {
  min-width: 0;
}

.rs-item-head h1 {
  margin: 0 0 var(--ms-space-3);
  font-size: var(--ms-type-size-h1);
}

.rs-item-votes {
  margin-top: var(--ms-space-2);
}

.rs-private-note {
  max-width: var(--ms-size-reading);
  margin: var(--ms-space-4) 0 0;
  padding: var(--ms-space-4) var(--ms-space-5);
  border: 1px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-item-body {
  max-width: var(--ms-size-reading);
  margin-top: var(--ms-space-5);
  font-size: var(--ms-type-size-lg);
}

.rs-status-note {
  max-width: var(--ms-size-reading);
  margin-top: var(--ms-space-6);
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-line);
  border-left: 6px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.rs-status-note h2 {
  margin-top: 0;
  font-size: var(--ms-type-size-h3);
}

.rs-status-note p {
  margin: 0;
  color: var(--ms-color-text-muted);
}

.rs-comment {
  box-sizing: border-box;
  min-width: 0;
  padding: var(--ms-space-5);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
}

.rs-comment p {
  margin: 0 0 var(--ms-space-3);
  color: var(--ms-color-text-muted);
}

.rs-comment p:last-child {
  margin-bottom: 0;
}

.rs-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-color-text);
}

/*
  A team reply is drawn in the product's accent, so the team's
  voice is recognisable at a glance (spec, Comments) — and it
  carries its label as a word too, never colour alone.
*/
.rs-comment--team {
  border-left: 6px solid var(--ms-color-accent);
  background: var(--ms-color-surface-muted);
}

.rs-comment--answer {
  border-color: var(--ms-color-accent);
}

.rs-badge--team {
  border-color: var(--ms-color-accent);
}

.rs-comments-empty {
  max-width: var(--ms-size-reading);
  color: var(--ms-color-text-muted);
}

@media (max-width: 40rem) {
  .rs-item-card {
    padding: var(--ms-space-4);
  }

  .rs-item-card__votes {
    min-width: 3.5rem;
  }

  .rs-item-head {
    flex-direction: column;
  }

  .rs-item-votes {
    margin-top: 0;
  }
}

/*
  The acts (issue #11): vote, follow and comment on an item's
  page. A pressed act is never colour alone — it carries a
  check drawing, a heavier border and its state as a word on
  the button itself; aria-pressed carries the same fact.
  Tokens only, like the rest of this file.
*/
.rs-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ms-space-3);
  margin-top: var(--ms-space-6);
}

.rs-acts__form {
  display: flex;
  align-items: center;
}

.rs-acts__note {
  max-width: var(--ms-size-reading);
  margin: 0;
  color: var(--ms-color-text-muted);
}

.rs-act {
  display: inline-flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: var(--ms-size-tap);
}

.rs-act svg {
  width: 1.1em;
  height: 1.1em;
}

.rs-act--on {
  border: 2px solid var(--ms-color-accent);
  background: var(--ms-color-surface-muted);
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-bold);
}

.rs-comment-form {
  box-sizing: border-box;
  display: grid;
  gap: var(--ms-space-4);
  max-width: var(--ms-size-reading);
  margin-top: var(--ms-space-5);
}

.rs-comment-form textarea {
  min-height: 6rem;
}

.rs-comment__held {
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-medium);
}

.rs-comment-signin {
  max-width: var(--ms-size-reading);
  margin-top: var(--ms-space-5);
}

.rs-choice--tick {
  justify-self: start;
}

/*
  Posting (issue #10): the post form, the search-as-you-type
  results under the title field, and the held note's company.
  Tokens only, like the rest of this file.
*/
.rs-post-form {
  box-sizing: border-box;
  display: grid;
  gap: var(--ms-space-5);
  max-width: var(--ms-size-reading);
}

.rs-post-form textarea.ms-input {
  min-height: 9rem;
  resize: vertical;
}

.rs-post-form select.ms-input {
  width: 100%;
}

.rs-similar {
  display: none;
  margin-top: var(--ms-space-3);
  padding: var(--ms-space-3) var(--ms-space-4);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-md);
  background: var(--ms-color-surface-muted);
}

/* The panel stands only while the search has something to
   say: a status word or a result under it. An untouched
   form shows no empty band under the title. */
.rs-similar:has(> .rs-similar__status:not(:empty)),
.rs-similar:has(> .rs-similar__list > li) {
  display: block;
}

.rs-similar__status {
  margin: 0;
  color: var(--ms-color-text-muted);
  font-weight: var(--ms-type-weight-medium);
}

.rs-similar__status:empty {
  display: none;
}

.rs-similar__list {
  display: grid;
  gap: var(--ms-space-2);
  margin: var(--ms-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.rs-similar__list li {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  min-height: 2.75rem;
}

.rs-similar__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: var(--ms-type-weight-medium);
}

.rs-similar__meta {
  color: var(--ms-color-text-muted);
}

/* The staff triage queue (issue #12): the promise number on
   its face, the age standing on every card, and the staff
   acts as quiet forms under the item they belong to. */
.rs-queue-alarm {
  align-items: center;
  background: var(--ms-color-surface);
  border: 1px solid var(--ms-color-line);
  border-inline-start: 6px solid var(--ms-color-line-strong);
  border-radius: var(--ms-radius-lg);
  display: flex;
  gap: var(--ms-space-5);
  margin-block-start: var(--ms-space-6);
  padding: var(--ms-space-5) var(--ms-space-6);
}

.rs-queue-alarm--past {
  border-color: var(--ms-color-danger);
  border-inline-start-color: var(--ms-color-danger);
}

.rs-queue-alarm__count {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-display);
  font-weight: var(--ms-type-weight-heavy);
  line-height: 1;
  margin: 0;
}

.rs-queue-alarm--past .rs-queue-alarm__count {
  color: var(--ms-color-danger);
}

.rs-queue-alarm h2 {
  font-size: var(--ms-type-size-h2);
  margin: 0 0 var(--ms-space-1);
}

.rs-queue-alarm p {
  color: var(--ms-color-text-muted);
  margin: 0;
}

.rs-queue-tabs {
  margin-block-start: var(--ms-space-6);
}

.rs-queue-tabcount {
  color: var(--ms-color-text-muted);
  margin-inline-start: var(--ms-space-2);
}

.rs-queue-card {
  align-items: start;
}

.rs-queue-age {
  font-weight: var(--ms-type-weight-medium);
  margin: 0;
}

.rs-queue-age__mark {
  color: var(--ms-color-text-muted);
  display: block;
  font-weight: var(--ms-type-weight-regular);
}

.rs-queue-age__mark--past {
  color: var(--ms-color-danger);
  font-weight: var(--ms-type-weight-bold);
}

.rs-queue-acts {
  border-block-start: 1px solid var(--ms-color-line);
  display: grid;
  gap: var(--ms-space-5);
  margin-block-start: var(--ms-space-4);
  padding-block-start: var(--ms-space-4);
}

.rs-queue-form .ms-field {
  margin-block-end: var(--ms-space-3);
}

.rs-queue-inline-form {
  margin: 0;
}

.rs-queue-comments {
  border-block-start: 1px solid var(--ms-color-line);
  margin-block-start: var(--ms-space-5);
  padding-block-start: var(--ms-space-4);
}

.rs-queue-comments h4 {
  font-size: var(--ms-type-size-lg);
  margin: 0 0 var(--ms-space-3);
}

/*
  The Account control (site standards Part 2, issue #23).

  Signed out, the control is the person glyph inside a dashed
  ring — dashed against the solid circled icons around it —
  inside the same 44px target every header control stands on.
  Its "Sign in" label pops beside it on hover, on keyboard
  focus, on press and on a tap's mark; at rest the label is
  tucked away and the header set stays wordless. A few seconds
  after the page loads the ring nudges (the ACCOUNT_NUDGE
  script in pages.js carries the guardrails): the nudge is
  movement alone — rotation and scale — never a colour
  change, and under reduced motion it does not run at all.

  Signed in, the control is the person's initials circle at
  its full 44px size (the Initials Standard, Part 1: the
  circle is the control, not a smaller circle inside a larger
  button), and it carries no ring or accent around it.
*/
.rs-account {
  position: relative;
}

.rs-account__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
  border: 2px dashed currentColor;
  border-radius: var(--ms-radius-pill);
}

.rs-account__pop {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--ms-space-2));
  z-index: 40;
  padding: var(--ms-space-1) var(--ms-space-3);
  border-radius: var(--ms-radius-pill);
  background: var(--ms-color-text);
  color: var(--ms-color-surface);
  font-size: var(--ms-type-size-base);
  font-weight: var(--ms-type-weight-bold);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--ms-space-1), -50%);
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms;
}

.rs-account:hover .rs-account__pop,
.rs-account:focus-visible .rs-account__pop,
.rs-account:active .rs-account__pop,
.rs-account--tapped .rs-account__pop {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.rs-account--nudge .rs-account__ring {
  animation: rs-account-nudge 900ms ease-in-out;
  transform-origin: center;
}

@keyframes rs-account-nudge {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-8deg) scale(1.07); }
  50% { transform: rotate(7deg) scale(1.1); }
  75% { transform: rotate(-4deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1); }
}

.rs-account__avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: var(--ms-radius-pill);
  overflow: hidden;
}

.rs-account__avatar svg {
  display: block;
  width: 44px;
  height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .rs-account--nudge .rs-account__ring {
    animation: none;
  }

  .rs-account__pop {
    transition: none;
  }
}

/* The changelog (issue #15): entries are cards in the item
   list's shape. The meta line's link is a tap target like
   every other control — inline-flex at the tap height, the
   switcher's shape — never a bare line of text to hit. The
   staff edit form stands inside the entry it edits, ruled
   off from the words readers see. */
.rs-changelog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-muted);
}

.rs-changelog-meta time {
  white-space: nowrap;
}

.rs-changelog-meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}

.rs-changelog-edit {
  margin-top: var(--ms-space-4);
  padding-top: var(--ms-space-4);
  border-top: 1px solid var(--ms-color-line);
}

/* Entry titles stand at h2 under the page's h1 (the heading
   order a screen reader walks) wearing the h3 face they have
   always worn; the edit form's title is a bold line, not a
   heading — the entry's own title names that ground. */
.rs-changelog-entry__title {
  font-size: var(--ms-type-size-h3);
  margin: 0.7rem 0 0.2rem;
}

.rs-changelog-edit__title {
  margin: 0 0 var(--ms-space-3);
}

/* The Report forms (issue #17): a quiet row under the item
   and inside each comment — a reason field and one button,
   standing back from the acts above them. */
.rs-report {
  margin-top: var(--ms-space-4);
}

.rs-report-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ms-space-2);
  align-items: center;
  margin-top: var(--ms-space-3);
}

.rs-report-form__reason {
  flex: 1 1 220px;
  min-width: 0;
}

.rs-comment .rs-report-form {
  margin-top: var(--ms-space-2);
}

/* The standing pages (issue #20): Help, Learn, Terms of Use,
   Privacy and About. One reading column, the family's doc
   shape: breadcrumbs at the top of the pages under Help,
   headings in the display face, every link a full tap
   target, and the Help page's boxes and questions in the
   shapes Part 7 names. */

.rs-doc {
  max-width: var(--ms-size-reading);
  padding-top: var(--ms-space-5);
}

.rs-doc h1 {
  margin-bottom: var(--ms-space-4);
}

.rs-doc section {
  margin-top: var(--ms-space-6);
}

.rs-doc section h2 {
  margin-top: 0;
}

.rs-doc-list {
  display: grid;
  gap: var(--ms-space-2);
  margin: var(--ms-space-3) 0 0;
  padding-left: var(--ms-space-5);
}

.rs-crumbs {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  color: var(--ms-color-text-muted);
}

.rs-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
}

.rs-crumbs [aria-current="page"] {
  color: var(--ms-color-text);
  font-weight: var(--ms-type-weight-medium);
}

.rs-draft {
  font-weight: var(--ms-type-weight-medium);
}

.rs-updated {
  color: var(--ms-color-text-muted);
}

.rs-policies a,
.rs-doc-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ms-size-tap);
  padding: 0 var(--ms-space-3);
}

.rs-help-search {
  margin-top: var(--ms-space-5);
}

.rs-help-search .ms-input {
  width: 100%;
  box-sizing: border-box;
}

.rs-help-boxes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ms-space-4);
  margin-top: var(--ms-space-5);
}

.rs-help-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-line);
  border-top: 6px solid var(--ms-color-accent);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  color: var(--ms-color-text);
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  text-align: center;
  text-decoration: none;
}

.rs-faq__item {
  border-top: 1px solid var(--ms-color-line);
}

.rs-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-space-3);
  min-height: var(--ms-size-tap);
  padding: var(--ms-space-2) 0;
  font-weight: var(--ms-type-weight-medium);
  cursor: pointer;
  list-style: none;
}

.rs-faq__item summary::-webkit-details-marker {
  display: none;
}

.rs-faq__item summary svg {
  width: 20px;
  height: 20px;
  flex: none;
  transition: transform 150ms ease;
}

.rs-faq__item[open ] summary svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .rs-faq__item summary svg {
    transition: none;
  }
}

.rs-faq__answer {
  padding-bottom: var(--ms-space-4);
}

.rs-about-boards {
  display: grid;
  gap: var(--ms-space-3);
  margin: var(--ms-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.rs-about-boards > li {
  min-width: 0;
}

.rs-about-boards a {
  display: grid;
  gap: var(--ms-space-1);
  padding: var(--ms-space-4);
  border: 1px solid var(--ms-color-line);
  border-radius: var(--ms-radius-lg);
  background: var(--ms-color-surface);
  box-shadow: var(--ms-shadow-card);
  color: var(--ms-color-text);
  text-decoration: none;
}

.rs-about-board__name {
  font-family: var(--ms-type-font-display);
  font-size: var(--ms-type-size-h3);
  font-weight: var(--ms-type-weight-heavy);
  line-height: var(--ms-type-line-height-tight);
}

.rs-about-board__line {
  color: var(--ms-color-text-muted);
}

/* --- Feedback page (issue #30) ------------------------------------------- */

.rs-feedback-form {
  margin-top: var(--ms-space-5);
}

/* The honeypot stands off-screen: a person never sees it, a
   script that fills every field trips it. */
.rs-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rs-feedback-status {
  min-height: 1.5em;
  font-weight: var(--ms-type-weight-medium);
}