/* The facelift — the token layer on top of application.css. Ported verbatim
   from the finished design at ~/projects/re-serve (app/facelift.css, then
   desk.css, reports.css, settings.css and about.css appended at the foot of
   this file). application.css keeps every class name and every piece of
   interaction; this file only repaints it, and it is linked AFTER it in the
   layout so it wins on order.

   NOTHING IS EVER ADDED TO application.css to make a rule here land. If one
   fights, the losing declaration comes out of application.css.

   Barlow and Barlow Condensed are self-hosted: the @font-face rules below
   load them from app/assets/fonts, and this file only says what uses the
   family once they have loaded. */

@font-face {
  font-family: "Barlow";
  src: url("/assets/barlow-latin-400-normal-47c07709.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/barlow-latin-500-normal-078cf4a1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/barlow-latin-600-normal-81a96cd2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/assets/barlow-latin-700-normal-d0f827ec.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/barlow-condensed-latin-500-normal-cf75d925.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/barlow-condensed-latin-600-normal-1a79f86d.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/barlow-condensed-latin-700-normal-74ef7090.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: Barlow, system-ui, sans-serif;
}

/* AND THROUGH BOOTSTRAP'S OWN VARIABLE, which is the half that actually lands:
   Bootstrap sets `body { font-family: var(--bs-body-font-family) }`, and a rule
   on `body` beats one on `html` whatever the family says — so the page kept its
   system font and the facelift was only ever on the headings. Written on
   `html:root` for the load-order reason the border radius below is. */
html:root {
  --bs-font-sans-serif: Barlow, system-ui, sans-serif;
  --bs-body-font-family: Barlow, system-ui, sans-serif;
}

/* Barlow Condensed: page titles, the bar's date label, modal titles, stat
   figures (APP_DESIGN §1.2). One utility, same name the mockups use, for the
   few headings that want the narrower face; everything else stays Barlow. */
.cond {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
}
.mc-weekbar .mc-monthnav__label,
.mc-modal__panel h2,
.mc-stat__value {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
}

/* Corners: well/modal 16, buttons/inputs 8 (APP_DESIGN §1.3). Bootstrap's own
   --bs-border-radius drives both .btn and .form-control already, so one
   variable does both rather than overriding each component.

   WRITTEN ONE STEP STRONGER THAN BOOTSTRAP'S OWN, here and on .btn-primary
   below, and it is load order that makes it necessary: Next puts this app's
   imported stylesheets at the top of the head and the Bootstrap <link> after
   them, so a rule of equal weight loses on order alone. `html:root` and
   `.btn.btn-primary` outweigh `:root` and `.btn-primary` at any position. */
html:root {
  --bs-border-radius: 0.5rem;
}
.mc-well,
.mc-modal__panel {
  border-radius: 16px;
}

/* The one shadow (APP_DESIGN §1.3), on the well and on modals — nothing else
   casts one. */
.mc-well,
.mc-modal__panel {
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}

/* Primary buttons move from Bootstrap blue to mahogany (APP_DESIGN §1.1);
   hover/active darken is the mockup's own --mahd. Done through Bootstrap's
   button variables so every .btn-primary repaints without a specificity
   fight. */
.btn.btn-primary {
  --bs-btn-bg: var(--mc-brand);
  --bs-btn-border-color: var(--mc-brand);
  --bs-btn-hover-bg: #5f301a;
  --bs-btn-hover-border-color: #5f301a;
  --bs-btn-active-bg: #5f301a;
  --bs-btn-active-border-color: #5f301a;
  --bs-btn-disabled-bg: var(--mc-brand);
  --bs-btn-disabled-border-color: var(--mc-brand);
}

/* Segmented toggle (WEEKLY | MONTHLY): 36px pill, pressed = mahogany. The
   pressed fill is already .mc-viewtoggle .btn[aria-pressed="true"] in mc.css;
   this just makes the group read as one pill instead of joined squares. */
.mc-viewtoggle {
  border-radius: 999px;
  overflow: hidden;
}
.mc-viewtoggle .btn {
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 0;
}

/* Status chip (.mc-tag): 11/700, pill (APP_DESIGN §4; was a 3px badge). */
.mc-tag {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 0.2em 0.7em;
}

/* Reference ticket (.mc-reference): Condensed 28 on a parchment strip
   (APP_DESIGN §4). */
.mc-reference {
  background: #f4efe3;
}
.mc-reference__id {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
}

/* Stat row: figures on a rule, not five boxed cards (APP_DESIGN §1.5, §3.4) —
   one bottom line under the row, no per-stat box. */
.mc-statrow {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--mc-line);
}
.mc-stat {
  flex: 1 1 9.5rem;
  border: none;
  border-radius: 0;
  background: none;
  padding: 4px 16px 16px;
}

/* Stepper (.mc-stepper .btn): radius 8 comes free from --bs-border-radius
   above; nothing else to add. */

/* Chip (court, day) — the V2 ticket form's own control (APP_DESIGN §4), built
   in Phase 3. No host markup exists yet; this is the class Phase 3's
   ReservationSheet/OpenPlaySheet reach for. */
.mc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mc-line);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  color: var(--mc-ink);
}
.mc-chip.is-on {
  border-color: var(--mc-brand);
  background: rgba(123, 63, 33, 0.1);
  color: var(--mc-brand);
  font-weight: 600;
}

/* ===========================================================================
   THE CALENDAR (APP_DESIGN §2.3–2.5, §2.13). Values lifted from the mockups'
   own CSS (mockups/Main.dc.html, Phone.dc.html, DayPopup.dc.html). mc.css keeps
   every class, every placement and every gesture; this repaints them.
   ======================================================================== */

/* The board's geometry: 40px rows (44 on a touch screen), a 92px hour column
   and 96px courts — the mockup's numbers. mc.css draws the week at 34px rows in
   5.75rem/5.5rem tracks; only the measurements change. */
/* The week board wears BOTH classes, so the day's columns are written first and
   the week's second — the order mc.css itself keeps, and the whole of what
   decides which one a seven-day board is drawn by. */
.mc-day__grid {
  --mc-slot-height: 40px;
  --mc-day-time-col: 92px;
  grid-template-columns: var(--mc-day-time-col) repeat(var(--mc-day-courts, 1), minmax(96px, 1fr));
}
.mc-week__grid {
  --mc-week-dowhead-h: 24px;
  --mc-week-dayhead-h: 34px;
  grid-template-columns: var(--mc-day-time-col) repeat(var(--mc-week-cols, 7), minmax(96px, 1fr));
  grid-template-rows: var(--mc-week-dowhead-h) var(--mc-week-dayhead-h) 22px;
}

/* The three header bands: dow 12/500 muted, date 17/600 ink, court 12/500 muted
   — a heading over the numerals rather than a second row of them. */
.mc-week__dow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: #f7f8fa;
  color: var(--mc-muted);
}
.mc-week__dom {
  font-size: 17px;
  font-weight: 600;
}
.mc-day__court,
.mc-day__corner {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--mc-muted);
  background: #fff;
}
.mc-week__day { background: #fff; }
/* Today's disc at the mockup's 28px. */
.mc-week .mc-week__day.is-today .mc-week__dom {
  width: 28px;
  height: 28px;
  line-height: 28px;
}

/* The hour column, and the hours that are over struck through in it. */
.mc-day__time {
  font-size: 12px;
  font-weight: 400;
  color: var(--mc-muted);
}
.mc-day__time.is-past {
  background: var(--mc-past);
  color: var(--mc-line-strong);
  text-decoration: line-through;
}
.mc-day__time.is-now { font-weight: 600; }
.mc-day__time.is-now .mc-day__note { text-decoration: none; }

/* Blocks: the name at 13/600 and the lines under it at 12 muted. Booked reads
   forest on the booked wash; awaiting payment is the gold wash and its border,
   with the hatch dropped — the fill alone reads. */
.wgb { border-radius: 6px; }
.wgb .wgb__name,
.wgb .wgb__ref {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.wgb .wgb__when,
.wgb .wgb__rate,
.wgb .wgb__note {
  font-size: 12px;
  line-height: 1.3;
}
.wgb.is-verified .wgb__ref { color: #145b36; }
.wgb.is-verified .wgb__when { color: #2e6a4a; }
.wgb.is-unverified.is-hold { background-image: none; }
.wgb--open-play .wgb__name { color: var(--mc-brand); }

/* The selection: a 2px mahogany rectangle over a 10% mahogany fill, its caption
   white on mahogany, and a soft shadow once it is standing. Blue survives as the
   free cell's hover, which is the one place APP_DESIGN §1.1 keeps it. */
.mc-day__grid > .mc-day__sel {
  background: rgba(123, 63, 33, 0.1);
  box-shadow: inset 0 0 0 2px var(--mc-brand);
}
.mc-day__grid > .mc-day__sel.is-standing {
  box-shadow: inset 0 0 0 2px var(--mc-brand), 0 8px 18px rgba(123, 63, 33, 0.2);
}
.mc-day__sel .wg__selcourts,
.mc-day__sel .wg__selrange {
  background: var(--mc-brand);
  color: #fff;
}
.mc-day__sel .wg__grip { background: var(--mc-brand); }

/* The key: 12px swatches with a 4px radius, labels 13 muted, centred. */
.mc-legend i { border-radius: 4px; }
.mc-legend span { font-size: 13px; }

/* --- the month ------------------------------------------------------------ */

.mc-month__grid { border-radius: 8px; }
.mc-month__num { font-size: 17px; font-weight: 600; }
.mc-month__cell.is-today .mc-month__num { width: 28px; height: 28px; line-height: 28px; }
.mc-month__pill { font-size: 11px; font-weight: 500; border-radius: 999px; }
.mc-month__note { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }

/* --- modal chrome (§2.7) --------------------------------------------------- */

.mc-modal__panel { border-radius: 16px; }
.mc-modal__panel h2 {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--mc-brand);
}
/* The day popup is titled with a DATE, and a date is not one of the labels the
   venue shouts (APP_DESIGN §1.2) — mc.css uppercases every modal heading on the
   customer's page for the sake of "MAKE A RESERVATION". Sentence case here, as
   the mockup has it, and only here. */
#player-page .mc-modal__panel.mc-day h2 { text-transform: none; }
/* The drag handle is the phone's alone — a bottom sheet is a thing you pull. */
.mc-sheetgrip { display: none; }

@media (max-width: 640px) {
  /* A centred card on a phone too: the base rules already centre it and round
     all four corners; only the height cap is the phone's own. */
  .mc-modal__panel { max-height: 92vh; }
  /* PHONE (§2.13): 44px rows, a 76px hour column, 88px courts — and the board
     goes on scrolling sideways under a visible 6px scrollbar. Nothing becomes a
     list; it is the same board with room to press. */
  .mc-day__grid {
    --mc-slot-height: 44px;
    --mc-day-time-col: 76px;
    grid-template-columns: var(--mc-day-time-col) repeat(var(--mc-day-courts, 1), minmax(88px, 1fr));
  }
  .mc-week__grid {
    grid-template-columns: var(--mc-day-time-col) repeat(var(--mc-week-cols, 7), minmax(88px, 1fr));
  }
  .mc-week__scroll::-webkit-scrollbar,
  .mc-day__scroll::-webkit-scrollbar { width: 6px; height: 6px; }
  .mc-week__scroll::-webkit-scrollbar-thumb,
  .mc-day__scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: rgba(123, 63, 33, 0.45);
  }
  .mc-week__scroll,
  .mc-day__scroll { scrollbar-width: thin; scrollbar-color: rgba(123, 63, 33, 0.45) transparent; }
  /* The key wraps rather than scrolling off the card. */
  .mc-legend--foot { flex-wrap: wrap; gap: 12px 20px; }
}

/* Every button in the action row is 44px tall. */
/* The sentence beside Reserve Now: 15 ink (APP_DESIGN §2.3). mc.css writes it in
   the accent blue, which the facelift keeps for the free cell's hover alone. */
.mc-day__chosen {
  font-size: 15px;
  font-weight: 500;
  color: var(--mc-ink);
}

.mc-modal__actions .btn { min-height: 44px; }
.mc-modal__actions .btn { white-space: nowrap; }
.mc-modal__actions .btn[aria-disabled="true"] { opacity: 0.45; }

/* The splash's "Got it", the target a phone wants beside click-anywhere. */
.mc-splash__got { margin-top: 0.5rem; }

/* The resume bar: gold wash, mahogany text, Finish paying as a mahogany pill —
   the colours mc.css already gives it, with the text brought onto the brand. */
.mc-resume strong { color: var(--mc-brand); }

/* ===========================================================================
   THE SHEET (§2.7) AND THE V2 TICKET FORMS (§7). Values lifted from the
   mockups' own CSS (FormsV2Reservation.dc.html, FormsV2Phone.dc.html); the
   panel, its backdrop and its action row are mc.css's `.mc-modal` unchanged.
   ======================================================================== */

/* The body scrolls and the actions row is pinned: the panel becomes the column
   and gives up its own scrollbar to the body inside it.

   RAILS' PANELS WEAR NO `mc-sheet` CLASS — the Next app puts it on from
   Sheet.tsx, and here the markup of each modal belongs to a later lane. So the
   shell is asked for by the BODY WRAPPER instead: a panel that has grown a
   `.mc-sheet__body` is a sheet, and one that has not is left exactly as
   application.css draws it. That matters more than the tidiness of a second
   selector — `overflow: hidden` on a panel with no scrolling body inside it
   would clip every modal on this site and give none of them a scrollbar back.
   ponytail: `:has()` is the whole of the bridge; drop the second selector once
   every panel's markup has been through its lane. */
.mc-modal__panel.mc-sheet,
.mc-modal__panel:has(> .mc-sheet__body) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mc-sheet .mc-sheet__body,
.mc-modal__panel > .mc-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.mc-sheet .mc-modal__actions,
.mc-modal__panel:has(> .mc-sheet__body) > .mc-modal__actions {
  flex: none;
  border-top: 1px solid var(--mc-line);
  padding-top: 0.9rem;
}
/* The title and the ✕ share the row; the heading keeps the size and colour every
   modal heading has (see .mc-modal__panel h2 above) and loses only its margin. */
.mc-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.mc-sheet .mc-sheet__title,
.mc-modal__panel .mc-sheet__title { margin: 0 0 0.6rem; }
.mc-sheet__close {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--mc-muted);
  align-self: flex-start;
}
.mc-sheet__close:hover { color: var(--mc-ink); }

/* --- the ticket (§7.2) ---------------------------------------------------- */

.mc-formv2 {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-top: 0.25rem;
}
.mc-formv2__ticket { width: 320px; flex: none; }
.mc-formv2__fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mc-ticket {
  background: #f4efe3;
  border: 1px solid #e0c24e;
  border-radius: 12px;
  padding: 16px;
}
.mc-ticket__date {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--mc-brand);
}
.mc-ticket__time {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  padding-top: 2px;
}
.mc-ticket__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
.mc-ticket__row:first-of-type { margin-top: 14px; }
.mc-ticket__label,
.mc-field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-muted);
}
.mc-ticket__rule {
  height: 1px;
  background: var(--mc-line);
  margin: 12px 0;
}
.mc-ticket__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mc-ticket__amount {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}
.mc-ticket__note {
  padding-top: 8px;
  font-size: 12px;
  color: var(--mc-muted);
}
.mc-ticket__qr {
  display: block;
  width: 100%;
  margin-top: 12px;
  border-radius: 8px;
}
.mc-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* The stepper as the kit draws it: − value + in one 40px box. */
.mc-step {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--mc-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.mc-step button {
  width: 38px;
  height: 100%;
  border: 0;
  background: var(--mc-past);
  font-size: 18px;
  font-weight: 500;
  color: var(--mc-muted);
}
.mc-step button:disabled { opacity: 0.45; }
.mc-step span {
  width: 52px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- who's playing (§7.2) -------------------------------------------------- */

.mc-formv2__sec { font-size: 17px; font-weight: 600; line-height: 1.3; }
.mc-field .form-control { height: 44px; }
.mc-field__label { display: block; margin-bottom: 4px; }
.mc-phonefield { display: flex; align-items: stretch; }
.mc-phonefield .input-group-text { background: var(--mc-past); }
.mc-phonefield .form-control { height: 44px; }

/* One primary action, full width, 48px (§7.2). */
.btn.mc-btn--wide { width: 100%; height: 48px; }
.mc-consent {
  padding-top: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  color: var(--mc-muted);
  margin: 0;
}
.mc-consent + .mc-consent { padding-top: 4px; }
/* A refusal from the server, said above the button it was refused by. */
.mc-refusal {
  margin: 0 0 0.5rem;
  color: #b42318;
  font-size: 14px;
  line-height: 1.45;
}

/* --- phone (§7.5): one column, the ticket first, the button in a sticky
   footer with the two lines inside it. -------------------------------------- */

@media (max-width: 640px) {
  .mc-formv2 { display: block; }
  .mc-formv2__ticket { width: auto; }
  /* Room under the last field for the footer to be scrolled clear of, which is
     what §7.5's "bottom padding equal to the footer's height" buys. */
  .mc-formv2__fields { margin-top: 14px; padding-bottom: 92px; }
  /* THE STICKY FOOTER, and it is the same element it is on a desktop rather
     than a second copy of the button somewhere else in the tree: stuck to the
     foot of the scrolling body, with the two lines inside it, so the last field
     is never hidden under it and the ticket's amount stays above. */
  .mc-formv2__submit {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: #fff;
    padding: 12px 0 4px;
    border-top: 1px solid var(--mc-line);
  }
}


/* ===========================================================================
   THE PAYMENT PANEL AND THE RECEIPT (§2.8), measured off
   mockups/ScanToPay.dc.html — the left card and the right card of that board.
   ======================================================================== */

/* The mockups are sentence case throughout ("Payment confirmation", "Booked",
   "Your booking reference:"). mc.css shouts them because that was the old skin;
   this is the facelift saying otherwise, in one place. */
/* The booking page shouts its own headings too, and the dialog it opens is
   inside that card — so the sheet's title is said again here, in the sheet's
   own voice. */
#booking-page .mc-modal__panel h2 {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--mc-brand);
}

#booking-page .mc-modal__panel h2,
#player-page .mc-modal__panel h2,
#player-page .mc-modal__panel legend,
.mc-modal__panel h2,
.mc-modal__panel legend,
.mc-box legend,
.mc-reference__label {
  text-transform: none;
  letter-spacing: 0;
}

/* --- the calendar's "Payment confirmation" (the mockup's left card) -------- */

.mc-modal__panel--qr { width: 100% !important; max-width: min(100%, 520px) !important; }

/* One centred column with the mockup's own 12px rhythm. */
.mc-modal__panel--qr .mc-qrph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* The card holds the CODE and nothing else — the payee and the amount read
   under it rather than inside it. */
.mc-modal__panel--qr .mc-qrph__card {
  width: auto;
  padding: 16px;
  border: 1px solid var(--mc-line);
  border-radius: 12px;
}
.mc-modal__panel--qr .mc-qrph__card .mc-qrph__image { width: 240px; }
.mc-qrph__paid { text-align: center; }
.mc-modal__panel--qr .mc-qrph__value {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
/* The clock, in the venue's own Condensed mahogany — the largest thing under
   the code, and danger only in the last minute. */
.mc-modal__panel--qr .mc-qrph__line {
  margin: 0;
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--mc-brand);
}
.mc-modal__panel--qr .mc-qrph__line strong { color: inherit; font-weight: inherit; }
.mc-qrph__line.is-danger,
.mc-qrph__line.is-danger strong,
.mc-qrph__clock.is-danger strong { color: #b42318; }
.mc-modal__panel--qr .mc-qrph__actions { margin: 0; }
/* Scaffolding for the venue's own staff, and it reads like it: muted, small,
   and underlined only when it is being pointed at. */
.mc-qrph__test { font-size: 13px; color: var(--mc-muted); }
.mc-qrph__test a { color: inherit; text-decoration: none; }
.mc-qrph__test a:hover { text-decoration: underline; }

/* A way out that is a way out rather than a decision: no box, no fill. */
.btn.mc-btn--text {
  border-color: transparent;
  background: none;
  font-weight: 500;
  color: var(--mc-ink);
}

/* --- the receipt: the reference strip, the box and its rows ---------------- */

.mc-reference {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
}
.mc-reference__label {
  font-size: 13px;
  font-weight: 400;
  color: var(--mc-muted);
}
.mc-reference__id {
  margin: 0;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--mc-ink);
}
.mc-reference__note {
  margin: 0.25rem 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--mc-muted);
}

.mc-box {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}
.mc-box legend {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mc-ink);
  margin-bottom: 12px;
}
/* Two columns ruled off from each other, which is what makes a table of
   label/value pairs read as a receipt. Scoped to the box so the QR dialog's own
   inline payee grid is left alone. */
.mc-box .mc-details {
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  font-size: 15px;
}
.mc-box .mc-details dt,
.mc-box .mc-details dd {
  padding: 8px 0;
  border-bottom: 1px solid var(--mc-line);
}
.mc-box .mc-details dt {
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-muted);
}
.mc-box .mc-details dd { font-weight: 400; }
.mc-box .mc-details dt:last-of-type,
.mc-box .mc-details dd:last-of-type { border-bottom: 0; }
.mc-box .mc-details dd.mc-amount { font-size: 17px; font-weight: 600; }
/* One step stronger than mc.css's `#booking-page .mc-panel .mc-sub`, which is
   an id rule and outranks a three-class one however late this file loads. */
.mc-box .mc-details .mc-sub,
#booking-page .mc-panel .mc-box .mc-details .mc-sub { font-size: 13px; color: var(--mc-muted); }

/* The one instruction on a settled booking: a line, not a notice. */
.mc-keepsake {
  margin: 0;
  padding: 16px 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mc-muted);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
}

