/* Brand palette (matches assets/css/typography.css and the admin app):
   --bl-teal-dark:  #125773   banner background, primary action
   --bl-teal-mid:   #4694a6   accents, focus outlines
   --bl-text:       #4e4c4c   body text
   --bl-text-soft:  #66757b   secondary text
   --bl-border:     #cbd5e0   input borders
   --bl-bg:         #ffffff   page background
   --bl-bg-soft:    #f8f9f9   form-fill background
   --bl-success:    #2f7d4f   muted green
   --bl-error:      #a83232   muted red
*/

/* Lato, self-hosted (the site declares the Lato stack everywhere but never
   loaded the actual font — the public site gets it from GHL globally). 400 +
   700 cover body and bold/headings; italic is synthesized. font-src 'self'
   in the CSP already permits these. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/lato-700.woff2') format('woff2');
}

:root {
  --bl-teal-dark: #125773;
  --bl-teal-mid: #4694a6;
  --bl-text: #4e4c4c;
  --bl-text-soft: #66757b;
  --bl-border: #cbd5e0;
  --bl-bg: #ffffff;
  --bl-bg-soft: #f8f9f9;
  --bl-success: #2f7d4f;
  --bl-error: #a83232;
}

* { box-sizing: border-box; }

/* `display: flex` on the forms otherwise beats the [hidden] attribute on
   specificity, so JS-driven hiding silently no-ops. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- banner ---------- */

.portal-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* Match the public site header (assets/css/header.css): 1.5rem inset all
     around + a 100px logo => ~148px tall, same teal background, sticky. */
  padding: 1.5rem;
  background: var(--bl-teal-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.portal-banner__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  text-decoration: none;
}

.portal-banner__logo {
  display: block;
  height: auto;
  max-height: 100px;   /* matches --bl-header-logo-height in header.css */
  width: auto;
}

/* Styled to mirror the public header's LOGIN link (.bl-header__login):
   borderless teal-mid bold text that brightens to white on hover. */
.portal-banner__signout {
  flex: 0 1 auto;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.0625rem;          /* 17px, matches --bl-header-link-font-size */
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bl-teal-mid);     /* #4694a6, same as the LOGIN link */
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease;
}

.portal-banner__signout:hover,
.portal-banner__signout:focus {
  color: #ffffff;
  outline: none;
}

/* ---------- main ---------- */

.portal-main {
  max-width: 480px;
  margin: 48px auto;
  padding: 0 24px;
}

h1 {
  margin: 0 0 24px 0;
  font-size: 24px;
  color: var(--bl-teal-dark);
  font-weight: 700;
}

/* ---------- auth ---------- */

.portal-auth__loading {
  text-align: center;
  color: var(--bl-text-soft);
  padding: 48px 0;
}

.portal-auth__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.portal-auth__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--bl-text-soft);
  font-weight: 700;
}

.portal-auth__form input {
  font: inherit;
  font-size: 15px;
  color: var(--bl-text);
  background: var(--bl-bg);
  padding: 10px 12px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  width: 100%;
}

.portal-auth__form input:focus {
  outline: none;
  border-color: var(--bl-teal-mid);
  box-shadow: 0 0 0 2px rgba(70, 148, 166, 0.15);
}

.portal-auth__hint {
  margin: 0;
  font-size: 14px;
  color: var(--bl-text-soft);
}

.portal-auth__switch {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--bl-text-soft);
}

.portal-auth__switch a {
  color: var(--bl-teal-mid);
  font-weight: 700;
  text-decoration: none;
}

.portal-auth__switch a:hover {
  text-decoration: underline;
}

/* Secondary affordance (first-time activation) — de-emphasized vs the
   primary "Forgot your password?" link, since most sign-ins are returning. */
.portal-auth__switch--muted {
  margin-top: 0;
  font-size: 13px;
  opacity: 0.8;
}

/* ---------- buttons ---------- */

.portal-btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--bl-teal-dark);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
  margin-top: 8px;
}

.portal-btn:hover:not(:disabled) {
  background: #0e4860;
}

.portal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- status ---------- */

.portal-status {
  margin: 8px 0 0 0;
  font-size: 14px;
  min-height: 1.5em;
}

.portal-status[data-status="success"] { color: var(--bl-success); }
.portal-status[data-status="error"]   { color: var(--bl-error); }
.portal-status[data-status="pending"] { color: var(--bl-text-soft); }

