/* Self-hosted fonts (replaces Google Fonts dependency) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/fraunces-500.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/fraunces-600.woff2') format('woff2'); }

/* M Power Mend - styles */

:root {
  /* Teal — matches the marketing pages in /www. Single source of truth. */
  --c-primary: #0d9488;
  --c-primary-dark: #0f766e;
  --c-primary-light: #5eead4;
  --c-accent: #0f766e;
  --c-bg: #ffffff;
  --c-warm: #f0fdfa;
  --c-surface: #ffffff;
  --c-text: #0f172a;
  --c-muted: #475569;
  --c-border: #e2e8f0;
  --c-error: #b91c1c;
  --c-error-bg: #fef2f2;
  --c-ok: #15803d;
  --c-ok-bg: #f0fdf4;
  --c-warn: #b45309;
  --c-warn-bg: #fffbeb;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 6px rgba(15,23,42,0.05), 0 10px 15px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 24px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.10);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --container: 1140px;
  --narrow: 720px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-text);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; font-family: 'Inter', sans-serif; font-weight: 600; }

p { margin: 0 0 1em; }
a { color: var(--c-primary-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--c-accent); }

img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: var(--narrow); }
.text-center { text-align: center; }
.muted { color: var(--c-muted); }
.small { font-size: 0.875rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-primary);
  margin-bottom: 0.75rem;
}

.lede {
  font-size: 1.18rem;
  line-height: 1.55;
  color: #443d35;
  margin-bottom: 1.6rem;
  max-width: 38em;
}

/* === Header === */
.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.9);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  gap: 1.5rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--c-text);
  font-weight: 600;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-surface);
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.brand-name {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 500;
}
.site-header nav { display: flex; align-items: center; gap: 1.5rem; }
.site-header nav a { color: var(--c-text); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.site-header nav a:hover { color: var(--c-primary); }

/* Header bar never wraps. If it cannot fit on one line the nav collapses
   into the hamburger drawer at 1080px instead of breaking words. */
.brand-name,
.site-header nav a,
.site-header nav .nav-cta,
.site-header nav .nav-auth,
.site-header nav .nav-auth-button {
  white-space: nowrap;
}
.brand { flex: 0 0 auto; }
.site-header nav { flex-wrap: nowrap; }

/* Tighten spacing just above the collapse point to buy a little room */
@media (max-width: 1240px) {
  .nav-row { gap: 1rem; padding-left: 1rem; padding-right: 1rem; }
  .site-header nav { gap: 1.05rem; }
}

/* Inside the drawer, wrapping is fine and full-width links are expected */
@media (max-width: 1080px) {
  .site-header nav a,
  .site-header nav .nav-cta,
  .site-header nav .nav-auth,
  .site-header nav .nav-auth-button {
    white-space: normal;
  }
  .site-header nav { flex-wrap: wrap; }
}
.site-header nav a.nav-cta {
  background: var(--c-primary);
  color: var(--c-surface);
  padding: 0.55rem 1rem;
  border-radius: 999px;
}
.site-header nav a.nav-cta:hover { background: var(--c-primary-dark); color: var(--c-surface); }

/* legacy 640px nav hide rule removed - see consolidated header rules below */

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary); }
.btn-primary:hover { background: var(--c-primary-dark); color: var(--c-surface); }
.btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.btn-ghost:hover { background: var(--c-warm); color: var(--c-text); }
.btn-small { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.btn-google {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
  padding: 0.85rem 1.6rem;
}
.btn-google:hover { background: var(--c-warm); color: var(--c-text); }

/* === Hero === */
.hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-warm) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.5rem 0; }
.hero-centered { padding: 6rem 0 5rem; }
.hero-centered .hero-cta { justify-content: center; }

.trust-row {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.trust-row li {
  font-size: 0.88rem;
  color: var(--c-muted);
  position: relative;
  padding-left: 1.4rem;
}
.trust-row li::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--c-primary);
  border-radius: 50%;
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
}

.hero-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}
.card-heading {
  font-weight: 600;
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-primary);
}
.facts { margin: 0; padding: 0; }
.facts > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--c-border);
}
.facts > div:last-child { border-bottom: none; }
.facts dt { font-weight: 600; color: var(--c-muted); font-size: 0.85rem; }
.facts dd { margin: 0; font-size: 0.95rem; }

/* === Sections === */
.section { padding: 4rem 0; }
.section-warm { background: var(--c-warm); }
.section-contact { padding: 4rem 0 5rem; background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-warm) 100%); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }

.card-feature {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-feature h3 { margin: 0 0 0.5rem; color: var(--c-primary-dark); }
.card-feature p { margin: 0; color: var(--c-muted); font-size: 0.96rem; }

.steps {
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 1.1rem 0 1.1rem 3rem;
  border-bottom: 1px solid var(--c-border);
  position: relative;
  font-size: 1.02rem;
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-surface);
  font-weight: 600;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
}