/* --- the booking's own page (the mockup's right card) ---------------------- */

/* The well is the mockup's 560, measured on the card itself so the shell keeps
   the side padding a phone wants. */
#booking-page .mc-panel {
  max-width: 560px;
  margin: 0 auto;
  border: 0;
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}
#booking-page .mc-letterhead { height: 64px; max-height: none; margin: 0 auto; }
#booking-page .mc-modal__actions { margin-top: 0; gap: 12px; }

/* --- open play ------------------------------------------------------------
   The ticket's own two rows (§7.3) and the panel's paging. Everything else on
   both screens is already drawn: the ticket, the stepper, the reference strip,
   the box and the code's card are the reservation's and the receipt's, and a
   customer who pays for a court and a customer who pays for a head are looking
   at one kind of card. ------------------------------------------------------ */

/* "₱100 per head", under the hours. */
.mc-ticket__perhead {
  margin: 0;
  padding-top: 6px;
  font-size: 13px;
  color: var(--mc-muted);
}

/* THE SLOTS BAR: gold track, forest fill, and the fill is what is LEFT — so the
   bar and the line under it say the same thing (17 of 24 is most of the bar
   green, not a quarter of it). Display only. */
.mc-slots {
  height: 8px;
  margin-top: 12px;
  border-radius: 999px;
  background: #e0c24e;
  overflow: hidden;
}
.mc-slots i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2f5d2a;
}
.mc-slots__note {
  margin: 0;
  padding-top: 6px;
  font-size: 12px;
  color: var(--mc-muted);
}
/* The first row after the bar keeps the ticket's own 12px rhythm rather than the
   14px a first row takes when it follows the hours. */
.mc-slots__note + .mc-ticket__row { margin-top: 12px; }

/* ‹ 2 of 3 › — paging between one reader's reservations on one session. Over the
   card rather than in the gutter beside it: the sheet is a bottom sheet on a
   phone and has no gutter to float in. */
.mc-oppanel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
}
.mc-oppanel__nav .mc-sub {
  font-size: 13px;
  color: var(--mc-muted);
}

/* ===========================================================================
   FORMS V3 (forms-v3/Reservation.dc.html, ReservationQR, Receipt,
   OpenPlayJoin, OpenPlayJoinQR, OpenPlayReceipt): one column, 480 wide, the
   ticket first, and the inputs inside the ticket rather than beside it.
   ======================================================================== */

/* Forms V3: one column, 480 wide, the ticket first (Reservation.dc.html). */
.mc-modal__panel--form { width: 100% !important; max-width: min(100%, 480px) !important; }
.mc-formv3 { display: flex; flex-direction: column; gap: 12px; }
.mc-ticket .form-control, .mc-ticket .input-group-text { background: #fff; }
.mc-ticket__row--nowrap { flex-wrap: nowrap; white-space: nowrap; }
.mc-ticket__inputs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* --- the pay pane (ReservationQR.dc.html / OpenPlayJoinQR.dc.html) -------- */

.mc-paypane { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mc-paypane img { width: 200px; height: 200px; display: block; }
.mc-paypane__payee { font-size: 15px; font-weight: 600; }
.mc-paypane__name { font-size: 15px; }
.mc-paypane__exp { font-size: 14px; color: var(--mc-muted); }
.mc-paypane__exp strong { color: var(--mc-ink); }
.mc-paypane__exp.is-danger strong { color: #b42318; }
.mc-paypane__cancel { padding-top: 8px; text-align: center; }
/* Text in the danger colour rather than a button — the same rule desk.css
   scopes to the desk's action row, said once here so every panel has it.
   Written `.btn.mc-btn--danger` for the load-order reason .btn.mc-btn--text
   above is: Bootstrap's own `.btn` lands after this file and a one-class rule
   would lose to it on order alone. */
.btn.mc-btn--danger { background: none; border-color: transparent; color: #b42318; font-weight: 500; }

/* --- the receipt (Receipt.dc.html / OpenPlayReceipt.dc.html) -------------- */

/* `:not(.mc-modal)` because `.mc-receipt` is ALSO the print marker
   common/modals/_receipt.html.erb's own root wears (`.mc-modal.mc-receipt`,
   see application.css's `.mc-printing .mc-modal.mc-receipt`) — with no guard
   this grid rule reached that div too and squeezed the whole dialog into its
   96px label column. Found by actually opening `?mdl=receipt&tid=…` (A6),
   not by reading the two classes side by side. */
.mc-receipt:not(.mc-modal) { display: grid; grid-template-columns: 96px minmax(0, 1fr); margin: 0; }
.mc-receipt:not(.mc-modal) dt, .mc-receipt:not(.mc-modal) dd { padding: 10px 0; margin: 0; border-bottom: 1px solid var(--mc-line); }
.mc-receipt:not(.mc-modal) dt { font-size: 13px; font-weight: 500; color: var(--mc-muted); }
.mc-receipt:not(.mc-modal) dd { font-size: 15px; display: flex; align-items: center; gap: 8px; }

/* --- who is already in (OpenPlayJoin.dc.html) ----------------------------- */

.mc-roster { border: 1px solid var(--mc-line); border-radius: 12px; overflow: hidden; }
.mc-roster__head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mc-line);
  font-size: 13px;
  font-weight: 600;
}
.mc-roster__head span + span { font-weight: 500; color: var(--mc-muted); }
.mc-roster__list { max-height: 196px; overflow-y: auto; }
.mc-roster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--mc-line);
  background: #fff;
}
.mc-roster__row:last-child { border-bottom: 0; }
.mc-roster__row.is-you { background: #fdf1c4; }
.mc-roster__ord { font-size: 12px; color: var(--mc-muted); margin-left: 8px; }
.mc-roster__you { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--mc-brand); }

/* THE RECEIPT'S LAST ROW ALREADY DRAWS A RULE, so the pinned footer must not
   draw a second one under it: `.mc-sheet .mc-modal__actions` has a border-top
   and 1.1rem of margin above it, and the band between the two hairlines reads
   as an empty ruled row. Receipt.dc.html has the rows, a 16px gap and the
   button. Scoped to the form panel, which is the three receipt surfaces —
   the form and pay-pane states render no action row at all. */
.mc-modal__panel--form .mc-modal__actions {
  border-top: 0;
  margin-top: 0;
  padding-top: 16px;
}

/* Forms V3: the test-mode line sits under a centred pane. */
.mc-qrph__test { text-align: center; }

/* ===========================================================================
   THE BAR (forms-v3/Main.dc.html `.bar`): the period in 24px condensed between
   two round chevrons, and the two views as one segmented pill.
   ======================================================================== */

.mc-weekbar .mc-monthnav__label {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--mc-ink);
  min-width: 0;
}

.mc-monthnav { gap: 16px; }
.wg-chev--inline { text-decoration: none; color: var(--mc-ink); }

