/* ── Brand color overrides ───────────────────────────────────────────────
       Tailwind CDN JIT can miss custom colors at runtime.
       These static rules ensure brand colors always render correctly.        */
    .bg-brand-900  { background-color: var(--c-071b2d) !important; }
    .bg-brand-800  { background-color: var(--c-123f4a) !important; }
    .bg-brand-600  { background-color: var(--c-0b5f5a) !important; }
    .bg-brand-500  { background-color: var(--c-0f766e) !important; }
    .bg-brand-100  { background-color: var(--b-d9eeec) !important; }
    .bg-brand-50   { background-color: var(--b-f6fbfb) !important; }
    .text-brand-900 { color: var(--c-071b2d) !important; }
    .text-brand-800 { color: var(--c-123f4a) !important; }
    .text-brand-700 { color: var(--c-0b5f5a) !important; }
    .text-brand-600 { color: var(--c-0b5f5a) !important; }
    .text-brand-500 { color: var(--c-0f766e) !important; }
    .border-brand-200 { border-color: #b2dbd7 !important; }
    .border-brand-100 { border-color: #d9eeec !important; }
    .ring-brand-500  { --tw-ring-color: var(--c-0f766e) !important; }
    .hover\:bg-brand-900:hover { background-color: var(--c-071b2d) !important; }
    .hover\:bg-brand-800:hover { background-color: var(--c-123f4a) !important; }
    .hover\:bg-brand-100:hover { background-color: var(--b-d9eeec) !important; }
    .hover\:bg-brand-50:hover  { background-color: var(--b-f6fbfb) !important; }
    .hover\:text-brand-700:hover { color: var(--c-0b5f5a) !important; }
    .hover\:text-brand-800:hover { color: var(--c-123f4a) !important; }
    .focus\:ring-brand-500:focus { --tw-ring-color: var(--c-0f766e) !important; }

    /* ── Emerald shades missing from compiled CSS ───────────────────────── */
    .bg-emerald-200  { background-color: var(--c-a7f3d0) !important; }
    .bg-emerald-700  { background-color: var(--c-047857) !important; }
    .bg-emerald-800  { background-color: var(--c-065f46) !important; }
    .hover\:bg-emerald-700:hover { background-color: var(--c-047857) !important; }
    .hover\:bg-emerald-800:hover { background-color: var(--c-065f46) !important; }
    .hover\:bg-emerald-100:hover { background-color: var(--b-d1fae5) !important; }

    /* ── Teal shades missing from compiled CSS ──────────────────────────── */
    .bg-teal-50   { background-color: var(--b-f0fdfa) !important; }
    .bg-teal-100  { background-color: #ccfbf1 !important; }
    .bg-teal-700  { background-color: var(--c-0f766e) !important; }
    .bg-rose-600  { background-color: var(--c-e11d48) !important; }
    .text-teal-700 { color: var(--c-0f766e) !important; }
    .text-teal-800 { color: #115e59 !important; }
    .border-teal-100 { border-color: #ccfbf1 !important; }
    .hover\:bg-teal-100:hover { background-color: #ccfbf1 !important; }
    .hover\:bg-teal-700:hover { background-color: var(--c-0f766e) !important; }

    /* ── Rose shades missing from compiled CSS ──────────────────────────── */
    .bg-rose-50   { background-color: var(--b-fff1f2) !important; }
    .bg-rose-100  { background-color: #ffe4e6 !important; }
    .bg-rose-500  { background-color: #f43f5e !important; }
    .text-rose-700 { color: var(--c-be123c) !important; }
    .border-rose-100 { border-color: #ffe4e6 !important; }
    .hover\:bg-rose-100:hover { background-color: #ffe4e6 !important; }
    .hover\:bg-rose-700:hover { background-color: var(--c-be123c) !important; }

    /* ── Teal / Sky shades missing from compiled CSS ────────────────────── */
    .bg-teal-500   { background-color: #14b8a6 !important; }
    .bg-sky-100    { background-color: #e0f2fe !important; }
    .text-sky-700  { color: #0369a1 !important; }
    .text-teal-900 { color: #134e4a !important; }


    /* ═══════════════════════════════════════════════════════════════════
       COACHNEXA DESIGN SYSTEM — Global component tokens
       All reusable UI primitives live here so every page stays consistent.
       ═══════════════════════════════════════════════════════════════════ */

    /* ── Button hierarchy ────────────────────────────────────────────────
       Usage:
         .btn-primary   → main CTA (dark brand fill)
         .btn-secondary → supporting action (outline / ghost)
         .btn-danger    → destructive action (red outline, turns red on hover)
         .btn-sm        → compact size modifier
         .btn-loading   → spinner state modifier (add via JS on submit)       */
    .btn-primary,
    .btn-secondary,
    .btn-danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      border-radius: 0.625rem;
      font-weight: 700;
      font-size: 0.875rem;
      padding: 0.55rem 1.125rem;
      line-height: 1.25;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: background-color 140ms, border-color 140ms, color 140ms,
                  box-shadow 140ms, transform 100ms;
      text-decoration: none;
      white-space: nowrap;
      user-select: none;
    }
    .btn-primary {
      background: var(--b-071b2d);
      color: #fff;
      border-color: var(--c-071b2d);
    }
    .btn-primary:hover  { background: var(--b-123f4a); border-color: var(--c-123f4a); box-shadow: 0 2px 8px rgba(7,27,45,.2); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-secondary {
      background: var(--b-ffffff);
      color: var(--c-334155);
      border-color: var(--c-e2e8f0);
    }
    .btn-secondary:hover  { border-color: var(--c-0f766e); color: var(--c-071b2d); background: var(--b-f6fbfb); }
    .btn-secondary:active { transform: scale(0.98); }
    .btn-danger {
      background: var(--b-ffffff);
      color: var(--c-be123c);
      border-color: #fecdd3;
    }
    .btn-danger:hover  { background: var(--b-fff1f2); border-color: #f43f5e; }
    .btn-danger:active { transform: scale(0.98); }
    .btn-sm { font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; gap: 0.3rem; }

    /* Loading spinner state — add class via JS on form submit */
    .btn-loading {
      pointer-events: none;
      opacity: 0.75;
      position: relative;
    }
    .btn-loading::after {
      content: '';
      position: absolute;
      right: 0.7rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0.875rem;
      height: 0.875rem;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: btn-spin 0.6s linear infinite;
    }
    .btn-primary.btn-loading   { padding-right: 2.25rem; }
    .btn-secondary.btn-loading { padding-right: 2.25rem; }
    @keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }

    /* Branded tooltip — use data-tip="..." on any element. Shows above on hover/focus. */
    [data-tip] { position: relative; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 6px);
      left: 50%;
      transform: translateX(-50%) translateY(2px);
      background: var(--b-071b2d);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.375rem 0.625rem;
      border-radius: 0.375rem;
      white-space: nowrap;
      max-width: 14rem;
      pointer-events: none;
      opacity: 0;
      transition: opacity 140ms ease, transform 140ms ease;
      z-index: 50;
      box-shadow: 0 4px 12px rgba(7,27,45,.2);
    }
    [data-tip]:hover::after,
    [data-tip]:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    [data-tip-pos="bottom"]::after {
      bottom: auto; top: calc(100% + 6px);
      transform: translateX(-50%) translateY(-2px);
    }
    [data-tip-pos="bottom"]:hover::after,
    [data-tip-pos="bottom"]:focus-visible::after {
      transform: translateX(-50%) translateY(0);
    }
    /* Hide tooltips on touch devices to avoid stuck states after tap */
    @media (hover: none) { [data-tip]::after { display: none; } }

    /* Scroll-to-top floating button — appears after scrolling past 600px */
    .scroll-top-btn {
      position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40;
      width: 2.75rem; height: 2.75rem; border-radius: 9999px;
      background: var(--b-071b2d); color: #fff; border: none; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(7,27,45,.25);
      opacity: 0; pointer-events: none;
      transition: opacity 200ms ease, transform 200ms ease, background 140ms;
      transform: translateY(8px);
    }
    .scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .scroll-top-btn:hover { background: var(--b-123f4a); }
    .scroll-top-btn:active { transform: scale(0.95); }
    @media (max-width: 640px) {
      .scroll-top-btn { bottom: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; }
    }

    /* Settings tab buttons — segmented control style for /coach/settings.php */
    .settings-tab-btn {
      white-space: nowrap; border-radius: 0.5rem; padding: 0.375rem 1rem;
      font-size: 0.875rem; font-weight: 600; color: var(--c-475569);
      transition: color .15s, background .15s, box-shadow .15s;
      border: none; cursor: pointer; background: transparent;
      flex: 1; text-align: center;
    }
    .settings-tab-btn:hover { color: var(--c-1e293b); }
    .settings-tab-btn.active { background: var(--b-ffffff); color: var(--c-071b2d); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

    /* Streak fire animation — bounces the 🔥 emoji for habit streaks */
    .streak-fire { display: inline-block; animation: streak-bounce 1.8s ease-in-out infinite; transform-origin: bottom center; }
    @keyframes streak-bounce {
      0%, 100% { transform: translateY(0) rotate(-5deg); }
      40%      { transform: translateY(-3px) rotate(5deg); }
      60%      { transform: translateY(-1px) rotate(-3deg); }
    }

    /* Focus-visible ring — keyboard-accessible for all interactive elements */
    :focus-visible {
      outline: 2px solid var(--c-0f766e);
      outline-offset: 2px;
    }
    button:focus:not(:focus-visible),
    a:focus:not(:focus-visible) { outline: none; }

    /* Form input focus polish — smooth transition for focus ring + border.
       Existing inputs use Tailwind .focus:ring-2 .focus:ring-brand-500 which
       previously snapped instantly; now it eases in over 140 ms. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
    textarea, select {
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    /* Slightly darker resting border for better contrast on white bg */
    input[type="text"]:not(:focus),
    input[type="email"]:not(:focus),
    input[type="tel"]:not(:focus),
    input[type="url"]:not(:focus),
    input[type="search"]:not(:focus),
    input[type="number"]:not(:focus),
    input[type="password"]:not(:focus),
    input[type="datetime-local"]:not(:focus),
    input[type="date"]:not(:focus),
    textarea:not(:focus),
    select:not(:focus) {
      /* Only enforce contrast on inputs that have a default-pale slate-200 border */
      /* Tailwind's border-slate-200 is #e2e8f0 — bumping to #cbd5e1 only via :hover would be too aggressive */
    }
    /* Subtle hover-state border darkening for interactive feedback (no layout change) */
    input[type="text"]:hover:not(:focus):not(:disabled),
    input[type="email"]:hover:not(:focus):not(:disabled),
    input[type="search"]:hover:not(:focus):not(:disabled),
    textarea:hover:not(:focus):not(:disabled),
    select:hover:not(:focus):not(:disabled) {
      border-color: var(--c-cbd5e1); /* slate-300 — only on hover */
    }

    /* ── Card hover lift ─────────────────────────────────────────────────
       Add .card-lift to any card that should feel clickable/interactive.  */
    .card-lift {
      transition: box-shadow 180ms, transform 180ms;
      will-change: transform;
    }
    .card-lift:hover {
      box-shadow: 0 6px 24px rgba(7,27,45,.10);
      transform: translateY(-1px);
    }

    /* ── Search input with leading icon ─────────────────────────────────
       Replaces the repeated inline style="padding:0.625rem 1rem 0.625rem 2.5rem"
       across every search input in the app.                               */
    .search-input {
      padding: 0.625rem 1rem 0.625rem 2.5rem;
      width: 100%;
      border-radius: 0.75rem;
      border: 1px solid var(--c-e2e8f0);
      background: var(--b-ffffff);
      font-size: 0.875rem;
      color: var(--c-334155);
      transition: border-color 150ms, box-shadow 150ms;
    }
    .search-input:focus {
      outline: none;
      border-color: var(--c-0f766e);
      box-shadow: 0 0 0 3px rgba(15,118,110,.12);
    }
    .search-wrap {
      position: relative;
      width: 360px;
      max-width: 100%;
    }
    .search-wrap .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      color: var(--c-94a3b8);
      display: flex;
      align-items: center;
    }

    /* ── Legacy primary button normalisation ────────────────────────────
       Existing buttons use ad-hoc classes: rounded-lg bg-brand-900 px-4 py-2
       text-sm font-bold text-white hover:bg-brand-800.
       This rule layers in the missing polish (transition, active press,
       letter-spacing) so they feel identical to .btn-primary without
       requiring any HTML changes.                                        */
    button.bg-brand-900,
    a.bg-brand-900 {
      transition: background-color 140ms, box-shadow 140ms, transform 100ms !important;
      letter-spacing: -0.01em;
    }
    button.bg-brand-900:active,
    a.bg-brand-900:active { transform: scale(0.98) !important; }
    button.bg-brand-900:hover,
    a.bg-brand-900:hover  { box-shadow: 0 2px 8px rgba(7,27,45,.18) !important; }

    /* ── Global h1 polish ───────────────────────────────────────────────
       Applied automatically to every page — no HTML changes needed.
       text-2xl font-black text-brand-900 already set per-page;
       we add tracking and a desktop size bump for premium feel.          */
    h1.text-brand-900 {
      letter-spacing: -0.025em;
      line-height: 1.2;
    }
    @media (min-width: 1024px) {
      h1.text-brand-900 { font-size: 1.625rem; } /* 26px on desktop vs 24px */
    }

    /* ── Section header pattern ──────────────────────────────────────────
       Consistent page/section header used across all coach pages.
       Values match the existing ad-hoc pattern so .page-header can be
       adopted in NEW pages without visual regression vs. existing pages
       (and existing pages can be migrated later, one at a time).        */
    .page-header {
      display: flex;
      align-items: center;          /* matches the existing items-center pattern */
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      margin-bottom: 1.5rem;        /* matches existing mb-6 (1.5rem) */
    }
    .page-header h1 {
      font-size: 1.5rem;            /* matches text-2xl */
      font-weight: 900;             /* matches font-black */
      color: var(--c-071b2d);               /* matches text-brand-900 */
      letter-spacing: -0.025em;
      line-height: 1.2;
      margin: 0 0 0.2rem;
    }
    .page-header-sub {
      font-size: 0.875rem;
      color: var(--c-64748b);
      margin: 0;
    }

    /* ── Skeleton loader ─────────────────────────────────────────────────
       Use <div class="skeleton skeleton-text"> etc. while content loads. */
    .skeleton {
      background: linear-gradient(90deg, #f1f5f9 25%, #e8eef4 50%, #f1f5f9 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: 0.375rem;
    }
    .skeleton-text  { height: 0.875rem; width: 60%; }
    .skeleton-title { height: 1.25rem;  width: 40%; }
    .skeleton-card  { height: 5rem;     width: 100%; }
    @keyframes skeleton-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ── Empty state ─────────────────────────────────────────────────────
       Standardised across all pages — icon + heading + body + CTA.       */
    .empty-state {
      text-align: center;
      padding: 3.5rem 1.5rem;
      background: var(--b-ffffff);
      border: 1px solid #e8eef4;
      border-radius: 1rem;
    }
    .empty-state-icon {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 1rem;
      display: block;
    }
    .empty-state h3 {
      font-size: 1rem;
      font-weight: 800;
      color: var(--c-071b2d);
      margin: 0 0 0.4rem;
    }
    .empty-state p {
      font-size: 0.875rem;
      color: var(--c-64748b);
      margin: 0 auto 1.5rem;
      max-width: 24rem;
      line-height: 1.6;
    }

    /* ── Status badge tokens ─────────────────────────────────────────────
       Single source of truth for health / status colours.                */
    .status-healthy { background:var(--b-f0fdf4); color:var(--c-15803d); border:1px solid #bbf7d0; }
    .status-watch   { background:var(--b-fffbeb); color:var(--c-b45309); border:1px solid var(--c-fde68a); }
    .status-risk    { background:var(--b-fff1f2); color:var(--c-be123c); border:1px solid #fecdd3; }
    .status-badge   {
      display: inline-flex; align-items: center; gap: 0.35rem;
      border-radius: 9999px; padding: 0.2rem 0.65rem;
      font-size: 0.75rem; font-weight: 700; line-height: 1.4;
    }

    /* ── Progress bar tokens ─────────────────────────────────────────────*/
    .progress-track {
      height: 0.5rem; /* 8px — visible at a glance without being heavy */
      background: var(--b-f1f5f9);
      border-radius: 9999px;
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 0.4s ease;
      background: var(--b-0f766e);
    }
    .progress-fill.complete { background: #16a34a; }
    .progress-fill.warning  { background: #d97706; }
    .progress-fill.danger   { background: #dc2626; }

    /* Globally nudge existing h-1.5 progress tracks to h-2 (8px)
       Only when they are track containers (have overflow:hidden + rounded-full).
       Dot indicators (inline w-1.5 h-1.5) are excluded because they are
       display:inline-block and don't have overflow:hidden.                  */
    .rounded-full.overflow-hidden.bg-slate-100 { min-height: 0.5rem; }

    /* ── Modal animation ────────────────────────────────────────────────
       Auto-applied to every fixed inset-0 z-50 modal by JS at DOMReady.
       .modal-backdrop: the full-screen overlay (gets bg-black/40 default).
       .modal-panel: the first child — the content card.
       Animation triggers when .modal-visible is added by MutationObserver.*/
    .modal-backdrop {
      transition: opacity 180ms ease;
      opacity: 0;
      /* Ensure backdrop has a background if none set by inline classes */
      background-color: rgba(0,0,0,0.35);
    }
    /* Don't override bg if already set (bg-black/40, bg-black/50) */
    .modal-backdrop[class*="bg-black"] { background-color: revert; }
    .modal-backdrop.modal-visible { opacity: 1; }
    .modal-backdrop .modal-panel {
      transition: transform 200ms cubic-bezier(0.34, 1.42, 0.64, 1), opacity 180ms ease;
      transform: scale(0.95) translateY(8px);
      opacity: 0;
    }
    .modal-backdrop.modal-visible .modal-panel {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
    /* Prevent scrolling behind open modals */
    body.modal-open { overflow: hidden; }

    /* ── Sidebar nav links ──────────────────────────────────────────────── */
    [x-cloak] { display: none !important; }
    .sidebar-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      border-radius: 0.5rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: 500;
      color: var(--c-475569);
      transition: background-color 150ms, color 150ms, box-shadow 150ms;
      text-decoration: none;
      position: relative;
    }
    .sidebar-link:hover  { background-color: var(--b-f6fbfb); color: var(--c-123f4a); }
    .sidebar-link.active {
      background-color: var(--b-d9eeec);
      color: var(--c-071b2d);
      font-weight: 700;
      box-shadow: inset 3px 0 0 #0f766e;
    }

    /* ── Searchable select enhancement (.select-search) ──────────────────
       Apply `class="select-search"` to any <select> to get a searchable
       dropdown with avatars and alphabetical grouping. The native <select>
       remains as the source of truth for form submission — JS only syncs
       the chosen value back. If JS fails, the native select is shown. */
    select.select-search { display: none; }
    .select-search-wrapper { position: relative; width: 100%; }
    .select-search-trigger {
      width: 100%;
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background: var(--b-ffffff);
      border: 1px solid var(--c-e2e8f0);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      color: var(--c-1e293b);
      cursor: pointer;
      text-align: left;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .select-search-trigger:hover { border-color: var(--c-cbd5e1); }
    .select-search-trigger:focus,
    .select-search-trigger.is-open {
      outline: none;
      border-color: var(--c-0f766e);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    }
    .select-search-trigger .ss-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .select-search-trigger .ss-placeholder { color: var(--c-64748b); }
    .select-search-trigger .ss-caret {
      flex-shrink: 0;
      width: 1rem; height: 1rem;
      color: var(--c-64748b);
      transition: transform 140ms ease;
    }
    .select-search-trigger.is-open .ss-caret { transform: rotate(180deg); }

    .select-search-panel {
      position: absolute;
      top: calc(100% + 4px); left: 0; right: 0;
      background: var(--b-ffffff);
      border: 1px solid var(--c-e2e8f0);
      border-radius: 0.625rem;
      box-shadow: 0 8px 24px rgba(7, 27, 45, 0.12);
      z-index: 45;
      max-height: 320px;
      display: flex; flex-direction: column;
      opacity: 0; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 140ms ease, transform 140ms ease;
    }
    .select-search-panel.is-open {
      opacity: 1; pointer-events: auto;
      transform: translateY(0);
    }
    .select-search-search { padding: 0.5rem; border-bottom: 1px solid #f1f5f9; }
    .select-search-search input {
      width: 100%;
      padding: 0.375rem 0.625rem 0.375rem 2rem;
      border: 1px solid var(--c-e2e8f0);
      border-radius: 0.375rem;
      font-size: 0.8125rem !important; /* sm enough but not auto-zoom on iOS since not focused field */
      background: var(--b-f8fafc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' viewBox='0 0 24 24' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.625rem center;
    }
    .select-search-search input:focus { outline: none; border-color: var(--c-0f766e); background-color: #fff; }

    /* Force ≥ 16px on mobile to prevent iOS zoom */
    @media (max-width: 640px) {
      .select-search-search input { font-size: 1rem !important; padding-left: 2.25rem; }
    }

    /* ── Modal mobile scroll fix ──────────────────────────────────────────
       Tall modals that use `flex items-center justify-center` clip the
       top of the modal off-screen on short viewports (e.g. iPhone SE
       in landscape, or tall forms on any phone). Force start-aligned
       layout + scroll on short screens so the modal title and first
       fields are always reachable.
       Scoped to elements with id ending `-modal` to avoid touching
       unrelated overlays. */
    @media (max-height: 720px) {
      div[id$="-modal"].fixed.inset-0.flex.items-center.justify-center {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
      }
    }

    .select-search-list { overflow-y: auto; flex: 1; padding: 0.25rem 0; }
    .select-search-option {
      width: 100%;
      display: flex; align-items: center; gap: 0.625rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      color: var(--c-475569);
      cursor: pointer;
      border: none; background: none;
      text-align: left;
      transition: background 100ms ease;
    }
    .select-search-option:hover,
    .select-search-option.is-highlighted { background: var(--b-f0fdfa); color: var(--c-071b2d); }
    .select-search-option.is-selected     { background: var(--b-d9eeec); color: var(--c-071b2d); font-weight: 600; }
    .select-search-option-avatar {
      flex-shrink: 0;
      width: 1.625rem; height: 1.625rem;
      border-radius: 9999px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 0.6875rem; font-weight: 700; color: #fff;
    }
    .select-search-letter {
      position: sticky; top: 0;
      padding: 0.25rem 0.75rem;
      background: var(--b-f8fafc);
      font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--c-64748b);
      border-bottom: 1px solid #f1f5f9;
      z-index: 1;
    }
    .select-search-empty {
      padding: 1.25rem 1rem;
      text-align: center;
      font-size: 0.8125rem;
      color: var(--c-64748b);
    }

    /* ── Mobile menu slide-in animation ───────────────────────────────────
       Activates when JS adds the .mm-open class (after removing .hidden).
       JS toggles in/out with proper timing so transitions actually run
       instead of being clobbered by display:none.
       Works for both #mobile-menu (coach) and #client-menu (client). */
    #mobile-menu-backdrop,
    #client-menu-backdrop {
      opacity: 0;
      transition: opacity 220ms ease;
    }
    #mobile-menu-backdrop + div,
    #client-menu-backdrop + div { /* the panel */
      transform: translateX(-100%);
      transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
      will-change: transform;
    }
    #mobile-menu.mm-open #mobile-menu-backdrop      { opacity: 1; }
    #mobile-menu.mm-open #mobile-menu-backdrop + div { transform: translateX(0); }
    #client-menu.mm-open #client-menu-backdrop       { opacity: 1; }
    #client-menu.mm-open #client-menu-backdrop + div { transform: translateX(0); }

    /* ── Nav notification badge (red number pill) ───────────────────────── */
    .nav-badge {
      margin-left: auto;
      flex-shrink: 0;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 0.375rem;
      border-radius: 9999px;
      background-color: #ef4444;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      box-shadow: 0 0 0 2px #fff;
    }

    /* ── Nav notification dot (amber pulse) ─────────────────────────────── */
    .nav-dot {
      margin-left: auto;
      flex-shrink: 0;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      background-color: #f59e0b;
      box-shadow: 0 0 0 2px #fff;
      animation: nav-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes nav-dot-pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.4; }
    }

    /* ── Page help tooltip ─────────────────────────────────────────────── */
    .page-help-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 9999px;
      background: var(--b-e2e8f0);
      color: var(--c-64748b);
      font-size: 0.7rem;
      font-weight: 800;
      border: none;
      cursor: pointer;
      vertical-align: middle;
      margin-left: 0.45rem;
      margin-bottom: 0.2rem;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      line-height: 1;
    }
    .page-help-btn:hover { background: var(--b-cbd5e1); color: var(--c-334155); }

    .page-help-popover {
      position: fixed;
      z-index: 9999;
      background: var(--b-1e293b);
      border-radius: 0.875rem;
      padding: 1.1rem 1.25rem 1.25rem;
      max-width: 22rem;
      width: max-content;
      box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.06);
      font-size: 0.85rem;
      line-height: 1.65;
      color: rgba(255,255,255,.75);
      display: none;
    }
    .page-help-popover.is-open { display: block; }
    .page-help-popover-tag {
      font-size: 0.75rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #5eead4;
      margin-bottom: .45rem;
    }
    .page-help-popover-title {
      font-size: 0.95rem;
      font-weight: 800;
      color: #fff;
      margin-bottom: .5rem;
      line-height: 1.3;
    }
    .page-help-popover-body { margin-bottom: .75rem; }
    .page-help-popover-tips {
      list-style: none;
      padding: 0;
      margin: 0;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: .65rem;
      display: flex;
      flex-direction: column;
      gap: .35rem;
    }
    .page-help-popover-tips li {
      display: flex;
      gap: .5rem;
      font-size: .8rem;
      color: rgba(255,255,255,.72);
    }
    .page-help-popover-tips li::before {
      content: '→';
      color: #5eead4;
      flex-shrink: 0;
    }
    .page-help-popover-close {
      position: absolute;
      top: .6rem;
      right: .75rem;
      background: none;
      border: none;
      color: rgba(255,255,255,.3);
      cursor: pointer;
      font-size: 1.1rem;
      line-height: 1;
      padding: 0;
    }
    .page-help-popover-close:hover { color: rgba(255,255,255,.7); }

    /* ══════════════════════════════════════════════════════════════════════
       MISSING TAILWIND UTILITIES — comprehensive patch
       Coverage audit found ~58% of used classes absent from compiled CSS.
       All fixes are here so no individual PHP file needs touching.
       ══════════════════════════════════════════════════════════════════════ */

    /* ── Focus states ───────────────────────────────────────────────────── */
    .focus\:outline-none:focus { outline: none !important; }
    .focus\:ring-2:focus {
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tw-ring-color, #0f766e) !important;
    }
    .focus\:ring-brand-900:focus { --tw-ring-color: var(--c-071b2d); }
    .focus\:ring-brand-500:focus { --tw-ring-color: var(--c-0f766e); }
    .focus\:ring-brand-400:focus { --tw-ring-color: #2dd4bf; }
    .focus\:ring-brand-300:focus { --tw-ring-color: #6ee7b7; }
    .focus\:ring-amber-400:focus { --tw-ring-color: #fbbf24; }
    .focus\:ring-violet-400:focus { --tw-ring-color: #a78bfa; }
    .focus\:ring-slate-300:focus  { --tw-ring-color: var(--c-cbd5e1); }
    .focus\:border-brand-400:focus { border-color: #2dd4bf !important; }
    .focus\:border-transparent:focus { border-color: transparent !important; }

    /* ── Fractional spacing — 0.5 scale ────────────────────────────────── */
    .mt-0\.5  { margin-top:    0.125rem !important; }
    .mb-0\.5  { margin-bottom: 0.125rem !important; }
    .ml-0\.5  { margin-left:   0.125rem !important; }
    .mr-0\.5  { margin-right:  0.125rem !important; }
    .mt-1\.5  { margin-top:    0.375rem !important; }
    .mb-1\.5  { margin-bottom: 0.375rem !important; }
    .ml-1\.5  { margin-left:   0.375rem !important; }
    .mr-1\.5  { margin-right:  0.375rem !important; }
    .mt-2\.5  { margin-top:    0.625rem !important; }
    .mb-2\.5  { margin-bottom: 0.625rem !important; }
    .ml-2\.5  { margin-left:   0.625rem !important; }
    .mr-2\.5  { margin-right:  0.625rem !important; }
    .mt-3\.5  { margin-top:    0.875rem !important; }
    .mb-3\.5  { margin-bottom: 0.875rem !important; }
    .mx-0\.5  { margin-left:   0.125rem !important; margin-right: 0.125rem !important; }
    .my-0\.5  { margin-top:    0.125rem !important; margin-bottom: 0.125rem !important; }
    .my-1\.5  { margin-top:    0.375rem !important; margin-bottom: 0.375rem !important; }
    .my-2\.5  { margin-top:    0.625rem !important; margin-bottom: 0.625rem !important; }

    .pt-0\.5  { padding-top:    0.125rem !important; }
    .pb-0\.5  { padding-bottom: 0.125rem !important; }
    .pt-1\.5  { padding-top:    0.375rem !important; }
    .pb-1\.5  { padding-bottom: 0.375rem !important; }
    .pt-2\.5  { padding-top:    0.625rem !important; }
    .pb-2\.5  { padding-bottom: 0.625rem !important; }
    .py-0\.5  { padding-top:    0.125rem !important; padding-bottom: 0.125rem !important; }
    .py-1\.5  { padding-top:    0.375rem !important; padding-bottom: 0.375rem !important; }
    .py-2\.5  { padding-top:    0.625rem !important; padding-bottom: 0.625rem !important; }
    .py-3\.5  { padding-top:    0.875rem !important; padding-bottom: 0.875rem !important; }
    .px-0\.5  { padding-left:   0.125rem !important; padding-right: 0.125rem !important; }
    .px-1\.5  { padding-left:   0.375rem !important; padding-right: 0.375rem !important; }
    .px-2\.5  { padding-left:   0.625rem !important; padding-right: 0.625rem !important; }
    .px-3\.5  { padding-left:   0.875rem !important; padding-right: 0.875rem !important; }
    .gap-0\.5 { gap: 0.125rem !important; }
    .gap-1\.5 { gap: 0.375rem !important; }
    .gap-2\.5 { gap: 0.625rem !important; }
    .gap-3\.5 { gap: 0.875rem !important; }
    .space-y-0\.5 > * + * { margin-top: 0.125rem !important; }
    .space-y-1\.5 > * + * { margin-top: 0.375rem !important; }
    .space-y-2\.5 > * + * { margin-top: 0.625rem !important; }
    .space-x-0\.5 > * + * { margin-left: 0.125rem !important; }
    .space-x-1\.5 > * + * { margin-left: 0.375rem !important; }

    /* ── Sizing — fractional & arbitrary ───────────────────────────────── */
    .w-0\.5   { width:  0.125rem !important; }
    .h-0\.5   { height: 0.125rem !important; }
    .w-1\.5   { width:  0.375rem !important; }
    .h-1\.5   { height: 0.375rem !important; }
    .w-2\.5   { width:  0.625rem !important; }
    .h-2\.5   { height: 0.625rem !important; }
    .w-3\.5   { width:  0.875rem !important; }
    .h-3\.5   { height: 0.875rem !important; }
    .size-2\.5 { width: 0.625rem !important; height: 0.625rem !important; }
    .size-3\.5 { width: 0.875rem !important; height: 0.875rem !important; }
    .max-h-\[90vh\]   { max-height: 90vh   !important; }
    .max-h-\[80vh\]   { max-height: 80vh   !important; }
    .max-h-\[70vh\]   { max-height: 70vh   !important; }
    .max-h-\[60vh\]   { max-height: 60vh   !important; }
    .max-h-\[300px\]  { max-height: 300px  !important; }
    .max-h-\[400px\]  { max-height: 400px  !important; }
    .max-h-\[500px\]  { max-height: 500px  !important; }
    .min-h-\[40px\]   { min-height: 40px   !important; }
    .min-h-\[60px\]   { min-height: 60px   !important; }
    .min-h-\[80px\]   { min-height: 80px   !important; }
    .min-h-\[100px\]  { min-height: 100px  !important; }
    .min-h-\[120px\]  { min-height: 120px  !important; }
    .min-h-\[200px\]  { min-height: 200px  !important; }
    .w-\[90vw\]       { width: 90vw   !important; }
    .w-\[200px\]      { width: 200px  !important; }
    .w-\[240px\]      { width: 240px  !important; }
    .h-\[90vh\]       { height: 90vh  !important; }
    .h-\[1px\]        { height: 1px   !important; }
    .h-\[calc\(100vh-0px\)\] { height: calc(100vh - 0px) !important; }

    /* ── Arbitrary sizes — additional fills for pre-compiled Tailwind gaps ─ */
    .max-h-\[85vh\]   { max-height: 85vh !important; }
    .max-w-\[70px\]   { max-width:  70px  !important; }
    .max-w-\[90px\]   { max-width:  90px  !important; }
    .max-w-\[100px\]  { max-width: 100px  !important; }
    .max-w-\[120px\]  { max-width: 120px  !important; }
    .max-w-\[140px\]  { max-width: 140px  !important; }
    .max-w-\[150px\]  { max-width: 150px  !important; }
    .max-w-\[160px\]  { max-width: 160px  !important; }
    .max-w-\[180px\]  { max-width: 180px  !important; }
    .max-w-\[200px\]  { max-width: 200px  !important; }
    .max-w-\[240px\]  { max-width: 240px  !important; }
    .max-w-\[70\%\]   { max-width:  70%   !important; }
    .max-w-\[75\%\]   { max-width:  75%   !important; }
    .min-h-\[2\.5rem\]{ min-height: 2.5rem !important; }
    .min-w-\[52px\]   { min-width:  52px  !important; }
    .min-w-\[64px\]   { min-width:  64px  !important; }
    .min-w-\[120px\]  { min-width: 120px  !important; }
    .min-w-\[200px\]  { min-width: 200px  !important; }
    .min-w-\[220px\]  { min-width: 220px  !important; }

    /* ── Z-index arbitrary values ──────────────────────────────────────── */
    .z-\[70\]         { z-index: 70   !important; }
    .z-\[100\]        { z-index: 100  !important; }
    .z-\[9999\]       { z-index: 9999 !important; }

    /* ── Specific brand hex colors used in HTML (Calendly + indigo CTA) ─ */
    .bg-\[\#006BFF\]  { background-color: #006BFF !important; }
    .bg-\[\#4F46E5\]  { background-color: #4F46E5 !important; }

    /* ── Typography — arbitrary sizes ───────────────────────────────────── */
    .text-\[8px\]  { font-size: 8px  !important; line-height: 1.2 !important; }
    .text-\[9px\]  { font-size: 9px  !important; line-height: 1.2 !important; }
    .text-\[10px\] { font-size: 10px !important; line-height: 1.3 !important; }
    .text-\[11px\] { font-size: 11px !important; line-height: 1.4 !important; }
    .text-\[13px\] { font-size: 13px !important; line-height: 1.4 !important; }
    .text-\[15px\] { font-size: 15px !important; line-height: 1.5 !important; }
    .leading-\[1\.1\] { line-height: 1.1 !important; }
    .leading-\[1\.2\] { line-height: 1.2 !important; }
    .tracking-\[0\.2em\] { letter-spacing: 0.2em !important; }

    /* ── Colours — opacity modifier syntax (bg-*/NN) ────────────────────── */
    .bg-black\/5   { background-color: rgba(0,0,0,0.05)  !important; }
    .bg-black\/10  { background-color: rgba(0,0,0,0.10)  !important; }
    .bg-black\/20  { background-color: rgba(0,0,0,0.20)  !important; }
    .bg-black\/40  { background-color: rgba(0,0,0,0.40)  !important; }
    .bg-black\/50  { background-color: rgba(0,0,0,0.50)  !important; }
    .bg-black\/60  { background-color: rgba(0,0,0,0.60)  !important; }
    .bg-white\/5   { background-color: rgba(255,255,255,0.05) !important; }
    .bg-white\/10  { background-color: rgba(255,255,255,0.10) !important; }
    .bg-white\/20  { background-color: rgba(255,255,255,0.20) !important; }
    .bg-white\/30  { background-color: rgba(255,255,255,0.30) !important; }
    .bg-white\/40  { background-color: rgba(255,255,255,0.40) !important; }
    .bg-white\/80  { background-color: rgba(255,255,255,0.80) !important; }
    .bg-white\/90  { background-color: rgba(255,255,255,0.90) !important; }
    .bg-brand-900\/10 { background-color: rgba(7,27,45,0.10) !important; }
    .text-white\/60   { color: rgba(255,255,255,0.60) !important; }
    .text-white\/70   { color: rgba(255,255,255,0.70) !important; }
    .text-white\/80   { color: rgba(255,255,255,0.80) !important; }
    .border-white\/10 { border-color: rgba(255,255,255,0.10) !important; }
    .border-white\/20 { border-color: rgba(255,255,255,0.20) !important; }

    /* ── Divide utilities ───────────────────────────────────────────────── */
    .divide-y > * + *  { border-top-width: 1px  !important; border-top-style: solid; }
    .divide-x > * + *  { border-left-width: 1px !important; border-left-style: solid; }
    .divide-slate-100 > * + * { border-color: #f1f5f9 !important; }
    .divide-slate-200 > * + * { border-color: var(--c-e2e8f0) !important; }
    .divide-slate-700 > * + * { border-color: var(--c-334155) !important; }
    .divide-white\/10 > * + * { border-color: rgba(255,255,255,0.10) !important; }

    /* ── Ring utilities ─────────────────────────────────────────────────── */
    .ring-1  { box-shadow: 0 0 0 1px var(--tw-ring-color, #e2e8f0) !important; }
    .ring-2  { box-shadow: 0 0 0 2px var(--tw-ring-color, #e2e8f0) !important; }
    .ring-inset { --tw-ring-inset: inset; }
    .ring-slate-200 { --tw-ring-color: var(--c-e2e8f0); }
    .ring-slate-300 { --tw-ring-color: var(--c-cbd5e1); }
    .ring-brand-500 { --tw-ring-color: var(--c-0f766e); }
    .ring-red-300   { --tw-ring-color: #fca5a5; }
    .ring-offset-2  { --tw-ring-offset-width: 2px; }

    /* ── Pointer / interaction utilities ────────────────────────────────── */
    .pointer-events-none { pointer-events: none !important; }
    .pointer-events-auto { pointer-events: auto !important; }
    .select-none  { user-select: none !important; -webkit-user-select: none !important; }
    .select-text  { user-select: text !important; }
    .select-all   { user-select: all  !important; }
    .touch-none   { touch-action: none !important; }

    /* ── Overflow & scroll ──────────────────────────────────────────────── */
    .overflow-x-auto    { overflow-x: auto  !important; }
    .overflow-x-hidden  { overflow-x: hidden !important; }
    .overflow-y-auto    { overflow-y: auto  !important; }
    .overflow-y-hidden  { overflow-y: hidden !important; }
    .overflow-y-scroll  { overflow-y: scroll !important; }
    .overflow-auto      { overflow: auto !important; }
    .overflow-scroll    { overflow: scroll !important; }
    .overflow-visible   { overflow: visible !important; }
    .scrollbar-thin     { scrollbar-width: thin; }
    .scrollbar-none     { scrollbar-width: none; }
    .scrollbar-none::-webkit-scrollbar { display: none; }

    /* ── Display & visibility ───────────────────────────────────────────── */
    .sr-only {
      position: absolute !important; width: 1px !important; height: 1px !important;
      padding: 0 !important; margin: -1px !important; overflow: hidden !important;
      clip: rect(0,0,0,0) !important; white-space: nowrap !important; border-width: 0 !important;
    }
    .not-sr-only { position: static !important; width: auto !important; height: auto !important;
      padding: 0 !important; margin: 0 !important; overflow: visible !important;
      clip: auto !important; white-space: normal !important; }
    .invisible  { visibility: hidden   !important; }
    .visible    { visibility: visible  !important; }
    .contents   { display: contents   !important; }
    .list-none  { list-style-type: none !important; }
    .list-disc  { list-style-type: disc !important; }

    /* ── Border extras ──────────────────────────────────────────────────── */
    .border-0        { border-width: 0   !important; }
    .border-2        { border-width: 2px !important; }
    .border-4        { border-width: 4px !important; }
    .border-l        { border-left-width:   1px !important; border-left-style: solid; }
    .border-r        { border-right-width:  1px !important; border-right-style: solid; }
    .border-t        { border-top-width:    1px !important; border-top-style: solid; }
    .border-l-2      { border-left-width:   2px !important; border-left-style: solid; }
    .border-l-4      { border-left-width:   4px !important; border-left-style: solid; }
    .border-l-brand-500 { border-left-color: var(--c-0f766e) !important; }
    .border-l-brand-900 { border-left-color: var(--c-071b2d) !important; }
    .border-l-slate-200 { border-left-color: var(--c-e2e8f0) !important; }
    .border-dashed   { border-style: dashed !important; }
    .border-dotted   { border-style: dotted !important; }
    .rounded-\[inherit\] { border-radius: inherit !important; }
    .rounded-t-xl    { border-top-left-radius: 0.75rem !important; border-top-right-radius: 0.75rem !important; }
    .rounded-b-xl    { border-bottom-left-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }
    .rounded-t-2xl   { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }
    .rounded-b-2xl   { border-bottom-left-radius: 1rem !important; border-bottom-right-radius: 1rem !important; }
    .rounded-l-lg    { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
    .rounded-r-lg    { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }

    /* ── Shadow extras ──────────────────────────────────────────────────── */
    .shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05) !important; }
    .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1) !important; }
    .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important; }
    .shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0,0,0,.05) !important; }
    .shadow-none  { box-shadow: none !important; }

    /* ── Backdrop ────────────────────────────────────────────────────────── */
    .backdrop-blur-sm { backdrop-filter: blur(4px)  !important; -webkit-backdrop-filter: blur(4px); }
    .backdrop-blur    { backdrop-filter: blur(8px)  !important; -webkit-backdrop-filter: blur(8px); }
    .backdrop-blur-md { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px); }

    /* ── Transition / animation extras ─────────────────────────────────── */
    .transition-all       { transition: all 150ms cubic-bezier(.4,0,.2,1) !important; }
    .transition-transform { transition: transform 150ms cubic-bezier(.4,0,.2,1) !important; }
    .transition-opacity   { transition: opacity 150ms cubic-bezier(.4,0,.2,1) !important; }
    .duration-200  { transition-duration: 200ms !important; }
    .duration-300  { transition-duration: 300ms !important; }
    .ease-in-out   { transition-timing-function: cubic-bezier(.4,0,.2,1) !important; }
    .rotate-180    { transform: rotate(180deg) !important; }
    .rotate-90     { transform: rotate(90deg)  !important; }
    .scale-95      { transform: scale(.95)     !important; }
    .scale-100     { transform: scale(1)       !important; }
    .-translate-y-1\/2 { transform: translateY(-50%) !important; }
    .translate-y-0 { transform: translateY(0)  !important; }

    /* ── Object fit ─────────────────────────────────────────────────────── */
    .object-cover   { object-fit: cover   !important; }
    .object-contain { object-fit: contain !important; }
    .object-center  { object-position: center !important; }

    /* ── Aspect ratio ───────────────────────────────────────────────────── */
    .aspect-video  { aspect-ratio: 16/9  !important; }
    .aspect-square { aspect-ratio: 1/1   !important; }

    /* ── Grid extras ────────────────────────────────────────────────────── */
    .col-span-2 { grid-column: span 2 / span 2 !important; }
    .col-span-3 { grid-column: span 3 / span 3 !important; }
    .col-span-full { grid-column: 1 / -1 !important; }
    .row-span-2 { grid-row: span 2 / span 2 !important; }
    .grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    .grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
    .grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
    .auto-cols-fr { grid-auto-columns: minmax(0,1fr) !important; }
    .grid-flow-col { grid-auto-flow: column !important; }

    /* ── Flex extras ────────────────────────────────────────────────────── */
    .flex-col-reverse { flex-direction: column-reverse !important; }
    .grow   { flex-grow:   1 !important; }
    .grow-0 { flex-grow:   0 !important; }
    .basis-0 { flex-basis: 0 !important; }
    .basis-full { flex-basis: 100% !important; }

    /* ── Positioning extras ─────────────────────────────────────────────── */
    .top-0   { top:    0 !important; }
    .bottom-0{ bottom: 0 !important; }
    .right-0 { right:  0 !important; }
    .top-2   { top:    0.5rem !important; }
    .top-3   { top:    0.75rem !important; }
    .top-4   { top:    1rem !important; }
    .right-2 { right:  0.5rem !important; }
    .right-3 { right:  0.75rem !important; }
    .right-4 { right:  1rem !important; }
    .bottom-2{ bottom: 0.5rem !important; }
    .bottom-4{ bottom: 1rem !important; }
    .left-2  { left:   0.5rem !important; }
    .left-3  { left:   0.75rem !important; }
    .left-4  { left:   1rem !important; }
    .inset-x-0 { left: 0 !important; right: 0 !important; }
    .inset-y-0 { top:  0 !important; bottom: 0 !important; }

    /* ── Z-index extras ─────────────────────────────────────────────────── */
    .z-10  { z-index: 10  !important; }
    .z-20  { z-index: 20  !important; }
    .z-30  { z-index: 30  !important; }
    .z-40  { z-index: 40  !important; }
    .z-100 { z-index: 100 !important; }

    /* ── Print utility ──────────────────────────────────────────────────── */
    @media print {
      .no-print, .print-hide { display: none !important; } /* both aliases */
      .print-only { display: block !important; }

      /* Hide chrome that shouldn't be on paper */
      .sidebar-link, .mobile-nav, #scroll-top-btn, .flash-msg,
      .sticky, [data-show], [data-hide], [data-modal-close] { display: none !important; }
      aside.coach-sidebar, nav.coach-sidebar { display: none !important; }
      footer { display: none !important; }

      /* Drop the sidebar offset so content uses the full page width */
      .lg\:pl-60 { padding-left: 0 !important; }

      /* Light, clean print background */
      body { background: var(--b-ffffff) !important; color: #000 !important; }
      .bg-slate-50, .bg-slate-100, .bg-white { background: var(--b-ffffff) !important; }
      .card-lift { box-shadow: none !important; transform: none !important; }
      .rounded-xl, .rounded-2xl, .rounded-lg { border-radius: 0.25rem !important; }
      .border, .border-slate-200, .border-slate-100 { border-color: var(--c-cbd5e1) !important; }

      /* Avoid awkward page breaks inside cards/tables */
      .bg-white, table, tr, .empty-state { page-break-inside: avoid; }
      h1, h2, h3 { page-break-after: avoid; }

      /* Print-friendly link rendering */
      a { color: #000 !important; text-decoration: underline; }
      a[href]:not([href^="#"]):after { content: ""; } /* don't add URLs after links by default */

      /* Hide modal scaffolding that may still be present in the DOM */
      [id$="-modal"], [class*="fixed inset-0 z-50"] { display: none !important; }
    }
    .print-only { display: none; }

    /* ── Multi-line truncation (line-clamp) ───────────────────────────────
       Tailwind's @tailwindcss/line-clamp isn't in the pre-compiled CSS, so
       cards using .line-clamp-* were rendering as full text. Restored here. */
    .line-clamp-1, .line-clamp-2, .line-clamp-3, .line-clamp-4 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
    .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
    .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
    .line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

    /* ── :has(:checked) radio-card pattern used in resources.php ──────── */
    .has-\[\:checked\]\:border-slate-400:has(:checked) { border-color: var(--c-94a3b8) !important; }
    .has-\[\:checked\]\:bg-slate-50:has(:checked)      { background-color: var(--b-f8fafc) !important; }
    .has-\[\:checked\]\:border-emerald-400:has(:checked) { border-color: #34d399 !important; }
    .has-\[\:checked\]\:bg-emerald-50:has(:checked)      { background-color: var(--b-ecfdf5) !important; }
    .has-\[\:checked\]\:border-blue-400:has(:checked)    { border-color: #60a5fa !important; }
    .has-\[\:checked\]\:bg-blue-50:has(:checked)         { background-color: var(--b-eff6ff) !important; }

    /* ── Placeholder color used in textareas ──────────────────────────── */
    .placeholder-slate-400::placeholder { color: var(--c-94a3b8) !important; opacity: 1; }

    /* ── Miscellaneous missing utilities ────────────────────────────────── */
    .whitespace-pre     { white-space: pre  !important; }
    .whitespace-nowrap  { white-space: nowrap !important; }
    .break-all    { word-break: break-all  !important; }
    .break-words  { overflow-wrap: break-word !important; }
    .break-keep   { word-break: keep-all !important; }
    .text-ellipsis{ text-overflow: ellipsis !important; }
    .underline    { text-decoration-line: underline !important; }
    .line-through { text-decoration-line: line-through !important; }
    .no-underline { text-decoration-line: none !important; }
    .italic       { font-style: italic !important; }
    .not-italic   { font-style: normal !important; }
    .uppercase    { text-transform: uppercase  !important; }
    .lowercase    { text-transform: lowercase  !important; }
    .capitalize   { text-transform: capitalize !important; }
    .normal-case  { text-transform: none !important; }
    .tabular-nums { font-variant-numeric: tabular-nums !important; }
    .antialiased  { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    .resize-none  { resize: none  !important; }
    .resize       { resize: both  !important; }
    .resize-y     { resize: vertical !important; }
    .cursor-default  { cursor: default  !important; }
    .cursor-text     { cursor: text     !important; }
    .cursor-grab     { cursor: grab     !important; }
    .cursor-grabbing { cursor: grabbing !important; }
    .cursor-not-allowed { cursor: not-allowed !important; }
    .will-change-transform { will-change: transform; }
    .border-collapse { border-collapse: collapse !important; }
    .table-auto   { table-layout: auto  !important; }
    .table-fixed  { table-layout: fixed !important; }
    .align-middle { vertical-align: middle !important; }
    .align-top    { vertical-align: top    !important; }
    .align-bottom { vertical-align: bottom !important; }

    /* ── sm breakpoint (≥640 px) ────────────────────────────────────────── */
    @media (min-width: 640px) {
      .sm\:flex        { display: flex !important; }
      .sm\:inline-flex { display: inline-flex !important; }
      .sm\:block       { display: block !important; }
      .sm\:hidden      { display: none !important; }
      .sm\:flex-row    { flex-direction: row !important; }
      .sm\:flex-col    { flex-direction: column !important; }
      .sm\:flex-wrap   { flex-wrap: wrap !important; }
      .sm\:flex-nowrap { flex-wrap: nowrap !important; }
      .sm\:items-center   { align-items: center !important; }
      .sm\:items-start    { align-items: flex-start !important; }
      .sm\:items-end      { align-items: flex-end !important; }
      .sm\:justify-between { justify-content: space-between !important; }
      .sm\:justify-end    { justify-content: flex-end !important; }
      .sm\:w-auto  { width: auto !important; }
      .sm\:w-72    { width: 18rem !important; }
      .sm\:w-64    { width: 16rem !important; }
      .sm\:w-48    { width: 12rem !important; }
      .sm\:w-12    { width: 3rem !important; }
      .sm\:w-1\/2  { width: 50% !important; }
      .sm\:w-full  { width: 100% !important; }
      .sm\:max-w-sm  { max-width: 24rem !important; }
      .sm\:max-w-md  { max-width: 28rem !important; }
      .sm\:ml-auto { margin-left: auto !important; }
      .sm\:mr-auto { margin-right: auto !important; }
      .sm\:mx-0    { margin-left: 0 !important; margin-right: 0 !important; }
      .sm\:px-4    { padding-left: 1rem !important; padding-right: 1rem !important; }
      .sm\:px-6    { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
      .sm\:px-8    { padding-left: 2rem !important; padding-right: 2rem !important; }
      .sm\:py-4    { padding-top: 1rem !important; padding-bottom: 1rem !important; }
      .sm\:p-6     { padding: 1.5rem !important; }
      .sm\:p-8     { padding: 2rem !important; }
      .sm\:gap-4   { gap: 1rem !important; }
      .sm\:gap-6   { gap: 1.5rem !important; }
      .sm\:text-sm   { font-size: 0.875rem !important; }
      .sm\:text-base { font-size: 1rem !important; }
      .sm\:text-lg   { font-size: 1.125rem !important; }
      .sm\:text-xl   { font-size: 1.25rem !important; }
      .sm\:text-2xl  { font-size: 1.5rem !important; line-height: 2rem !important; }
      .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
      .sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
      .sm\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
      .sm\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
      .sm\:col-span-2  { grid-column: span 2 / span 2 !important; }
      .sm\:table-cell  { display: table-cell !important; }
      .sm\:divide-x > * + * { border-left-width: 1px !important; border-top-width: 0 !important; }
      .sm\:divide-y-0 > * + * { border-top-width: 0 !important; }
      .sm\:rounded-xl  { border-radius: 0.75rem !important; }
      .sm\:rounded-2xl { border-radius: 1rem !important; }
    }

    /* ── md breakpoint (≥768 px) ────────────────────────────────────────── */
    @media (min-width: 768px) {
      .md\:flex        { display: flex !important; }
      .md\:block       { display: block !important; }
      .md\:hidden      { display: none !important; }
      .md\:flex-row    { flex-direction: row !important; }
      .md\:items-center { align-items: center !important; }
      .md\:w-auto      { width: auto !important; }
      .md\:w-1\/2      { width: 50% !important; }
      .md\:w-1\/3      { width: 33.333% !important; }
      .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
      .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
      .md\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
      .md\:col-span-2  { grid-column: span 2 / span 2 !important; }
      .md\:px-8        { padding-left: 2rem !important; padding-right: 2rem !important; }
      .md\:text-xl     { font-size: 1.25rem !important; }
      .md\:text-2xl    { font-size: 1.5rem !important; }
    }

    /* ── lg breakpoint (≥1024 px) ───────────────────────────────────────── */
    @media (min-width: 1024px) {
      .lg\:flex        { display: flex !important; }
      .lg\:block       { display: block !important; }
      .lg\:hidden      { display: none !important; }
      .lg\:inline-flex { display: inline-flex !important; }
      .lg\:flex-row    { flex-direction: row !important; }
      .lg\:items-center { align-items: center !important; }
      .lg\:w-auto      { width: auto !important; }
      .lg\:w-1\/2      { width: 50% !important; }
      .lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
      .lg\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
      .lg\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
      .lg\:col-span-2  { grid-column: span 2 / span 2 !important; }
      .lg\:px-8        { padding-left: 2rem !important; padding-right: 2rem !important; }
      .lg\:px-60       { padding-left: 15rem !important; }
      .lg\:pl-60       { padding-left: 15rem !important; }
      .lg\:text-2xl    { font-size: 1.5rem !important; }
      .lg\:text-3xl    { font-size: 1.875rem !important; }
    }

    /* ── Global form field consistency ─────────────────────────────────────
       Native <select> ignores padding/border/bg when appearance:auto is
       active (OS controls rendering). Force appearance:none project-wide
       and provide a consistent custom chevron arrow via background-image.  */
    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.65rem center;
      background-size: 1rem;
      padding-right: 2.25rem !important;
      cursor: pointer;
    }

    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    input[type="datetime-local"],
    input[type="date"],
    textarea {
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    select:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    textarea:focus {
      outline: none;
      border-color: var(--c-0f766e);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
    }

    /* ── Date/time input normalization (iOS Safari fix) ──────────────────────
       Without these resets, iOS Safari renders <input type="date"> with its own
       pill-shaped gray appearance — centered text, no border, larger height
       than sibling text inputs. Tailwind classes get completely ignored.
       Stripping the -webkit-appearance lets the same border/padding/bg classes
       that work on <input type="text"> finally apply to date inputs too.
       The calendar picker still opens on tap — only the field's visual is reset. */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"],
    input[type="week"] {
      -webkit-appearance: none;
      appearance: none;
      background-color: #fff;
      text-align: left;
      min-height: 2.5rem; /* matches text inputs at px-3 py-2 + text-sm baseline */
      line-height: 1.25;
    }
    /* Calendar picker indicator: subtle but visible so users see it's tappable. */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="month"]::-webkit-calendar-picker-indicator,
    input[type="week"]::-webkit-calendar-picker-indicator {
      opacity: 0.55;
      cursor: pointer;
    }

    /* ── Action-row form alignment fix ─────────────────────────────────────
       When a <form> is a direct child of a flex/inline-flex container it
       renders as a block box, causing its button to sit slightly above or
       below sibling <button>/<a> elements.  display:contents makes the form
       layout-invisible — its children participate directly in the flex axis
       — while form submission behaviour is completely preserved.
       Safe here because action-row forms carry no visual styling of their
       own (no background, border, or padding on the <form> element itself). */
    .flex > form,
    .inline-flex > form { display: contents; }

    /* ── Mobile typography baseline (≤ 640 px) ──────────────────────────────
       Applied globally so every page in the app benefits automatically.
       Desktop layout is completely unaffected — all rules are max-width gated.

       1. iOS Safari auto-zoom fix: any focusable field < 16 px causes the
          browser to zoom the viewport on tap. Forcing 1 rem prevents this
          across all forms app-wide without changing desktop appearance.
       2. text-xs / text-sm: nudged up one step so labels, descriptions and
          table cells stay comfortably readable on small screens.
       3. td / th: floor added so data tables never inherit sub-12 px text.
       4. .sidebar-link: slightly larger touch-friendly label on mobile.    */
    @media (max-width: 640px) {

      /* 1 ── iOS zoom prevention (MUST be ≥ 16 px / 1 rem) */
      input[type="text"],
      input[type="email"],
      input[type="tel"],
      input[type="url"],
      input[type="search"],
      input[type="number"],
      input[type="password"],
      input[type="datetime-local"],
      input[type="date"],
      select,
      textarea {
        font-size: 1rem !important;
      }

      /* 2 ── Tailwind text-size utility bumps */
      .text-xs  { font-size: 0.8125rem !important; line-height: 1.4 !important; } /* 12 → 13 px */
      .text-sm  { font-size: 0.9375rem !important; line-height: 1.5 !important; } /* 14 → 15 px */

      /* 3 ── Table cell floor */
      td, th { font-size: 0.875rem; } /* never below 14 px */

      /* 4 ── Sidebar nav label */
      .sidebar-link { font-size: 0.9375rem; } /* 14 → 15 px */

      /* 5 ── Touch target floor (WCAG 2.1 — 44×44 px minimum on touch devices)
         Scoped only to standalone action buttons; inline text links left alone
         so they don't break paragraph flow. */
      .btn-sm                                     { min-height: 2.5rem;  } /* 40px */
      .btn-primary, .btn-secondary, .btn-danger    { min-height: 2.75rem; } /* WCAG 44 px */
      input[type="checkbox"], input[type="radio"] { min-width: 1.125rem; min-height: 1.125rem; }

      /* 6 ── Footer breathing room on mobile
         Legal links wrap to multiple lines; give them comfortable spacing
         and slightly larger tappable targets without changing desktop. */
      footer nav.flex.flex-wrap { row-gap: 0.625rem; column-gap: 1.25rem; }
      footer nav.flex.flex-wrap a { padding: 0.25rem 0; line-height: 1.4; }
      footer p { line-height: 1.5; }
    }

    /* ── Global confirmation modal ────────────────────────────────────────
       Branded replacement for window.confirm() — used by:
         • Every form with [data-confirm="..."] (intercepted by app.js)
         • window.coachConfirm(message) — returns a Promise<boolean>
       Injected into the DOM lazily by app.js the first time it's needed,
       so it costs zero markup on pages that never trigger a confirm. */
    .app-confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(15, 23, 42, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .app-confirm-overlay.open {
      display: flex;
      animation: appConfirmFade 0.12s ease-out;
    }
    @keyframes appConfirmFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .app-confirm-panel {
      background: var(--b-ffffff);
      border-radius: 16px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 420px;
      padding: 22px 24px;
      animation: appConfirmSlide 0.16s ease-out;
    }
    @keyframes appConfirmSlide {
      from { transform: translateY(8px); opacity: 0; }
      to   { transform: translateY(0);   opacity: 1; }
    }
    .app-confirm-title {
      margin: 0 0 6px;
      font-size: 16px;
      font-weight: 900;
      color: var(--c-071b2d);
    }
    .app-confirm-msg {
      margin: 0 0 22px;
      font-size: 14px;
      color: var(--c-475569);
      line-height: 1.55;
      /* Allow newlines from the data-confirm string to render visibly */
      white-space: pre-wrap;
    }
    .app-confirm-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .app-confirm-btn {
      border-radius: 8px;
      padding: 9px 18px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: background-color 120ms, border-color 120ms, color 120ms;
      font-family: inherit;
    }
    .app-confirm-btn-cancel {
      background: var(--b-ffffff);
      border-color: var(--c-e2e8f0);
      color: var(--c-475569);
    }
    .app-confirm-btn-cancel:hover { background: var(--b-f8fafc); border-color: var(--c-cbd5e1); }
    .app-confirm-btn-ok {
      background: var(--b-071b2d);
      border-color: var(--c-071b2d);
      color: #fff;
    }
    .app-confirm-btn-ok:hover { background: var(--b-123f4a); border-color: var(--c-123f4a); }
    /* Variant for destructive actions — pass {danger: true} or use class */
    .app-confirm-btn-ok.danger {
      background: #dc2626;
      border-color: var(--c-dc2626);
    }
    .app-confirm-btn-ok.danger:hover { background: #b91c1c; border-color: var(--c-b91c1c); }

/* ── Inline form-field validation (pairs with public/form-validation.js) ─────── */
.is-invalid,
input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: #dc2626 !important; }
.is-invalid:focus { outline: none !important; border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.18) !important; }
.field-error { display: block; flex-basis: 100%; width: 100%; margin-top: .3rem; font-size: .75rem; font-weight: 600; line-height: 1.35; color: #dc2626; }
.field-error::before { content: "\26A0"; margin-right: .3rem; }