/* SHE-com Scheduler, styled to the SHE-com 2.0 visual design system:
   Poppins only; off-white page, flat colour sections, navy dominant and peach
   as the accent; sharp 2px corners on every button, toggle, input, card and
   note; eyebrow > headline (peach italic accent) > sub-copy > content.
   Mobile first; every public page works at 375px wide. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,700;1,800&display=swap");

:root {
  color-scheme: light;
  --navy: #20304C;
  --navy-hover: #2a3f63;
  --peach: #F0B39D;
  --peach-hover: #e5a48e;
  --soft-peach: #FCD8C2;
  --light-peach: #FEF0E9;
  --nude: #F9EFE7;
  --off-white: #FAFAF8;
  --white: #FFFFFF;
  --muted: #4A5568;
  --line: rgba(32, 48, 76, 0.14);
  /* Functional states (kept readable; not brand accents) */
  --success: #22714c;
  --success-soft: #e7f5ee;
  --warning: #8a5405;
  --warning-soft: #fdf0e3;
  --danger: #a33a2b;
  --danger-soft: #fbe9e6;
  --radius: 2px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--off-white);
  color: var(--navy);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  padding: 0 0 calc(40px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 760px; margin: 0 auto; display: grid; gap: 16px; min-width: 0;
  padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px));
}
.wrap.wide { max-width: 1100px; }
/* A wrap inside a wrap always fills its parent. With auto side margins a grid
   item shrinks to its content, so an empty admin view collapsed to the width
   of its filter form. */
.wrap .wrap { padding: 0; margin: 0; width: 100%; max-width: none; }

/* Anything that can carry a long unbroken string (names, emails, links)
   wraps inside its box instead of forcing the page wider. Table cells are
   left out on purpose: .table-scroll already gives those an intentional,
   contained horizontal scroll, and forcing mid-word breaks there just makes
   dense admin tables harder to read. */
h1, h2, h3, p, a, .small, .muted, .sub, .pill, .note, label, .eyebrow {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ----- Header: flat navy block with the peach logo ----- */
.hero {
  background: var(--navy); color: var(--white); margin-bottom: 8px;
  padding-top: env(safe-area-inset-top, 0px);
}
.hero-inner {
  max-width: 760px; margin: 0 auto; display: grid; gap: 14px;
  padding: 24px max(16px, env(safe-area-inset-left, 0px)) 36px max(16px, env(safe-area-inset-right, 0px));
}
.wrap.wide + .hero-inner, .hero.wide .hero-inner { max-width: 1100px; }
.hero .logo { height: 22px; width: auto; display: block; margin-bottom: 18px; }
.hero h1 { color: var(--white); }
.hero .sub { color: rgba(255, 255, 255, 0.78); }
.hero .meta { color: rgba(255, 255, 255, 0.85); }

/* ----- Type ----- */
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--peach);
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--peach); flex: none; }
h1, h2, h3 { margin: 0; color: var(--navy); text-wrap: balance; }
h1 { font-size: clamp(32px, 8vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; }
h2 { font-size: clamp(24px, 5.5vw, 32px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
h1 em, h2 em { font-style: italic; color: var(--peach); font-weight: 800; }
p { margin: 0; max-width: 62ch; }
.sub { color: var(--muted); max-width: 56ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
strong, b { font-weight: 700; }
a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--peach); text-decoration-thickness: 2px; }
.hero a { color: var(--white); }
:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }
.card :focus-visible, form :focus-visible { outline-color: var(--navy); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }

/* ----- Cards and section structure ----- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; display: grid; gap: 14px; min-width: 0; }
.card.navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.card.navy h1, .card.navy h2, .card.navy h3 { color: var(--white); }
.card.navy .muted, .card.navy .sub { color: rgba(255, 255, 255, 0.78); }
.card.tint { background: var(--light-peach); border-color: var(--light-peach); }
.head { display: grid; gap: 10px; min-width: 0; }
/* A grid or flex item is sized to fit its content by default (min-width:
   auto), so 1 long child (a button row, a nav, a name) can quietly push the
   whole card, and the page, wider than the screen. Every grid/flex item
   under .wrap or .card resets that so wrapping and truncation can work. */
.wrap > *, .card > *, .row > * { min-width: 0; }
nav.tabs { min-width: 0; }

/* ----- Buttons: sharp, ALL CAPS, 700, 0.10em ----- */
.btn, button {
  font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; line-height: 1.2;
  cursor: pointer; border-radius: var(--radius); padding: 14px 24px; min-height: 46px;
  border: 2px solid var(--navy); background: var(--navy); color: var(--white);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover, button:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.btn.peach, button.peach { background: var(--peach); border-color: var(--peach); color: var(--navy); }
.btn.peach:hover, button.peach:hover { background: var(--peach-hover); border-color: var(--peach-hover); }
.btn.secondary, button.secondary { background: transparent; color: var(--navy); }
.btn.secondary:hover, button.secondary:hover { background: var(--navy); color: var(--white); }
.hero .btn.secondary { color: var(--white); border-color: var(--white); }
.btn.small, button.small { padding: 10px 14px; min-height: 44px; font-size: 11px; }
button.link { background: none; border: 0; color: var(--navy); padding: 6px 0; min-height: 44px; text-decoration: underline; text-decoration-color: var(--peach); text-underline-offset: 3px; display: inline-flex; align-items: center; }
button:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ----- Forms ----- */
form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
label .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--navy); background: var(--white);
  border: 1.5px solid rgba(32, 48, 76, 0.28); border-radius: var(--radius); padding: 11px 12px; width: 100%; min-height: 46px;
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
textarea { min-height: 100px; resize: vertical; }
input[readonly] { background: var(--light-peach); }
label .hint.err { color: var(--danger); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.checkbox { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; min-height: 44px; padding: 4px 0; }
.checkbox input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--navy); }