.mc-weekbar .mc-viewtoggle {
  display: inline-flex;
  height: 36px;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.mc-weekbar .mc-viewtoggle > .btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  border: 0;
  border-radius: 0 !important;
  color: var(--mc-ink);
  background: #fff;
}
.mc-weekbar .mc-viewtoggle > .btn + .btn { border-left: 1px solid var(--mc-line); }
.mc-weekbar .mc-viewtoggle > .btn[aria-pressed="true"] { background: var(--mc-brand); color: #fff; }

/* The outlined twin of the mahogany pill. Bootstrap's outline-primary is its own
   blue; repainted through the same variables .btn.btn-primary is (see the top of
   this file), so the pair reads as one button in two weights. */
.btn.btn-outline-primary {
  --bs-btn-color: var(--mc-brand);
  --bs-btn-border-color: var(--mc-brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mc-brand);
  --bs-btn-hover-border-color: var(--mc-brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mc-brand);
  --bs-btn-active-border-color: var(--mc-brand);
}

/* THE LETTERHEAD ON /open-play/<token> IS THE RECEIPT'S, not the page's. That
   page shares #booking-page with the booking's own page, whose letterhead is a
   64px header above its card — but here the logo comes from inside the receipt
   (PaySheet's page frame, .mc-booking-panel), where it is the same picture the
   calendar's sheet draws and takes mc.css's own 200px. */
#booking-page .mc-booking-panel .mc-letterhead { height: auto; max-height: 200px; }

/* A head of open play whose money has not landed yet (OpenPlayJoin.dc.html's
   `.tag--not`). `.mc-tag` already gives the 11/700 pill. */
.mc-tag--pending { background: #fdf1c4; color: #6b5a12; }

/* --- the app's own confirm (forms-v3/Confirm.dc.html) --------------------- */

.mc-modal__panel--confirm { width: 100% !important; max-width: min(100%, 400px) !important; }
.mc-confirm__body { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mc-muted); }
.mc-modal__panel--confirm .mc-modal__actions > .btn { flex: 1; }
.mc-modal__panel--confirm .mc-modal__actions { border-top: 0; } /* Confirm.dc.html: no hairline */
/* Bootstrap's danger is a redder red than the venue's refusals. Through the
   button variables, and one step stronger than Bootstrap's own for the load
   order reason .btn.btn-primary above is. */
.btn.btn-danger {
  --bs-btn-bg: #b42318;
  --bs-btn-border-color: #b42318;
  --bs-btn-hover-bg: #8f1b12;
  --bs-btn-hover-border-color: #8f1b12;
  --bs-btn-active-bg: #8f1b12;
  --bs-btn-active-border-color: #8f1b12;
}

/* The tick on a notice toast (forms-v3/Toast.dc.html); mc.css draws the card. */
.mc-toast__icon { flex: none; margin-top: 1px; }

/* ===========================================================================
   THE DESK'S OPEN-PLAY SESSION (forms-v3/DeskOpenPlay.dc.html): 880 wide, the
   session's five facts on the left and the register on the right.
   ======================================================================== */

.mc-modal__panel.is-wide.mc-openplay__panel {
  width: min(100%, 880px);
  max-width: min(100%, 880px);
}

/* The count in the title row: a fact, so it is outlined rather than coloured. */
.mc-tag--ref { background: #fff; border: 1px solid var(--mc-line-strong); color: var(--mc-muted); }

/* The receipt rows at ticket width: a 64px label column, and no rule under the
   last row — the ticket's own edge is already there. */
.mc-receipt--tight { grid-template-columns: 64px minmax(0, 1fr); }
.mc-receipt--tight dt:last-of-type,
.mc-receipt--tight dd:last-of-type { border-bottom: 0; }

/* The register, in a frame that takes the height the ticket beside it sets and
   scrolls inside it. */
.mc-register {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--mc-line);
  border-radius: 12px;
}
.mc-register__table { width: 100%; border-collapse: collapse; }
.mc-register__table th {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mc-muted);
  text-align: left;
  border-bottom: 1px solid var(--mc-line);
}
.mc-register__table td {
  padding: 6px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--mc-line);
}
.mc-register__table tbody tr:last-child td { border-bottom: 0; }

/* Shut, it is still the danger line rather than a grey outlined button —
   Bootstrap's :disabled repaints both, so it is said again here. */
.btn.mc-btn--danger:disabled {
  background: none;
  border-color: transparent;
  color: #b42318;
  opacity: 0.4;
}

/* The tight receipt's values are running text, not a row of items: .mc-receipt's
   flex would break "Thursday, September 10, 9am - 10pm" into two blocks. */
.mc-receipt--tight dd { display: block; }

/* The session's own three, at the foot of its card: full width, 44, and pushed
   down so they sit on the bottom edge however tall the register beside them is.
   `.mc-btn--wide` is the form's 48px button; on a card it is 44. */
.mc-openplay__acts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 8px;
  margin-top: auto;
}
.mc-openplay__acts .btn.mc-btn--wide { height: 44px; }

/* Forms V3: the actions row stands UNDER the board in the flow, not floating
   over its last rows (Patrick, 2026-09-06). The scroller no longer needs the
   room the pill used to take. */