/* ---------- app ---------- */

.portal-app__lead {
  margin: 0;
  font-size: 16px;
  color: var(--bl-text-soft);
}

/* The auth screens are narrow; the logs view needs the full width. Widened
   by JS (setSectionState) only when the app view is showing. */
.portal-main--wide {
  max-width: 1080px;
}

/* ---------- logs: compose ---------- */

.logs-compose { margin-bottom: 32px; }

.logs-compose__heading {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--bl-teal-mid);
}

.logs-compose__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logs-compose__subject {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--bl-text);
}
.logs-compose__subject input {
  flex: 1;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
}

/* Quill snow draws the toolbar + container borders; we just size the editor
   and keep its font consistent with the app. */
.logs-compose__editor { background: #fff; }
.logs-compose .ql-container { font-family: inherit; font-size: 16px; }
.logs-compose .ql-editor { min-height: 160px; }

.logs-compose__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logs-compose__spacer { flex: 1 1 auto; }
.logs-compose__hint {
  font-size: 13px;
  color: var(--bl-text-soft);
  font-style: italic;
}

/* drop target highlight on the editor */
.logs-compose__editor.is-dragover {
  outline: 2px dashed var(--bl-teal-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* pending attachment chips (before save) */
.logs-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.logs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 16px;
  font-size: 13px;
}
.logs-chip__remove {
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--bl-text-soft);
}
.logs-chip__remove:hover { color: var(--bl-error); }

/* attachment links inside a saved message */
.bubble__attachments {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bubble__attachment {
  font-size: 14px;
  color: var(--bl-teal-mid);
  text-decoration: none;
  cursor: pointer;
}
.bubble__attachment:hover { text-decoration: underline; }

/* Size picker uses inline-style px values (so the formatting survives the
   server sanitizer); snow.css only labels its named sizes, so without these
   every item renders as the default "Normal". Label each px value. */
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before { content: '22px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; }
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.logs-compose .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; }

/* Custom link dialog */
.logs-linkdialog {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  width: 360px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.logs-linkdialog label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-text-soft);
}
.logs-linkdialog input {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
}
.logs-linkdialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.logs-linkdialog__actions .portal-btn { margin-top: 0; padding: 8px 16px; }

/* ---------- logs: archive bar ---------- */

.logs__title { margin-bottom: 16px; }

.logs-archive {
  margin-top: 24px;
}

.logs-archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
}

.logs-archive__heading {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--bl-teal-mid);
  flex: 1 1 100%;
}

.logs-archive__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.logs-archive__label { font-size: 14px; color: var(--bl-text-soft); }

.logs-archive__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.logs-archive__filter input[type="date"] {
  font: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  color: var(--bl-text);
}

/* small inline "Today" affordance on each calendar field */
.logs-link {
  background: transparent;
  border: 0;
  padding: 0 2px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bl-teal-mid);
  cursor: pointer;
}
.logs-link:hover { text-decoration: underline; }
.logs-link--danger { color: #b3261e; }

/* ghost = outlined secondary button (Print, By-subject inactive, etc.) */
.portal-btn--ghost {
  background: #fff;
  color: var(--bl-teal-dark);
  border: 1px solid var(--bl-border);
}
.portal-btn--ghost:hover:not(:disabled) { background: var(--bl-bg-soft); }

/* flat / by-subject segmented toggle */
.logs-archive__view {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--bl-border);
  border-radius: 6px;
  overflow: hidden;
}
.logs-toggle {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border: 0;
  background: #fff;
  color: var(--bl-text-soft);
  cursor: pointer;
}
.logs-toggle.is-active {
  background: var(--bl-teal-dark);
  color: #fff;
}

/* ---------- logs: message list + bubbles ---------- */

.logs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.logs-empty {
  color: var(--bl-text-soft);
  font-size: 15px;
  text-align: center;
  padding: 24px 0;
}

.bubble {
  display: flex;
  gap: 12px;
  max-width: 78%;
}
.bubble--coach  { align-self: flex-start; }
.bubble--client { align-self: flex-end; flex-direction: row-reverse; }

.bubble__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.bubble--coach  .bubble__avatar { background: var(--bl-teal-mid); }
.bubble--client .bubble__avatar { background: var(--bl-success); }

.bubble__box {
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  padding: 12px 16px;
  background: var(--bl-bg);
  min-width: 0;
}
.bubble--coach .bubble__box { border-color: var(--bl-teal-mid); }