/* ----- Notes (callouts) and status pills, all 2px ----- */
.note { background: var(--soft-peach); color: var(--navy); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; }
.note.ok { background: var(--success-soft); color: var(--success); }
.note.warn { background: var(--warning-soft); color: var(--warning); }
.note.err { background: var(--danger-soft); color: var(--danger); }
.note a { color: inherit; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius); white-space: nowrap; background: var(--soft-peach); color: var(--navy); }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.err { background: var(--danger-soft); color: var(--danger); }
.hidden { display: none !important; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--soft-peach); border-top-color: var(--navy); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 1 soft peach celebration on a confirmation screen (PRODUCT-UI-PRINCIPLES
   section 2). prefers-reduced-motion already turns every animation off, below. */
@keyframes celebrate-glow {
  0% { box-shadow: 0 0 0 0 rgba(240, 179, 157, 0.9); }
  60% { box-shadow: 0 0 0 18px rgba(240, 179, 157, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 179, 157, 0); }
}
.card.celebrate { animation: celebrate-glow 0.9s ease-out; }

/* A skeleton shaped like the content it stands in for (section 1), never a
   lone spinner, for anything slower than 300ms. */
.skeleton { background: linear-gradient(90deg, var(--light-peach) 25%, var(--soft-peach) 37%, var(--light-peach) 63%); background-size: 400% 100%; border-radius: var(--radius); animation: skeleton-shimmer 1.4s ease infinite; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton.line { height: 14px; margin: 4px 0; }
.skeleton.line.w60 { width: 60%; }
.skeleton.line.w40 { width: 40%; }
.skeleton.block { height: 46px; }

/* ----- Month calendar ----- */
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cal-head h3 { font-size: 18px; flex: 1; min-width: 0; text-align: center; word-break: normal; overflow-wrap: normal; }
.cal-head button { min-height: 44px; padding: 10px 14px; }
/* Small phones: the month name wraps between words, never mid-word. */
@media (max-width: 400px) { .cal-head h3 { font-size: 16px; } .cal-head button { padding: 10px; } }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.cal-grid .dow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; padding: 4px 0; }
.cal-grid button.day {
  min-height: 44px; padding: 0; border-radius: var(--radius); border: 0; background: transparent; color: rgba(32, 48, 76, 0.4);
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: default;
  /* 7 columns on a 320px phone leave under 44px of width each; the 44px
     minimum is met on height (the dimension a thumb misses on most days),
     same trade-off every month calendar (Google, Apple, Cal.com) makes. */
  width: 100%;
}
.cal-grid button.day:hover { background: transparent; }
.cal-grid button.day.open { background: var(--light-peach); color: var(--navy); font-weight: 700; cursor: pointer; }
.cal-grid button.day.open:hover { background: var(--soft-peach); }
.cal-grid button.day.selected, .cal-grid button.day.selected:hover { background: var(--navy); color: var(--white); }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.times button { background: var(--white); color: var(--navy); border: 2px solid var(--navy); padding: 12px 8px; min-height: 44px; }
.times button:hover { background: var(--navy); color: var(--white); }
.tz-row { display: grid; gap: 6px; font-size: 14px; }
.tz-row select { min-height: 44px; }

/* ----- Coach cards ----- */
.coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.coach { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.coach .specialty { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.coach.choice { cursor: pointer; padding: 12px; border-width: 2px; min-height: 44px; }
.coach.choice.selected { border-color: var(--navy); background: var(--light-peach); }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--soft-peach); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; flex: none; }
.avatar.sm { width: 40px; height: 40px; font-size: 15px; }
.coach-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.coach-top > div { min-width: 0; }
.coach-top h3 { overflow-wrap: break-word; word-break: break-word; }
.switch { display: inline-flex; border: 2px solid var(--navy); border-radius: var(--radius); flex-wrap: wrap; }
.switch button { background: var(--white); color: var(--navy); border: 0; border-radius: 0; min-height: 44px; padding: 10px 18px; }
.switch button:hover { background: var(--light-peach); }
.switch button.on, .switch button.on:hover { background: var(--navy); color: var(--white); }

/* ----- Tables (admin) ----- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
/* A name or email inside a table cell keeps to 1 line and lets
   .table-scroll's own horizontal scroll take the strain, rather than
   breaking mid-word to stay inside a narrow column. */
td .small, td .muted, td h3 { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--light-peach); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* ----- Footer: small navy logo on the off-white page ----- */
footer.site {
  max-width: 760px; margin: 24px auto 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
  padding: 20px max(16px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-right, 0px));
}
footer.site img { height: 16px; width: auto; display: block; }
footer.site span { font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.wide ~ footer.site, footer.site.wide { max-width: 1100px; }

@media (min-width: 640px) {
  .card { padding: 32px; }
  .hero-inner { padding: 32px 16px 48px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }