/* ---------- Brand fonts ----------
   Fraunces (display) and Figtree (body) are the Website's faces, self-hosted
   rather than pulled from Google so the Portal keeps working offline and so
   client-facing pages don't hand a client's IP address to a third party every
   time they open a Tool. They live under /css/fonts/ deliberately: the
   production ingress rules route /css to this service, and a new top-level
   /fonts prefix would land on the marketing site and 404.
   Both files are variable fonts covering weights 400-700 in one download. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/css/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Brand tokens ----------
   These are the Website's palette (website/index.html), and it is the source of
   truth — change a colour there and change it here in the same commit, or the
   Portal and the Website drift apart in front of clients.
   The second block maps the Portal's older token names onto the brand values.
   Both sets are live; prefer the brand names in new code. */
:root {
  --mist: #EEF3F2;        /* page background, soft cool off-white */
  --paper: #FFFFFF;
  --slate: #324B4E;       /* deep calm petrol-slate, primary */
  --slate-dark: #263A3C;
  --slate-light: #456467;
  --dusk: #8FAAA8;        /* dusty blue-green, decorative */
  --accent: #F28E5A;      /* soft coral, the lift */
  --accent-deep: #E07A44;
  --ink: #26302F;         /* cool slate charcoal, text */
  --muted: #5D6B69;
  --line: #DFE7E5;
  --wash: #E6EEEC;

  --navy: var(--slate);
  --navy-light: var(--slate-light);
  --navy-dark: var(--slate-dark);
  --coral: var(--accent);
  --coral-dark: var(--accent-deep);
  --gold: var(--accent);
  --teal: #3E8E82;
  --amber: #D99A3E;
  --red: #C4573F;
  --white: var(--paper);
  --off-white: var(--mist);
  --border: var(--line);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-faint: #8D9B98;
  --sidebar-bg: #DCE8E5;   /* a shade below --wash, so the rail reads as a
                              distinct surface against the mist page */
  --sidebar-border: #C8D9D5;
  --sidebar-text: var(--muted);
  --sidebar-heading: var(--slate);
  --wheel-green: #9FBF88;
  --wheel-low: #C4573F;
  --journal-bg: #FAFCFB;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(38, 54, 53, 0.06);
  --shadow-md: 0 4px 16px rgba(38, 54, 53, 0.09);
  --shadow-lg: 0 16px 40px rgba(38, 54, 53, 0.16);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--body);
  background: var(--off-white);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

