/*
 * Friendly City Reformer site styles.
 * Colours and fonts follow fcreformer.com (cream, warm dark brown, sage and
 * terracotta; Fraunces for headings, Manrope for text). Change them here.
 */
:root {
  --cream: #f4efe6;
  /* Slightly darker than --cream: section heading bands on My Account. */
  --cream-deep: #e9e2d4;
  --paper: #fffdf8;
  --ink: #2b2724;
  --ink-soft: #554f49;
  --ink-muted: #655e57;
  --sage: #67755f;
  --terracotta: #c4744e;
  --line: rgba(43, 39, 36, 0.12);
  /* FYI messages (.fyi-message): light yellow, warm to sit with the cream background. */
  --fyi-bg: #fbf1d3;
  --fyi-border: #e8d49a;
  --fyi-text: var(--ink);
  /* Warning messages (.warning-message): pink with a red border, for bad news. */
  --warning-bg: #fbe7e4;
  --warning-border: #c9574a;
  --warning-text: #5c1f17;
  --radius: 14px;
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Manrope", Arial, sans-serif;
  --bar-height: 64px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: var(--bar-height); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.4em;
}

/* --- Sticky top bar ---------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--bar-height);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: block;
  text-decoration: none;
}

.logo img {
  display: block;
  height: 44px;
  width: auto;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.topbar__link {
  text-decoration: none;
  letter-spacing: 0.04em;
}

.topbar__link:hover { color: var(--terracotta); }

.topbar__actions form { margin: 0; }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.link-button:hover { color: var(--terracotta); }
/* "Forgot your password? Send a login link ..." under the Log in button. */
.login-link-help { margin-top: 12px; }
/* A link-button inside a sentence (e.g. "Reset it" on Change password). */
.link-button.inline-link { text-decoration: underline; letter-spacing: normal; font-weight: 600; }

/* --- Page body ----------------------------------------------------------- */

.heading-hr{
  width: 100%;
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 16px 64px;
}

.hero { text-align: center; padding-top: 24px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.hero h1 { font-size: clamp(32px, 7vw, 48px); }

.lead {
  margin: 0 auto 32px;
  max-width: 34em;
  color: var(--ink-soft);
}

.button {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
}

.button:hover { background: var(--terracotta); border-color: var(--terracotta); }

.button:focus-visible,
.topbar__link:focus-visible,
.logo:focus-visible,
.link-button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}

section.with_border {
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 20px;
}

.note { font-size: 14px; color: var(--ink-muted); }
/* Studio credit under My packages: the palette's green text, same as status--done. */
.note.studio-credit { font-weight: 600; color: var(--sage); }

/* --- Forms ------------------------------------------------------------- */

.form p { margin: 0 0 16px; }

.form label {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}

.form input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }

.errorlist {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: #a2412b;
  font-size: 14px;
}

/* --- Create account ------------------------------------------------------ */

.form-row { display: grid; gap: 0 16px; }

@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.choice-group {
  margin: 8px 0 20px;
  padding: 14px 16px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
}

.choice-group legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 14px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 400;
  cursor: pointer;
}

.choice input { accent-color: var(--terracotta); width: 18px; height: 18px; margin: 0; }

/* Inside a form, ".form label" would make choices plain blocks; keep the radio
   button in its own column so wrapped text (and any note under the label)
   lines up with the first line of the label, not under the button. */
.form .choice { display: flex; align-items: flex-start; font-size: 15px; font-weight: 400; }
.form .choice input { flex: none; margin-top: 2px; }
.form .choice > span { flex: 1; min-width: 0; }

.form-errors .errorlist { margin-bottom: 16px; }

/* --- Messages ------------------------------------------------------------ */

.messages { margin-bottom: 24px; }

.message {
  margin: 0;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
}

.help { display: block; padding-top: 10px; font-size: 13px; color: var(--ink-muted); }

.message--error { border-left-color: #a2412b; }

/* --- Confirm email and mobile -------------------------------------------- */

.confirm-step { padding: 18px 0; border-top: 1px solid var(--line); }
.confirm-step h2 { font-size: 20px; }
.status--done { margin: 0; font-weight: 600; color: var(--sage); }
.inline-form { margin: 8px 0 0; }

/* --- Section tabs (inside the sticky header) ------------------------------ */

.topbar { height: auto; }
.topbar__inner { height: var(--bar-height); }
html { scroll-padding-top: calc(var(--bar-height) + 48px); }

.tabs { border-top: 1px solid var(--line); }

/* Tabs that don't fit wrap onto another line (staff have more tabs); each tab stays whole. */
.tabs__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

.tab {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}

.tab:hover { color: var(--terracotta); }
.tab--active { color: var(--ink); border-bottom-color: var(--terracotta); }
.tab:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* Staff Area menu: a tab that opens a small list of links (a <details> element). */
.tab-menu { position: relative; }
.tab-menu__toggle { display: block; cursor: pointer; list-style: none; }
.tab-menu__toggle::-webkit-details-marker { display: none; }
.tab-menu[open] > .tab-menu__toggle { color: var(--ink); }
.tab-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 200px;
  padding: 6px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(43, 39, 36, 0.12);
}
.tab-menu__link {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-soft);
}
.tab-menu__link:hover { color: var(--terracotta); }
.tab-menu__link--active { color: var(--ink); }
.tab-menu__link:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }

@media (max-width: 600px) {
  .tabs__inner { column-gap: 18px; }
  .tab { padding: 8px 0; }
  /* Room for a second row of tabs under the sticky header. */
  html { scroll-padding-top: calc(var(--bar-height) + 80px); }
}

/* --- Home ------------------------------------------------------------------ */

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.button--outline { background: transparent; color: var(--ink); }
.button--outline:hover { color: var(--cream); }

/* --- Schedule -------------------------------------------------------------- */

.schedule h1 { font-size: clamp(30px, 6vw, 40px); }

.week-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 24px 0 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.week-nav__label { margin: 0; font-size: 18px; text-align: center; }
.week-nav__link { font-size: 14px; font-weight: 600; text-decoration: none; }
.week-nav__link:last-child { text-align: right; }
.week-nav__link:hover { color: var(--terracotta); }

.day { padding: 20px 0 8px; }

.day__name {
  margin: 0 0 10px;
  font-size: 13px;
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}

.day__date { color: var(--ink-muted); font-weight: 600; letter-spacing: 0.06em; }
.day__empty { margin: 0; font-size: 14px; color: var(--ink-muted); }

.class-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

.class-row:hover { border-color: var(--terracotta); }
.class-row:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.class-row--full { opacity: 0.7; }

.class-row__time { font-weight: 700; font-size: 15px; }
.class-row__main { display: flex; flex-direction: column; min-width: 0; }
.class-row__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; }
.class-row__meta { font-size: 13px; color: var(--ink-muted); }
.class-row__status { font-size: 13px; color: var(--ink-soft); text-align: right; }

/* My Clients list: name left, last-class date right on one line; the date wraps under the name on narrow screens */
.class-row__main--inline { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px; }