.mc-week > .mc-week__actions {
  position: static;
  width: auto;
  margin: 16px auto 0;
  padding: 0;
  gap: 16px;
  justify-content: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.mc-week__scroll { padding-bottom: 0.5rem; }
/* The row of actions now stands in the flow under the board (above), so the
   scroller's height budget pays for it: mc.css already subtracts
   --mc-grid-footer for exactly this. 16px margin + the 44px row + the 16px
   under it, plus the legend's line, measured at 1280×900 (99px). */
.mc-week__scroll { --mc-grid-footer: 6.25rem; }

/* THE KEY MOVES INTO THE CORNER OF THE CARD, under the WEEKLY | MONTHLY pill it
   is right-aligned with — a thing read once, where the eye is already looking
   for what the card is set to, rather than a line under the board. */
.mc-weekbar--month .mc-weekbar__legend {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  margin-top: 8px;
}
.mc-weekbar__legend .mc-legend { flex-wrap: nowrap; }

/* A phone stacks the bar (mc.css: nav 1, toggle 2, Setup Open Play 3); the key
   takes a row of its own under the toggle and pushes Setup Open Play down one. */
@media (max-width: 640px) {
  .mc-weekbar--month .mc-weekbar__legend {
    grid-column: 1;
    grid-row: 3;
    justify-self: center;
  }
  .mc-weekbar--month .mc-weeksetup { grid-row: 4; }
}

/* AND THE HEIGHT BUDGET FOLLOWS IT. The key left the foot of the board for the
   bar, so the room reserved under the board is 6px short of what the card now
   needs above it: 6.25rem left the page 6px long at 1280×900 on both calendars,
   6.625rem lands it on zero. */
.mc-week__scroll { --mc-grid-footer: 6.625rem; }

@media (max-width: 640px) { .mc-weekbar__legend .mc-legend { flex-wrap: wrap; justify-content: center; } }

/* The key left the bar (Patrick: redundant with the ? poster), so the budget gives its row back to the board. */
.mc-week__scroll { --mc-grid-footer: 4.375rem; }

/* A booking taken on the venue's say-so and not yet paid: outlined, like a reference chip. */
.mc-tag--manual { background: #fff; border: 1px solid var(--mc-line-strong); color: var(--mc-muted); }

/* --- two fields on one line (RescheduleCustomer/Desk, DateRange) ---------- */

.mc-fieldrow { display: flex; gap: 16px; }
.mc-fieldrow > .mc-field { flex: 1; min-width: 0; }
.mc-field .form-select { height: 44px; }

/* A COURT TAKEN WITH NO MONEY AGAINST IT YET (SuperAdmin.dc.html's "Jose
   Rizaliano" block): the mark sits under the hours, centred, on the desk's
   board alone — a customer's payload never carries the flag. */
.wgb__unpaid { display: block; margin: 3px auto 0; flex: none; }


/* ===========================================================================
   PORTED FROM re-serve app/desk.css — appended verbatim.
   ======================================================================== */

/* THE DESK'S CALENDAR — the facelift layer over mc.css, and nothing else.
   =========================================================================

   Everything the desk's panels are built out of already exists: .mc-box,
   .mc-details, .mc-tag--*, .mc-badge--*, .mc-status, .mc-override__*,
   .mc-payment__*, .mc-weekrow* and the rest are the venue's own stylesheet,
   copied whole into app/mc.css at Phase 1. What is here is only what APP_DESIGN
   §3.3 asks for on top of it: the 900px two-column panel, the four-pixel left
   edges on the aside boxes, and the Setup Open Play row grid.

   Values are lifted from the mockups (AdminCalendar.dc.html 1440×900 and
   SetupOpenPlay.dc.html 1280×700) rather than invented. */

/* --- the desk panel: form left, whatever settled it right ----------------- */

.mc-desk__panel {
  max-width: min(100%, 900px);
  width: 900px;
}

.mc-desk__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

/* Under the sm breakpoint the two stack, in that order: the booking, then what
   settled it. A phone reads down the panel rather than across it. */
@media (max-width: 767.98px) {
  .mc-desk__cols {
    grid-template-columns: 1fr;
  }
}

.mc-desk__main,
.mc-desk__aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* THE FOUR-PIXEL LEFT EDGE IS THE ANSWER TO "WHAT SETTLED THIS?" said in
   colour: gold for a court taken on the venue's own say-so, taken-grey for one
   off the calendar altogether, forest for money that actually moved. Three boxes
   and never two of them at once, so the edge is never ambiguous. */
.mc-box--override {
  border-left: 4px solid var(--mc-gold, #e0c24e);
}

.mc-box--closed {
  border-left: 4px solid var(--mc-line-strong, #aab1ba);
}

.mc-box--payment {
  border-left: 4px solid var(--mc-forest, #2f5d2a);
}

/* --- the two boxes, as AdminCalendar.dc.html draws them ------------------
   facelift.css already gives .mc-box the mockup's white 12px well and .mc-details
   its ruled label/value table (130px labels 13 muted, values 15 ink, a hairline
   under every row). What is left is what a two-column panel needs on top of it. */

/* The column's own gap spaces the boxes; mc.css's margin would space them twice. */
.mc-desk__cols .mc-box { margin-top: 0; }

/* A <legend> straddles the border it names by default, which is the one thing
   about these boxes the mockup does not do: "Booking Details" is the first line
   INSIDE the well, and the border round it is unbroken. `float` is what puts a
   legend back in the flow (it is how Bootstrap's own reboot does it). */
.mc-desk__cols .mc-box legend {
  float: left;
  width: 100%;
  padding: 0;
}

/* The label column butts against the value at gap: 0 — which is what keeps each
   row's hairline unbroken — so the air goes inside the label instead. */
.mc-desk__cols .mc-details dt { padding-right: 12px; }

/* NO ROW MAY PUSH THE PANEL SIDEWAYS. mc.css holds every value on one line so
   "August 8, 2026" is never broken in two; in a 300px aside a gateway id, an
   email or a joined-in name is longer than the column and takes the panel's
   scrollbar with it. Wrapping is the cheaper of the two evils, and the values
   that wanted the rule (the date, the hour) still fit on their line. */
.mc-desk__cols .mc-details dd {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The typed rows are the mockup's 40px, not Bootstrap's — and mc.css trims the
   padding of a .mc-details box down to a counted number's height. */
.mc-desk__details .mc-details input.form-control,
.mc-desk__details .mc-details .input-group { height: 40px; }
.mc-desk__details .mc-details .mc-details__field { gap: 8px 12px; }

/* Verified, as the switch the mockup draws: mahogany when it is on. It is the
   same button doing the same thing (see setVerified) in the shape of the state
   it reports. */
.mc-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--mc-line-strong, #aab1ba);
  flex: none;
}
.mc-switch.is-on { background: var(--mc-brand, #7b3f21); }
.mc-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.mc-switch.is-on i { left: 18px; }
.mc-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- the aside ----------------------------------------------------------- */

/* A 300px column cannot hold the left box's 130px label, so the aside's rows
   take the mockup's narrower one. */
.mc-desk__aside .mc-details { grid-template-columns: 110px minmax(0, 1fr); }

/* The gateway ids: 12px mono, muted, one under the other. Nobody reads them
   unless they are looking one up, and then they copy them. */
.mc-desk__aside .mc-payment__refs { font-size: 12px; line-height: 1.7; }
.mc-desk__aside .mc-payment__refs dt,
.mc-desk__aside .mc-payment__refs dd {
  padding: 0;
  border-bottom: 0;
  font-size: 12px;
  color: var(--mc-muted, #6b7280);
}

/* And the sentence saying why the panel cannot be typed into. */
.mc-desk__aside .mc-payment__note { font-size: 13px; color: var(--mc-muted, #6b7280); }

/* --- the action row ------------------------------------------------------ */

/* Delete is the one thing in the row that cannot be taken back, so it is text
   in the danger colour on the far left rather than an outlined button beside
   the pair somebody presses on the way out. */
.mc-modal__actions .mc-btn--danger {
  background: none;
  border-color: transparent;
  color: #b42318;
  font-weight: 500;
}

/* Four buttons do not stand on one 390px line. */
@media (max-width: 640px) {
  .mc-modal__actions { flex-wrap: wrap; }
}

/* "Verify payment" stays green — it is the one admin action whose colour the
   customer's own receipt already echoes (APP_DESIGN §3.3). Bootstrap's success
   is the same forest the receipt's Paid chip is drawn in. */
.mc-desk .btn-success,
.mc-modal .btn-success {
  background: var(--mc-forest, #2f5d2a);
  border-color: var(--mc-forest, #2f5d2a);
  color: #fff;
}

/* --- Setup Open Play: one row, seven cells ------------------------------- */
/* SetupOpenPlay.dc.html's own grid. mc.css already lays .mc-weekrow out with
   `display: contents` inside .mc-weekrows, so the columns are set here and the
   note runs the full width under its row. */

.mc-weeksetup__panel .mc-weekrows {
  display: grid;
  grid-template-columns: 310px 120px 120px 96px 80px 104px 32px 24px;
  gap: 12px;
  align-items: center;
}

.mc-weeksetup__panel .mc-weekrow > * {
  min-width: 0;
}

.mc-weeksetup__panel .mc-weekrow__note {
  grid-column: 1 / -1;
  white-space: pre-line;
  margin-bottom: 8px;
}

/* The seven day chips and the court chips: 32px, condensed, so a row is one
   44px line on a desktop. */
.mc-chip--sm {
  height: 32px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  justify-content: center;
}

.mc-weekrow__days {
  gap: 4px;
  flex-wrap: nowrap;
}

.mc-weekrow__courts {
  gap: 6px;
}

/* Below the panel's own width the row gives up its grid and wraps, because
   eight columns of 12px gap is not a phone. */
@media (max-width: 991.98px) {
  .mc-weeksetup__panel .mc-weekrows {
    grid-template-columns: 1fr;
  }

  .mc-weeksetup__panel .mc-weekrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--mc-line, #e2e6ea);
  }

  .mc-weeksetup__panel .mc-weekrow--head {
    display: none;
  }
}

/* --- the register table -------------------------------------------------- */

.mc-session-scroll {
  max-height: 22rem;
  overflow-y: auto;
}

.mc-session-table td,
.mc-session-table th {
  vertical-align: middle;
}

/* `syncPanelWidth`: a panel with nothing in its right-hand column is one column
   and narrower. A booking being entered has nothing that settled it yet, and an
   empty 320px gutter beside the form reads as something that failed to load. */
.mc-desk__panel.is-narrow {
  max-width: min(100%, 560px);
  width: 560px;
}

.mc-desk__cols.is-narrow {
  grid-template-columns: 1fr;
}

/* The weekly rows are eight columns wide and the shared `is-wide` panel is not
   (60rem, and two thirds of the viewport above 992px). SetupOpenPlay.dc.html's
   own 1000px, so the ×, the tick and the Price all stand on the row. */
.mc-modal__panel.mc-weeksetup__panel {
  width: min(100%, 1000px);
  max-width: min(100%, 1000px);
}

/* --- the three simple forms (forms-v3/Closed.dc.html, CustomSale.dc.html,
   OpenPlaySetup.dc.html) ---------------------------------------------------

   The same column the customer's forms are drawn in, at the mockups' own 14px
   rhythm rather than the ticket's 12. */
.mc-desk__simple { gap: 14px; }

/* Slots and Price stand on one line, and the price takes what is left. */
.mc-desk__pair { display: flex; gap: 16px; align-items: flex-start; }

/* The counter's row under the board stands at one height: mc.css gives the
   primary 44 and Bootstrap gives the outlines their own. */
.mc-desk .mc-modal__actions .btn { min-height: 44px; }

/* --- the booking and closed-courts panels' foot (DeskBooking.dc.html) ------
   The row is the end of the list rather than a bar pinned over it, so it lives
   in the body and every button in it takes an equal share. */
.mc-desk__row { display: flex; gap: 12px; padding-top: 16px; }
.mc-desk__row > .btn { flex: 1; }
/* Delete stands under that row, not in it: it is the one thing here that cannot
   be taken back (DeskBooking.dc.html's 12px). */
.mc-desk__row + .btn { margin-top: 12px; }


/* ===========================================================================
   PORTED FROM re-serve app/reports.css — appended verbatim.
   ======================================================================== */

/* The facelift for the four report pages (Store, Metrics, Payouts, Traffic —
   APP_DESIGN §3.4, board 12). mc.css already draws almost all of this: the stat
   row as a rule rather than five cards, the flat table with its bold total row,
   the search/range bar, the traffic bar and chart classes are every one of them
   already in facelift.css or mc.css, verbatim from the Rails admin pages (they
   are the SAME pages this app is re-skinning, not new ones). The one thing
   nothing upstream repaints is the title, which mc.css draws uppercase and
   mahogany at 1.35rem — the report shell's own spec wants it Condensed 28,
   sentence case, ink (see mockups/ReportShell.dc.html's `.h2c`).

   Loaded by the four report pages only, exactly as about.css is loaded only by
   the About/Policies pages. */

.mc-storebar h1 {
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--mc-ink);
}

/* The line under a payment/purchase name in Metrics/Payouts — "2x Pickle ball" —
   in place of the Rails page's hover/tap tooltip (a fixed-position panel with
   its own placement math): the same information, always visible, no JS needed
   to read it. ponytail: a hover panel is a lot of positioning code for what is,
   read plainly, one more line of text under the name. */
.mc-txrow__what {
  display: block;
  font-size: 12px;
  color: var(--mc-muted);
}

/* The printed sheet Payouts' Export PDF stands in for on this app (jsPDF
   in-browser rather than the Rails page's window.print()) needs no CSS of its
   own — nothing here is ever put on screen for printing. mc.css's own
   `.mc-trafficchart` (min-height, margin) already fits the chart without
   anything added here. */

/* mc.css's own `.mc-metricsearch__range { width: auto }` and
   `.mc-trafficbar__select { width: auto }` are each a SINGLE class, the same
   specificity as Bootstrap's `.form-select { width: 100% }` — a tie the Rails
   app never has to break because its own stylesheet loads AFTER Bootstrap's
   there. Here it is the other way round (app/layout.tsx puts this app's
   stylesheets before the Bootstrap <link>, same load-order trap
   facelift.css's own `.btn.btn-primary` override already names), so the tie
   goes to whichever rule is LAST in the document — Bootstrap — and both
   selects stretch to the full width of their flex row instead of sizing to
   their text, which is what pushed every control after them onto its own
   line in Traffic's bar. `.mc-payoutbar .form-select` next to it in mc.css
   is already a compound selector and is not affected; these two are given
   the same one-step-stronger shape. */
.mc-metricsearch .form-select {
  width: auto;
}
.mc-trafficbar .form-select {
  width: auto;
}

/* The store cart as cards (Mahogany Courts Store board): two per row, a picture
   well on top, name, unit price and the stepper centered under it. mc.css's
   .mc-cartline__name/__unit and .mc-stepper are reused as they are; only the
   arrangement is new. */
.mc-cartgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mc-cartcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--mc-line);
  border-radius: 12px;
  background: #fff;
}
.mc-cartcard.is-chosen { border-color: var(--mc-brand); }
.mc-cartcard.is-chosen .mc-cartline__name { color: var(--mc-brand); }
.mc-cartcard__pic {
  align-self: stretch;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f4efe3;
  color: var(--mc-brand);
}
.mc-cartcard .mc-cartline__unit { margin-top: -6px; }
@media (max-width: 420px) {
  .mc-cartgrid { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   PORTED FROM re-serve app/settings.css — appended verbatim.
   ======================================================================== */

/* Admin · Settings (APP_DESIGN §3.5). mc.css already carries `.mc-settings`,
   `.mc-settings--two`, `.mc-settings__box/__fields/__field/__pair/__sub` verbatim
   from the Rails stylesheet — reused as-is. This file is only the facelift's
   three additions: day chips, the store-pricing sub-block's left line, and the
   sticky save footer (mockups/Settings.dc.html). */

/* --- operating days as chips, still real checkboxes underneath ------------ */
.rs-daychips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.rs-daychip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 44px;
  padding: 0 8px;
  border: 1px solid var(--mc-line);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: #fff;
  color: var(--mc-ink);
  cursor: pointer;
}
.rs-daychip.is-on {
  border-color: var(--mc-brand);
  background: rgba(123, 63, 33, 0.1);
  color: var(--mc-brand);
}
.rs-daychip:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* The input is a real checkbox — visually hidden, not display:none, so it
   stays in the tab order and keeps its own change events. */
.rs-daychip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- store pricing: indented under a 2px line, not another top rule ------- */
.rs-storeblock {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--mc-line);
}

/* --- narrower boxes for short answers (mockup's own widths) --------------- */
.rs-w120 { max-width: 120px; }
.rs-w150 { max-width: 150px; }

/* --- one refusal per field, under the box it refuses ----------------------- */
.rs-field-error {
  margin: 0.25rem 0 0;
  color: #b42318;
  font-size: 13px;
  line-height: 1.4;
}

/* Room under the last field for the sticky footer to be scrolled clear of —
   sticky still reserves its natural place in the flow, so without this the
   footer's stuck copy sits on top of whatever content has scrolled up to
   that same spot on screen (the same rule §7.5's phone sheet footer needs). */
#admin-settings .mc-settings--two {
  padding-bottom: 6rem;
}

/* --- Save pinned under the two boxes, in view at any scroll position ------- */
.rs-settings__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  padding-bottom: 4px;
  background: #fff;
  border-top: 1px solid var(--mc-line);
}
/* .mc-modal__actions' own margin-top is for sitting under a form body with no
   footer of its own; here the footer's padding already does that job. */
.rs-settings__footer .mc-modal__actions { margin-top: 0; }


/* ===========================================================================
   PORTED FROM re-serve app/about.css — appended verbatim.
   ======================================================================== */

/* About Us + Court Policies — the facelift layer for the two signage pages
   (APP_DESIGN §2.11–2.12). Values lifted from the mockups' own <style>
   (AboutUs.dc.html, CourtPolicies.dc.html); class names not already spoken
   for by mc.css get the "au-" prefix so nothing here collides with the
   calendar's own classes.

   Loaded ONLY by app/about-us/page.tsx and app/court-policies/page.tsx — not
   the root layout — so everything in this file is scoped, by fact of when it
   is on the page, to those two routes. That includes the nav underline near
   the foot of this file: it only lights up while standing on one of these two
   pages, which is what "the current-link underline for the two new routes"
   (T503) asks for and no more. */

/* --- the page ground ---------------------------------------------------- */

/* Parchment behind the whole page rather than the calendar's blurred aerial
   photo (APP_DESIGN §1.1: "Parchment ... About, Policies grounds — nowhere
   else"). `body`'s own background is set in mc.css and out of reach here, so
   this is a fixed layer painted over it instead: it never touches layout.tsx
   or mc.css, and z-index -1 keeps it under every real element while still
   sitting above the plain background paint. */
.au-ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #f4efe3;
}

/* --- the hero ------------------------------------------------------------- */

/* Full-bleed, 16:9, edge to edge under the nav — not the white-mat card
   .mc-about-frame draws for the old veil-panel layout. Capped so a very wide
   monitor does not turn seven photographs into a two-storey banner; the
   carousel's own object-fit: cover absorbs the crop. */
.au-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  overflow: hidden;
  background: #000;
}

/* mc.css's .mc-about-hero is built for a card with its own radius and a
   bottom gutter reserved for a controls strip that sat inside a dimmed panel.
   None of that panel exists on this page, so the hero is stretched to fill
   .au-hero exactly and the card chrome is switched off — three properties,
   which is cheaper than a hero built from nothing. */
.au-hero .mc-about-hero {
  position: absolute;
  inset: 0;
  border-radius: 0;
  padding-bottom: 0;
  min-height: 0;
}

/* mc.css keeps the controls to a 3.5rem strip along the bottom on a phone —
   room it reserved below the veil panel — and only lets them span the whole
   hero at its own 992px breakpoint (indented 36% there, to clear the panel's
   left column). Neither applies here: there is no panel at any width, and on
   a phone the plate sits bottom-left exactly where that reserved strip put
   the previous arrow, so the arrows are pinned to the hero's full height at
   every size, matching the mockup's own top: 50%. */
.au-hero .mc-about-hero__controls {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
}

/* The wordmark, on its own parchment plate over the hero's lower-left corner
   (APP_DESIGN §2.11). A sibling of the hero rather than something drawn
   inside .mc-about-hero__panel — that panel is the old veil and is not part
   of this layout. */
.au-plate {
  position: absolute;
  left: 40px;
  bottom: 40px;
  z-index: 2;
  background: #f4efe3;
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
}
.au-plate img {
  display: block;
  height: 72px;
}
@media (max-width: 639px) {
  .au-plate {
    left: 16px;
    bottom: 16px;
    padding: 10px 16px;
  }
  .au-plate img {
    height: 44px;
  }
}

/* --- shared shell + heading ------------------------------------------------ */

.au-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.au-h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mc-ink);
}

/* --- About Us: the parchment band ----------------------------------------- */

.au-band {
  background: #f4efe3;
  padding: 40px 40px 32px;
}
@media (max-width: 639px) {
  .au-band {
    padding: 28px 20px 24px;
  }
}

.au-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
}
@media (max-width: 767px) {
  .au-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.au-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--mc-ink);
}

