/**
 * club-rooms.css
 * 28 Sep 2026 v5
 *
 * v5 - F2. The .sb-quick__* rules removed with the quick scaffold.
 *
 * v5 - Work list 8, OWN-LIST. .own-search: Find a session, above the
 *   saved list from six sessions. The field reuses .form-input (44px,
 *   the focus ring); these rules only place it and its count. The
 *   browser's own clear button (a blue x in Chrome and Safari) is drawn
 *   in the app's secondary text colour instead, 24px (WCAG 2.2 2.5.8).
 *
 * 08 Sep 2026 v4
 *
 * v4 - A11Y-HOME. .club-row__heading, the h2 wrapping each room's
 *   button. margin:0 and font:inherit so nothing moves.
 *
 * 08 Sep 2026 v3
 *
 * v3 - OWN-1. .club-room__note: what stands in place of a Start button
 *   on a saved session with nothing left to start.
 *
 * 08 Sep 2026 v2
 *
 * v2 - SAVED-2. .saved-row__actions, __confirm, __confirm-text and
 *   __danger: the edit and delete controls on a saved session, and the
 *   two-tap delete confirmation.
 *
 * 06 Sep 2026 v1
 *
 * CLUB-SHELL. The four rooms on the Plan home screen.
 *
 * ONE GRAMMAR. Every card has the same five slots in the same order and
 * the same positions -- name, what it is, today's option, the facts, the
 * action. CLUB spec v2 3.3 reversed v1 on this: v1 gave each room its
 * own internal grammar and differentiated by form, density and
 * typographic rhythm. That is four things to learn at once and relies on
 * implicit cues being picked up, which is exactly what fails the people
 * this product is for.
 *
 * NO ROOM HAS ITS OWN COLOUR, and that is the point rather than a
 * shortcut. Colour already carries meaning here -- --color-scale-1..10
 * is energy, --color-danger is a sore zone, --color-warning is caution,
 * the gold is the paid tier. Somebody learning that amber means "be
 * careful with this movement" must not also learn it means "you are in
 * the PT room". Rooms are told apart by their name and by slot 2.
 *
 * NO ENTRY ANIMATION. v1 specified one orchestrated moment. Withdrawn: a
 * screen that assembles itself is a screen you cannot read while it
 * moves.
 *
 * Every token below already exists. No new colours are introduced.
 */

.club-rooms {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.club-room {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* The suggestion survives; the gold banner does not. CLUB spec v2 5:
   the banner was the problem, recommending was not -- a clear
   recommendation reduces decision load, which this audience needs most.
   A 2px accent border and one quiet line, no caps, no gold band. */
.club-room--suggested {
  border: 2px solid var(--color-primary);
}

.club-room__suggested {
  color: var(--color-primary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

/* Slot 1. Sentence case. Never abbreviated -- "PT" became "Personal
   training" because an unexplained two-letter label is a demand this
   product should not make. */
.club-room__name {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

/* Slot 2. PERMANENT. Not a first-run tooltip, not dismissible. This is
   the slot that reversed v1's "no room is ever explained on screen". */
.club-room__what {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: var(--space-1) 0 var(--space-4);
}

/* Slot 3. The object of the decision. */
.club-room__option {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

/* Slot 4. STACKED, one fact per line. A middle-dot meta string
   ("28 MIN - 7 EXERCISES") scans as one blob and has to be unpacked
   before it can be read. Same facts, same order, on every card, so the
   thing you are looking for is always in the same place. */
.club-room__facts {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.club-room__facts li {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* Slot 5. WCAG 2.2 AA, 2.5.8 Target Size (Minimum). 44px is a floor
   here, not a target to design down to. */
.club-room__go,
.club-room__chip {
  min-height: 44px;
}

/* Two columns, not four. Four chips across a 380px screen puts every
   target under the minimum and wraps the labels. */
.club-room__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Keyboard focus must be visible on every one of these -- the whole
   screen is controls. */
.club-room__go:focus-visible,
.club-room__chip:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .club-room,
  .club-room__go,
  .club-room__chip {
    transition: none;
  }
}

/* ── YOUR-OWN, 06 Sep 2026. Saving a session from the builder preview ──
 *
 * Lives here rather than in a new file because it is the same room's
 * grammar: a quiet secondary action that opens a field, not a primary
 * one competing with "Let's go".
 */
.sb-save {
  margin-top: var(--space-5);
}

.sb-save__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.sb-save__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.sb-save__input {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-base);
  min-height: 44px;
  padding: var(--space-3);
  width: 100%;
}

.sb-save__input:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* role="status", so it is announced. Empty until there is something to
   say, and it says the specific thing rather than "something went
   wrong" -- a problem the person can fix and one they cannot must not
   share a message. */
.sb-save__note:empty {
  display: none;
}

.sb-save__note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

/* ── PROGRESS, 06 Sep 2026. The shapes of session, counted ────────────
 *
 * A list, not a chart. A bar chart invites comparison between the rows
 * and makes the shortest one look like a failing -- and a gap is often
 * the most sensible thing somebody did that month. Numbers sit right so
 * they line up and can be read down without being ranked.
 */
.progress-shapes {
  margin-top: var(--space-6);
}

.progress-shapes__title {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

.progress-shapes__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.progress-shapes__row {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.progress-shapes__name {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.progress-shapes__count {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}


/* ── ARC-LED, 06 Sep 2026. Rooms as collapsed rows ───────────────────
 *
 * Home led with the coach's pick and four full cards, so the screen
 * nominated a session before the person had said anything. The arc is
 * what you land on now; these are ways in.
 *
 * NOTHING HERE IS SUGGESTED. No accent border on a room, no badge, no
 * ordering by recommendation.
 */
.club-row {
  border-bottom: 1px solid var(--color-border);
}

.club-row:last-child {
  border-bottom: none;
}

/* The whole head is the target, not a chevron somebody has to hit. */
/* GUIDANCE-1, 08 Sep 2026. The general-guidance line on Home, shown
   every thirty days.

   ⚫ QUIET, NOT HIDDEN, AND NOT A WARNING. It is not styled as an alert:
   this is the product being plain about what it is, not the app telling
   somebody something is wrong. A red banner every thirty days would make
   an ordinary statement feel like a hazard, and would be ignored faster.

   It carries the weight the three-question red-flag screen was going to
   carry, on the physiotherapist's advice, so it has to be readable --
   secondary colour, not a whisper. Contrast is checked by
   verify-contrast-check like every other token use. */
.today-guidance {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* A11Y-HOME, 08 Sep 2026. The h2 that wraps each room's button.

   margin: 0 is load-bearing, exactly as it was for A11Y-HEADER: an h2
   carries a UA default of 0.83em top and bottom where a div carries
   none, so the element change alone would push all four rooms apart.
   font is inherited so the heading takes the button's type, not the
   browser's h2 size. Nothing moves. */
.club-row__heading {
  margin: 0;
  font: inherit;
}

.club-row__head {
  align-items: center;
  background: none;
  border: none;
  color: inherit;
  display: flex;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-4) 0;
  text-align: left;
  width: 100%;
}

.club-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
}

/* ARC-PLAIN. Teal, Graeme's call. It is the interactive colour and the
   whole row IS a control, so it is doing the job it already does
   everywhere else rather than being borrowed for decoration. */
.club-row__title {
  color: var(--color-primary);
  font-size: var(--text-base);
  font-weight: 600;
}

/* SLOT 2. Permanent, on the CLOSED row. Not a first-run tooltip and not
   something you open a room to discover. */
.club-row__what {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The deciding fact -- programme name, saved session, what it asks. */
.club-row__summary {
  color: var(--color-text);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.club-row__chev {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.club-row__head[aria-expanded="true"] .club-row__chev {
  transform: rotate(180deg);
}

.club-row__head:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.club-row__detail {
  padding: 0 0 var(--space-5);
}

.club-row__facts {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.club-row__facts li {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* ── The arc block ───────────────────────────────────────────────────
 *
 * NO BAR, NO PERCENTAGE, NO COUNT. P4: displays, never interprets, and
 * there are no streaks anywhere in this product. This shows COVERAGE,
 * not completion -- which strands have come up, which have not.
 *
 * State is carried THREE ways: a mark, the words, and the surface.
 * Colour alone cannot carry meaning (WCAG 1.4.1), and it is also the
 * first thing to fail on a phone in daylight.
 */
.today-arc__heading {
  color: var(--color-text);
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: var(--space-5) 0 var(--space-3);
  text-transform: uppercase;
}

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

/* ARC-PLAIN, 06 Sep 2026. No mark, no "not yet". Lit is full strength,
   unlit is muted. Quieter, and the state is still stated in words by the
   note directly below -- which is what keeps WCAG 1.4.1 satisfied.

   LIT IS NOT TEAL, deliberately. Teal is the interactive colour across
   this whole app -- buttons, links, the room titles below. Spending it
   on "this strand has come up" would make one colour mean two things,
   and the person learning that teal means "you can tap this" would also
   be learning it means "done". Full-strength text against muted is the
   contrast that does not collide with anything. */
.today-arc__strand {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  display: block;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
}

.today-arc__strand--lit {
  background: var(--color-bg-card);
  border-color: transparent;
  color: var(--color-text);
  font-weight: 600;
}

/* ── Headings that read as headings ──────────────────────────────────
 *
 * Graeme, on device: "Move your body and Settle your mind are titles.
 * They look like normal text." They did -- same size and colour as the
 * secondary body copy, so they read as sentences rather than structure.
 */
.today-group-label {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.today-chooser-sub {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: var(--space-1) 0 var(--space-4);
}

/* ── SAVED-2, 08 Sep 2026. Edit and delete on a saved session ─────────────
   Graeme's decision: saved sessions should be editable and deletable.

   Delete asks first, in two taps. The confirmation replaces the two
   actions rather than appearing beside them, so the destructive choice
   is never one tap away from the ordinary one in a list where every row
   looks alike and nothing is recoverable. */
.saved-row__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.saved-row__actions .btn {
  flex: 1;
}

.saved-row__confirm {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md, 8px);
  background: var(--color-danger-light);
}

.saved-row__confirm-text {
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}

/* The destructive one is the QUIETER of the two. "Keep it" is the
   ordinary choice and gets the solid button; deleting is available and
   not encouraged. Colour is not the only signal -- the button text and
   its accessible name both say delete, and both name the session. */
.saved-row__danger {
  color: var(--color-danger);
}

/* ── OWN-1, 08 Sep 2026 ──────────────────────────────────────────────────
   Replaces the action button on a saved session whose movements have all
   been retired from the library.

   The button that stood here did nothing when tapped: the handler ends
   `if (!exercises.length) return;`, a silent no-op. SAVED-1b fixed that
   on the saved-sessions list and left this copy behind.

   Styled as a fact, not a warning. Nothing has gone wrong that the person
   did, and nothing of theirs has been deleted -- the session is still
   listed and still theirs. Amber here would say otherwise, and the
   design system reserves it for caution about a movement. */
.club-room__note {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}

/* ── OWN-LIST, 28 Sep 2026. Find a session ──────────────────────────────
   A visible label, not a placeholder standing in for one (WCAG 2.2 AA
   3.3.2): the placeholder only suggests what to type. The count sits
   under the field it describes, quiet until there is a search. */
.own-search {
  margin: 0 0 var(--space-4);
}

.own-search__label {
  display: block;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.own-search__input {
  font-size: var(--text-base);
}

.own-search__count {
  min-height: 1.5em;
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.own-search__none {
  margin-bottom: var(--space-4);
}

.own-search__none p {
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}

.club-rooms > li[hidden] {
  display: none;
}

/* The field's clear button, in the app's colours rather than the
   browser's blue. The shape is a mask, so the colour is a token and
   follows the theme. */
.own-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-left: var(--space-2);
  cursor: pointer;
  background-color: var(--color-text-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.own-search__input::-webkit-search-cancel-button:hover {
  background-color: var(--color-text);
}