.bubble__meta {
  font-size: 13px;
  color: var(--bl-text-soft);
  margin-bottom: 6px;
}
.bubble__author { font-weight: 700; color: var(--bl-teal-dark); }
.bubble__edited { font-style: italic; }

.bubble__subject {
  font-weight: 700;
  color: var(--bl-text);
  margin: 2px 0 6px;
}

.bubble__body { font-size: 15px; word-wrap: break-word; }
.bubble__body p:first-child { margin-top: 0; }
.bubble__body p:last-child  { margin-bottom: 0; }

/* ---------- logs: by-subject grouping ---------- */

.logs-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--bl-border);
  border-radius: 8px;
}
.logs-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.logs-group__subject { font-weight: 700; color: var(--bl-teal-dark); }
.logs-group__count { font-size: 13px; color: var(--bl-text-soft); }

/* ---------- logs: print ---------- */

@media print {
  .portal-banner,
  .logs-compose,
  .logs-archive__bar { display: none !important; }
  .portal-main,
  .portal-main--wide { max-width: none; margin: 0; padding: 0; }
  .bubble { max-width: 100%; }
}

/* ---------- banner account (name + log out) ---------- */

.portal-banner__account {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.portal-banner__user {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ---------- coach masquerade ("View as client") ---------- */

/* A persistent amber strip makes it unmistakable the coach is viewing as a
   client, and the read-only rules below hide every write affordance (defense
   in depth — the API also refuses writes while masquerading). */
.is-masquerade .portal-banner {
  border-bottom: 4px solid #f0a500;
}

.is-masquerade .portal-banner__user::before {
  content: "👁 ";
}

.is-masquerade .portal-banner__user {
  background: #f0a500;
  color: #3a2c00;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* Read-only: the write rows — per-bubble actions (Reply/Edit/Delete), the
   data-form Save/Save&Send/Cancel/Clear row, and the profile actions (Save/
   Change Password/Manage Subscriptions) — stay VISIBLE so the masquerade view
   matches what the client sees, but are greyed out and made inert (no clicking
   or submitting). The API also refuses every write while masquerading, so this
   is the visual half of the read-only guarantee, not the only one. (Same
   treatment as the COACH CONNECTION composer below.) */
.is-masquerade .bubble__actions,
.is-masquerade .dataform__actions,
.is-masquerade .profile-actions {
  pointer-events: none;
  opacity: 0.5;
}

/* The COACH CONNECTION composer stays VISIBLE in masquerade so the coach sees
   exactly what the client sees (e.g. to walk them through it on a call), but is
   made inert — no focus, typing, clicking, or submitting. The API also refuses
   every write while masquerading (see masqueradePath/api guard), so this is the
   visual half of that read-only guarantee, not the only one. */
.is-masquerade [data-compose] {
  pointer-events: none;
}

/* ---------- primary nav ---------- */

.portal-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  padding: 0 1.5rem;
  background: var(--bl-teal-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 148px;            /* sits just under the ~148px banner */
  z-index: 999;
}

.portal-nav__item {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 0.85rem 0;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bl-teal-mid);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.portal-nav__item:hover,
.portal-nav__item:focus { color: #fff; outline: none; }

.portal-nav__item.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---------- panes ---------- */

.portal-pane__lead { color: var(--bl-text-soft); }

/* ---------- forms layout ---------- */

.forms-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}

.forms-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--bl-border);
  padding-right: 1rem;
}

.forms-menu__item {
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bl-text-soft);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.forms-menu__item:hover:not(:disabled) { background: var(--bl-bg-soft); color: var(--bl-text); }

.forms-menu__item.is-active {
  background: var(--bl-teal-dark);
  color: #fff;
}

.forms-menu__item:disabled {
  color: var(--bl-border);
  cursor: not-allowed;
}

/* ---------- dashboard: upcoming appointments ---------- */

.dash-panel__title {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  color: var(--bl-text);
}

.appt-list { display: flex; flex-direction: column; gap: 0.75rem; }

.appt-card {
  display: flex;
  gap: 1rem;
  border: 1px solid var(--bl-border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  background: var(--bl-bg);
}

.appt-card__date {
  flex: 0 0 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--bl-border);
  padding-right: 1rem;
  color: var(--bl-teal-dark);
  line-height: 1.15;
}
.appt-card__dow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bl-text-soft); }
.appt-card__day { font-size: 1.75rem; font-weight: 700; }
.appt-card__mon { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.appt-card__year { font-size: 0.7rem; color: var(--bl-text-soft); }

.appt-card__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.appt-card__top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.appt-card__title { font-weight: 700; color: var(--bl-text); }
.appt-card__time { color: var(--bl-text); }
.appt-card__loc { color: var(--bl-text-soft); font-size: 0.9rem; word-break: break-word; }

.appt-card__join {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  background: var(--bl-teal-dark);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.appt-card__join:hover { background: var(--bl-teal-mid); }

.appt-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bl-bg-soft);
  color: var(--bl-text-soft);
  border: 1px solid var(--bl-border);
}
.appt-badge--confirmed,
.appt-badge--showed { background: #e7f1ec; color: var(--bl-success); border-color: #bcd9c9; }

.appt-card__cal {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.appt-card__cal-label { font-size: 0.78rem; color: var(--bl-text-soft); }
.appt-card__cal-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--bl-teal-mid);
  cursor: pointer;
  text-decoration: underline;
}
.appt-card__cal-link:hover { color: var(--bl-teal-dark); }