.au-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.au-links li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.au-mark {
  flex: none;
  width: 24px;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  color: #2f5d2a; /* forest — the logo's paddles */
  font-style: normal;
}
.au-label {
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: var(--mc-muted);
  margin-bottom: 2px;
}
.au-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--mc-brand);
}
.au-links a:hover {
  color: #5f301a;
}

.au-rates-block {
  margin-top: 32px;
}
.au-rates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 600px;
  margin-top: 12px;
}
.au-rate {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
}
.au-rate__figure {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--mc-ink);
}
.au-rate__label {
  font-size: 13px;
  color: var(--mc-muted);
  margin-top: 2px;
}

.au-credit {
  margin-top: 24px;
  font-size: 13px;
  color: var(--mc-muted);
}
.au-credit a {
  color: var(--mc-brand);
}

/* --- Court Policies -------------------------------------------------------- */

.au-band--policies {
  padding: 32px 0;
}
/* The poster is a narrower sheet than the About page's band (APP_DESIGN §2.12:
   "full width, max 1100"), so this page's shell is trimmed from the shared
   1200 rather than adding a second shell class for one number. */
#court-policies-page .au-shell {
  max-width: 1100px;
}

.au-poster {
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
  margin-bottom: 28px;
}

.au-policies-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
}

/* Decision D3 (APP_DESIGN §2.12): poster + the same words as HTML beneath it —
   except the poster's own body copy is typo-ridden ("dusation", "lato
   arrival") and nobody has supplied clean wording, so the placeholder stands
   in of the real paragraphs rather than a transcription of the artwork's
   mistakes. Coloured to read as a flag, not as body text. */