/* Fraunces carries the brand's voice, so every heading takes it. Its default
   weight is light for a serif — headings stay at 500/600 rather than 700, which
   at these sizes reads as heavy rather than emphatic. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.005em; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ---------- App Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 28px 0;
  flex-shrink: 0;
  position: fixed;
  top: 0; bottom: 0; left: 0;
}

.sidebar-brand {
  padding: 0 24px 28px;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 20px;
  color: var(--slate);
}
.sidebar-brand p.role {
  font-size: 10px; color: var(--sidebar-text); margin: 6px 0 0;
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600;
}
.sidebar-brand .brand-words strong { font-size: 18px; }

.nav-list { list-style: none; padding: 0 12px; margin: 0; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px 11px 17px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-item:hover { background: rgba(255,255,255,0.6); color: var(--sidebar-heading); }
.nav-item.active { background: var(--white); color: var(--sidebar-heading); font-weight: 600; border-left-color: var(--gold); box-shadow: var(--shadow-sm); }
.nav-item .icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.nav-item .icon svg { width: 18px; height: 18px; }
.nav-badge {
  margin-left: auto; background: var(--coral); color: white; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; min-width: 18px; text-align: center;
}

.sidebar-footer { padding: 12px; border-top: 1px solid var(--sidebar-border); }

.main-content { margin-left: 240px; flex: 1; padding: 32px 40px; max-width: 1400px; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-header h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 4px; }
.page-header .subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }

/* ---------- Buttons ----------
   Pill-shaped, as on the Website — it is the most recognisable piece of the
   brand after the mark itself. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--body);
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: white; box-shadow: 0 2px 10px rgba(242,142,90,0.32); }
.btn-primary:hover { background: var(--accent-deep); box-shadow: 0 6px 16px rgba(242,142,90,0.34); }
.btn-secondary { background: var(--paper); color: var(--slate); border: 1.5px solid var(--line); }
.btn-secondary:hover { background: var(--slate); color: #fff; border-color: var(--slate); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--wash); color: var(--text); }
.btn-danger { background: transparent; color: var(--red); }
.btn-danger:hover { background: rgba(196,87,63,0.09); }
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.card-pad { padding: 24px; }

/* ---------- KPI Tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.kpi-tile { padding: 22px; }
.kpi-tile .kpi-label { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; }
.kpi-tile .kpi-value { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--slate); }
.kpi-tile .kpi-icon { float: right; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.kpi-tile .kpi-icon svg { width: 20px; height: 20px; }
.kpi-tile.coral .kpi-icon { background: rgba(242,142,90,0.14); color: var(--accent); }
.kpi-tile.teal .kpi-icon { background: rgba(62,142,130,0.14); color: var(--teal); }
.kpi-tile.navy .kpi-icon { background: rgba(50,75,78,0.10); color: var(--slate); }
.kpi-tile.amber .kpi-icon { background: rgba(217,154,62,0.16); color: var(--amber); }

.dashboard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-bottom: 20px; }

.panel-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 16px; display: flex; align-items: center; justify-content: space-between; }

/* ---------- Lists ---------- */
.list-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: none; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.badge-active, .badge-paid, .badge-completed { background: rgba(62,142,130,0.15); color: #2E6D63; }
.badge-paused, .badge-pending, .badge-scheduled { background: rgba(217,154,62,0.18); color: #8F6216; }
.badge-overdue, .badge-cancelled, .badge-no_show { background: rgba(196,87,63,0.14); color: var(--red); }

/* ---------- Progress ---------- */
.progress-bar-track { background: var(--border); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.progress-bar-fill { background: linear-gradient(90deg, var(--accent), var(--dusk)); height: 100%; border-radius: var(--radius-pill); transition: width 0.4s ease; }

.progress-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.progress-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--slate); }

/* ---------- Grid of cards (clients) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.client-card { padding: 20px; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; }
.client-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.client-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.client-card-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.client-card-meta { font-size: 13px; color: var(--text-muted); }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.search-input {
  flex: 1; min-width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--white);
}
.search-input:focus, select.filter-select:focus { outline: none; border-color: var(--coral); }
select.filter-select {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); font-size: 14px; color: var(--text);
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.tab {
  padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; background: var(--white); color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--coral); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { color: var(--red); font-size: 13px; margin-top: 8px; }
.field-error { color: var(--red); font-size: 12px; margin-top: 4px; }

.choice-group { display: flex; flex-direction: column; gap: 8px; }
.choice-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 400; cursor: pointer;
}
.choice-option:hover { background: var(--off-white); }
.choice-option input { width: auto; }

/* Starts a new block of questions — the web equivalent of a page break
   on the original printed worksheets. */
.form-section-break {
  margin: 32px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.form-section-break h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- Wheel field (Wheel of Life style) ---------- */
.wheel-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wheel-svg { width: 100%; max-width: 640px; height: auto; }
.wheel-cell {
  fill: var(--off-white); stroke: var(--white); stroke-width: 1.5;
  cursor: pointer; transition: fill 0.12s;
}
.wheel-cell:hover { fill: rgba(159,191,136,0.45); }
.wheel-cell.filled { fill: var(--wheel-green); }
/* Scores under 5 fill red, so lower-satisfaction areas stand out. */
.wheel-cell.filled.low { fill: var(--wheel-low); }
.wheel-label { font-size: 11px; font-weight: 700; fill: var(--text); }
.wheel-label.placeholder { fill: var(--text-faint); font-weight: 500; }
.wheel-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 0 0 12px; }
.wheel-name-inputs { width: 100%; max-width: 640px; margin-bottom: 8px; }
.wheel-name-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.wheel-name-input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--white); color: var(--text);
}
.wheel-name-input:focus { outline: none; border-color: var(--coral); }

/* ---------- Journal-style tool filling ----------
   Shared by the client link page, in-session Fill In Now, and the
   full-screen tool window — one spacious, low-friction layout instead of
   a dense boxed survey. */
.journal-card { background: var(--journal-bg); }
.journal-progress-track { height: 4px; background: var(--border); position: sticky; top: 0; z-index: 5; border-radius: 4px 4px 0 0; overflow: hidden; }
.journal-progress-fill { height: 100%; background: var(--coral); width: 0%; transition: width 0.4s ease; }
.journal-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-faint); margin: 0 0 10px;
}
.journal-question { padding: 26px 0; border-top: 1px solid var(--border); }
.journal-question:first-of-type { border-top: none; padding-top: 0; }
.journal-question .qnum { font-size: 11.5px; font-weight: 700; color: var(--coral); letter-spacing: 0.4px; margin-bottom: 8px; }
.journal-question label { display: block; font-size: 16.5px; font-weight: 500; line-height: 1.45; margin-bottom: 14px; color: var(--text); }
.journal-field {
  width: 100%; border: none; border-bottom: 2px solid var(--border);
  background: transparent; font-size: 15px; font-family: inherit; color: var(--text);
  padding: 4px 2px 10px; transition: border-color 0.2s ease;
}
textarea.journal-field { min-height: 46px; resize: none; overflow: hidden; line-height: 1.6; }
.journal-field:focus { outline: none; border-color: var(--coral); }
.journal-field::placeholder { color: var(--text-faint); }
/* Deliberately quiet — the number is the expected answer, this is the exception. */
/* Outranks `.journal-question label`, which would otherwise make this a
   full-width 16.5px question heading in its own right. */