/* ---------- versioned data forms (DISCOVERY, …) ---------- */

.dataform__head h1 {
  margin: 0 0 0.25rem;
}

.dataform__intro {
  margin: 0 0 0.75rem;
  color: var(--bl-text-soft);
  max-width: 70ch;
}

.dataform__bullets {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  color: var(--bl-text-soft);
}

.dataform__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-top: 1px solid var(--bl-border);
  border-bottom: 1px solid var(--bl-border);
}

.dataform__history {
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--bl-border);
  border-radius: 4px;
  background: #fff;
  color: var(--bl-text);
}

.dataform__viewing {
  font-size: 14px;
  font-style: italic;
  color: var(--bl-teal-dark);
}

.portal-btn--sm {
  padding: 8px 14px;
  font-size: 14px;
  margin-top: 0;
}

.dataform__field {
  display: block;
  padding: 1.25rem 0;
  border-top: 1px solid var(--bl-border);
}

.dataform__field:first-of-type {
  border-top: 0;
}

.dataform__label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dataform__sublabel {
  margin: -0.25rem 0 0.5rem;
  font-size: 14px;
  color: var(--bl-text-soft);
}

/* Section heading that groups the fields beneath it (Sleep Journal et al.). */
.dataform__section {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bl-teal-dark);
  border-top: 1px solid var(--bl-border);
}
/* The field opening a section sits right under the heading, so it shouldn't
   draw its own top border on top of the section's. */
.dataform__section + .dataform__field {
  border-top: 0;
}

/* Radio / checkbox option lists. */
.dataform__choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dataform__choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.dataform__choice input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--bl-teal-mid);
  cursor: pointer;
}
.dataform__choice input:disabled {
  cursor: default;
}

/* Multiple answer boxes for one prompt: stacked, sharing borders, with only
   the outer corners rounded — one visual control per prompt. */
.dataform__boxes .dataform__input {
  border-radius: 0;
}

.dataform__boxes .dataform__input + .dataform__input {
  margin-top: -1px;
}

.dataform__boxes .dataform__input:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.dataform__boxes .dataform__input:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.dataform__boxes .dataform__input:focus {
  position: relative;   /* lift the focused box's border above its neighbours */
  z-index: 1;
}

.dataform__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--bl-border);
  border-radius: 6px;
  resize: vertical;
}

.dataform__input:focus {
  outline: none;
  border-color: var(--bl-teal-mid);
}

.dataform__input:read-only {
  background: var(--bl-bg-soft);
  color: var(--bl-text-soft);
}

.dataform__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bl-border);
}

/* Print: show only the questions + answers; drop nav, toolbar, buttons. */
@media print {
  body * { visibility: hidden; }
  .dataform, .dataform * { visibility: visible; }
  .dataform { position: absolute; left: 0; top: 0; width: 100%; }
  .dataform__toolbar,
  .dataform__actions,
  .dataform .portal-status { display: none; }
  .dataform__input {
    border: 0;
    padding: 0;
    color: #000;
    background: #fff;
  }
}

/* ---------- profile form ---------- */

.form-section {
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.5rem 0;
}

.form-section legend {
  padding: 0 0.5rem;
  font-weight: 700;
  color: var(--bl-teal-dark);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bl-text-soft);
}

.form-field--wide { grid-column: 1 / -1; }

.form-field input,
.form-field select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--bl-text);
  background: var(--bl-bg);
  border: 1px solid var(--bl-border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--bl-teal-mid);
}

.form-field input[readonly] {
  background: var(--bl-bg-soft);
  color: var(--bl-text-soft);
}

.form-hint { font-weight: 400; font-size: 0.8125rem; color: var(--bl-text-soft); }

/* phone rows */
.form-phones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 0.75rem;
}

.phone-row {
  display: grid;
  grid-template-columns: 1fr 130px auto auto;
  gap: 0.6rem;
  align-items: center;
}

.phone-row input,
.phone-row select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--bl-text);
  background: var(--bl-bg);
  border: 1px solid var(--bl-border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}

/* intl-tel-input wraps the phone input in a .iti container; make it fill the
   first (1fr) grid column. */
.phone-row .iti { width: 100%; }

/* Flagged by saveProfile when a number fails libphonenumber validation. */
.phone-row--invalid [data-phone-input] { border-color: var(--bl-error); }

.phone-row__primary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  color: var(--bl-text-soft);
  white-space: nowrap;
}

.phone-row__remove {
  background: none;
  border: 0;
  color: var(--bl-text-soft);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.phone-row__remove:hover { color: var(--bl-error); }

.profile-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.portal-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }

/* ---------- modal (change password) ---------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(18, 87, 115, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.modal__panel {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal__panel h2 { margin: 0 0 1rem; color: var(--bl-teal-dark); }
.modal__panel .form-field { margin-bottom: 1rem; }
.modal__panel p { color: var(--bl-text); margin: 0 0 1rem; }

/* password field with show/hide eyeball */
.pwd-input { position: relative; display: block; }
.pwd-input input { width: 100%; padding-right: 2.6rem; }

.pwd-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0.3rem;
  color: var(--bl-text-soft);
  cursor: pointer;
}
.pwd-toggle:hover,
.pwd-toggle:focus { color: var(--bl-teal-mid); outline: none; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .forms-layout { grid-template-columns: 1fr; }
  .forms-menu { border-right: 0; border-bottom: 1px solid var(--bl-border); padding: 0 0 1rem; flex-direction: row; flex-wrap: wrap; }
  .form-grid { grid-template-columns: 1fr; }
  .phone-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- agreements (bespoke read-only) ---------- */

.agreements__title { margin: 0 0 1.25rem; color: var(--bl-teal-dark); }
.agreements__list { display: flex; flex-direction: column; gap: 0.75rem; }

/* A summary row is a full-width button: icon · name/sub · 3 columns · chevron */
.agreement-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--bl-text);
}
.agreement-row:hover,
.agreement-row:focus { border-color: var(--bl-teal-mid); outline: none; }
.agreement-row__icon { font-size: 1.4rem; color: var(--bl-teal-mid); }
.agreement-row__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.agreement-row__title { font-weight: 700; color: var(--bl-teal-dark); }
.agreement-row__sub { font-size: 0.85rem; color: var(--bl-text-soft); }
.agreement-row__col { display: flex; flex-direction: column; gap: 0.15rem; text-align: right; }
.agreement-row__k { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--bl-text-soft); }
.agreement-row__v { font-weight: 700; }
.agreement-row__chev { font-size: 1.5rem; color: var(--bl-text-soft); }

/* The detail dialog reuses .modal but is wider and scrolls. */
.agreement-modal__panel {
  max-width: 880px;
  max-height: 90vh;
  overflow: auto;
  text-align: left;
}
.agreement-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.agreement-detail__title { margin: 0; color: var(--bl-teal-dark); }
.agreement-detail__intro { margin: 0 0 0.25rem; }
.agreement-detail__contact { font-style: italic; color: var(--bl-text-soft); margin: 0 0 1.25rem; }

/* Settled-terms grid: 4 columns, light band (matches the agreement page). */
.agreement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 1.25rem;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.agreement-grid__k { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--bl-text-soft); margin-bottom: 0.2rem; }
.agreement-grid__v { font-weight: 700; }

.agreement-schedule { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.agreement-schedule__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  padding: 0.9rem 1.25rem;
}
.agreement-schedule__right { text-align: right; }
.agreement-schedule__k { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--bl-text-soft); margin-bottom: 0.2rem; }
.agreement-schedule__v { font-weight: 700; }

.agreement-terms__head {
  font-weight: 700;
  color: var(--bl-teal-dark);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bl-border);
  margin-bottom: 1rem;
}
.agreement-terms__body { font-size: 0.9rem; line-height: 1.5; }
.agreement-terms[data-state="collapsed"] .agreement-terms__body {
  max-height: 16rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.agreement-terms__toggle {
  display: block;
  margin: 0.75rem auto 0;
  padding: 0.4rem 1rem;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 999px;
  color: var(--bl-text);
  cursor: pointer;
  font: inherit;
}
.agreement-terms__toggle:hover,
.agreement-terms__toggle:focus { border-color: var(--bl-teal-mid); outline: none; }

.agreement-detail__signed {
  text-align: center;
  color: var(--bl-text-soft);
  border-top: 1px solid var(--bl-border);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.agreement-detail__actions { justify-content: flex-start; }

@media (max-width: 720px) {
  .agreement-row { grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem; }
  .agreement-row__col:nth-of-type(2) { display: none; } /* hide UNTIL on narrow */
  .agreement-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Print: show only the open agreement modal, fully expanded, no chrome. */
@media print {
  .agreement-modal, .agreement-modal * { visibility: visible; }
  .agreement-modal {
    position: absolute;
    inset: 0;
    display: block;
    background: #fff;
    padding: 0;
  }
  .agreement-modal__panel {
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    padding: 0;
  }
  .agreement-detail__print,
  .agreement-detail__actions,
  .agreement-terms__toggle { display: none !important; }
  .agreement-terms__body {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* ---------- dashboard: invoices ---------- */

.invoice-list { display: flex; flex-direction: column; gap: 0.6rem; }

.invoice-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: var(--bl-bg);
  border: 1px solid var(--bl-border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.invoice-row:hover { border-color: var(--bl-teal-mid); background: var(--bl-bg-soft); }
.invoice-row__main { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 auto; min-width: 0; }
.invoice-row__title { font-weight: 700; color: var(--bl-text); }
.invoice-row__sub { font-size: 0.85rem; color: var(--bl-text-soft); }
.invoice-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.invoice-row__amount { font-weight: 700; color: var(--bl-text); }
.invoice-row__due { font-size: 0.78rem; color: var(--bl-error); font-weight: 700; }
.invoice-row__chev { font-size: 1.5rem; color: var(--bl-border); }

.invoice-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--bl-bg-soft);
  color: var(--bl-text-soft);
  border: 1px solid var(--bl-border);
}
.invoice-badge--paid { background: #e7f1ec; color: var(--bl-success); border-color: #bcd9c9; }
.invoice-badge--overdue { background: #fbe9e7; color: var(--bl-error); border-color: #f0c4bd; }
.invoice-badge--sent,
.invoice-badge--partially_paid { background: #fdf3e2; color: #9a6a1a; border-color: #ecd5a8; }

/* ----- rendered invoice (modal detail) ----- */
.invoice-modal__panel {
  max-width: 760px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  padding: 2rem 2.25rem;
}
.invoice-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--bl-text);
  padding-bottom: 0.5rem;
}
.invoice-detail__title { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: 0.02em; }
.invoice-detail__actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }

.invoice-biz { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.invoice-biz__logo { height: 64px; width: auto; }
.invoice-biz__info { text-align: right; }
.invoice-biz__name { font-size: 1.25rem; font-weight: 700; color: var(--bl-text); }
.invoice-biz__line { font-size: 0.85rem; color: var(--bl-text-soft); }

.invoice-meta { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.75rem; padding-bottom: 1rem; }
.invoice-meta__col { display: flex; flex-direction: column; gap: 0.15rem; }
.invoice-meta__k { font-weight: 700; color: var(--bl-text); font-size: 0.9rem; margin-top: 0.4rem; }
.invoice-meta__k:first-child { margin-top: 0; }
.invoice-meta__v { font-size: 0.9rem; color: var(--bl-text-soft); }

.invoice-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.invoice-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--bl-text-soft);
  border-bottom: 1px solid var(--bl-border);
  padding: 0.5rem;
}
.invoice-table td { padding: 0.7rem 0.5rem; border-bottom: 1px solid var(--bl-bg-soft); vertical-align: top; }
.invoice-table__num { text-align: right; white-space: nowrap; }
.invoice-table__name { color: var(--bl-text); }
.invoice-table__desc { font-size: 0.8rem; color: var(--bl-text-soft); }

.invoice-totals { margin: 1rem 0 0 auto; width: min(360px, 100%); }
.invoice-totals__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid var(--bl-bg-soft); }
.invoice-totals__k { color: var(--bl-text); font-weight: 700; font-size: 0.9rem; }
.invoice-totals__v { color: var(--bl-text-soft); }
.invoice-totals__v--strong { color: var(--bl-text); font-weight: 700; }

.invoice-banner { margin-top: 1.5rem; padding: 1.25rem; text-align: center; border-radius: 8px; background: var(--bl-bg-soft); }
.invoice-banner__status { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; color: var(--bl-text); }
.invoice-banner__sub { font-size: 0.85rem; color: var(--bl-text-soft); margin-top: 0.25rem; }
.invoice-banner--paid { background: #eef6f1; }
.invoice-banner--paid .invoice-banner__status { color: var(--bl-success); }
.invoice-banner--overdue { background: #fbe9e7; }
.invoice-banner--overdue .invoice-banner__status { color: var(--bl-error); }

@media print {
  .invoice-modal, .invoice-modal * { visibility: visible; }
  .invoice-modal {
    position: absolute;
    inset: 0;
    display: block;
    background: #fff;
    padding: 0;
  }
  .invoice-modal__panel {
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    padding: 0;
  }
  .invoice-detail__actions { display: none !important; }
}

/* ---------- documents (bespoke download list) ---------- */

.docs__title { margin: 0 0 1.25rem; color: var(--bl-teal-dark); }
.docs__section {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--bl-teal-dark);
}
.docs__section:first-of-type { margin-top: 0.5rem; }
.docs__list { display: flex; flex-direction: column; }

.docs-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--bl-bg-soft);
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--bl-text);
}
.docs-row:hover,
.docs-row:focus { border-color: var(--bl-teal-mid); outline: none; }
.docs-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 5px;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.docs-row__badge--pdf { background: #c0392b; }
.docs-row__badge--word { background: #2a5699; }
.docs-row__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.docs-row__title { font-weight: 700; color: var(--bl-teal-dark); }
.docs-row__desc { font-size: 0.85rem; color: var(--bl-text-soft); line-height: 1.4; }
.docs-row__chev { font-size: 1.5rem; color: var(--bl-text-soft); }
/* ============================================================================
   Dashboard focus cards (next appointment · unpaid invoice · to-dos)
   ============================================================================ */

.focus-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 1.5rem;
}
@media (max-width: 760px) {
  .focus-cards { grid-template-columns: 1fr; }
}

.focus-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bl-border);
  border-radius: 10px;
  background: var(--bl-bg);
  padding: 1rem 1.1rem;
}

