/* Coach Hub: the one stylesheet for every page.
 *
 * When adding a feature:
 *   - Use the tokens below for colours, type sizes, radii and shadows; don't hard-code them.
 *   - Reuse a component (.btn, .card, .input, .pick-list, .alert, .dropdown, dialog…) before adding one.
 *   - Styles only one page needs go under "Pages", in that page's block.
 *   - No <style> blocks or style="" attributes in the HTML.
 *   - Show and hide things with the hidden attribute, not display toggling or .show classes.
 *
 * Every page loads the Archivo font from Google Fonts in its <head>, then this file.
 */

/* ============================================================
   Tokens
   ============================================================ */

:root {
  color-scheme: light;

  /* Colours */
  --paper: #F4F3F8;       /* page background */
  --surface: #FFFFFF;     /* cards, bars, menus */
  --ink: #1F1B2E;         /* text */
  --muted: #625E78;       /* secondary text */
  --line: #DCD9E6;        /* borders, dividers */
  --violet: #5A3FD6;      /* brand, primary actions, current page */
  --violet-ink: #FFFFFF;  /* text on violet */
  --mint: #BDEBDC;        /* success, avatars, empty-state mark */
  --mint-ink: #12392C;    /* text on mint */
  --focus: #5A3FD6;
  --error: #B42318;
  --error-ink: #FFFFFF;   /* text on error */
  --positive: #1F7A55;    /* increases (decreases use --error) */
  --backdrop: rgb(15 12 25 / 0.45);

  /* One colour per subscribed studio, in order */
  --s1: #5A3FD6;
  --s2: #1F8A62;
  --s3: #C2410C;
  --s4: #0E7490;

  /* Tints for hover / selected states */
  --tint-hover: color-mix(in srgb, var(--violet) 8%, transparent);
  --tint-active: color-mix(in srgb, var(--violet) 12%, transparent);
  --tint-error: color-mix(in srgb, var(--error) 10%, transparent);

  /* Type */
  --font: "Archivo", system-ui, sans-serif;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 26px;

  /* Shape */
  --r-sm: 8px;    /* list rows, menu items, small chips */
  --r-md: 12px;   /* buttons, alerts */
  --r-lg: 14px;   /* cards, inputs, lists */
  --r-xl: 18px;   /* dialogs, large panels */
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.14);

  /* Layout */
  --page-max: 1120px;
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #15121F;
    --surface: #1E1A2C;
    --ink: #EEEAF7;
    --muted: #A7A2BD;
    --line: #322C47;
    --violet: #9B87FF;
    --violet-ink: #15121F;
    --mint: #234A3D;
    --mint-ink: #C9F2E3;
    --focus: #B9AAFF;
    --error: #FF8A80;
    --error-ink: #15121F;
    --positive: #5CD3A4;
    --backdrop: rgb(0 0 0 / 0.6);
    --s1: #9B87FF;
    --s2: #5CD3A4;
    --s3: #FB9A62;
    --s4: #5CC8E0;
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.45);
  }
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  font-variation-settings: "wdth" 100;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

h1 {
  margin: 0;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 0.98;
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.02em;
}
h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
p { margin: 0; }
a { color: var(--violet); }

/* Text */
.lede { margin-top: 12px; color: var(--muted); max-width: 34em; }
.muted { color: var(--muted); }
.hint { margin-top: 12px; color: var(--muted); font-size: var(--text-md); }
.error { color: var(--error); }
.tag { font-size: 12px; font-weight: 700; color: var(--error); }

/* Spacing helpers, for the odd gap between components */
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }

/* ============================================================
   Layout
   ============================================================ */

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 40px var(--gutter) 64px; }
.wrap-narrow { max-width: 640px; }
.wrap-auth {
  max-width: 480px; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
}