.journal-question label.na-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-size: 13.5px; font-weight: 400; color: var(--text-muted); cursor: pointer;
}
.na-toggle input { cursor: pointer; }
.journal-field:disabled { opacity: 0.4; }
/* Marks the one question holding a submission up. Kept gentle — a client
   working through a health questionnaire is not being told off. */
.journal-question.has-problem .journal-field { border-bottom-color: var(--coral); }
.journal-question.has-problem > label:not(.na-toggle) { color: var(--coral); }
.field-problem { color: var(--coral); font-size: 13.5px; margin-top: 10px; font-weight: 500; }
.journal-required-note {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.6;
  background: var(--wash); border-radius: 8px; padding: 12px 14px; margin-bottom: 4px;
}
.journal-chapter {
  margin: 40px 0 26px; padding-top: 26px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint);
}
.journal-chapter:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---------- Result reveal & confetti ---------- */
.score-reveal-card {
  background: linear-gradient(135deg, rgba(242,142,90,0.14), rgba(143,170,168,0.20));
  border: 1px solid var(--border);
  animation: score-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.score-reveal-badge {
  display: inline-block; padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: 10px;
  background: var(--accent); color: white; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}
@keyframes score-pop {
  0% { transform: scale(0.85) translateY(6px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.confetti-burst { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 500; }
.confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; opacity: 0.95;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), 105vh) rotate(var(--rot)); opacity: 0; }
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(38,58,60,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal {
  background: white; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  padding: 28px;
}
.modal h3 { margin: 0 0 20px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { margin: 0 0 16px; font-size: 14px; }

/* ---------- Lock screen ---------- */
.lock-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--mist);
  background-image:
    radial-gradient(circle at 28% 18%, rgba(242,142,90,0.16), transparent 58%),
    radial-gradient(circle at 78% 82%, rgba(143,170,168,0.24), transparent 60%);
}
.lock-card {
  background: white; border-radius: 18px; padding: 40px; width: 100%; max-width: 380px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); text-align: center;
}
.lock-card .brand-lockup { margin: 0 auto 20px; color: var(--slate); }
.lock-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.lock-card p.hint { color: var(--text-muted); font-size: 13px; margin: 0 0 24px; }
.pin-input {
  width: 100%; padding: 14px; font-size: 20px; letter-spacing: 8px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 16px;
}
.pin-input:focus { outline: none; border-color: var(--coral); }

/* Masks digits like a password field visually, without type="password" —
   keeps Safari/Chrome from treating PIN entry as a website login/account
   password and offering to save it to the keychain with a username. */
.pin-mask { -webkit-text-security: disc; text-security: disc; }

/* ---------- Brand mark and lockup ----------
   Markup comes from brandMark() / brandLockup() / toolBrandBand() in
   public/js/brand.js. The mark's ring and horizon are `currentColor`, so
   setting `color` on a container tints them; the sun always stays accent.

   The sun's glow is a CSS filter animation inside a
   prefers-reduced-motion: no-preference query, so it simply never starts for
   anyone who has Reduce Motion on. (The old mark animated via SMIL, which
   ignores that query and had to be stripped from the DOM at runtime.) */
.logo-ic { flex: none; }
.logo-ic .sun-glow { filter: drop-shadow(0 0 1.4px rgba(242,142,90,.9)) drop-shadow(0 0 3.4px rgba(242,142,90,.55)); }
@media (prefers-reduced-motion: no-preference) {
  .logo-ic .sun-glow { animation: sunGlow 3.4s ease-in-out infinite; }
  @keyframes sunGlow {
    0%, 100% { filter: drop-shadow(0 0 1.2px rgba(242,142,90,.85)) drop-shadow(0 0 2.8px rgba(242,142,90,.5)); }
    50% { filter: drop-shadow(0 0 2.6px rgba(242,142,90,1)) drop-shadow(0 0 6.5px rgba(242,142,90,.72)); }
  }
}

.brand-lockup { display: inline-flex; align-items: center; gap: 11px; color: var(--slate); }
.brand-lockup--stacked { flex-direction: column; align-items: flex-start; gap: 12px; }
.brand-words { display: block; line-height: 1.2; }
.brand-words strong {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: 17px; color: var(--slate); letter-spacing: -0.005em;
}
.brand-words em {
  display: block; font-style: normal; font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
}