.focus-card__label {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bl-teal-mid);
}

.focus-card__body { flex: 1 1 auto; }

.focus-card__primary {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bl-text);
}
.focus-card__sub {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  color: var(--bl-text-soft);
}
.focus-card__muted {
  margin: 0;
  font-size: 0.9rem;
  color: var(--bl-text-soft);
}

.focus-card__link {
  margin-top: 0.8rem;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bl-teal-mid);
  text-decoration: none;
}
.focus-card__link:hover { text-decoration: underline; }

/* To-do mini list inside the focus card. */
.focus-todos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.focus-todos__item {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.focus-todos__check {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  cursor: pointer;
}
.focus-todos__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.focus-todos__name {
  font-size: 0.92rem;
  color: var(--bl-text);
}
.focus-todos__due {
  font-size: 0.8rem;
  color: var(--bl-text-soft);
}

/* ============================================================================
   TO DO page ("My Tasks")
   ============================================================================ */

.todos__title { color: var(--bl-teal-dark); }

.todos-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.8rem;
}
.todos-hidedone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--bl-text-soft);
  cursor: pointer;
}

.todo-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.todo-detail {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  background: var(--bl-bg);
}
.todo-detail--done {
  background: var(--bl-bg-soft);
  opacity: 0.75;
}
.todo-detail--done .todo-detail__name { text-decoration: line-through; }

.todo-detail__check {
  margin-top: 0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  cursor: pointer;
}
.todo-detail__main { flex: 1 1 auto; min-width: 0; }
.todo-detail__name { font-weight: 600; color: var(--bl-text); }
.todo-detail__meta {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--bl-text-soft);
}
.todo-detail__body {
  margin-top: 0.45rem;
  font-size: 0.93rem;
  color: var(--bl-text);
}
.todo-detail__body p { margin: 0 0 0.4rem; }