/* ============================================================
   Team CLASSES — Class Schedule and the class pages.
   Tokens come from phase1.css; nothing here defines a color.
   ============================================================ */

/* ---------- shared shell ---------- */

.rhc-classes,
.rhc-classpage {
  background: var(--ground);
}

.rhc-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.rhc-classes p,
.rhc-classpage p {
  max-width: 64ch;
}

.rhc-tlink {
  color: var(--rust);
  font-weight: 600;
  white-space: nowrap;
}

.rhc-tlink:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rhc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rust);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid var(--rust);
  min-height: 46px;
  padding: 11px 26px;
  cursor: pointer;
  text-align: center;
}

.rhc-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* ---------- the ink opening ---------- */

.rhc-classes-hero {
  background: var(--ink);
  color: var(--on-ink);
  padding: 54px 0 46px;
}

.rhc-crumb {
  font-size: var(--fs-fine);
  color: var(--on-ink-2);
  margin: 0 0 16px;
}

.rhc-crumb a {
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-crumb a:hover,
.rhc-crumb a:focus-visible {
  text-decoration-color: currentColor;
}

.rhc-classes-hero h1 {
  color: var(--on-ink);
  font-size: clamp(34px, 4.2vw, 50px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.rhc-classes-hero .rhc-lede {
  font-size: var(--fs-lede);
  color: var(--on-ink-2);
  max-width: 52ch;
  margin: 0;
}

/* ---------- the credit bar ---------- */

.rhc-creditbar {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.rhc-creditbar .rhc-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.rhc-cb-lead {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tx);
  max-width: 66ch;
}

.rhc-cb-lead b {
  font-weight: 600;
}

.rhc-cb-act {
  margin: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.rhc-cb-act a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--river);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.rhc-cb-act a:hover,
.rhc-cb-act a:focus-visible {
  text-decoration-color: currentColor;
}

/* ---------- filters ---------- */

.rhc-schedule {
  padding: 8px 0 64px;
}

.rhc-filters {
  display: flex;
  align-items: baseline;
  gap: 14px 34px;
  flex-wrap: wrap;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.rhc-fgroup {
  display: flex;
  align-items: baseline;
  gap: 8px 18px;
  flex-wrap: wrap;
}

.rhc-flabel {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  font-weight: 600;
}

.rhc-fopt {
  font-size: var(--fs-sm);
  color: var(--tx-2);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.rhc-fopt:hover {
  color: var(--tx);
  border-bottom-color: var(--rule);
}

.rhc-fopt.is-on {
  color: var(--tx);
  font-weight: 600;
  border-bottom-color: var(--rust);
}

.rhc-fcount {
  margin: 0 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--tx-3);
}

/* ---------- the list ---------- */

.rhc-week {
  font-family: var(--d);
  font-weight: 700;
  font-size: 21px;
  color: var(--tx-3);
  letter-spacing: -0.01em;
  margin: 34px 0 0;
  padding-bottom: 4px;
}

.rhc-sessions--standing {
  margin-top: 4px;
}

.rhc-sess {
  display: grid;
  gap: 6px 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: center;
}

@media (min-width: 900px) {
  .rhc-sess {
    grid-template-columns: 62px 128px minmax(0, 1fr) auto;
  }
}

.rhc-when {
  font-family: var(--d);
  line-height: 1.05;
  margin: 0;
}

.rhc-when-day {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--tx);
}

.rhc-when-time {
  display: block;
  font-family: var(--b);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-tx);
  margin-top: 2px;
}

/* "By appointment" is two words where a date is two characters, so the standing
   row gets a wider first column and a smaller face rather than overflowing. */
@media (min-width: 900px) {
  .rhc-sess--standing {
    grid-template-columns: 118px 128px minmax(0, 1fr) auto;
  }
}

.rhc-when-standing {
  display: block;
  font-family: var(--b);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay-tx);
  line-height: 1.5;
}

.rhc-thumb {
  display: block;
}

.rhc-thumb-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.rhc-body {
  min-width: 0;
}

.rhc-disc {
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin: 0 0 4px;
}

.rhc-sess h3 {
  font-family: var(--d);
  font-size: 21px;
  font-weight: 400;
  color: var(--tx);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.2;
}

.rhc-sess h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--clay);
}

.rhc-meta {
  font-size: var(--fs-meta);
  color: var(--tx-3);
  margin: 0;
}

.rhc-meta a {
  color: var(--river);
  font-weight: 600;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-meta a:hover,
.rhc-meta a:focus-visible {
  text-decoration-color: currentColor;
}

.rhc-seats {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin: 6px 0 0;
}

.rhc-seats--few {
  color: var(--rust);
}

.rhc-seats--none {
  color: var(--tx-3);
}

.rhc-act {
  margin: 0;
  justify-self: start;
}

@media (min-width: 900px) {
  .rhc-act {
    justify-self: end;
  }
}

.rhc-go {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rust);
  white-space: nowrap;
}

.rhc-go:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rhc-off {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  white-space: nowrap;
}

/* A list is not one decision, it is thirty, so the row's Book is outlined.
   The filled rust action belongs to the class page's own panel, where there
   really is only one thing to press. */
.rhc-book .rhc-btn {
  min-height: 42px;
  padding: 9px 24px;
  font-size: 0.96rem;
  background: transparent;
  color: var(--rust);
  border-color: var(--rust);
}

.rhc-book .rhc-btn:hover {
  background: var(--rust);
  color: #fff;
}

.rhc-empty {
  padding: 34px 0 8px;
  border-top: 1px solid var(--rule);
}

.rhc-empty p {
  color: var(--tx-2);
  margin: 0 0 10px;
}

/* ---------- booking outcome + my bookings ---------- */

.rhc-classes .rh-booking-notice {
  margin: 24px 0 0;
  padding: 20px 22px;
  background: var(--paper);
  border-left: 3px solid var(--rust);
}

.rhc-classes .rh-booking-notice h3 {
  font-size: var(--fs-h3);
  margin: 0 0 6px;
}

.rhc-mine {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.rhc-mine h2 {
  font-size: var(--fs-h2);
  margin: 0 0 14px;
}

/* ---------- the river band under the results ---------- */

.rhc-after {
  background: var(--river);
  color: var(--on-ink);
  padding: 52px 0 56px;
}

.rhc-after-grid {
  display: grid;
  gap: 30px;
}

@media (min-width: 820px) {
  .rhc-after-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 54px;
  }
}

.rhc-after h2 {
  font-size: var(--fs-h3);
  color: var(--on-ink);
  margin: 0 0 10px;
}

.rhc-after p {
  color: var(--on-ink-2);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.rhc-after p b {
  color: var(--on-ink);
  font-weight: 600;
}

.rhc-after a {
  color: var(--on-ink);
  font-weight: 600;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-after a:hover,
.rhc-after a:focus-visible {
  text-decoration-color: currentColor;
}

.rhc-after .rhc-tlink {
  color: var(--on-ink);
}

.rhc-dlinks {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: var(--fs-body);
}

.rhc-dlinks a {
  color: var(--on-ink);
  font-weight: 600;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-dlinks a:hover,
.rhc-dlinks a:focus-visible {
  text-decoration-color: currentColor;
}

.rhc-after-fine {
  font-size: var(--fs-fine);
  color: var(--on-ink-2);
}

/* ============================================================
   A class page
   ============================================================ */

.rhc-classpage-hero {
  background: var(--ink);
  color: var(--on-ink);
  display: grid;
}

@media (min-width: 960px) {
  .rhc-classpage-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: stretch;
  }
}

.rhc-hero-t {
  padding: 48px 0 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 960px) {
  .rhc-hero-t .rhc-wrap {
    max-width: 620px;
    margin: 0 0 0 auto;
    padding-right: 44px;
  }
}

.rhc-classpage-hero h1 {
  color: var(--on-ink);
  font-size: clamp(32px, 3.8vw, 46px);
  letter-spacing: -0.022em;
  margin: 0 0 14px;
}

.rhc-classpage-hero .rhc-disc {
  margin-bottom: 10px;
}

.rhc-classpage-hero .rhc-lede {
  font-size: 18px;
  color: var(--on-ink-2);
  max-width: 44ch;
  margin: 0 0 24px;
}

.rhc-facts {
  display: flex;
  gap: 14px 28px;
  flex-wrap: wrap;
  font-size: var(--fs-meta);
  color: var(--on-ink-2);
  border-top: 1px solid rgba(199, 164, 124, 0.26);
  padding-top: 20px;
}

.rhc-facts b {
  display: block;
  font-family: var(--d);
  font-size: 18px;
  color: var(--on-ink);
  font-weight: 700;
  line-height: 1.2;
}

/* The class-card photographs are portrait, so the hero column is capped:
   without it a 4:5 picture stretches the whole ink band to its own height and
   leaves the headline floating in a field of green. */
.rhc-hero-img {
  display: block;
  max-height: 540px;
  overflow: hidden;
}

.rhc-hero-photo {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  max-height: 540px;
  object-fit: cover;
  min-height: 280px;
}

.rhc-hero-act {
  margin: 26px 0 0;
}

/* body */

.rhc-classpage-body {
  padding: 44px 0 50px;
}

.rhc-split {
  display: grid;
  gap: 30px;
}

@media (min-width: 960px) {
  .rhc-split {
    grid-template-columns: minmax(0, 1fr) 344px;
    align-items: start;
    gap: 54px;
  }
}

.rhc-prose h2 {
  font-size: 26px;
  margin: 0 0 12px;
}

.rhc-prose p {
  color: var(--tx-2);
  margin: 0 0 1em;
}

.rhc-blk {
  padding-top: 26px;
  margin-top: 26px;
  border-top: 1px solid var(--rule);
}

.rhc-teacher {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 560px) {
  .rhc-teacher {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

/* The portrait is wrapped in a <picture> so a 360x450 derivative can be offered
   ahead of the 720x900 source (T9-006); the wrapper is the grid item now, so it
   carries the column width and the image fills it. */
.rhc-portrait-pic {
  display: block;
  width: 132px;
  line-height: 0;
}

.rhc-portrait {
  width: 132px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}

/* the panel */

.rhc-panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 24px 24px 22px;
}

.rhc-price {
  font-family: var(--d);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tx);
  margin: 0 0 16px;
}

.rhc-price small {
  display: block;
  font-family: var(--b);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--tx-3);
  margin-top: 6px;
}

.rhc-panel-next {
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--tx-2);
}

.rhc-panel-next b {
  display: block;
  font-family: var(--d);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 2px;
}

.rhc-panel-note {
  margin: 0 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
  color: var(--tx-2);
}

/* justify-self now applies to block-level boxes in Chrome, so the schedule
   row's "align the action right" leaks in here and shrink-wraps the form.
   Reset it: in the panel the action is full width. */
.rhc-panel .rhc-act,
.rhc-panel-act {
  margin: 16px 0 0;
  display: block;
  width: 100%;
  justify-self: stretch;
}

.rhc-panel .rhc-btn,
.rhc-panel .rhc-book .rhc-btn {
  width: 100%;
  min-height: 50px;
  font-size: 1.04rem;
  padding: 13px 20px;
  background: var(--rust);
  color: #fff;
  border-color: var(--rust);
}

.rhc-panel .rhc-btn:hover,
.rhc-panel .rhc-book .rhc-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rhc-panel-fine {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-fine);
  color: var(--tx-2);
}

/* every date */

.rhc-classpage-dates {
  background: var(--paper);
  padding: 44px 0 48px;
}

.rhc-classpage-dates h2 {
  font-size: 24px;
  margin: 0 0 14px;
}

.rhc-dates-note {
  color: var(--tx-2);
  margin: 0;
}