/* ---------- Tool branding ----------
   Sits above every Tool wherever one is rendered — the client's link page, the
   full-screen window and the in-session panel. A client filling in a health
   questionnaire should not have to guess whose form they are on. */
.tool-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 24px;
  background: var(--wash);
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--slate);
}
.tool-brand-words { display: block; line-height: 1.2; }
.tool-brand-words strong {
  display: block; font-family: var(--display); font-weight: 500; font-size: 15.5px; color: var(--slate);
}
.tool-brand-words em {
  display: block; font-style: normal; font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-top: 2px;
}
.tool-brand-note {
  margin-left: auto; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
/* Rounded to match the card it caps, rather than clipping the card with
   overflow:hidden — that would turn the card into a scroll container and stop
   the journal progress bar underneath it from sticking. */
.card > .tool-brand:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card > .tool-brand:first-child + .journal-progress-track { border-radius: 0; }
/* The band is flush to the card edge, so it has to undo .card-pad's inset when
   it sits inside one — as it does in the in-session modal. */
.tool-brand--inset { margin: -24px -24px 22px; border-radius: var(--radius) var(--radius) 0 0; }
.modal .tool-brand--inset { margin: -28px -28px 22px; }
/* When the progress bar follows the band it takes over the gap, and bleeds to
   the same edges the band does. */
.tool-brand--inset + .journal-progress-track { margin: -22px -24px 20px; }
.modal .tool-brand--inset + .journal-progress-track { margin: -22px -28px 20px; }
@media (max-width: 560px) {
  .tool-brand { padding: 12px 16px; }
  .tool-brand-note { display: none; }
}

/* ---------- Calendar ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 6px 0; }
.calendar-day {
  min-height: 92px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  padding: 8px; background: var(--white); font-size: 12px; cursor: pointer;
}
.calendar-day:hover { border-color: var(--coral); }
.calendar-day.other-month { background: var(--off-white); color: var(--text-faint); }
.calendar-day.today { border-color: var(--gold); border-width: 2px; }
.calendar-day .day-num { font-weight: 700; margin-bottom: 4px; }
.calendar-day .day-session { background: var(--navy); color: white; border-radius: 5px; padding: 2px 5px; margin-bottom: 3px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-day .day-blocked {
  background: repeating-linear-gradient(45deg, #7F9694, #7F9694 4px, #9BAEAC 4px, #9BAEAC 8px);
  color: white; cursor: pointer;
}
.calendar-nav { display: flex; align-items: center; gap: 14px; }
.calendar-nav button { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); width: 32px; height: 32px; font-size: 15px; }
.calendar-nav button:hover { background: var(--off-white); }

/* ---------- Tool cards ---------- */
/* Equal-height rows so every tool card in the grid matches the tallest one. */
.tool-grid { grid-auto-rows: 1fr; }
/* Flex column lets the action buttons sit at the bottom regardless of how much
   description a tool has, so they line up across the whole grid. */
.tool-card { padding: 18px; display: flex; flex-direction: column; }
.tool-card .tool-category { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--coral); margin-bottom: 6px; }
/* No description on the card: the library is for finding a Tool by name, and
   forty paragraphs of blurb made that slower, not faster. The text is still on
   the Tool (clients see it, and Edit shows it), and hovering a card reveals it. */
.tool-card h4 { margin: 0 0 2px; font-size: 15px; }
.tool-card-actions { margin-top: auto; padding-top: 14px; display: flex; gap: 8px; }

.tag-select {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.tag-chip {
  padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); background: var(--white); cursor: pointer;
}
.tag-chip.selected { background: var(--navy); color: white; border-color: var(--navy); }

/* ---------- Section spacing ---------- */
.section { margin-bottom: 28px; }
.section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 14px; }

/* ---------- Coaching Tools: category panels ----------
   A distinct card per category (border/background/shadow) rather than a
   plain heading, so the boundary between categories is obvious even with
   many of them stacked down the page. */
.tool-category-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px 22px;
  margin-bottom: 20px;
}
.tool-category-panel-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.tool-category-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--off-white); border-radius: 20px;
  font-size: 11px; font-weight: 700; color: var(--text-faint);
}

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--off-white); }

.toast {
  position: fixed; bottom: 24px; right: 24px; background: var(--navy); color: white;
  padding: 14px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 600; z-index: 200; animation: toast-in 0.2s ease;
}
.toast.error { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.icon-btn { background: none; border: none; color: var(--text-muted); font-size: 15px; padding: 6px; border-radius: 6px; }
.icon-btn:hover { background: var(--off-white); color: var(--text); }

.checkbox-row { display: flex; align-items: center; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; }