.au-policies-placeholder {
  margin: 0 0 12px;
  font-size: 13px;
  color: #b42318;
}

.au-policies-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 639px) {
  .au-policies-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.au-policies-heading {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #2f5d2a; /* forest — the poster's own banner colour */
  border-bottom: 2px solid #2f5d2a;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.au-policies-item {
  font-size: 15px;
  font-weight: 500;
  padding-top: 4px;
  color: var(--mc-ink);
}

/* A floating way back, reachable without scrolling past a full-page poster —
   phone only (APP_DESIGN §2.12). Every other width already carries a Schedule
   link in the nav bar on every page. */
.au-back-pill {
  display: none;
}
@media (max-width: 639px) {
  .au-back-pill {
    display: inline-flex;
    align-items: center;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--mc-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.16);
  }
}

/* --- the nav's current-link underline (T503) ------------------------------- */

/* mc.css's .mc-navbar a.is-current only changes colour and weight; the
   mockup's own nav (AboutUs.dc.html, CourtPolicies.dc.html) also draws a
   2px mahogany rule under the pressed link. Reserving the same 2px on every
   link first is what stops the underline appearing from a standing start and
   nudging the row — same trick the mockup's own `border-bottom: 2px solid
   transparent` on the base link plays.
   Scoped to .mc-navbar__links (PublicNav's own wrapper) and not every
   .mc-navbar a, so a stray link elsewhere in the bar is never touched; the
   extra specificity step (see facelift.css's own note on load order) is
   what makes this win over mc.css's rule of otherwise equal weight. */
.mc-navbar .mc-navbar__links a {
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}
.mc-navbar .mc-navbar__links a.is-current {
  border-bottom-color: var(--mc-brand);
}