.rhc-dates-note a {
  color: var(--river);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-dates-note a:hover,
.rhc-dates-note a:focus-visible {
  text-decoration-color: currentColor;
}

.rhc-orow {
  display: grid;
  gap: 4px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  align-items: center;
}

@media (min-width: 760px) {
  .rhc-orow {
    grid-template-columns: 128px minmax(0, 1fr) auto auto;
  }
}

.rhc-od {
  font-family: var(--d);
  font-weight: 700;
  font-size: 17px;
  color: var(--tx);
}

.rhc-om {
  font-size: var(--fs-meta);
  color: var(--tx-3);
}

.rhc-orow .rhc-seats {
  margin: 0;
}

/* ---------- mobile ---------- */

@media (max-width: 899px) {
  .rhc-wrap {
    padding: 0 20px;
  }

  .rhc-classes-hero {
    padding: 34px 0 30px;
  }

  /* Image left, everything about the class to the right of it, the way the
     comp's phone rows read. */
  .rhc-sess {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px 14px;
    padding: 16px 0;
    align-items: start;
  }

  .rhc-thumb {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .rhc-when {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 7px;
  }

  .rhc-when-day {
    font-size: 19px;
  }

  .rhc-body {
    grid-column: 2;
    grid-row: 2;
  }

  .rhc-act {
    grid-column: 2;
    grid-row: 3;
    margin-top: 8px;
  }

  .rhc-sess h3 {
    font-size: 18px;
  }

  .rhc-fcount {
    margin-left: 0;
    width: 100%;
  }

  .rhc-hero-t {
    padding: 30px 0 28px;
  }

  .rhc-classpage-body {
    padding: 30px 0 34px;
  }

  .rhc-portrait-pic,
  .rhc-portrait {
    width: 108px;
  }
}

/* On a phone the page is recomposed rather than stacked: the proposition, then
   the thing you can do about it, then the reasons. On the desktop grid the
   panel already sits beside the opening paragraph. */
@media (max-width: 959px) {
  .rhc-split {
    display: flex;
    flex-direction: column;
  }

  .rhc-panel {
    order: -1;
  }
}

/* The retired request page still carries its spam trap; it must never be
   something a person can see or tab into. */
.rhc-class-booking-request-page .rhc-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ============================================================
   The rolling 30-day class calendar.
   Server prints every remaining date as a readable day list; script
   presents the same blocks as a grid. Both are styled here so the page
   is finished with script switched off.
   Tokens come from phase1.css; nothing here defines a color.
   ============================================================ */

.rhcl {
  padding-top: 4px;
}

/* Several boxes here are laid out with flex or grid, and an explicit display
   beats the hidden attribute. Everything script hides must actually go. */
.rhcl [hidden] {
  display: none !important;
}

/* ---------- the studio bar ---------- */

.rhcl .rhc-filters {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.rhcl .rhc-flabel {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tx-3);
  font-weight: 600;
}

.rhcl-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1.5px solid var(--rule);
  background: var(--paper);
}

.rhcl .rhc-fopt.rhcl-type {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx-2);
  padding: 9px 17px;
  border: 0;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  transition: background 0.16s, color 0.16s;
}

.rhcl-seg .rhcl-type:last-child {
  border-right: 0;
}

.rhcl .rhc-fopt.rhcl-type:hover {
  background: var(--surface);
  color: var(--tx);
}

.rhcl .rhc-fopt.rhcl-type.is-on {
  background: var(--ink);
  color: var(--on-ink);
}

/* ---------- back and forward ---------- */

.rhcl-move {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0 16px;
}

.rhcl-arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: var(--river);
  background: var(--surface);
  border: 1.5px solid var(--rule);
  cursor: pointer;
}

.rhcl-arrow:hover:not([disabled]) {
  border-color: var(--clay);
  color: var(--ink);
}

.rhcl-arrow[disabled] {
  opacity: 0.32;
  cursor: default;
}

.rhcl-range {
  font-family: var(--d);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  min-width: 15ch;
}

.rhcl-hint {
  margin: 0 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--tx-3);
}

/* ---------- grid beside panel ---------- */

.rhcl-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