/* === Forms === */
.contact-form { margin-top: 1.5rem; }
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  color: var(--c-text);
}
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-error {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--c-error);
}
.form-error {
  background: var(--c-error-bg);
  color: var(--c-error);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.field.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.disclaimer { margin-top: 1rem; }

/* === Footer === */
.site-footer {
  background: var(--c-primary-dark);
  color: #d6dcd2;
  padding: 3rem 0 1.5rem;
  margin-top: 0;
}
.site-footer a { color: #f0fdfa; }
.site-footer .muted { color: #aab3a4; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.25rem; } }
.footer-brand {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
  color: var(--c-surface);
}
.footer-heading {
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.5rem;
  color: var(--c-surface);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

/* === Admin === */
.admin-shell {
  min-height: 80vh;
  padding: 3rem 1.25rem;
  display: grid;
  place-items: start center;
}
.admin-shell.wide {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  /* .admin-shell above is a grid with place-items:start center. Switching to
     block here left justify-items:center behind, and it still sized the child:
     a wrapper resolved to its max-content width and centred, hanging off both
     sides of the viewport at once while body's overflow-x:clip hid the
     evidence. Measured on /admin/inbox at 390px: the wrapper computed 628px
     inside a 350px content box, left edge at -119px. Resetting the alignment
     collapses it to 350px. Keep these next to the display switch: they are
     part of the same override, not decoration. */
  place-items: normal;
  justify-items: stretch;
  align-items: normal;
}
.admin-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.admin-card h1 { font-size: 1.6rem; margin-bottom: 0.6em; }
.admin-card .btn { width: 100%; margin: 1.5rem 0; }

.admin-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.admin-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* admin-meta was the origin of the horizontal overflow on every admin page.
   It is a nowrap flex row holding "Signed in as <long email>", the view-as
   select and Sign out. At 390px it measured 480px, which stretched
   main.admin-shell to 442px, the container to 402px, and pushed the Inbox
   subtitle 54px past the right edge where overflow-x:clip hid it. The text was
   never failing to wrap. It was being carried off-screen by an ancestor. */
@media (max-width: 767px) {
  .admin-header .nav-row {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    min-width: 0;
  }
  .admin-meta {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
  }
  /* The address is one unbreakable token, so it is the piece that has to give.
     Truncating beats wrapping here: the account is already unambiguous from the
     local part, and a three-line email in a header is noise. */
  .admin-meta > .muted {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-meta .role-pill { flex: none; }
  .admin-meta .view-as,
  .admin-meta .view-as select { max-width: 100%; min-width: 0; }
  .admin-meta form { flex: none; }
}

.banner {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.banner-warn { background: var(--c-warn-bg); color: #6b4810; border: 1px solid #e9c98c; }
.banner-ok { background: var(--c-ok-bg); color: var(--c-ok); border: 1px solid #b8c9b3; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2.5rem;
}
@media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; } }
.stat {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--c-primary-dark);
}
.stat-label { font-size: 0.85rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.msg-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.msg {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.msg-meta { display: flex; align-items: center; gap: 0.6rem; }
.msg-body {
  white-space: pre-wrap;
  background: var(--c-warm);
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.96rem;
  margin: 0.5rem 0 1rem;
}
.msg-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pill-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.pill-warn { background: var(--c-warn-bg); color: var(--c-warn); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* === Missions callout band === */
.section-callout {
  background: linear-gradient(180deg, var(--c-warm) 0%, var(--c-bg) 100%);
  padding: 3.5rem 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.section-callout h2 { margin-bottom: 0.6em; }
.section-callout .btn { margin-top: 0.5rem; }

/* === Header auth controls === */
.site-header nav a.nav-auth,
.site-header nav .nav-auth-button {
  color: #6b6155;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-header nav a.nav-auth:hover,
.site-header nav .nav-auth-button:hover {
  color: var(--c-primary);
  background: rgba(13, 148, 136, 0.08);
}
.site-header nav .nav-auth-form {
  display: inline-flex;
  margin: 0;
}
.site-header nav .nav-auth-button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
/* legacy 640px nav-auth rule removed */

/* Role pill (super admin) */
.role-pill {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
}
.role-pill-super {
  background: var(--c-primary, #0d9488);
  color: #ffffff;
}

/* Role pill: admin variant */
.role-pill-admin {
  background: #d8d2c2;
  color: #4a4439;
}

/* Admin users page */
.admin-flash {
  margin-top: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
}
.admin-flash-ok { background: #e7efe2; color: #2f4a2c; border: 1px solid #c5d8bd; }
.admin-flash-err { background: #f7e0d8; color: #6b2e1a; border: 1px solid #e4b8a5; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--c-border, #e2dccf);
}
.admin-table th { font-weight: 600; color: #6b6155; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.btn-link-danger {
  background: none;
  border: none;
  color: #b3431a;
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
  text-decoration: underline;
}
.btn-link-danger:hover { color: #802a0e; }
.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.form-row label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
}
.form-row input, .form-row select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  min-width: 240px;
}

/* Muted secondary auth link (e.g., Staff next to Client sign in) */
.site-header nav a.nav-auth-muted {
  opacity: 0.6;
  font-size: 0.85rem;
}
.site-header nav a.nav-auth-muted:hover { opacity: 1; }

/* ====================== Header v2 (skip-link, focus, mobile drawer) ====================== */

/* Skip to content - visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  background: var(--c-primary, #0d9488);
  color: var(--c-surface, #ffffff);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0.5rem; }
.visually-hidden-anchor {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.visually-hidden-anchor:focus { outline: none; }

/* Universal focus-visible for keyboard users on header controls */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hamburger toggle: hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.nav-toggle:hover { background: rgba(13, 148, 136, 0.08); }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text, #2c2a26);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile: <=768px - show hamburger, hide nav until toggled */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-bg, #ffffff);
    border-bottom: 1px solid var(--c-border, #e2dccf);
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1rem 1rem;
  }
  .site-header nav.is-open { display: flex; }

  .site-header nav a,
  .site-header nav .nav-auth-form {
    width: 100%;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--c-border, #e2dccf);
    border-radius: 0;
    text-align: left;
  }
  .site-header nav .nav-auth-form { padding: 0; }
  .site-header nav .nav-auth-form .nav-auth-button {
    width: 100%;
    padding: 0.85rem 0.5rem;
    text-align: left;
    border-radius: 0;
  }

  /* CTA stays distinct on mobile */
  .site-header nav a.nav-cta {
    margin-top: 0.5rem;
    text-align: center;
    border-bottom: none;
    border-radius: 999px;
  }

  /* Lock body scroll while drawer open */
  body.nav-open { overflow: hidden; }

  /* Need position relative on the nav-row container so drawer anchors to it */
  .nav-row { position: relative; }
  .site-header { position: sticky; }
}

/* Destructive cue for Sign out button so it does not look identical to other links */
.site-header nav .nav-auth-signout {
  color: #8a3a1a;
}
.site-header nav .nav-auth-signout:hover {
  color: #6b2a10;
  background: rgba(138, 58, 26, 0.06);
}

/* ============== Portal Layout: sub-nav, dashboard, threads, forms ============== */

.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.75rem auto 1rem;
  padding: 0.4rem;
  border-bottom: 1px solid var(--c-border, #e2dccf);
}
.admin-subnav a {
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  color: #6b6155;
  font-size: 0.92rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.admin-subnav a:hover { background: rgba(13, 148, 136, 0.06); color: var(--c-primary, #0d9488); }
.admin-subnav a.is-current { background: var(--c-primary, #0d9488); color: #ffffff; }
.admin-subnav a.is-current:hover { background: var(--c-primary-dark, #0f766e); color: #ffffff; }

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 1rem 0 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border, #e2dccf);
}
.subnav a {
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  text-decoration: none;
  color: #6b6155;
  font-size: 0.92rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.subnav a:hover { background: rgba(13, 148, 136, 0.06); color: var(--c-primary, #0d9488); }
.subnav a.is-current { background: var(--c-primary, #0d9488); color: #ffffff; }

.subnav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0 0.4em;
  height: 1.4em;
  font-size: 0.75rem;
  font-weight: 700;
  background: #b3431a;
  color: #ffffff;
  border-radius: 999px;
}

/* Dashboard grid - converted to flexbox in the portal block at end of file */

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 780px; }
.form-stack fieldset { border: 1px solid var(--c-border, #e2dccf); border-radius: 8px; padding: 1rem 1.25rem; }
.form-stack legend { font-weight: 600; padding: 0 0.4rem; color: #4a4439; }
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem 1rem;
}
.form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; font-weight: 500; }
.form-grid label.grid-span-2 { grid-column: span 2; }
.form-grid input, .form-grid select, .form-grid textarea,
.form-stack textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--c-surface, #ffffff);
}
.form-grid input:focus-visible, .form-grid select:focus-visible, .form-grid textarea:focus-visible,
.form-stack textarea:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: 1px;
  border-color: var(--c-primary, #0d9488);
}
.form-grid input:disabled { background: #f4eee0; color: #8a8275; }
.form-actions { display: flex; gap: 0.75rem; }

/* Visually hidden helper for labels */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Thread */
.thread { display: flex; flex-direction: column; gap: 0.75rem; }
.thread-msg {
  border-radius: 10px;
  padding: 0.85rem 1rem;
  max-width: 85%;
}
.thread-msg header {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  align-items: baseline;
}
.thread-msg p { margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.thread-client { background: #eef1ea; align-self: flex-end; }
.thread-staff { background: #f5efe2; align-self: flex-start; }
.thread-row { padding: 0.5rem; border-bottom: 1px solid var(--c-border, #e2dccf); margin: 0; }
.thread-row:last-child { border-bottom: none; }

/* Appointment cards */
.appointment-card { margin-top: 1rem; }
.appointment-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

/* Filter chips */
.filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.filter-chip {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--c-border, #d8d2c2);
  background: var(--c-surface, #ffffff);
  text-decoration: none;
  color: #6b6155;
  font-size: 0.88rem;
  text-transform: capitalize;
}
.filter-chip:hover { background: rgba(13, 148, 136, 0.06); }
.filter-chip.is-current { background: var(--c-primary, #0d9488); color: #ffffff; border-color: var(--c-primary, #0d9488); }

/* Warn banner reuse */
.banner.banner-warn.unread-banner { background: #fff4e2; color: #6b4a1a; border: 1px solid #e8d4a8; }

/* Admin flash warn variant */
.admin-flash-warn { background: #fff4e2; color: #6b4a1a; border: 1px solid #e8d4a8; padding: 0.6rem 0.9rem; border-radius: 6px; }

/* ============== Batch additions: status pills, search, pagination, locked field ============== */

/* Status pill variants by status name */
.role-pill-pending   { background: #efe9d8; color: #5a4e2a; }
.role-pill-scheduled { background: #2f5a3a; color: #ffffff; }
.role-pill-declined  { background: #b3431a; color: #ffffff; }
.role-pill-cancelled { background: #8a3a18; color: #ffffff; }

/* Search row on /admin/clients */
.search-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0;
  max-width: 600px;
}
.search-row input[type="search"] {
  flex: 1 1 240px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--c-surface, #ffffff);
  min-width: 200px;
}
.search-row input[type="search"]:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: 1px;
  border-color: var(--c-primary, #0d9488);
}

/* Locked field (email on profile) */
.field-locked {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.field-locked-value {
  padding: 0.55rem 0.7rem;
  background: #f4eee0;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  color: #6b6155;
  font-weight: 400;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.92rem;
}
.pagination a {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  text-decoration: none;
  color: var(--c-primary, #0d9488);
  font-weight: 500;
}
.pagination a:hover { background: rgba(13, 148, 136, 0.06); }
.pagination-disabled {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-border-light, #e9e3d4);
  border-radius: 6px;
  color: #b3a999;
}

/* Danger link-style button for client appointment cancel */
.btn-link-danger {
  background: none;
  border: none;
  color: #b3431a;
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
}
.btn-link-danger:hover { color: #8a3a18; text-decoration: none; }

/* Make sure skip-link still hides off-screen since target moved to <main> */
.skip-link:focus-visible {
  top: 0.5rem;
  left: 0.5rem;
}

/* Soft-delete / archive UI */
.thread-msg.is-archived { opacity: 0.55; border-left: 3px solid #b3431a; padding-left: 0.85rem; }
.thread-msg-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; font-size: 0.85rem; }
.inline-edit { display: inline-block; }
.inline-edit > summary { cursor: pointer; color: var(--c-primary, #0d9488); font-weight: 500; padding: 0.1rem 0; }
.inline-edit > summary:hover { text-decoration: underline; }
.inline-edit form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }
.inline-edit textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--c-border, #d8d2c2);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--c-surface, #ffffff);
  resize: vertical;
}
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* Bulk archive toolbar on admin inbox */
.bulk-toolbar {
  display: flex; align-items: center; gap: 1rem;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--c-warm, #f0fdfa);
  border-radius: 6px;
}
.bulk-select-all { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; cursor: pointer; }
.bulk-row-check { display: inline-flex; align-items: center; margin-right: 0.5rem; vertical-align: middle; }
.bulk-checkbox, #bulk-select-all { width: 1.1em; height: 1.1em; cursor: pointer; }
#bulk-archive-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Legal + multi-page additions (added with home/services split)
   ============================================================ */

/* Pending placeholder marker. Highly visible by design.
   These render where Hudson/Melissa still needs to confirm a value
   (license numbers, pricing, etc.) before the page is launched. */
.pending {
  display: inline-block;
  background: #fff4d6;
  color: #6b4d00;
  border: 1px dashed #c79a00;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Inner-page hero (slimmer than homepage hero) */
.hero-page {
  padding: 4rem 0 2rem;
}
.hero-page h1 {
  margin: 0.25rem 0 1rem;
}

/* Two-up card grid (used for the homepage Therapy/Coaching router) */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.card-path {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.card-path h3 {
  margin: 0 0 0.25rem;
}
.card-path .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Coaching pricing stack */
.pricing-stack {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 1rem;
}
.pricing-row {
  position: relative;
  padding: 1.25rem 1.25rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.pricing-row h3 { margin: 0 0 0.25rem; color: var(--c-primary-dark); }
.pricing-row p { margin: 0.35rem 0; }
/* The amount is the thing a visitor scans for, so it gets its own weight
   rather than sitting in body copy at body size. */
.pricing-amount {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  margin: 0.6rem 0 0.15rem !important;
  line-height: 1.2;
}
.pricing-per {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-muted, #666);
}
.pricing-recommended {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.recommended-pill {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* PHI warning on contact form */
.form-phi-warning {
  background: #fff4d6;
  border-left: 4px solid #c79a00;
  color: #4a3700;
  padding: 0.85rem 1rem;
  border-radius: 6px;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Footer legal links row */
.footer-legal {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--c-border);
  margin-top: 1rem;
}
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.footer-legal-nav a {
  color: var(--c-muted);
  text-decoration: none;
}
.footer-legal-nav a:hover { color: var(--c-primary); text-decoration: underline; }
.footer-legal-nav span { color: var(--c-border); }

/* Legal-page typography. Long-form readability. */
.legal-page .section { padding-top: 2.5rem; }
.legal-page h1 { margin-bottom: 0.5rem; }
.legal-page h2 {
  margin-top: 2rem;
  font-size: 1.25rem;
  color: var(--c-primary-dark);
}
.legal-page p, .legal-page ul, .legal-page ol { line-height: 1.65; }
.legal-page ul, .legal-page ol { padding-left: 1.25rem; margin: 0.5rem 0 1rem; }
.legal-page li { margin: 0.25rem 0; }

/* Coaching Services Agreement: signature block + print styles */
.signature-block {
  margin: 2rem 0 1rem;
  padding: 1.25rem;
  background: var(--c-warm);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.8;
}
.signature-block p { margin: 0.35rem 0; }
.print-cta { margin-top: 2rem; }

@media print {
  .no-print, .site-header, .site-footer, .skip-link { display: none !important; }
  body { background: white; color: #000; }
  .container, .narrow { max-width: 100%; padding: 0; }
  .section { padding: 0 0 1rem; }
  h1, h2 { page-break-after: avoid; }
  .signature-block { background: transparent; border: 1px solid #000; }
  a { color: #000; text-decoration: underline; }
  .form-phi-warning, .pending { background: transparent; border: 1px solid #000; color: #000; }
}


/* ==========================================================================
   Page shell
   Applies to every page. Replaces the min-height that .admin-shell used to
   provide for the login page, and guarantees the footer sits at the bottom
   of the viewport on short pages instead of floating mid-screen.
   ========================================================================== */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}

/* Consent checkbox rows (contact form, intake forms) */
.consent-field {
  margin-top: 0.25rem;
}
.consent-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 400;
}
.consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
  cursor: pointer;
}

/* Single-field auth forms (sign in, magic link) */
.auth-form {
  margin-top: 1.5rem;
}
.auth-form label {
  flex: 1;
  min-width: 280px;
}


/* Primary nav active state */
#primary-nav a.is-current {
  color: var(--c-primary-dark);
  font-weight: 600;
  position: relative;
}
#primary-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  background: var(--c-primary);
  border-radius: 2px;
}
@media (max-width: 1080px) {
  #primary-nav a.is-current::after { display: none; }
}


/* ==========================================================================
   CLIENT PORTAL LAYOUT (flexfix)
   Scope: .portal-shell only -> views/client/*.ejs. Admin, auth and marketing
   surfaces keep their existing rules untouched.
   House rule: flexbox for rows/columns of things. No CSS Grid added here.
   Mobile-first: base rules are the 360px phone layout; min-width queries
   progressively widen up to ultrawide, with prose measure capped.
   ========================================================================== */
:root {
  /* Page gutter. The panel fills whatever the gutter does not take, so there is
     no width cap on the panel or the form at any viewport. The 1.25rem floor
     keeps the phone layout identical to the previous pass. */
  --portal-gutter: clamp(1.25rem, 2vw, 4rem);
  --portal-measure: 70ch;    /* prose measure cap - the ONLY width cap here */
}

/* --- Shell ---------------------------------------------------------------
   .admin-shell is `display:grid; place-items:start center`, which shrink-wraps
   .container to its content and is what pinned the portal to a ~480px column.
   Overridden to block for portal pages only. */
main.portal-shell {
  display: block;
  min-height: 60vh;
  padding: 2rem 0 3rem;
}
.portal-shell > .container {
  max-width: none;
  width: 100%;
  padding-inline: var(--portal-gutter);
}
.portal-shell > .container > p,
.portal-shell > .container > .lede {
  max-width: var(--portal-measure);
}

/* --- Panels --------------------------------------------------------------
   Portal equivalent of .admin-card. Deliberately a separate class: .admin-card
   stays 480px for the admin surfaces that still rely on it. */
.portal-panel {
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--radius-lg, 18px);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.portal-panel > h2:first-child { margin-top: 0; }
.portal-panel p { max-width: var(--portal-measure); }
/* Wide data tables stay scrollable inside their panel instead of bleeding
   past the border on narrow screens. Table markup is unchanged. */
.portal-panel-scroll { overflow-x: auto; }
.portal-panel-scroll .admin-table { min-width: 640px; }

/* --- Dashboard tiles (was: display:grid repeat(auto-fit,minmax(280px,1fr))) */
.dashboard-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1rem;
}
.dashboard-grid > * {
  flex: 1 1 280px;
  min-width: 0;
}

/* --- Portal form rows ----------------------------------------------------
   .form-grid stays CSS Grid for admin. Portal forms add .portal-form-grid,
   which flips the same element to a wrapping flex row and gives every child
   min-width:0 so inputs/selects/textareas shrink instead of overflowing the
   panel's right border. Base (phone): one field per row. */
.portal-form-grid {
  display: flex;
  flex-wrap: wrap;
  --pfg-gap: 1rem;
  gap: 0.9rem var(--pfg-gap);
  min-width: 0;
}
.portal-form-grid > label,
.portal-form-grid > .field-locked {
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
}
.portal-form-grid > label.grid-span-2 { flex: 1 1 100%; }
.portal-form-grid input,
.portal-form-grid select,
.portal-form-grid textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.portal-shell .form-stack {
  max-width: none;
  width: 100%;
  min-width: 0;
}
.portal-shell .form-stack fieldset { min-width: 0; }
.portal-shell .form-actions { flex-wrap: wrap; }
/* Controls that sit directly in a .form-stack (the messages textarea) are not
   inside a .portal-form-grid, so they never picked up width:100% and rendered
   at the intrinsic `cols` width regardless of viewport. Every control in a
   portal form fills its row; the label becomes the same flex column the
   .portal-form-grid labels already are. */
.portal-shell .form-stack > label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.portal-shell .form-stack textarea,
.portal-shell .form-stack input,
.portal-shell .form-stack select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* --- Message thread ------------------------------------------------------ */
.portal-shell .thread { max-width: none; }
.portal-shell .thread-msg { max-width: min(100%, 62ch); }

/* --- Progressive widening (mobile-first min-width queries) --------------- */
@media (min-width: 600px) {
  /* two-up rows: date/time, session type/urgency */
  .portal-form-grid > label,
  .portal-form-grid > .field-locked { flex: 1 1 calc((100% - var(--pfg-gap)) / 2); }
  .portal-form-grid > label.grid-span-2 { flex: 1 1 100%; }
  .portal-panel { padding: 1.75rem; }
}
@media (min-width: 1024px) {
  main.portal-shell { padding: 2.5rem 0 3.5rem; }
  .portal-panel { padding: 2rem; }
}
/* The >=1600px block that re-applied the old panel and form width caps is
   gone. The gutter clamp() above scales continuously instead, so the panel
   keeps filling the viewport past 1600px rather than re-centring. */

/* ---------------------------------------------------------------------------
   Booking slot picker, mobile first.
   The compiled utility sheet ships neither .sr-only nor any peer-checked
   variants, so the radio inputs were rendering as visible native controls
   beside their own styled labels, and a tapped slot showed no selected state
   at all. These rules restore both and size the targets for thumbs.
   --------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}

.slot-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;              /* iOS minimum touch target */
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid #cbd5e1;
  border-radius: .75rem;
  background: #fff;
  color: #334155;
  font-size: .9375rem;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.slot-chip:hover { border-color: #14b8a6; }

input[name="slot"]:checked + .slot-chip,
input[name="rating"]:checked + .slot-chip {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  font-weight: 600;
}

input[name="slot"]:focus-visible + .slot-chip,
input[name="rating"]:focus-visible + .slot-chip {
  outline: 2px solid #14b8a6;
  outline-offset: 2px;
}

.slot-scroll { margin-top: 2rem; }

@media (min-width: 768px) {
  /* The inner scroll pane is fine with a mouse. On a phone it fights the page
     scroll, so it only exists at tablet width and up. */
  .slot-scroll {
    max-height: 36rem;
    overflow-y: auto;
    padding-right: .5rem;
  }
}

@media (max-width: 420px) {
  .slot-grid { grid-template-columns: repeat(3, 1fr); gap: .375rem; }
  .slot-chip { font-size: .875rem; padding: .625rem .25rem; }
}

/* ---------------------------------------------------------------------------
   Booking calendar picker
   Month grid, then the times for whichever day is open. Replaces a six-week
   stack of chips that ran to several thousand pixels on a phone.
   --------------------------------------------------------------------------- */

.bk-cal { display: grid; gap: 1.5rem; margin-top: 2rem; }
.bk-cal[hidden] { display: none; }

@media (min-width: 768px) {
  .bk-cal {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
  }
}

.bk-cal-panel {
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1rem;
  background: #fff;
}

.bk-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.bk-cal-month { font-weight: 600; color: #0f172a; font-size: 1rem; }

.bk-cal-nav {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid #cbd5e1;
  border-radius: .625rem;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bk-cal-nav:hover:not(:disabled) { border-color: #14b8a6; color: #0f766e; }
.bk-cal-nav:disabled { opacity: .3; cursor: default; }
.bk-cal-nav:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

.bk-cal-dow,
.bk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.bk-cal-dow { margin-bottom: .25rem; }
.bk-cal-dow span {
  text-align: center;
  font-size: .75rem;
  font-weight: 600;
  color: #94a3b8;
}

.bk-cal-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: .625rem;
  background: transparent;
  color: #cbd5e1;
  font: inherit;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.bk-cal-cell.is-blank { min-height: 0; border: 0; }
.bk-cal-cell.is-open {
  color: #0f172a;
  font-weight: 600;
  cursor: pointer;
  border-color: #cbd5e1;
  background: #fff;
  -webkit-tap-highlight-color: transparent;
}
.bk-cal-cell.is-open:hover { border-color: #14b8a6; }
.bk-cal-cell.is-open:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.bk-cal-cell.is-active { background: #0f766e; border-color: #0f766e; color: #fff; }

.bk-cal-dot {
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #14b8a6;
}
.bk-cal-cell.is-active .bk-cal-dot { background: #fff; }

.bk-cal-key {
  margin-top: .75rem;
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: #64748b;
}
.bk-key-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #14b8a6;
}

.bk-day-head {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  min-height: 1.25rem;
}
.bk-day .slot-grid { margin-top: .75rem; }

.slot-chip.is-selected {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  font-weight: 600;
}
.bk-time { font: inherit; font-size: .9375rem; }
.bk-time:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }

@media (min-width: 768px) {
  .bk-day { max-height: 32rem; overflow-y: auto; padding-right: .5rem; }
}

/* ---------------------------------------------------------------------------
   Footer legal row contrast
   .footer-legal-nav inherited --c-muted (#475569), a slate tuned for white
   backgrounds, and the footer sits on --c-primary-dark (#0f766e). That is
   roughly 1.4:1, which is not a readability nitpick: the links it hid are
   Privacy Policy, Notice of Privacy Practices, Good Faith Estimate and
   Professional Disclosure. Every one of them is a link this practice is
   expected to make findable.
   --------------------------------------------------------------------------- */

.site-footer .footer-legal-nav a { color: #d9f2ee; text-decoration: underline; }
.site-footer .footer-legal-nav a:hover,
.site-footer .footer-legal-nav a:focus-visible { color: #ffffff; }
.site-footer .footer-legal-nav a:focus-visible { outline: 2px solid #99f6e4; outline-offset: 2px; }
.site-footer .footer-legal-nav span { color: #7fb8b1; }

/* ---------------------------------------------------------------------------
   Signed-in navigation as a bottom bar on phones

   The section nav sat under the header and wrapped onto three lines on a 390px
   screen, pushing the actual content off the fold on every page. Both navs use
   the same markup, so one rule moves them to the bottom of the viewport where
   a thumb already is.

   Only for signed-in surfaces. The public site keeps its normal header nav,
   because a bottom bar on a marketing page reads as an app chrome the visitor
   did not ask for.
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .admin-subnav,
  .portal-subnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    margin: 0;
    padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    background: #ffffff;
    border-top: 1px solid var(--c-border, #e2e8f0);
    border-bottom: 0;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06);
  }

  .admin-subnav a,
  .portal-subnav a {
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    min-height: 52px;
    padding: .375rem .25rem;
    font-size: .6875rem;
    line-height: 1.15;
    text-align: center;
    border-radius: .5rem;
  }

  /* A filled pill is too heavy at this size and reads as a button rather than
     a location. Colour and weight carry the current item instead. */
  .admin-subnav a.is-current,
  .portal-subnav a.is-current {
    background: transparent;
    color: var(--c-primary-dark, #0f766e);
    font-weight: 700;
  }

  .admin-subnav .subnav-badge,
  .portal-subnav .subnav-badge { font-size: .625rem; }

  /* Room for the bar, so the last element on a page is never trapped under it. */
  body:has(.admin-subnav),
  body:has(.portal-subnav) { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------------------
   Admin hub
   Containers, not a wall of records. The landing page used to render every
   contact submission in full; these tiles carry a count and a destination.
   --------------------------------------------------------------------------- */

.hub-welcome { margin: 1.5rem 0 .5rem; }
.hub-welcome h1 { margin: 0 0 .25rem; font-size: 1.75rem; }

.hub-section { margin: 1.75rem 0; }
.hub-section-head {
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.hub-section-head h2 {
  margin: 0; font-size: .8125rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #64748b;
}
.hub-count {
  font-size: .75rem; font-weight: 700; color: #b91c1c;
  background: #fef2f2; border-radius: 999px; padding: .125rem .5rem;
}

.hub-tiles {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.hub-tile {
  display: flex; flex-direction: column; gap: .375rem;
  min-height: 148px; padding: 1rem;
  border: 1px solid var(--c-border, #e2e8f0); border-radius: 1rem;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hub-tile:hover {
  border-color: var(--c-primary, #0d9488);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}
.hub-tile:focus-visible { outline: 2px solid var(--c-primary, #0d9488); outline-offset: 2px; }

.hub-tile-head { display: flex; align-items: center; justify-content: space-between; }
.hub-tile-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: .625rem; background: rgba(13, 148, 136, .1);
  color: var(--c-primary-dark, #0f766e); font-size: 1.05rem;
}
.hub-badge {
  min-width: 1.4em; padding: .1em .5em; border-radius: 999px;
  background: #b91c1c; color: #fff; font-size: .7rem; font-weight: 700; text-align: center;
}
.hub-tile-title { font-weight: 700; font-size: .975rem; color: #0f172a; }
.hub-tile-desc { font-size: .8125rem; line-height: 1.45; color: #64748b; flex: 1; }
.hub-tile-meta {
  display: flex; justify-content: space-between; gap: .5rem;
  padding-top: .5rem; margin-top: .25rem;
  border-top: 1px solid var(--c-border, #e2e8f0);
  font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8;
}

.hub-attention { padding: 1rem 1.125rem; border-left: 4px solid #b91c1c; background: #fff;
  border-radius: 0 1rem 1rem 0; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.hub-attention-list { margin: .25rem 0 .75rem; padding-left: 1.1rem; }
.hub-attention-list li { margin-bottom: .25rem; font-size: .9rem; }

/* View as */
.view-as select {
  font: inherit; font-size: .8125rem; padding: .3rem .5rem;
  border: 1px solid var(--c-border, #e2e8f0); border-radius: .5rem; background: #fff;
}
.view-as-bar { background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: .85rem; }
.view-as-bar .container { padding: .5rem 1rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.view-as-bar a { font-weight: 600; }


/* ── admin-card data-table fix ───────────────────────────────────────────────
   .admin-card was sized for the sign-in card (max-width:480px) and .admin-shell
   centres a single narrow item. /admin/users reuses both to wrap a data table,
   so the table rendered wider than the card it sat in and the ADDED, (you) and
   Remove columns spilled past the white background.

   Scoped with :has() so the sign-in card is untouched: only a card that
   actually contains a table opts out of the narrow layout. :has() is already
   used elsewhere in this file, so no new browser requirement. */

.admin-shell:has(.admin-table) {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
}

.admin-card:has(.admin-table) {
  max-width: 100%;
  padding: 2rem;
}

/* Long tables stay readable on small screens instead of overflowing the card.
   Padding is compensated so the scroll edge lines up with the card edge. */
.admin-card:has(.admin-table) .admin-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  .admin-card:has(.admin-table) .admin-table { display: table; overflow-x: visible; }
}

/* Timestamps were breaking across three lines ("Jul 27," / "4:00" / "PM").
   Dates are a single unit, so keep them on one line and let the column size
   to the content. */
.admin-table td:has(time),
.admin-table .nowrap,
.admin-table .col-date { white-space: nowrap; }

/* Column headers should not stack either ("LAST / SIGN- / IN"). */
.admin-table th { white-space: nowrap; }

/* Email is the one column that may wrap, and it should absorb the slack. */
/* min-width only inside a card that actually scrolls. Applied globally it
   overflowed clients.ejs and schedule.ejs, which use .admin-table with no
   scroll wrapper, and made those pages pan sideways on a phone. */
.admin-table td:first-child { word-break: break-word; }
.admin-card:has(.admin-table) .admin-table td:first-child { min-width: 14rem; }

/* Row actions hug the right edge rather than claiming equal width. */
.admin-table td:last-child,
.admin-table th:last-child { width: 1%; white-space: nowrap; text-align: right; }

/* Role pill and the "(you)" marker sat oddly against the wrapped rows. */
.admin-table .badge, .admin-table .pill { vertical-align: middle; }


/* ── ios-16px-form-controls ──────────────────────────────────────────────────
   iOS Safari auto-zooms on focus for any form control whose computed font-size
   is below 16px, and it never zooms back out on blur. The result is that one
   tap on an input leaves the whole page pannable sideways for the rest of the
   session, which reads as the layout "sliding around".

   16px is the exact threshold, not a rounding target: 15.2px (0.95rem) still
   triggers it. Declared last so it wins over the component rules at
   .form-grid, .form-row, .search-row and .inline-edit without editing each one.

   Applied at every breakpoint on purpose. iPads zoom too, so scoping this to a
   phone-width media query would leave tablets broken. */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea,
.form-grid input, .form-grid select, .form-grid textarea,
.form-row input, .form-row select, .form-row textarea,
.form-stack input, .form-stack select, .form-stack textarea,
.portal-form-grid input, .portal-form-grid select, .portal-form-grid textarea,
.field input, .field textarea,
.search-row input[type="search"],
.inline-edit textarea {
  font-size: 16px;
}

/* Date and time inputs are the worst offenders: Safari renders them with its
   own internal control and still measures the author font-size for the zoom
   decision. The booking slot picker uses both. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"] {
  font-size: 16px;
}

/* .view-as select carries a class, so its (0,1,1) specificity beat the bare
   `select` above and it stayed at 13px. Named explicitly. Any future
   class-qualified control rule needs the same treatment -- specificity, not
   source order, is what decides this. */
.view-as select { font-size: 16px; }

/* The label and helper text around the controls keep their designed scale --
   only the focusable control itself matters to Safari's zoom heuristic.
   .bulk-select-all stays at 0.92rem: it is a <label> wrapping a checkbox, and
   checkboxes never trigger the zoom. */


/* ── viewport-containment ────────────────────────────────────────────────────
   Nothing prevented horizontal panning, so any single element wider than the
   screen made the whole page slide. clip is used rather than hidden: hidden on
   html/body silently kills position:sticky descendants, clip does not. hidden
   is kept as the fallback for older engines that do not know clip. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Tables are the usual culprit. Any .admin-table without an explicit scroll
   wrapper gets one, so a wide table scrolls inside its own box instead of
   dragging the page with it. */
@media (max-width: 719px) {
  .admin-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* Long unbroken strings (emails, Meet URLs, session ids) are the other common
   cause: they cannot wrap and force the container wide.

   This was `anywhere`, which was the bug. Unlike break-word, `anywhere`
   feeds into min-content sizing, so the table algorithm decided every column
   could shrink to a single glyph. It then did exactly that: "Join" became
   "Joi"/"n", "cancelled" became "cancell"/"ed", and the SUPER badge stacked
   three letters tall. break-word breaks a word only when that word alone
   cannot fit its line, which is the behaviour an email address wants and the
   behaviour a four-letter word does not. */
.admin-table td, .admin-card p, .admin-flash { overflow-wrap: break-word; }

/* Pills, badges and role chips are single tokens by definition. They should
   never break, and they size to their content rather than to a share of the
   row. */
.pill, .badge, .role-pill,
.admin-table .pill, .admin-table .badge, .admin-table .role-pill {
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}

/* ── ios-16px: controls the earlier block did not name ───────────────────────
   The existing rule wins over Tailwind Preflight on specificity, but these
   carry classes or live in the Tailwind-styled booking views, where a utility
   class can still land on the control itself. 16px is the exact threshold:
   15.2px (0.95rem) and 14px (.text-sm) both still trigger the zoom, and Safari
   never zooms back out on blur. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea,
input.text-sm, select.text-sm, textarea.text-sm,
input.text-xs, select.text-xs, textarea.text-xs,
.admin-table input, .admin-table select, .admin-table textarea,
.slot-picker input, .slot-picker select,
[class*="rounded-xl"] input, [class*="rounded-xl"] select, [class*="rounded-xl"] textarea {
  font-size: 16px;
}

/* Safari measures the author font-size on date and time controls even though it
   draws its own widget, and it ignores line-height, so the control can end up
   visually short at 16px. Restore the height explicitly. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  font-size: 16px;
  min-height: 2.75rem;
}

/* Buttons never trigger the zoom, so they keep their designed scale. Listed
   here so a future edit does not sweep them into the 16px rule by mistake. */


/* ── footer-mobile-layout ────────────────────────────────────────────────────
   Three problems on a phone, all layout, none of them overflow:

   1. The middots in .footer-legal-nav are real <span> elements, so when the
      flex row wraps they strand at the end of each line:
        "Privacy Policy - Notice of Privacy Practices -"
      They are decoration for the single-line desktop layout, so they are
      hidden below that breakpoint rather than removed from the markup (they
      are already aria-hidden, so nothing is lost to a screen reader).

   2. The footer stacked to one column and ran 1748px tall at 390px, roughly
      four and a half screens. Six of the seven blocks are short link lists
      that pair fine side by side.

   3. .footer-bottom kept justify-content:space-between on mobile, spreading
      three paragraphs with ragged gaps instead of stacking them. */

@media (max-width: 720px) {

  /* 1. Separators off, links become real tap targets. 13.6px text in an 18px
        row is well under the 44px iOS guideline. */
  .footer-legal-nav > span[aria-hidden="true"] { display: none; }
  .footer-legal-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
  }
  .footer-legal-nav a {
    display: block;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .footer-legal-nav a:last-child { border-bottom: 0; }
  .footer-legal { padding: 0.5rem 1.25rem 1rem; }

  /* 2. Two columns. The brand intro and the GWDN paragraph carry prose, so
        they span the full width; the link lists pair up. */
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column: 1 / -1; }

  /* 3. Stack, left aligned. The 988 line is safety information and should not
        be floated to an edge where it reads as a footnote. */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.6rem;
    text-align: left;
  }
  .footer-bottom p:last-child { order: -1; }
}

/* Very narrow phones cannot hold two columns of link text without the headings
   breaking mid-word. */
@media (max-width: 380px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child { grid-column: auto; }
}


/* ── footer-legal-nav-v2 ─────────────────────────────────────────────────────
   Two corrections to the block above, both found by measuring rather than
   reading:

   a) Hiding the separators only below 720px left tablets stranding a middot at
      the end of the first wrapped line, with 22px tap targets. A separator is
      only ever correct when the row fits on one line, and CSS cannot know that.
      So they come out at every width and spacing carries the separation
      instead. The spans stay in the markup, already aria-hidden, so nothing
      changes for assistive tech.

   b) Stacking seven links at 44px each added ~300px and made the mobile footer
      TALLER than before the fix (1770px, up from 1748px). Two columns keeps the
      44px touch target and halves the height it costs. */

.footer-legal-nav > span[aria-hidden="true"] { display: none; }

.footer-legal-nav {
  gap: 0.5rem 1.5rem;
}

@media (max-width: 720px) {
  .footer-legal-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    align-items: stretch;
  }
  .footer-legal-nav a {
    min-height: 44px;
    font-size: 0.9rem;
    line-height: 1.25;
    padding: 0.35rem 0;
  }
  /* With an odd number of links the last cell spans both columns rather than
     leaving a gap beside it. */
  .footer-legal-nav a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tablets are wide enough for the row but not for one line of it, so they get
   the same tap targets as a phone without the two-column grid. */
@media (min-width: 721px) and (max-width: 1024px) {
  .footer-legal-nav a { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ── mobile-touch-and-legibility ─────────────────────────────────────────────
   Found by measuring computed geometry across /, /services, /booking and the
   slot picker at 360, 390 and 768px. Two categories, both real, neither
   causing overflow.

   A. Standalone call-to-action links render 17-20px tall. They are the primary
      action on their card ("Book Session", "Schedule Consultation", the hero
      back link), so they need a real touch target, not a line of text. Only
      links that stand alone are grown -- links inside running prose stay inline
      so paragraphs do not gain ragged line spacing.

   B. Legal, safety and helper copy sits at 12px. Calendar weekday initials and
      badge labels stay at 12px on purpose, since those are conventional and
      not read as prose. Only block-level prose is floored, at 13px. */

/* Tablets are touched, not clicked. The first pass capped this at 767px and
   left the slot picker back-link at 17px on a 768px iPad. Width rather than
   pointer:coarse, because hybrid devices report pointer support inconsistently
   and a too-large tap target costs nothing on a mouse. */
@media (max-width: 1024px) {

  /* A. Standalone CTAs. inline-flex so min-height applies to an inline element
        without turning it into a full-width block. */
  a.font-semibold[class*="text-brand"],
  a[class*="text-white/"][class*="text-sm"],
  .card a[class*="text-sm"][class*="font-semibold"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Inline prose links keep their line box but gain a bigger hit area. Vertical
     padding on an inline element expands the tappable region without affecting
     layout, so paragraph rhythm is untouched. */
  p a, li a, label a, dd a { padding-block: 0.55rem; }

}

/* B. Prose legibility floor, phones only. 12px prose is acceptable at tablet
      width and raising it there would disturb near-desktop layouts.

      Deliberately NOT raised, confirmed by reading computed styles rather than
      guessing: p.eyebrow at 12.48px (uppercase tracked kickers), the
      span.text-xs badges such as "Save $1,200/year" and the "National" resource
      tags, and the S M T W T F S calendar row on the slot picker. Those are
      conventional chrome, are not read as running prose, and growing them would
      break the components they sit in. */
@media (max-width: 767px) {
  /* Scoped to block-level text so pills, badges and the calendar weekday row
     keep their designed 12px. */
  p.text-xs, li.text-xs, dd.text-xs,
  p.text-\[11px\], p.text-\[12px\] { font-size: 0.8125rem; line-height: 1.5; }

  /* The crisis line is safety information and should never be the smallest
     text on the page. */
  .site-footer .footer-bottom p:last-child,
  p.text-xs:has(strong) { font-size: 0.875rem; }
}


/* ── bottom-nav-component ────────────────────────────────────────────────────
   Fixed five-slot tab bar for touch devices. Hidden from 1025px up, where the
   header nav is already visible and a thumb bar makes no sense.

   Five is the ceiling on purpose: past that the targets fall below 44px on a
   360px screen. 360 / 5 = 72px per slot, which clears it with room. Anything
   that does not earn a tab lives in the More sheet. */

.bottom-nav { display: none; }
.bottom-sheet, .bottom-sheet-backdrop { display: none; }

@media (max-width: 1024px) {

  .bottom-nav {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--c-surface, #fff);
    border-top: 1px solid var(--c-border, #e2e8f0);
    /* Clears the iPhone home indicator. Requires viewport-fit=cover on the
       viewport meta, which is set in head.ejs. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 12px rgba(15, 23, 42, 0.06);
  }

  .bottom-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 56px;
    padding: 0.4rem 0.15rem 0.5rem;
    width: 100%;
    background: none;
    border: 0;
    color: var(--c-muted, #64748b);
    font: inherit;
    font-size: 0.6875rem;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .bottom-nav-icon svg { width: 22px; height: 22px; display: block; }

  .bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav-item.is-current { color: var(--c-primary-dark, #0f766e); font-weight: 600; }

  /* The active tab gets a bar rather than a background fill, so the row keeps
     an even rhythm and nothing shifts. */
  .bottom-nav-item.is-current::before {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--c-primary-dark, #0f766e);
  }
  .bottom-nav-list > li { position: relative; display: flex; }

  /* Book is the point of the site, so it reads as an action, not a destination. */
  .bottom-nav-item.is-primary .bottom-nav-icon {
    background: var(--c-primary-dark, #0f766e);
    color: #fff;
    border-radius: 999px;
    padding: 0.45rem;
    margin-top: -0.15rem;
  }
  .bottom-nav-item.is-primary { color: var(--c-primary-dark, #0f766e); font-weight: 600; }
  .bottom-nav-item.is-primary.is-current::before { display: none; }

  .bottom-nav-item:focus-visible {
    outline: 2px solid var(--c-primary-dark, #0f766e);
    outline-offset: -3px;
    border-radius: 6px;
  }

  /* Content must not end underneath the bar. The bar measures 64px rendered
     (56px min-height plus vertical padding) plus a 1px top border, not the 56px
     I first reserved -- which left the footer's crisis line tucked behind it.
     72px gives clearance without a visible gap. */
  body:has(.bottom-nav) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

  /* ── More sheet ─────────────────────────────────────────────────────────── */

  .bottom-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .bottom-sheet-backdrop.is-open { opacity: 1; }
  .bottom-sheet-backdrop[hidden] { display: none; }

  .bottom-sheet {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--c-surface, #fff);
    border-radius: 18px 18px 0 0;
    padding: 0.5rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    max-height: 78vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.2s ease;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.2);
  }
  .bottom-sheet.is-open { transform: translateY(0); }
  .bottom-sheet[hidden] { display: none; }

  .bottom-sheet-grab {
    width: 40px; height: 4px;
    background: var(--c-border, #e2e8f0);
    border-radius: 999px;
    margin: 0.5rem auto 0.75rem;
  }

  .bottom-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .bottom-sheet-head h2 { margin: 0; font-size: 1.15rem; }
  .bottom-sheet-close {
    background: none; border: 0;
    font-size: 1.75rem; line-height: 1;
    color: var(--c-muted, #64748b);
    min-width: 44px; min-height: 44px;
    cursor: pointer;
  }

  .bottom-sheet-links { list-style: none; margin: 0.5rem 0 0; padding: 0; }
  .bottom-sheet-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--c-border, #e2e8f0);
  }
  .bottom-sheet-links li:last-child a { border-bottom: 0; }
  .bottom-sheet-links a[aria-current="page"] { font-weight: 600; color: var(--c-primary-dark, #0f766e); }

  .bottom-sheet-signout { margin-top: 0.75rem; }
  .bottom-sheet-signout button {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 10px;
    background: none;
    font: inherit;
    cursor: pointer;
  }

  .bottom-sheet-crisis {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--c-muted, #64748b);
  }
  /* 988 and 911 are dialable links on a phone and the most important targets
     in the sheet. They were inheriting the 35px inline-prose padding. */
  .bottom-sheet-crisis a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 0.35rem;
    font-size: 1rem;
  }

  /* Stop the page scrolling behind an open sheet. */
  body.bottom-sheet-open { overflow: hidden; }

  /* The header's own hamburger menu and the tab bar must never both be open. */
  body.nav-open .bottom-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet, .bottom-sheet-backdrop { transition: none; }
}

/* ---------------------------------------------------------------------------
   Admin section nav, rebuilt as an icon tab bar
   ---------------------------------------------------------------------------
   Appended deliberately after the older bottom-bar block near line 1649. That
   block still owns .portal-subnav, which uses the old text-only markup, so it
   is left intact rather than edited. Everything here is scoped to
   .admin-subnav and wins on source order at equal specificity.
   --------------------------------------------------------------------------- */

/* ── Desktop and tablet: one row, icons alongside labels ─────────────────── */

.admin-subnav {
  align-items: center;
  gap: 0.125rem;
  padding: 0.4rem 0.25rem 0.6rem;
}

.admin-subnav .subnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #64748b;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.admin-subnav .subnav-ico { display: inline-flex; flex: none; }
.admin-subnav .subnav-ico svg { width: 18px; height: 18px; display: block; }
.admin-subnav .subnav-text { white-space: nowrap; }

.admin-subnav .subnav-link:hover {
  background: rgba(13, 148, 136, 0.07);
  color: var(--c-primary, #0d9488);
}
.admin-subnav .subnav-link.is-current {
  background: var(--c-primary, #0d9488);
  color: #ffffff;
  font-weight: 600;
}
.admin-subnav .subnav-link.is-current:hover {
  background: var(--c-primary-dark, #0f766e);
  color: #ffffff;
}
.admin-subnav .subnav-link:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: 2px;
}

.admin-subnav .subnav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.4em;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.admin-subnav .subnav-link.is-current .subnav-badge {
  background: #ffffff;
  color: var(--c-primary-dark, #0f766e);
}

/* More belongs to the phone layout only. Every destination is already in the
   row at this width, so a button that opens a duplicate list is noise. */
.admin-subnav .subnav-more { display: none; }

/* ── Phones: fixed tab bar ───────────────────────────────────────────────── */

@media (max-width: 767px) {
  .admin-subnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0.375rem;
    padding-right: max(0.625rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom, 0px));
    padding-left: max(0.625rem, env(safe-area-inset-left, 0px));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    overflow: visible;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    border-bottom: 0;
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.07);
  }

  /* Anything past the fourth slot lives in the sheet at this width. */
  .admin-subnav .subnav-link.is-overflow { display: none; }
  .admin-subnav .subnav-more { display: inline-flex; }

  .admin-subnav .subnav-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    min-height: 56px;
    padding: 0.5rem 0.125rem 0.4375rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    color: #64748b;
    text-align: center;
    transition: color 0.15s ease, transform 0.12s ease;
  }

  /* Ellipsis rather than a wrap. A label that breaks onto a second line pushes
     the icon up and the row stops reading as a row. */
  .admin-subnav .subnav-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-subnav .subnav-ico svg { width: 25px; height: 25px; stroke-width: 1.6; }

  /* Hover is a mouse idea. On touch it sticks after the tap and leaves a stale
     highlight on whichever tab was pressed last. */
  .admin-subnav .subnav-link:hover { background: transparent; color: #64748b; }
  .admin-subnav .subnav-link:active { transform: scale(0.92); }

  .admin-subnav .subnav-link.is-current,
  .admin-subnav .subnav-link.is-current:hover {
    background: transparent;
    color: var(--c-primary-dark, #0f766e);
    font-weight: 700;
  }
  .admin-subnav .subnav-link.is-current .subnav-ico svg { stroke-width: 2.1; }

  /* A filled teal pill at 54px reads as a button you should press, not as the
     place you already are. A rail at the top edge says location instead. */
  .admin-subnav .subnav-link.is-current::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--c-primary, #0d9488);
    transform: translateX(-50%);
  }

  /* Pinned to the icon, not trailing the label. Inline is what threw the text
     off centre on Inbox and Practice profile. */
  .admin-subnav .subnav-badge,
  .admin-subnav .subnav-link.is-current .subnav-badge {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: 6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #dc2626;
    color: #ffffff;
    font-size: 0.5625rem;
    font-weight: 700;
    line-height: 13px;
  }

  body:has(.admin-subnav) {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  body.admin-sheet-open { overflow: hidden; }
}

/* body is display:flex/column, and a flex item's default min-width:auto
   resolves to its min-content width. That automatic minimum size beats the
   stretch, so a wide table inflated main.admin-shell to 536px on a 390px
   screen and dragged the heading and subtitle off the right edge with it.
   Zeroing the minimum lets the shell obey the viewport and pushes the
   overflow down into the table's own scroll box, which is where it belongs. */
body:has(.admin-subnav) > *,
body:has(.admin-subnav) .admin-shell,
body:has(.admin-subnav) .admin-shell > .container,
body:has(.admin-subnav) .admin-card { min-width: 0; max-width: 100%; }

body:has(.admin-subnav) .admin-table { max-width: 100%; }

/* The constraint has to reach descendants of the shell, not just the shell
   itself. A <section> in the inbox was still resolving to 402px inside a 350px
   content box, static, no margins, which left the message list six pixels past
   the right edge. Capping direct children of the shell and the container ends
   it regardless of what is computing the intrinsic width. */
body:has(.admin-subnav) .admin-shell > *,
body:has(.admin-subnav) .admin-shell .container > * { max-width: 100%; min-width: 0; }

/* Timestamps are a single unit. "2026-06-30 22:07:20" was breaking over three
   lines in the inbox message meta. */
body:has(.admin-subnav) .msg-meta,
body:has(.admin-subnav) .msg-meta .muted,
body:has(.admin-subnav) time { white-space: nowrap; }


/* Wrapping was the wrong lever. Squeezing eight columns into 310px meant the
   email column got a sliver, and break-word then split
   admin@tacticalmarketingpro.com over six lines and made every row 190px tall.
   A data table that scrolls sideways is the honest answer: cells keep their
   natural width, the table gets as wide as it needs, and the overflow lives in
   its own scroll box rather than in the page. Safe here because every admin
   table column is a short token, names, emails, phones, dates and statuses.
   No prose column exists, so nothing can run away horizontally. */
@media (max-width: 767px) {
  body:has(.admin-subnav) .admin-card:has(.admin-table) .admin-table,
  body:has(.admin-subnav) .admin-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body:has(.admin-subnav) .admin-table td,
  body:has(.admin-subnav) .admin-table th { white-space: nowrap; }
  body:has(.admin-subnav) .admin-table td:first-child { min-width: 0; word-break: normal; }
  body:has(.admin-subnav) .admin-table td.wrap { white-space: normal; }

  /* A scroll box with no visible edge reads as a truncated table. These are
     background layers, not gradients for decoration: the two white panels are
     background-attachment:local so they ride the scroll, while the two shadows
     are attached to the box and only show where a panel has slid away. The
     shadow on the right disappears when you reach the end. */
  body:has(.admin-subnav) .admin-table {
    background-image:
      linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
      linear-gradient(to left,  #ffffff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(15,23,42,.14), rgba(15,23,42,0)),
      linear-gradient(to left,  rgba(15,23,42,.14), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 34px 100%, 34px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* ---------------------------------------------------------------------------
   Admin header: one sticky row on a phone

   Three stacked rows measured 138px, 16.4% of a 390x844 viewport, on every
   page, and it was static, so Sign out and View as vanished as soon as you
   scrolled into a long list. Desktop keeps the inline meta exactly as it was;
   everything below is scoped to the phone breakpoint or to elements that only
   exist for it.
   --------------------------------------------------------------------------- */

.admin-pagetitle { display: none; }

.admin-acct-trigger { display: none; }

.admin-acct-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-primary, #0d9488);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.admin-acct-avatar-lg { width: 42px; height: 42px; font-size: 1.0625rem; }

.admin-acct-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.admin-acct-who { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.admin-acct-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}
.admin-acct-email {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #334155;
  overflow-wrap: anywhere;
}
.admin-acct-who .role-pill { align-self: flex-start; margin-top: 0.25rem; }

.admin-acct-block { padding: 0.875rem 0.25rem; border-bottom: 1px solid #f1f5f9; }
.admin-acct-field { display: flex; flex-direction: column; gap: 0.375rem; }
.admin-acct-field-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}
.admin-acct-field select {
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  font-size: 16px;
}
.admin-acct-help {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

@media (max-width: 767px) {
  .admin-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .admin-header .nav-row {
    flex-wrap: nowrap;
    gap: 0.625rem;
    padding: 0.5rem max(0.875rem, env(safe-area-inset-left, 0px))
             0.5rem max(0.875rem, env(safe-area-inset-right, 0px));
    min-height: 52px;
  }

  /* The word "Admin" beside the mark was restating the surface you are already
     on. The page name is the thing that was missing. */
  .admin-header .brand { flex: none; }
  .admin-header .brand-name { display: none; }

  .admin-pagetitle {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
  }

  /* Everything this held now lives in the sheet. */
  .admin-header .admin-meta { display: none; }

  .admin-acct-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: none;
    min-height: 44px;
    padding: 0 0.125rem;
    border: 0;
    background: none;
    color: #64748b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-acct-trigger:active { transform: scale(0.94); }
  .admin-acct-trigger:focus-visible {
    outline: 2px solid var(--c-primary, #0d9488);
    outline-offset: 2px;
    border-radius: 10px;
  }
  .admin-acct-caret svg { width: 15px; height: 15px; display: block; }

  /* The account sheet sits above the tab bar, same as the More sheet. */
  .admin-acct-sheet { z-index: 80; }
}

/* Desktop never opens the account sheet, and the trigger is hidden there, so
   the markup must not linger over the layout after a resize. */
@media (min-width: 768px) {
  .admin-acct-sheet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-acct-trigger:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Admin tables become cards on a phone

   Horizontal scroll was the wrong answer. It hides content behind a gesture
   with no affordance, adds a second axis of travel, and makes you hold the
   header row in working memory while you scroll away from it. Session type and
   price were sitting off the right edge of the Schedule with nothing saying so.

   One appointment, one card. Every field visible, every field labelled where it
   sits. One direction of travel. The labels are real elements rather than
   ::before content so screen readers get them too, and they are display:none on
   desktop, which also takes them out of the accessibility tree there because
   the thead already supplies the header.
   --------------------------------------------------------------------------- */

.td-label { display: none; }

@media (max-width: 767px) {
  body:has(.admin-subnav) .admin-card:has(.admin-table) .admin-table,
  body:has(.admin-subnav) .admin-table {
    display: block;
    width: 100%;
    overflow-x: visible;
    background-image: none;
    border-collapse: separate;
  }

  /* Once the table is display:block the header cells no longer associate with
     anything, so keeping them screen-reader-visible only produced a stray row
     of orphaned words. The per-cell labels carry the meaning now. */
  body:has(.admin-subnav) .admin-table thead { display: none; }

  body:has(.admin-subnav) .admin-table tbody { display: block; }

  body:has(.admin-subnav) .admin-table tbody tr {
    display: block;
    margin: 0 0 0.625rem;
    padding: 0.25rem 0.875rem 0.5rem;
    border: 1px solid #e8eaef;
    border-radius: 12px;
    background: #ffffff;
  }
  body:has(.admin-subnav) .admin-table tbody tr:last-child { margin-bottom: 0; }

  body:has(.admin-subnav) .admin-table td {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    width: auto;
    min-height: 0;
    padding: 0.4375rem 0;
    border: 0;
    border-bottom: 1px solid #f4f6f8;
    white-space: normal;
    text-align: left;
  }
  body:has(.admin-subnav) .admin-table td:last-child { border-bottom: 0; }

  /* Fixed label column, so values line up down the card instead of jittering
     with label length. Everything scans on one vertical edge. */
  body:has(.admin-subnav) .admin-table .td-label {
    display: block;
    flex: 0 0 7.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    line-height: 1.5;
  }

  /* The value side owns the remaining width and wraps normally. A long email
     wraps at sensible points instead of being cut off or split per letter. */
  body:has(.admin-subnav) .admin-table td > :not(.td-label) { min-width: 0; }

  /* Below 420px the 7.25rem label column leaves the value about 50px, which
     forced a 30 character address onto six broken lines on the Schedule.
     Scoped to tables that actually carry a client identifier: the Schedule
     labels are Time, Client, Session, Video and Status, all of which hold one
     line at 5rem. Applying this globally was tried and reverted, because
     "Last sign-in" and "Last message" on /admin/clients and /admin/users wrap
     at 5rem, so those tables keep the wider column. */
  @media (max-width: 420px) {
    body:has(.admin-subnav) .admin-table:has(.appt-client) .td-label { flex: 0 0 5rem; }
  }

  /* `anywhere` rather than break-word, and only here. A bare text value becomes
     an anonymous flex item, which gets min-width:auto and cannot be reached by
     a selector, so info@powermend.com was pushing its cell to 354px inside a
     224px column and getting cut. break-word does not feed min-content sizing;
     anywhere does, which is exactly what is needed to let it shrink.

     This is safe here in a way it was not in the old table layout. There is no
     column algorithm left to collapse: the label track is fixed and the value
     track takes the rest, roughly 224px, far wider than any real word. It
     triggers on an unbreakable address and on nothing else. */
  body:has(.admin-subnav) .admin-table td { overflow-wrap: anywhere; }

  /* Actions carried an empty header, so a label column would be dead space.
     The control gets the full card width and reads as the thing you do next. */
  body:has(.admin-subnav) .admin-table td.td-actions {
    justify-content: flex-start;
    padding-top: 0.625rem;
  }
  body:has(.admin-subnav) .admin-table td.td-actions:empty { display: none; }

  /* The empty-state row is a message, not a record. */
  body:has(.admin-subnav) .admin-table td[colspan] {
    display: block;
    text-align: center;
    padding: 1.25rem 0;
  }
}

/* The client identifier on a Schedule card. A stored name is short and sits on
   one line. With no name on file the full address renders here, and an address
   must never be cut off with an ellipsis: a truncated address is exactly the
   ambiguity this cell exists to remove. Wrap instead, and break inside the
   string because an address carries no spaces to break on. No line clamp: at
   320px the value column is about 110px wide and a 30 character address needs
   three lines, so a two line cap reintroduced exactly the truncation this rule
   exists to remove. A slightly taller card is the cheaper cost. */
.appt-client {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-height: 1.3;
}

/* Two bottom bars can never coexist. The footer already skips bottom-nav on
   /admin, but a view that renders its own markup would otherwise stack a
   second bar on top of this one. Belt as well as braces. */
body:has(.admin-subnav) .bottom-nav,
body:has(.admin-subnav) .bottom-sheet,
body:has(.admin-subnav) .bottom-sheet-backdrop { display: none !important; }

/* ── The More sheet ──────────────────────────────────────────────────────── */

.admin-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.admin-sheet-backdrop.is-open { opacity: 1; }

.admin-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  max-height: 82vh;
  overflow-y: auto;
  padding-top: 0.5rem;
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
  padding-bottom: calc(1.25rem + max(0.5rem, env(safe-area-inset-bottom, 0px)));
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.admin-sheet.is-open { transform: translateY(0); }

.admin-sheet-grab {
  width: 38px;
  height: 4px;
  margin: 0.375rem auto 0.5rem;
  border-radius: 999px;
  background: #cbd5e1;
}

.admin-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eef2f7;
}
.admin-sheet-head h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.admin-sheet-close {
  border: 0;
  background: none;
  color: #94a3b8;
  font-size: 1.75rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}
.admin-sheet-close:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: 2px;
}

.admin-sheet-links { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.admin-sheet-links li + li { border-top: 1px solid #f1f5f9; }
.admin-sheet-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.5rem 0.25rem;
  color: #334155;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.admin-sheet-links a:active { background: #f8fafc; }
.admin-sheet-links a.is-current { color: var(--c-primary-dark, #0f766e); font-weight: 700; }
.admin-sheet-links a:focus-visible {
  outline: 2px solid var(--c-primary, #0d9488);
  outline-offset: -2px;
  border-radius: 8px;
}

.admin-sheet-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f0fdfa;
  color: var(--c-primary-dark, #0f766e);
}
.admin-sheet-ico svg { width: 18px; height: 18px; display: block; }
.admin-sheet-label { flex: 1 1 auto; }

.admin-sheet-count {
  flex: none;
  min-width: 1.5em;
  padding: 0.125rem 0.45em;
  border-radius: 999px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.admin-sheet-chev { flex: none; color: #cbd5e1; display: inline-flex; }
.admin-sheet-chev svg { width: 16px; height: 16px; display: block; }

.admin-sheet-signout { margin-top: 0.875rem; }
.admin-sheet-signout button {
  width: 100%;
  min-height: 46px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  color: #b3431a;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-sheet-signout button:active { background: #fff7ed; }

/* Desktop never opens the sheet, but a stale `hidden` removal from a resize
   would otherwise leave it parked over the layout. */
@media (min-width: 768px) {
  .admin-sheet,
  .admin-sheet-backdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sheet,
  .admin-sheet-backdrop,
  .admin-subnav .subnav-link { transition: none; }
  .admin-subnav .subnav-link:active { transform: none; }
}


/* Patient documents. One row per record: what it is on the left, the way to
   take a copy on the right, so the action is never hunted for. */
.doc-list { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.doc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--c-border);
}
.doc-row:last-child { border-bottom: 0; }
.doc-main { min-width: 0; }
.doc-main strong { display: block; }
@media (max-width: 560px) {
  .doc-row { flex-direction: column; align-items: stretch; }
  .doc-row .btn { width: 100%; justify-content: center; }
}


/* Billing. The four numbers a patient actually wants sit on one line before
   any per-session detail, because "what do I owe" is the whole question. */
.bill-summary {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  margin: 0.5rem 0 0.25rem;
}
.bill-summary > div { display: flex; flex-direction: column; }
.bill-summary strong { font-size: 1.35rem; color: var(--c-primary-dark); line-height: 1.3; }
.bill-summary strong.bill-due { color: #b45309; }
.bill-pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; margin-right: 0.4rem;
}
.bill-paid   { background: #ecfdf5; color: #065f46; }
.bill-due    { background: #fffbeb; color: #92400e; }
.bill-refund { background: #eff6ff; color: #1e40af; }
.bill-muted  { background: #f1f5f9; color: #475569; }
.doc-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
@media (max-width: 560px) {
  .doc-actions { width: 100%; }
  .doc-actions .btn, .doc-actions form { flex: 1; }
  .doc-actions form .btn { width: 100%; }
  .bill-summary { gap: 1rem 1.75rem; }
}

.doc-history { margin-top: 0.4rem; }
.doc-history summary { cursor: pointer; font-size: 0.85rem; color: var(--c-primary-dark); }
.doc-history ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }

/* Long unbreakable strings (emails, meeting URLs) must wrap inside cards */
.break-all{overflow-wrap:anywhere;word-break:break-all;}

/* === Rotating full-bleed hero (home only, scoped .hero-rotator) === */
.hero.hero-rotator{ position:relative; overflow:hidden; padding:clamp(3.5rem,7vw,6rem) 0; min-height:clamp(460px,72vh,640px); display:flex; align-items:center; background:#0f2f2c; }
.hero-rotator .hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-rotator .hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; }
.hero-rotator .hero-slide.is-on{ opacity:1; }
.hero-rotator .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(19,78,74,.86) 0%, rgba(15,118,110,.62) 100%); }
.hero-rotator .container{ position:relative; z-index:2; width:100%; }
.hero-rotator .hero-copy .eyebrow{ color:rgba(255,255,255,.92); }
.hero-rotator .hero-copy h1{ color:#fff; }
.hero-rotator .hero-copy .lede{ color:rgba(255,255,255,.92); }
.hero-rotator .trust-row li{ color:rgba(255,255,255,.92); }
.hero-rotator .trust-row li::before{ background:#fff; }
.hero-rotator .btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.85); background:transparent; }
.hero-rotator .btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
.hero-rotator .hero-card--glass{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 30px rgba(2,20,18,.30); }
.hero-rotator .hero-card--glass .card-heading{ color:#c7f0e6; }
.hero-rotator .hero-card--glass .facts > div{ border-bottom-color:rgba(255,255,255,.18); }
.hero-rotator .hero-card--glass .facts dt{ color:rgba(255,255,255,.82); }
.hero-rotator .hero-card--glass .facts dd{ color:#fff; }
@media (max-width:880px){ .hero.hero-rotator{ min-height:auto; padding:3rem 0; } }
@media (prefers-reduced-motion: reduce){ .hero-rotator .hero-slide{ transition:none; } }

/* === Simplified mobile homepage (scoped .home-mobile, shown <=880px) === */
.home-mobile{ display:none; }
@media (max-width:880px){
  .home-desktop{ display:none; }
  .home-mobile{ display:block; }
}
.home-mobile .mh-hero{ position:relative; min-height:430px; display:flex; align-items:flex-end; overflow:hidden; }
.home-mobile .mh-slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.1s ease; }
.home-mobile .mh-slide.on{ opacity:1; }
.home-mobile .mh-ov{ position:absolute; inset:0; background:linear-gradient(165deg, rgba(19,78,74,.72) 0%, rgba(15,118,110,.55) 55%, rgba(19,78,74,.92) 100%); }
.home-mobile .mh-in{ position:relative; z-index:2; padding:22px 20px 26px; color:#fff; }
.home-mobile .mh-eyebrow{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.9); margin:0 0 8px; }
.home-mobile .mh-h1{ font-size:31px; line-height:1.06; margin:0 0 10px; font-weight:600; color:#fff; }
.home-mobile .mh-lede{ font-size:15px; color:rgba(255,255,255,.94); margin:0 0 18px; }
.home-mobile .mh-cta{ display:flex; gap:10px; }
.home-mobile .mh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; font-weight:600; text-decoration:none; border-radius:999px; font-size:15px; padding:13px 18px; transition:transform .12s ease; }
.home-mobile .mh-btn:active{ transform:scale(.97); }
.home-mobile .mh-btn-book{ background:#fff; color:#0f766e; flex:1; }
.home-mobile .mh-btn-call{ border:1.5px solid rgba(255,255,255,.85); color:#fff; }
.home-mobile .mh-btn-dark{ background:#0f172a; color:#fff; }
.home-mobile .mh-trust{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:14px 20px; background:#134e4a; color:#eafaf6; font-size:12.5px; }
.home-mobile .mh-trust span{ display:inline-flex; align-items:center; gap:6px; }
.home-mobile .mh-dot{ width:6px; height:6px; border-radius:50%; background:#5eead4; }
.home-mobile .mh-sec{ padding:26px 20px; }
.home-mobile .mh-kick{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#0f766e; margin:0 0 6px; }
.home-mobile .mh-h2{ font-size:21px; margin:0 0 16px; }
.home-mobile .mh-fine{ font-size:12px; color:#64748b; margin:14px 0 0; }
.home-mobile .mh-muted{ font-size:14px; color:#475569; margin:0 0 12px; }
.home-mobile .mh-chooser{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.home-mobile .mh-path{ border:1px solid #e2e8f0; border-radius:14px; padding:16px 14px; text-decoration:none; color:#0f172a; display:block; transition:transform .12s ease; }
.home-mobile .mh-path:active{ transform:scale(.99); }
.home-mobile .mh-path .t{ display:block; font-weight:600; font-size:16px; color:#0f766e; margin-bottom:4px; }
.home-mobile .mh-path .d{ display:block; font-size:12.5px; color:#64748b; line-height:1.45; }
.home-mobile .mh-path .go{ display:inline-block; font-size:12.5px; color:#0f766e; font-weight:600; margin-top:10px; }
.home-mobile .mh-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.home-mobile .mh-chip{ font-size:13px; padding:8px 13px; border-radius:999px; background:#f0fdfa; color:#134e4a; border:1px solid #cdeee6; }
.home-mobile .mh-seeall{ display:inline-block; margin-top:14px; font-size:13.5px; color:#0f766e; font-weight:600; text-decoration:none; }
.home-mobile .mh-warm{ background:#f0fdfa; }
.home-mobile .mh-steps{ list-style:none; margin:0; padding:0; }
.home-mobile .mh-steps li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px solid #d9f0ea; }
.home-mobile .mh-steps li:last-child{ border-bottom:none; }
.home-mobile .mh-steps .n{ flex:0 0 26px; height:26px; border-radius:50%; background:#0d9488; color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.home-mobile .mh-steps .txt{ font-size:14px; line-height:1.4; }
.home-mobile .mh-steps .txt b{ display:block; margin-bottom:1px; }
.home-mobile .mh-band{ padding:30px 20px; background:#134e4a; color:#fff; text-align:center; }
.home-mobile .mh-band .mh-h2{ color:#fff; }
.home-mobile .mh-band p{ margin:0 0 16px; font-size:13.5px; color:rgba(255,255,255,.85); }
.home-mobile .mh-band .mh-btn-book{ display:inline-flex; }
.home-mobile .mh-contact{ padding-bottom:46px; }
.home-mobile .mh-warn{ font-size:12.5px; color:#92400e; background:#fef3c7; border:1px solid #fde68a; padding:10px 12px; border-radius:10px; margin:0 0 14px; }
.home-mobile .mh-crisis{ font-size:12.5px; color:#475569; margin-top:14px; }
.home-mobile .mh-crisis a{ color:#0f766e; font-weight:600; }
.home-mobile .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.home-mobile .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: no-preference){
  .home-mobile .mh-slide.on{ animation:mhKen 13s ease-out forwards; }
}
@keyframes mhKen{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
@media (prefers-reduced-motion: reduce){
  .home-mobile .reveal{ opacity:1; transform:none; transition:none; }
  .home-mobile .mh-slide{ transition:none; }
}