.page-head { margin-bottom: 36px; }
.section { margin-top: 48px; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.stack { display: grid; gap: 10px; }

/* ============================================================
   Components
   ============================================================ */

/* ---------- Top bar with the main menu ---------- */

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap;
}
.brand { font-weight: 800; font-variation-settings: "wdth" 112; text-decoration: none; color: var(--ink); }
.menu { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.menu a {
  display: block; padding: 8px 14px; border-radius: var(--r-md);
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: var(--text-md);
}
.menu a:hover { color: var(--ink); background: var(--tint-hover); }
.menu a[aria-current="page"] { color: var(--violet); background: var(--tint-active); }
.account { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: var(--text-sm); }
.account-name { color: var(--muted); }

@media (max-width: 520px) {
  .account-name { display: none; }
  .topbar-inner { gap: 12px; }
}

/* ---------- Buttons ----------
   .btn + one variant (.btn-primary, .btn-secondary, .btn-danger, .btn-ghost, .btn-ghost-danger)
   + optional size (.btn-small, .btn-icon) and .btn-block for full width.
   .btn-link is a text link that's a button. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-md); border: 2px solid transparent;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.25;
  font-variation-settings: "wdth" 108;
  text-decoration: none; cursor: pointer;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary { background: var(--violet); color: var(--violet-ink); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 600; }
.btn-secondary:hover:not(:disabled) { border-color: var(--muted); }

.btn-danger { background: var(--error); color: var(--error-ink); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost, .btn-ghost-danger { background: none; color: var(--muted); font-weight: 600; }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--tint-hover); }
.btn-ghost-danger:hover:not(:disabled) { color: var(--error); background: var(--tint-error); }

.btn-small { padding: 6px 12px; font-size: var(--text-sm); white-space: nowrap; }
.btn-icon { padding: 8px 12px; font-size: var(--text-md); }
.btn-block { width: 100%; }

.btn-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }

.btn-link {
  font: inherit; font-size: var(--text-md); color: var(--violet);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; border-radius: 4px;
}

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

.label { display: block; font-weight: 600; margin-bottom: 8px; }
.input {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
}
.input::placeholder { color: var(--muted); opacity: 0.8; }
.input:focus { outline: none; border-color: var(--focus); }
.input-lg { font-size: 22px; font-variation-settings: "wdth" 112; padding: 14px 16px; }

/* A form: fields stacked with even gaps */
.form { display: grid; gap: 16px; }
/* A label with something on the right, e.g. "Forgot password?" */
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.label-row .label { margin-bottom: 0; }

/* "or" between two ways of doing the same thing */
.divider {
  display: flex; align-items: center; gap: 12px; margin: 24px 0;
  color: var(--muted); font-size: var(--text-sm);
}
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---------- Cards ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.card-compact { padding: 14px 16px; }

/* ---------- Pick list: a scrollable list of choices (studios, instructors) ----------
   <ul class="pick-list"><li><button class="pick-item">
     [avatar] <span><span class="pick-name">…</span><span class="pick-meta">…</span></span>
   </button></li></ul> */

.pick-list {
  list-style: none; margin: 12px 0 0; padding: 0;
  max-height: 360px; overflow-y: auto;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line);
}
.pick-list:empty { display: none; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-item {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 14px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.pick-item:hover { background: var(--tint-hover); }
.pick-item:focus-visible { outline-offset: -3px; }
.pick-name { font-weight: 600; }
.pick-meta { display: block; font-size: var(--text-sm); color: var(--muted); }
/* While a choice loads: <ul class="pick-list" aria-busy="true">, the chosen
   <button class="pick-item" aria-busy="true"> gets a .spinner, the others fade */
.pick-item .spinner { margin-left: auto; }
.pick-item[aria-busy="true"] { background: var(--tint-active); cursor: progress; }
.pick-list[aria-busy="true"] .pick-item:not([aria-busy="true"]) { opacity: 0.5; cursor: progress; }
.pick-list[aria-busy="true"] .pick-item:hover:not([aria-busy="true"]) { background: none; }

/* ---------- Spinner: something is loading ---------- */

.spinner {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border: 2px solid var(--line); border-top-color: var(--violet); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---------- Avatar (photo or initials) ---------- */

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--mint); color: var(--mint-ink);
  display: grid; place-items: center; font-weight: 700; font-size: var(--text-md);
  object-fit: cover;
}
.avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg); }

/* ---------- Alerts ---------- */

.alert { padding: 12px 16px; border-radius: var(--r-md); font-size: var(--text-md); margin-bottom: 20px; }
.alert-success { background: var(--mint); color: var(--mint-ink); }
.alert-error { background: var(--error); color: var(--error-ink); }

/* ---------- Dropdown menu ----------
   <details class="dropdown"><summary class="btn …">Label</summary>
     <ul class="dropdown-menu"><li><a>Item <span class="dropdown-hint">…</span></a></li></ul>
   </details> */

.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::after { content: "▾"; font-size: 12px; }
.dropdown-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 10;
  min-width: max(100%, 240px);
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
}
.dropdown-menu a, .dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm); border: 0; background: none;
  font: inherit; font-size: var(--text-md); font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--tint-hover); }
.dropdown-menu a:focus-visible, .dropdown-menu button:focus-visible { outline-offset: -3px; }
.dropdown-hint { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--muted); }

/* A dropdown that holds text instead of a menu: <div class="dropdown-menu dropdown-panel"> */
.dropdown-panel {
  width: min(340px, calc(100vw - 40px)); padding: 14px 16px;
  font-size: var(--text-sm); line-height: 1.45;
}
.dropdown-panel h3 { font-size: var(--text-md); margin-bottom: 6px; }
.dropdown-panel ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.dropdown-panel p + p, .dropdown-panel ol + p { margin-top: 8px; }
.dropdown-panel .btn-link {
  display: inline; width: auto; padding: 0; border-radius: 4px;
  font-size: inherit; font-weight: 600; color: var(--violet); text-decoration: underline;
}
.dropdown-panel .btn-link:hover { background: none; }

/* ---------- Help "i" in a card's top right corner (built by /calendar.js) ----------
   <div class="card has-help">… <details class="dropdown help-tip">…</details></div>
   The panel opens below the card, as wide as the card, so it always fits on screen. */

.has-help { position: relative; }
/* Out of the card's layout and covering it, but letting clicks through; the "i" sits in the corner */
.help-tip { position: absolute; inset: 0; pointer-events: none; }
.help-tip > summary, .help-tip > .dropdown-panel { pointer-events: auto; }
.help-tip > summary {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid var(--muted); border-radius: 50%; color: var(--muted);
  font-size: var(--text-xs); font-weight: 700; line-height: 1; cursor: pointer;
}
.help-tip > summary::after { content: none; }
.help-tip > summary:hover, .help-tip[open] > summary { color: var(--violet); border-color: var(--violet); }
.help-tip > .dropdown-panel { left: -1px; right: -1px; width: auto; }

/* ---------- Dialog (use showModal()) ---------- */

dialog {
  width: min(440px, calc(100vw - 32px)); padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: var(--backdrop); }
dialog p { color: var(--muted); margin-top: 10px; }
dialog p.error { color: var(--error); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; flex-wrap: wrap; }

/* ---------- Empty state ---------- */

.empty {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 56px 24px; text-align: center; max-width: 560px; margin: 24px auto 0;
}
.empty-mark {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: var(--r-xl);
  background: var(--mint); color: var(--mint-ink);
  display: grid; place-items: center; font-size: 30px; font-weight: 800;
}
.empty h2 { font-size: var(--text-xl); font-variation-settings: "wdth" 115; }
.empty p { color: var(--muted); margin: 10px auto 24px; max-width: 30em; }

/* ---------- Footer ---------- */

.page-footer {
  margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--muted); text-align: center;
}

/* ============================================================
   Pages
   ============================================================ */

/* ---------- Overview: week schedule ---------- */

.week-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.week-nav { display: flex; gap: 8px; }

.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.day {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 10px; min-height: 180px;
}
.day.today { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
.day-label { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; font-size: var(--text-sm); }
.day-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.day-date { color: var(--muted); }
.day.today .day-name { color: var(--violet); }
.day-empty { color: var(--muted); font-size: var(--text-sm); opacity: 0.7; }

.classes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.class {
  border-left: 4px solid var(--studio, var(--s1));
  background: color-mix(in srgb, var(--studio, var(--s1)) 9%, transparent);
  border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--text-sm); line-height: 1.35;
}
.class a { color: inherit; text-decoration: none; display: block; }
.class a:hover .class-name { text-decoration: underline; }
.class-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.class-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.class-meta { display: block; color: var(--muted); font-size: var(--text-xs); }
.class.cancelled { opacity: 0.6; }
.class.cancelled .class-name { text-decoration: line-through; }

/* One calendar for all studios, under the week */
.calendar-cta { margin-top: 24px; display: grid; gap: 8px; justify-items: start; }
.calendar-cta > .muted { margin-bottom: 8px; }
.calendar-cta > .hint { margin-top: 8px; }
.calendar-cta.has-help > h2 { padding-right: 32px; } /* room for the help "i" */

@media (max-width: 860px) {
  .days { grid-template-columns: 1fr; gap: 8px; }
  .day { min-height: 0; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: start; }
  .day-label { flex-direction: column; gap: 0; margin: 0; }
}

/* ---------- Overview: stats ---------- */

.stats-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 10px;
}
.stats-card .studio-main { margin-bottom: 8px; }
.stats-hide { margin-left: auto; }
/* Studios whose stats are hidden, each with a "Show" button */
.stats-hidden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--text-md); }
.stats-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 8px 6px; text-align: right; vertical-align: top; }
.stats-table thead th {
  font-size: var(--text-xs); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.stats-table thead small { display: block; font-size: var(--text-xs); font-weight: 400; text-transform: none; letter-spacing: 0; }
.stats-table tbody th { text-align: left; padding-left: 0; font-size: var(--text-sm); font-weight: 600; }
.stats-table tbody tr > * { border-top: 1px solid var(--line); }
.stats-table td:last-child { padding-right: 0; }
.stat-value { display: block; font-weight: 700; }
.stat-change { display: block; font-size: var(--text-xs); color: var(--muted); }
.stat-change.up { color: var(--positive); }
.stat-change.down { color: var(--error); }

/* ---------- Overview: your studios ---------- */

.studio-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.studio-card { display: grid; gap: 12px; }
.studio-main { display: flex; align-items: center; gap: 12px; }
.has-help .studio-main { padding-right: 24px; } /* room for the help "i" */
.studio-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--studio, var(--s1)); flex: none; }
.studio-name { font-weight: 700; }
.studio-as { display: block; font-size: var(--text-sm); color: var(--muted); }
.studio-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- Studios: subscribe steps ---------- */

.step { margin-top: 36px; }
.step > .lede { margin: 8px 0 20px; }
.chosen-info { display: flex; align-items: center; gap: 16px; margin: 16px 0 24px; }
.chosen-info p { margin-top: 4px; color: var(--muted); font-size: var(--text-sm); }