@media (min-width: 901px) {
  .rhcl-cols:has(.rhcl-side:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}

.rhcl-main {
  min-width: 0;
}

.rhcl-grid {
  background: var(--surface);
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}

.rhcl-dow,
.rhcl-cells {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.rhcl-dow-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-3);
  font-weight: 600;
  padding: 8px 6px;
  text-align: center;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.rhcl-cell {
  min-height: 112px;
  min-width: 0;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.rhcl-cell.is-out {
  background: var(--ground);
}

.rhcl-cell.is-out .rhcl-num {
  opacity: 0.42;
}

.rhcl-num {
  font-size: 13px;
  color: var(--tx-3);
  font-variant-numeric: tabular-nums;
}

.rhcl-cell.has .rhcl-num {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- a chip ---------- */

.rhcl-chip-h {
  min-width: 0;
  list-style: none;
}

.rhcl-chip {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--tx);
  background: var(--paper);
  border: 0;
  border-left: 3px solid var(--clay);
  padding: 5px 7px;
  cursor: pointer;
  min-width: 0;
}

.rhcl-chip-t {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tx-3);
}

.rhcl-chip-n {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rhcl-chip-w {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--tx-3);
  overflow-wrap: anywhere;
}

.rhcl-chip:hover {
  background: var(--ground);
}

.rhcl-chip.is-open {
  background: var(--ink);
  color: var(--on-ink);
  border-left-color: var(--rust);
}

.rhcl-chip.is-open .rhcl-chip-t,
.rhcl-chip.is-open .rhcl-chip-w {
  color: var(--on-ink-2);
}

.rhcl-chip--painting-drawing { border-left-color: var(--river); }
.rhcl-chip--pottery { border-left-color: var(--clay); }
.rhcl-chip--needlework { border-left-color: var(--tx-3); }
.rhcl-chip--performing-arts { border-left-color: var(--ink); }

/* ---------- the detail panel ---------- */

.rhcl-side {
  min-width: 0;
}

.rhcl-panel {
  position: sticky;
  top: 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 20px;
}

.rhcl-close {
  position: absolute;
  top: 6px;
  right: 10px;
  font: inherit;
  font-size: 25px;
  line-height: 1;
  color: var(--tx-3);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 6px;
}

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

.rhcl-panel-body {
  position: relative;
}

/* ---------- one occurrence block ---------- */

.rhcl-detail {
  position: relative;
}

.rhcl-disc {
  font-size: var(--fs-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay-tx);
  font-weight: 600;
  margin: 0 0 3px;
}

.rhcl-title {
  font-family: var(--d);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 4px;
}

.rhcl-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--clay);
}

.rhcl-meta {
  font-size: var(--fs-meta);
  color: var(--tx-2);
  margin: 0 0 12px;
}

.rhcl-shot {
  display: block;
  margin: 0 0 12px;
}

.rhcl-shot-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* In the flat list the same photograph is a band rather than a card, so forty
   dates do not become forty full-height pictures. */
.rhcl-list .rhcl-shot-img {
  aspect-ratio: 16 / 7;
}

.rhcl-lede {
  font-size: var(--fs-sm);
  color: var(--tx-2);
  margin: 0 0 8px;
}

/* A date the studio called off says so in words as well as in its action, so
   somebody who held a seat reads what it means for them without hunting. */
.rhcl-note {
  font-size: var(--fs-sm);
  color: var(--rust-tx);
  font-weight: 600;
  margin: 0 0 8px;
}

.rhcl-price {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3);
  margin: 0 0 4px;
}

.rhcl-seats {
  margin: 0 0 4px;
}

.rhcl-act {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin: 14px 0 0;
}

/* A list is not one decision, it is forty, so a Book in a list is outlined.
   The filled rust action belongs to the detail panel and the class page's own
   panel, where there really is only one thing to press. */
.rhcl-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--rust-tx);
  font-weight: 600;
  font-size: var(--fs-sm);
  border: 1.5px solid var(--rust);
  min-height: 44px;
  padding: 10px 24px;
}

.rhcl-book:hover {
  background: var(--rust);
  color: #fff;
}

/* fix-6c, T7b-007/T7-017: the one filled "Book this class" action rendered
   47px against the 54-56px every other rust button on the site uses
   (.rhcx-btn, .rhav-btn, .btn--p). This is the only place .rhcl-book renders
   filled (the "there really is only one thing to press" panel/aside), so the
   size bump is scoped here - the outlined "Book" in a list of ten or forty
   (.rhcl-act, .rhc-act above) keeps the base 44px box, unaffected, because
   the panel/aside markup (.rhc-panel-act, .rhcl-panel) never nests inside
   .rhc-classpage-dates or the schedule rows. min-height 52px + 14px/28px
   padding matches .rhav-btn's box model, which measures 54px rendered. */
.rhcl-panel .rhcl-book,
.rhc-panel-act .rhcl-book {
  background: var(--rust);
  color: #fff;
  min-height: 52px;
  padding: 14px 28px;
}

.rhcl-panel .rhcl-book:hover,
.rhc-panel-act .rhcl-book:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.rhcl-full,
.rhcl-off {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tx-3);
  border: 1px solid var(--rule);
  background: var(--surface);
  min-height: 44px;
  padding: 6px 16px;
  white-space: nowrap;
}

.rhcl-more,
.rhcl-go {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rust-tx);
  white-space: nowrap;
}