@media (max-width: 480px) {
  .class-row { grid-template-columns: 1fr auto; }
  .class-row__time { grid-column: 1 / -1; font-size: 14px; }
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge--full { background: var(--ink); color: var(--cream); }
.badge--booked { background: var(--sage); color: #fff; }

.cta { margin-top: 32px; text-align: center; }
.cta h2 { font-size: 24px; }

.back-link { margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.back-link a { text-decoration: none; }
.back-link a:hover { color: var(--terracotta); }

/* --- Class details (class page and dialog) ---------------------------------- */

.class-details h2 { font-size: 28px; }
.class-details__when { margin: 0; font-weight: 600; }
.class-details__with { margin: 0 0 12px; color: var(--ink-soft); }
.class-details__status { margin: 0 0 16px; font-size: 15px; }
.class-details__description { color: var(--ink-soft); }

/* Managers: trainer dropdown + Change trainer in the class details. */
.trainer-change { margin: 8px 0 16px; }
.trainer-change label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.trainer-change__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.trainer-change select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  max-width: 100%;
}
.button--small { padding: 8px 16px; font-size: 14px; }

.class-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.class-dialog [data-dialog-body] { padding: 28px 24px 20px; }
.class-dialog::backdrop { background: rgba(43, 39, 36, 0.45); }

.class-dialog__close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 28px;
  line-height: 1;
}

.tab--soon { color: var(--ink-muted); opacity: 0.6; cursor: default; }
.tab--soon:hover { color: var(--ink-muted); }

/* --- Pricing and checkout ------------------------------------------------- */

.package-list { display: grid; gap: 16px; margin-top: 20px; }
.package__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.package__title { font-size: 22px; margin: 0; }
.package__price { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; white-space: nowrap; }
.package__per { font-size: 15px; color: var(--ink-muted); }
.package__description { margin: 8px 0 0; color: var(--ink-soft); }
.package__lines { margin: 12px 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }

.checkout h1 { font-size: 28px; }
.checkout__amount { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.checkout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

.test-banner {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f6e3b4;
  color: #5a4300;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.test-note { margin-top: 16px; }
/* The "See packages & pricing" text link (schedule page and My Account look the same). */
.pricing-link { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.pricing-link a:hover { color: var(--terracotta); }

/* --- TEST label (debug mode or test payments/texts/email) ------------------ */

.topbar__brand { display: flex; align-items: center; gap: 12px; }
.test-flag {
  color: #c0182b;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  border: 2px solid #c0182b;
  border-radius: 6px;
  padding: 1px 8px;
}

.class-row__level { font-size: 12px; font-weight: 600; color: var(--sage); }
.class-details__level { margin: 0 0 12px; }

.gift-card .package__description { margin-bottom: 12px; }
.gift-amount { display: flex; align-items: center; gap: 6px; width: 50%; }
.gift-amount input { flex: 1; min-width: 0; }
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  resize: vertical;
}
.package__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.package__buy .package__problem { margin: 0; flex: 1 1 220px; }
.button:disabled,
.button:disabled:hover { background: transparent; color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }

/* --- Sign up / cancel and the waiver ----------------------------------------- */

.class-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 16px; }
.class-actions form { margin: 0; }
.class-actions .note,
.class-actions .message { margin: 0; flex: 1 1 100%; }

.waiver h1 { font-size: 28px; }
.waiver__text {
  max-height: 320px;
  overflow-y: auto;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  font-size: 15px;
}
.waiver__text p:first-child { margin-top: 0; }


/* --- FYI messages --------------------------------------------------------------
 * Information for the client about this particular page or situation
 * ("Some classes this week need experience first..."), as opposed to ordinary
 * descriptive text. Colors are the
 * --fyi-* variables at the top of this file.
 */
.fyi-message {
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: var(--fyi-bg);
  color: var(--fyi-text);
  border: 1px solid var(--fyi-border);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
}

/* --- Success and error banners at the top of the page ---------------------------
 * The messages shown after an action ("You're booked: ...", "Your card was
 * declined."). Good news banners ("message--good-news") look and move exactly like
 * success banners. They slide in, then success banners glow twice in sage and
 * error banners give a short shake, so they're hard to miss. People who've
 * asked their device for reduced motion just see them appear.
 */
.messages .message--success,
.messages .message--good-news { background: #eef2ea; }
.messages .message--error { background: #f8e8e3; }

.messages .message {
  animation: banner-in 0.35s ease-out both, banner-glow 1.1s ease-out 0.35s 2;
}
.messages .message--error {
  animation: banner-in 0.35s ease-out both, banner-shake 0.45s ease-in-out 0.35s 1;
}

@keyframes banner-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes banner-glow {
  0% { box-shadow: 0 0 0 0 rgba(103, 117, 95, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(103, 117, 95, 0); }
}
@keyframes banner-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .messages .message { animation: none; }
}

/* --- "Are you sure you want to cancel?" ------------------------------------------ */

.cancel-confirm { flex: 1 1 100%; }
.cancel-confirm[hidden] { display: none; }
.cancel-confirm__question { margin: 0 0 8px; font-weight: 700; font-size: 17px; }
.cancel-confirm__buttons { display: flex; gap: 12px; align-items: center; padding-top: 10px;}
.cancel-confirm__buttons form { margin: 0; }
.cancel-confirm__title { font-size: 28px; }
[hidden] { display: none !important; } /* e.g. a .button hidden by script */


/* --- Warning messages ---------------------------------------------------------
 * Something bad will happen or has happened (e.g. "If you cancel now, you will
 * lose a class from your package."). Same shape as FYI messages, pink with a
 * red border.
 * Colors are the --warning-* variables at the top of this file.
 */
.warning-message {
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
}
ul.warning-message {
  padding-left: 30px;
}

.class-actions .fyi-message,
.class-actions .warning-message { margin: 0; flex: 1 1 100%; }

/* --- My Classes ------------------------------------------------------------------ */

.my-classes h1 { font-size: clamp(30px, 6vw, 40px); }
.my-classes__heading {
  margin: 28px 0 12px;
  font-size: 13px;
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.my-classes__more { font-size: 14px; font-weight: 600; }
.my-classes .class-row__time { font-size: 14px; line-height: 1.35; }
.badge--attended { background: transparent; color: var(--sage); border: 1px solid var(--sage); }
.badge--noshow { background: transparent; color: var(--terracotta); border: 1px solid var(--terracotta); }

/* --- My Account ------------------------------------------------------------------ */

.my-account h1 { font-size: clamp(30px, 6vw, 40px); }
.my-account__heading {
  /* Full-width band across the top of its section (cancels the section's padding). */
  margin: -12px -12px 12px;
  padding: 10px 12px;
  border-radius: 13px 13px 0 0;
  background: var(--cream-deep);
  font-size: 16px;
  font-family: var(--font-text);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.package-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.package-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.package-row__name { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; }
.package-row__meta { font-size: 13px; color: var(--ink-muted); }
.package-row__cancel { font-size: 14px; font-weight: 600; color: var(--terracotta); }

/* Cancelling a package */
.package-cancel__classes { margin: 4px 0 16px; padding-left: 20px; }
.package-cancel__classes li { margin-bottom: 4px; }
.warning-message .package-cancel__classes { margin-bottom: 0; }
.warning-message p { margin: 0 0 4px; }

/* Checkout: a note under a payment choice, and the check and cash prices (paid at
   the studio, not online) listed with bullets inside the same box. */
.choice__note { display: block; margin: 2px 0 10px; font-size: 13px; color: var(--ink-muted); }
/* Label text starts 28px in: the radio button (18px) plus its gap (10px). The list
   keeps its usual bullet indent (22px) and each item adds the last 6px, so the
   bullets stay put and their text lines up with the radio labels above. */
.in-person-prices { margin: 4px 0 6px; padding-left: 22px; font-size: 15px; }
.in-person-prices li { margin-bottom: 6px; padding-left: 6px; }
/* One price for every method: it shows beside the selected choice only (checkout.html). */
.choice-group--one-price input:not(:checked) ~ span .choice__price { display: none; }
/* Same 28px start as the labels and the Check / Cash text, on every line. (".form p"
   sets paragraph margins in forms, hence the extra ".form" here.) */
.form .in-person-prices__contact { margin: 0 0 10px; padding-left: 28px; font-size: 13px; color: var(--ink-muted); }

/* --- Staff: rosters and check-in ------------------------------------------------ */

.staff h1 { font-size: clamp(28px, 6vw, 38px); }
.roster-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.roster-row--attended { border-color: var(--sage); }
.roster-row__main { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.roster-row__name { font-weight: 700; font-size: 17px; }
.roster-row__meta { font-size: 13px; color: var(--ink-muted); }
.roster-row__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roster-row__actions form { margin: 0; }
.roster-row__actions .button { min-height: 44px; }   /* easy to tap on a phone */
.badge--first { background: var(--fyi-bg); color: var(--ink); border: 1px solid var(--fyi-border); }
.roster__finish { margin-top: 20px; }
.roster__late { color: var(--ink-muted); padding-left: 20px; }

/* Roster: adding a walk-in */
.walk-in { margin-top: 24px; }
.walk-in__search { display: flex; gap: 8px; margin-bottom: 12px; }
.walk-in__search input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.walk-in .roster-row__actions form { display: flex; gap: 8px; }

/* Viewing the site as someone: the whole top bar changes so it can't be missed.
   The picture is a local copy (static/img/view-as-bg.png), never loaded from the
   internet; until it's there, bold dark stripes show instead. */
.topbar--viewing-as {
  background-color: #1b1b1b;
  background-image: url("../img/view-as-bg.png"),
    repeating-linear-gradient(135deg, #2a2a2a 0 18px, #7a1f1f 18px 36px);
  background-size: cover, auto;
  background-position: center;
}
.topbar--viewing-as .topbar__brand { flex-wrap: wrap; min-width: 0; }
.viewing-as-label {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  overflow-wrap: anywhere;
}
.topbar--viewing-as .viewing-as-stop,
.topbar--viewing-as .topbar__link {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
}

/* My Account: profile and message summaries, payments, receipts */
.account-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 10px; }
.account-details dt { font-weight: 700; font-size: 14px; }
.account-details .founder-number, .account-details .founder-number-label { font-weight: 700; color: var(--sage); font-size: 22px; }
.account-details dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.account-links { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.account-links a:hover { color: var(--terracotta); }
.payment-amount { font-weight: 700; white-space: nowrap; }
.payment-amount--refund { color: var(--sage); }
@media print {
  .topbar, .no-print, .messages { display: none !important; }
  .receipt { border: none; box-shadow: none; }
}

/* Balance owed: My Account box and the staff Balances owed page */
.balance-owed { margin-bottom: 16px; }
.balance-owed form { margin-top: 8px; }
.balance-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
  padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line, #e3dccf); border-radius: 12px; }
/* One bordered box per client: their row, then a line for each charge with its own Waive form. */
.balance-card { margin-bottom: 8px; border: 1px solid var(--line, #e3dccf); border-radius: 12px; }
.balance-card .balance-row { margin: 0; border: 0; border-radius: 0; }
.balance-card .balance-row--charge { border-top: 1px solid var(--line, #e3dccf); padding-left: 28px; }
.balance-row__main { display: flex; flex-direction: column; min-width: 0; }
.balance-row__amount { font-size: 18px; }
.balance-row__form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.balance-row__form[hidden] { display: none; }
.revoke { margin-top: 8px; }  /* Give credit: Revoke sits under the credit's text, with room for its question */
.balance-row__form input[name="note"] { flex: 1 1 160px; min-width: 0; }
.money-field { display: inline-flex; align-items: center; gap: 4px; }
.money-field[hidden] { display: none; }
.balance-row__form input.reason-half { flex: 0 1 50%; width: 50%; min-width: 0; }

/* Trainers: the public list (.trainer-grid) and each bio page (.trainer-bio). */
.trainer-grid { list-style: none; padding: 0; margin: 24px 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; }
.trainer-card { display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); text-align: center; }
.trainer-card__name { font-weight: 600; }
.trainer-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; }
.trainer-photo--blank { display: flex; align-items: center; justify-content: center;
  background: var(--sage); color: var(--paper); font-family: "Fraunces", serif; font-size: 40px; }
.trainer-bio { max-width: 640px; margin: 0 auto; }
.trainer-bio .trainer-photo { width: 220px; height: 220px; margin: 16px auto; }
.trainer-bio__text { line-height: 1.6; }

/* --- Public check-in iPad (bookings/kiosk.py) --------------------------- */

/* The invisible 50px square in the top-right corner that leads to the password page. */
.topbar--kiosk .kiosk-exit {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.roster--kiosk .roster-row__name { font-size: 22px; }
.roster--kiosk .roster-row .button { min-height: 56px; min-width: 140px; font-size: 20px; }
.roster-row__hint { font-size: 14px; font-weight: 500; opacity: 0.7; margin-left: 8px; }
.kiosk-choice { display: block; margin: 12px 0; min-height: 64px; font-size: 22px; text-align: center; }
.kiosk-exit-page .stacked-form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; }

/* --- Staff schedule grid (/<location>/staff/schedule/) ----------------------- */

/* Wider than the normal page column; on a phone it scrolls sideways (landscape reads best). */
.staff-schedule { max-width: none; }
.week-grid__scroll {
  overflow: auto;
  /* Scrolls inside its own box both ways, so the day names (top) and hours (left) can stay pinned. */
  max-height: calc(100vh - var(--bar-height) - 150px);
  min-height: 360px;
}

.week-grid__corner, .week-grid__dayname, .week-grid__hours { position: sticky; background-color: var(--cream); }
.week-grid__corner { top: 0; left: 0; z-index: 4; }
.week-grid__dayname { top: 0; z-index: 3; }
.week-grid__hours { left: 0; z-index: 2; }
.week-grid__day { position: relative; z-index: 1; }

.week-grid {
  --hour-px: 72px;
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(110px, 1fr));
  min-width: 860px;
}

.week-grid__dayname {
  padding: 8px 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.week-grid__dayname span { color: var(--ink-muted); font-weight: 600; }
.week-grid__dayname--today { color: var(--terracotta); }

.week-grid__hours, .week-grid__day {
  position: relative;
  height: calc(var(--minutes) / 60 * var(--hour-px));
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% var(--hour-px);
}

.week-grid__hours { position: sticky; }
.week-grid__day { border-left: 1px solid var(--line); }
.week-grid__day--today { background-color: rgba(196, 116, 78, 0.07); }
.week-grid__hour { height: var(--hour-px); padding: 2px 6px 0 0; text-align: right; font-size: 12px; color: var(--ink-muted); }

.week-class {
  position: absolute;
  top: calc(var(--top) / 60 * var(--hour-px));
  height: calc(var(--length) / 60 * var(--hour-px) - 2px);
  left: calc(var(--lane) / var(--lanes) * 100% + 1px);
  width: calc(100% / var(--lanes) - 2px);
  overflow: hidden;
  padding: 3px 6px;
  color: #000;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  background: rgba(var(--rgb), var(--alpha));
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.week-grid__day--addable { cursor: pointer; }
.week-grid__day--addable:hover { background-color: rgba(196, 116, 78, 0.10); }
.week-class { cursor: pointer; }
.week-class:hover { border-color: #000; }
.week-class:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
.week-class__top { display: flex; justify-content: space-between; gap: 6px; }
.week-class__name { font-weight: 700; }
.week-class__seats { white-space: nowrap; }
.week-class__trainer { display: block; }

.adhoc-form { display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.adhoc-form label { font-size: 14px; font-weight: 600; margin-top: 6px; }
.adhoc-form .button { margin-top: 14px; align-self: flex-start; }
.adhoc-form .checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }

/* --- Issues List / balances overdue ------------------------------------------------ */
.overdue-flag { color: #c0261b; font-weight: 800; }
.issues-banner { margin-top: 0; }

/* Accept payment: Check / Card choice and the gift account search (static/js/accept-payment.js). */
.pay-form { flex-wrap: wrap; align-items: center; gap: .5rem; }
.pay-form__choice { display: flex; flex-direction: column; gap: .25rem; }
/* The Check / Card details always sit on their own line below the method and amount. Inside the card
   details the gift search box, Search and Pay now share one line. */
.pay-form__check, .pay-form__card { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pay-form__gift { flex-basis: 100%; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.pay-form__gift textarea { width: 100%; max-width: 30rem; }
.button--pay { background: var(--sage); border-color: var(--sage); color: #fff; }
.button--pay:hover { background: #55634e; border-color: #55634e; color: #fff; }
.pay-form [hidden] { display: none; }

/* --- Merchandise (payments/merchandise_views.py) ------------------------- */
.product-picture { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; margin: 12px 0; object-fit: contain; }
.month-nav { display: flex; gap: 16px; align-items: center; }
.table-scroll { overflow-x: auto; }
.sales-table { border-collapse: collapse; width: 100%; font-size: 15px; }
.sales-table th, .sales-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #e3dccf); white-space: nowrap; }

/* Roster: a client's physical-conditions note; underlined when it opens more details */
.roster-row__physical { color: var(--ink); }
.roster-row__physical-link { font: inherit; padding: 0; text-decoration: underline; text-align: left; cursor: pointer; }
.physical { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; }
.physical textarea { width: 100%; }

/* My Clients: a client's page (facts, notes). */
.client-page__facts dt { font-weight: 600; margin-top: 12px; }
.client-page__facts dd { margin: 2px 0 0; }
.client-note { border-top: 1px solid var(--line); padding: 12px 0; }
.client-note__author { font-weight: 600; margin: 0; }
.client-note__when { margin: 0 0 6px; }
.client-note__text { white-space: normal; }
.client-note-add { margin-top: 16px; }
.client-note-add summary { display: inline-block; cursor: pointer; }
.client-note-add form { margin-top: 12px; }

/* --- Pre-launch home page: Founding 40 (templates/core/_founding.html) ---- */
.founding { max-width: 640px; margin: 0 auto; }
.founding__price { font-size: 22px; font-weight: 700; }
.founding__block { text-align: left; margin: 24px 0; }
.founding__block li { margin: 8px 0; }
.founding__terms { font-size: 13px; color: var(--ink-muted); text-align: left; }

/* --- Footer links and the Terms / Privacy pages ------------------------- */

.site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0px 24px; padding: 0 16px 40px; font-size: 14px; }
.site-footer__closing { flex-basis: 100%; text-align: center; color: var(--ink-muted); margin: 0 0 8px; }
.site-footer a { color: inherit; opacity: 0.75; }
.legal h2 { margin-top: 28px; font-size: 18px; }
.legal ul { padding-left: 22px; }