.rhcl-more:hover,
.rhcl-go:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- the day list (no script, and every phone) ---------- */

.rhcl-day-h,
.rhcl-aday-h {
  font-family: var(--d);
  font-size: 19px;
  font-weight: 600;
  color: var(--tx-3);
  letter-spacing: -0.01em;
  margin: 24px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}

.rhcl-occs {
  display: grid;
  gap: 18px;
}

@media (min-width: 720px) {
  .rhcl-occs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rhcl-occ {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 16px 18px;
  min-width: 0;
}

.rhcl-chips {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rhcl-none {
  padding: 40px 0 10px;
  color: var(--tx-2);
  font-size: var(--fs-body);
}

.rhcl-standing {
  margin-top: 28px;
}

.rhcl-standing .rhc-sess--standing {
  border-top: 1px solid var(--rule);
}

/* ---------- phone ---------- */

@media (max-width: 900px) {
  /* T7-002. This row was a wrapping flex line and it did not wrap: the
     count ("6 classes in these 30 days") stayed beside the two arrows and
     squeezed the window heading into a 44px column, 152px tall, broken
     mid-word - "Sept / emb / er 9". Measured at 390; worse at 360 (14px
     wide, 411px tall). The site-wide overflow-wrap:anywhere is what let it
     break inside a word instead of overflowing visibly.

     A two-row grid cannot do that. The heading gets its own full-width
     row with an arrow either side, the count drops underneath, and the
     heading is told to break at spaces like ordinary prose. */
  .rhcl-move {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-areas:
      "prev range next"
      "hint hint hint";
    align-items: center;
    gap: 10px 12px;
    padding: 18px 0 12px;
  }

  .rhcl-range {
    grid-area: range;
    min-width: 0;
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.18;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* style.css stretches every button under 600px (main#… :where(button){inline-size:100%});
     the window arrows must stay 40px so the row reads [←] range [→]. */
  main#riverhouse-public-main .rhcl-arrow {
    inline-size: 40px;
    flex: 0 0 40px;
  }

  [data-rhcl-prev] { grid-area: prev; }
  [data-rhcl-next] { grid-area: next; }

  .rhcl-hint {
    grid-area: hint;
    justify-self: stretch;
    margin: 0;
    text-align: center;
  }

  .rhcl .rhc-fopt.rhcl-type {
    padding: 8px 13px;
    font-size: 13.5px;
  }

  .rhcl-chip {
    font-size: 14.5px;
    padding: 10px 12px;
    border-left-width: 4px;
  }

  .rhcl-chip-t,
  .rhcl-chip-w {
    font-size: 13px;
  }

  .rhcl-aday-h {
    margin-top: 20px;
  }

  /* Inline under the day it belongs to, not floating over the page. */
  .rhcl--js .rhcl-panel {
    position: relative;
    top: auto;
    margin: 8px 0 12px;
    border-left: 3px solid var(--ink);
  }

  .rhcl--js .rhcl-panel .rhcl-shot {
    display: none;
  }

  .rhcl-occs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ONE RUST ACTION PER SCREEN ON A CLASS PAGE — finding T7-011.

   /class-detail/ carried eleven rust buttons: the filled Book in
   the sidebar panel, plus one rust-outlined Book for every one of
   the ten dates in "Every date this fall". Eleven identical
   controls is no emphasis at all, and HANDOVER-DESIGN.md is
   explicit that rust is "ONE action per screen".

   The panel keeps the filled rust Book - it is the next date, and
   it is what the page is for. Every other date becomes a quiet
   house link on its own row: river green, clay underline, still a
   44px touch target, still going to exactly the same URL.

   Scoped to .rhc-classpage-dates so the schedule at /classes/ is
   untouched: a schedule IS a list of forty separate decisions and
   its outlined Book is the right control there.
   ============================================================ */

.rhc-classpage-dates .rhc-act .rhcl-book {
  justify-content: flex-start;
  background: transparent;
  border: 0;
  padding-inline: 0;
  color: var(--river);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.rhc-classpage-dates .rhc-act .rhcl-book:hover,
.rhc-classpage-dates .rhc-act .rhcl-book:focus-visible {
  background: transparent;
  color: var(--rust-tx);
  text-decoration-color: currentColor;
}