/* chiro-styles.css — extracted from portal-chiro.html (4 blocks, in order) */

/* ===== block 1 ===== */

:root { --red:#0A78E0; --black:#111; --gray:#555; --gray-light:#e8e8e8; --gray-bg:#f5f5f5; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Barlow',sans-serif; background:var(--gray-bg); min-height:100vh; display:flex; flex-direction:column; }
header { background:var(--black); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; }

.logo { font-family:'Oswald',sans-serif; line-height:1; flex-shrink:0; cursor:pointer; display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { width:38px; height:38px; background:var(--red); border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden; transform:rotate(-2deg); box-shadow:3px 3px 0 #0A3D8F; }
.logo-icon::after { content:'✦'; font-size:20px; line-height:1; color:white; }
.logo-text { display:flex; flex-direction:column; gap:0px; }
.logo-line1 { font-size:13px; letter-spacing:0.22em; color:#aaa; line-height:1; font-family:'Barlow',sans-serif; font-weight:700; text-transform:uppercase; }
.logo-line2 { font-size:24px; letter-spacing:0.04em; line-height:0.95; color:white; font-family:'Oswald',sans-serif; font-weight:700; }
.logo span { color:var(--red); }
.header-right { display:flex; align-items:center; gap:16px; }
.user-name { color:#ccc; font-size:13px; }
.nav-btn { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:white; padding:7px 16px; border-radius:4px; font-size:13px; cursor:pointer; }
.nav-btn:hover { background:rgba(255,255,255,0.2); }

.main { flex:1; max-width:1100px; margin:0 auto; width:100%; padding:28px 24px; }
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-title { font-family:'Oswald',sans-serif; font-size:26px; font-weight:700; }
.page-sub { font-size:14px; color:var(--gray); margin-top:2px; }

.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px; }
.stat-card { background:white; border-radius:8px; border:1px solid var(--gray-light); padding:20px; text-align:center; }
.stat-num { font-family:'Oswald',sans-serif; font-size:36px; font-weight:700; color:#1565c0; }
.stat-label { font-size:13px; color:var(--gray); margin-top:4px; }

.filter-bar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.filter-btn {
          padding: 8px 16px;
          border: 1px solid #ddd;
          border-radius: 20px;
          background: #fff;
          color: #555;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.15s, color 0.15s, border 0.15s;
        }
        .filter-btn:hover { background: #f5f5f5; }
        .filter-btn.active {
          background: #0A78E0;
          color: #fff;
          border-color: #0A78E0;
        }
        .filter-btn .filter-count {
          display: inline-block;
          margin-left: 6px;
          padding: 1px 7px;
          background: rgba(0,0,0,0.12);
          color: inherit;
          border-radius: 10px;
          font-size: 11px;
          font-weight: 700;
        }
        .filter-btn.active .filter-count {
          background: rgba(255,255,255,0.3);
        }
.filter-btn.active { background:var(--red); color:white; border-color:var(--red); }
#lawyerFilter { padding:7px 16px; border:1px solid var(--gray-light); border-radius:20px; font-size:13px; cursor:pointer; background:white; transition:all 0.2s; }

.referral-list { display:flex; flex-direction:column; gap:12px; }
.referral-card { background:white; border-radius:8px; border:3px solid #222; overflow:hidden; transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; margin-bottom:20px; }
.referral-card:hover { transform:translateY(-4px); border-color:#3b82f6; box-shadow:0 10px 30px rgba(59,130,246,0.30); }
.referral-card.new-ref { border-left:4px solid var(--red); }

.ref-header { padding:16px 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; gap:12px; flex-wrap:wrap; }
.ref-patient { font-family:'Oswald',sans-serif; font-size:17px; font-weight:700; color:var(--black); }
.ref-meta { font-size:12px; color:var(--gray); margin-top:2px; }
.ref-right { display:flex; align-items:center; gap:10px; }
.status-badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; }
.status-badge.sent { background:#eff6ff; color:#1d4ed8; }
.status-badge.viewed { background:#fef9c3; color:#854d0e; }
.status-badge.accepted { background:#f0fff4; color:#166534; }
.chevron { font-size:12px; color:#aaa; transition:transform 0.2s; }
.chevron.open { transform:rotate(180deg); }

.ref-body { display:none; border-top:1px solid var(--gray-light); }
.ref-body.open { display:block; }
.ref-body-inner { padding:20px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

.ref-section h4 { font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin-bottom:10px; }
.ref-field { margin-bottom:7px; font-size:13px; }
.ref-field .lbl { color:#aaa; font-size:11px; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:1px; }
.ref-field .val { color:var(--black); font-weight:500; }

.ref-footer { padding:14px 20px; border-top:1px solid var(--gray-light); background:#fafafa; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn-accept { padding:8px 20px; background:#166534; color:white; border:none; border-radius:4px; font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; cursor:pointer; }
.btn-accept:hover { background:#15803d; }
.doc-btn { padding:7px 14px; background:var(--black); color:white; border:none; border-radius:4px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.doc-btn:hover { background:#333; }
.sig-preview { margin-left:auto; }
.sig-preview img { height:36px; border:1px solid var(--gray-light); border-radius:3px; background:white; }

.empty-state { text-align:center; padding:60px; color:#aaa; background:white; border-radius:8px; border:1px solid var(--gray-light); }
.empty-icon { font-size:48px; margin-bottom:12px; }
footer { background:var(--black); color:#666; text-align:center; padding:16px; font-size:12px; }

@media(max-width:700px) { .ref-body-inner { grid-template-columns:1fr; } .stats-row { grid-template-columns:1fr; } }

.notes-panel { background:#f9f9f9; border-top:1px solid var(--gray-light); padding:16px 20px; }
.notes-panel h4 { font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--black); margin-bottom:10px; }
.notes-history { margin-bottom:10px; max-height:150px; overflow-y:auto; }
.note-item { background:white; border:1px solid var(--gray-light); border-radius:6px; padding:10px 14px; margin-bottom:6px; font-size:13px; }
.note-item .note-date { font-size:11px; color:#aaa; float:right; }
.note-input { width:100%; padding:10px 12px; border:1px solid var(--gray-light); border-radius:6px; font-size:13px; font-family:'Barlow',sans-serif; resize:vertical; min-height:70px; outline:none; }
.note-input:focus { border-color:var(--red); }
.btn-send-note { margin-top:8px; padding:8px 20px; background:var(--red); color:white; border:none; border-radius:4px; font-family:'Oswald',sans-serif; font-size:13px; font-weight:700; cursor:pointer; }
.btn-send-note:hover { background:#0A3D8F; }

.pw-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:99999; align-items:center; justify-content:center; }
.pw-modal-overlay.active { display:flex; }
.pw-modal { background:white; border-radius:10px; padding:36px 32px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.pw-modal h2 { font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; margin-bottom:6px; }
.pw-modal p { font-size:14px; color:#555; margin-bottom:24px; line-height:1.5; }
.pw-modal label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#333; margin-bottom:5px; }
.pw-modal input { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:6px; font-size:14px; margin-bottom:16px; outline:none; font-family:'Barlow',sans-serif; box-sizing:border-box; }
.pw-modal input:focus { border-color:var(--red); }
.pw-modal .pw-btn { width:100%; padding:13px; background:var(--red); color:white; border:none; border-radius:6px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; cursor:pointer; letter-spacing:.05em; }
.pw-modal .pw-btn:hover { background:#0A3D8F; }
.pw-modal .pw-err { color:#c00; font-size:13px; margin-bottom:12px; display:none; }

/* z-index must beat #ihca-bell (99999). At an equal value the bell wins, because it is
   injected at runtime AFTER this overlay's markup and DOM order breaks the tie. */
.chiro-login-overlay { display:none; position:fixed; inset:0; background:var(--gray-bg); z-index:100000; align-items:center; justify-content:center; }
.chiro-login-overlay.active { display:flex; }
.chiro-login-box { background:white; border-radius:10px; padding:36px 32px; max-width:420px; width:90%; box-shadow:0 20px 60px rgba(0,0,0,0.15); }
.chiro-login-box h2 { font-family:'Oswald',sans-serif; font-size:22px; font-weight:700; margin-bottom:4px; }
.chiro-login-box p { font-size:13px; color:#888; margin-bottom:24px; }
.chiro-login-box label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#333; margin-bottom:5px; }
.chiro-login-box input { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:6px; font-size:14px; margin-bottom:16px; outline:none; box-sizing:border-box; }
.chiro-login-box input:focus { border-color:var(--red); }
.chiro-login-btn { width:100%; padding:13px; background:var(--red); color:white; border:none; border-radius:6px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:700; cursor:pointer; }
.chiro-login-btn:hover { background:#0A3D8F; }
.chiro-login-err { color:#c00; font-size:13px; margin-bottom:12px; display:none; }

.send-docs-section { margin-top:14px; padding-top:14px; border-top:1px solid #eee; }
.send-docs-section h4 { font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
.chiro-upload-zone { border:2px dashed #ddd; border-radius:6px; padding:12px 14px; text-align:center; cursor:pointer; font-size:13px; color:#777; transition:all .2s; margin-bottom:8px; }
.chiro-upload-zone:hover { border-color:var(--red); color:var(--red); }
.chiro-file-pill { display:inline-flex; align-items:center; gap:5px; background:#f5f5f5; border-radius:12px; padding:3px 10px; font-size:12px; margin:3px 3px 0 0; }
.chiro-file-pill .rm { color:#c00; cursor:pointer; font-weight:700; }
.btn-send-chiro { background:var(--red); color:white; border:none; padding:9px 18px; border-radius:5px; font-size:13px; font-weight:600; cursor:pointer; font-family:'Barlow',sans-serif; width:100%; margin-top:6px; }
.btn-send-chiro:disabled { background:#aaa; cursor:not-allowed; }
.sent-chiro-docs { margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
.sent-chiro-docs h4 { font-family:'Oswald',sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#555; margin-bottom:8px; }
.sent-doc-row { display:flex; align-items:center; gap:6px; font-size:13px; padding:4px 0; border-bottom:1px solid #f5f5f5; }
.sent-doc-row:last-child { border:none; }
.sent-doc-date { font-size:11px; color:#aaa; margin-left:auto; }


/* === IHCA readability boost (auto-added) === */
/* Bump body baseline from browser default (16px) so unspecified text reads better */
body { font-size: 16px; }

/* Small badges/labels: 11px -> 13px */
.badge,
.user-name,
.logo-line1 {
  font-size: 13px !important;
}

/* Nav buttons & secondary buttons: 13px -> 14px (still fits existing padding) */
.nav-btn,
.btn-small,
.btn-secondary,
.btn-ghost {
  font-size: 14px !important;
}

/* Practice/chiro info text */
.chiro-practice,
.chiro-meta,
.referral-meta,
.meta,
.muted,
.text-muted {
  font-size: 14px !important;
}

/* Form labels */
label, .form-label {
  font-size: 14px !important;
}

/* Form inputs - keep clickable, just slightly bigger text */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
  font-size: 15px !important;
}

/* Table cells */
td, th {
  font-size: 14px !important;
}

/* General paragraph and list text */
p, li {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* === end readability boost === */


/* === IHCA referral readability boost (auto-added) === */
/* Targets inline-styled text inside referral lists and modals. */
/* Uses !important since inline styles otherwise win. */

/* Bump small inline 11px -> 13px, 12px -> 13px, 13px -> 14px inside referral views */
#referrals-list [style*="font-size:11px"],
#referrals-list [style*="font-size: 11px"],
#referrals-list [style*="font-size:12px"],
#referrals-list [style*="font-size: 12px"],
.referral-list [style*="font-size:11px"],
.referral-list [style*="font-size: 11px"],
.referral-list [style*="font-size:12px"],
.referral-list [style*="font-size: 12px"],
.modal-box [style*="font-size:11px"],
.modal-box [style*="font-size: 11px"],
.modal-box [style*="font-size:12px"],
.modal-box [style*="font-size: 12px"],
.pw-modal [style*="font-size:11px"],
.pw-modal [style*="font-size: 11px"],
.pw-modal [style*="font-size:12px"],
.pw-modal [style*="font-size: 12px"] {
  font-size: 13px !important;
}

#referrals-list [style*="font-size:13px"],
#referrals-list [style*="font-size: 13px"],
.referral-list [style*="font-size:13px"],
.referral-list [style*="font-size: 13px"],
.modal-box [style*="font-size:13px"],
.modal-box [style*="font-size: 13px"],
.pw-modal [style*="font-size:13px"],
.pw-modal [style*="font-size: 13px"] {
  font-size: 14px !important;
}

/* Status badges inside referrals */
#referrals-list .status-badge,
.referral-list .status-badge,
.modal-box .status-badge {
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* Default text inside referrals containers when no explicit size */
#referrals-list,
.referral-list,
.modal-box,
.modal-box-body,
.pw-modal {
  font-size: 15px;
  line-height: 1.5;
}

/* Section headings inside referral details (Patient, Attorney, Chiropractor) */
#referrals-list h3,
#referrals-list h4,
.referral-list h3,
.referral-list h4,
.modal-box h2,
.modal-box h3,
.modal-box h4 {
  font-size: 16px !important;
  line-height: 1.3;
}

/* Modal close X — keep clickable */
.modal-x, .pw-modal .close, .modal-box-header .close {
  font-size: 22px !important;
}

/* Chiro selection cards detail text (Find Closest view) */
.chiro-detail {
  font-size: 13px !important;
}
.chiro-card-info { font-size: 15px; }
/* === end referral readability boost === */


/* === IHCA chiro expanded referral readability boost (auto-added) === */
/* Targets the class-based styling inside the .ref-body / .ref-body-inner
   expanded section that appears when a chiro clicks the down arrow.
   Does NOT touch buttons (.btn-accept, .btn-send-chiro, etc) - those keep
   their own explicit font-sizes. */

/* Section headers (PATIENT, ATTORNEY, CHIROPRACTOR, INSURANCE, etc.) */
.ref-section h4 {
  font-size: 14px !important;
  letter-spacing: .06em !important;
}

/* Each field row inside a section */
.ref-field {
  font-size: 14px !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
}

/* Field labels (the .lbl class used inside .ref-field) */
.ref-field .lbl {
  font-size: 13px !important;
}

/* Field values (the .val class) */
.ref-field .val {
  font-size: 14px !important;
}

/* Card meta (date · type) - shown in closed header */
.ref-meta {
  font-size: 14px !important;
}

/* Patient name header keeps its 17px accent — DO NOT change .ref-patient */

/* Footer container - keep buttons at their own explicit sizes */
.ref-footer {
  font-size: 14px !important;
}

/* Body padding - keep generous reading space */
.ref-body-inner {
  padding: 22px !important;
  gap: 22px !important;
}

/* Inline-styled small text inside ref-body (covers anything we missed) */
.ref-body [style*="font-size:11px"],
.ref-body [style*="font-size: 11px"],
.ref-body [style*="font-size:12px"],
.ref-body [style*="font-size: 12px"] {
  font-size: 13px !important;
}
.ref-body [style*="font-size:13px"],
.ref-body [style*="font-size: 13px"] {
  font-size: 14px !important;
}

/* Inline-styled small text in the closed header row */
#referral-list [style*="font-size:11px"],
#referral-list [style*="font-size: 11px"],
#referral-list [style*="font-size:12px"],
#referral-list [style*="font-size: 12px"] {
  font-size: 13px !important;
}

/* === end chiro expanded boost === */

        /* === Case Milestone Tracker === */
        .milestone-tracker {
          margin: 16px 0 4px 0;
          padding: 14px 16px;
          background: #fafafa;
          border: 1px solid #e3e3e3;
          border-radius: 6px;
        }
        /* Two children now: the "Case Progress" label and the .mt-toggle-all button, which
           starts hidden and is un-hidden by ihca_syncToggleAllLabel once rows exist -- so the
           button never flashes over "Loading milestones...". text-transform is scoped to the
           label span rather than the row, or the button would read "COLLAPSE ALL". */
        .milestone-tracker-header {
          display: flex;
          align-items: baseline;
          justify-content: space-between;
          gap: 12px;
          font-weight: 600;
          font-size: 13px;
          color: #1565c0;
          margin-bottom: 10px;
          letter-spacing: 0.5px;
        }
        .milestone-tracker-header > span { text-transform: uppercase; }
        .milestone-tracker-body { font-size: 13px; }
        .mt-loading { color: #999; font-style: italic; padding: 4px 0; }
        .mt-error { color: #0A78E0; font-size: 12px; padding: 4px 0; }
        /* Was display:flex with the children laid out directly. The row now has exactly two
           children -- .mt-head and .mt-body -- so the flex context moved DOWN to .mt-body,
           which reproduces these same properties for the controls that used to live here.
           Separation between rows is neutral and structural (gap + card edge + shadow), never
           colour: the left border is spent on status instead. See the accent block below. */
        .mt-row {
          display: block;
          padding: 12px 14px;
          margin-bottom: 18px;
          background: #fff;
          border: 1px solid #d8d8d8;
          border-left: 3px solid #d8d8d8;
          border-radius: 6px;
          box-shadow: 0 1px 3px rgba(16,27,51,0.07);
        }
        .mt-row:last-child { margin-bottom: 0; }
        .mt-row .mt-label {
          font-size: 14px;
          color: #0A78E0;
        }
        .mt-label {
          min-width: 60px;
          font-weight: 600;
          color: #222;
          padding-top: 6px;
        }
        .mt-status-group { display: flex; gap: 4px; flex-wrap: wrap; }
        .mt-status-btn {
          padding: 4px 10px;
          border-radius: 12px;
          font-size: 11px;
          font-weight: 600;
          border: 1px solid #ccc;
          cursor: pointer;
          background: #fff;
          color: #555;
          text-transform: uppercase;
          letter-spacing: 0.3px;
        }
        .mt-status-btn:hover { background: #f0f0f0; }
        .mt-status-btn.active.completed { background: #e6f4ea; color: #137333; border-color: #34a853; }
        .mt-status-btn.active.n_a { background: #1f1f1f; color: #fff; border-color: #1f1f1f; }
        .mt-status-btn.active.pending { background: #fff3e0; color: #b76f00; border-color: #f5a623; }
        .mt-detail-row {
          width: 100%;
          display: flex;
          gap: 8px;
          margin-top: 4px;
          flex-wrap: wrap;
        }
        .mt-detail-row.hidden { display: none; }
        .mt-detail-row input[type=date],
        .mt-detail-row input[type=text],
        .mt-detail-row textarea {
          padding: 6px 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 12px;
          font-family: inherit;
          background: #fff;
        }
        .mt-detail-row input[type=text] { flex: 1; min-width: 140px; }
        .mt-detail-row textarea { width: 100%; min-height: 32px; resize: vertical; }
        .mt-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
        .mt-save-btn {
          padding: 5px 14px;
          background: #0A78E0;
          color: #fff;
          border: none;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 600;
          cursor: pointer;
        }
        .mt-save-btn:disabled { background: #ccc; cursor: not-allowed; }
        .mt-save-btn:hover:not(:disabled) { background: #0A3D8F; }
        .mt-saved-meta { font-size: 11px; color: #777; }

        /* Phase 1.5: milestone file upload */
        .mt-upload-row {
          width: 100%;
          display: flex;
          gap: 8px;
          margin-top: 6px;
          align-items: center;
          flex-wrap: wrap;
          font-size: 12px;
        }
        .mt-upload-row.hidden { display: none; }
        .mt-region-select {
          padding: 4px 6px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 11px;
          font-family: inherit;
          background: #fff;
          color: #333;
          max-width: 120px;
        }
        .mt-upload-btn {
          padding: 5px 12px;
          background: #f5f5f5;
          color: #333;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 600;
          cursor: pointer;
        }
        .mt-upload-btn:hover:not(:disabled) { background: #e9e9e9; }
        .mt-upload-btn:disabled { background: #ccc; cursor: not-allowed; }
        .mt-uploaded-file {
          font-size: 12px;
          color: #137333;
          display: inline-flex;
          align-items: center;
          gap: 4px;
        }
        .mt-uploaded-file::before {
          content: '\1F4CE'; /* paperclip */
        }
        .mt-upload-status { font-size: 11px; color: #666; }
        .mt-upload-status.err { color: #0A78E0; }
        /* Delete control on an uploaded document. Deliberately quieter than a button:
           #dc2626 is the same red the rebrand block at the end of this file standardised
           for error states, one step up in size from the row's 12px, and held at 75%
           opacity so it reads as available rather than as the row's primary action. */
        .mt-del-link {
          font-size: 14px;
          line-height: 1;
          color: #dc2626;
          text-decoration: none;
          opacity: 0.75;
          vertical-align: middle;
        }
        .mt-del-link:hover { color: #991b1b; opacity: 1; }

        /* === Milestone row: status accent + collapse (2026-08-27) ===
           THE LEFT BORDER ENCODES STATUS, NOT MODALITY. Modality identity is already carried
           by the label text and by fixed row order (IHCA_MILESTONE_ORDER), so five hues for
           five modalities bought no information and only fought each other. Three states stay
           separable under deuteranopia, and status is what this panel is actually scanned for.

           HUE IS NEVER THE ONLY CHANNEL, and that is deliberate, not decoration:
             1. the status chip TEXT (Pending / Completed / N/A) sits inside every row, and
             2. the border WEIGHT varies -- 5px pending, 3px completed, 1px n/a -- so the rows
                still rank correctly with colour removed entirely.
           Removing either one puts the whole signal back on hue. Do not "simplify" them away.

           THE VALUES ARE LIFTED FROM .mt-status-btn.active.* ABOVE, on purpose. The border and
           the chip sit in the same row saying the same thing; picking them independently is how
           they drift. If one changes, change the other in the same commit.

           N/A recedes by resolving to #d8d8d8 -- the SAME colour as the row's other three
           borders -- so the accent visually disappears into the card edge rather than becoming
           a fourth thing to read. That is why there is no separate grey here. */
        .mt-row.mt-st-pending   { border-left-width: 5px; border-left-color: #f5a623; }
        .mt-row.mt-st-completed { border-left-width: 3px; border-left-color: #34a853; }
        .mt-row.mt-st-n_a       { border-left-width: 1px; border-left-color: #d8d8d8; }
        /* No case_milestones row exists yet -- a data gap, not a state. Hairline, like n/a. */
        .mt-row.mt-st-none      { border-left-width: 1px; border-left-color: #d8d8d8; }

        /* Header is a real <button> so it is tabbable and speaks aria-expanded. Reset the UA
           button chrome rather than using a <div>: a div would need role+tabindex+keydown
           hand-rolled, and Enter/Space would still have to be re-implemented. */
        .mt-head {
          display: flex;
          align-items: baseline;
          gap: 8px;
          width: 100%;
          padding: 0;
          margin: 0;
          border: 0;
          background: none;
          font: inherit;
          color: inherit;
          text-align: left;
          cursor: pointer;
        }
        .mt-head:focus-visible {
          outline: 2px solid #029CF8;
          outline-offset: 3px;
          border-radius: 4px;
        }
        .mt-caret {
          flex: 0 0 auto;
          font-size: 10px;
          line-height: 1;
          color: #9aa3af;
          transform: rotate(90deg);
          transition: transform 0.15s ease;
        }
        .mt-row.mt-collapsed .mt-caret { transform: rotate(0deg); }
        /* Beats both `.mt-label` and `.mt-row .mt-label` above on source order at equal
           specificity -- those two style the label as a flex CHILD of the row, which it no
           longer is. Ink Navy, so the amber/green accent is the only colour doing work. */
        .mt-head .mt-label {
          flex: 0 0 auto;
          min-width: 60px;
          padding-top: 0;
          font-size: 14px;
          font-weight: 600;
          color: #101B33;
        }
        .mt-summary {
          flex: 1 1 auto;
          font-size: 12px;
          color: #6b7280;
          line-height: 1.4;
        }
        /* Inherits the flex context .mt-row used to provide, so .mt-status-group,
           .mt-detail-row and .mt-upload-row lay out exactly as before. */
        .mt-body {
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px solid #ececec;
        }
        /* CSS-ONLY COLLAPSE. Never remove the node instead. chiro-emc.js runs a
           MutationObserver on document.body {childList:true, subtree:true}; a class toggle is
           an ATTRIBUTE mutation and does not wake it, but adding/removing nodes on every
           caret click would re-run injectButtons on the whole list. */
        .mt-row.mt-collapsed .mt-body { display: none; }

        /* "Not initialized" placeholder: no milestone row in the database, so there is no
           caret, no .mt-head and no .mt-body. .mt-row is display:block now, so this needs its
           own one-line layout -- without it the label and the note stack. Matches the header's
           label treatment so the column of labels still lines up down the tracker. */
        .mt-row-empty { display: flex; align-items: baseline; gap: 8px; }
        .mt-row-empty .mt-label {
          flex: 0 0 auto;
          min-width: 60px;
          padding-top: 0;
          font-size: 14px;
          font-weight: 600;
          color: #101B33;
        }
        .mt-empty-note { font-size: 12px; color: #999; }

        .mt-toggle-all {
          border: 0;
          background: none;
          padding: 0;
          font: inherit;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.3px;
          text-transform: none;
          color: #0A78E0;
          cursor: pointer;
        }
        .mt-toggle-all:hover { text-decoration: underline; }

        /* Phase 2e (commit A): milestone pills on chiro collapsed cards */
        .ihca-mt-row-chiro {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
          margin-top: 8px;
          align-items: flex-end;
        }
        /* THIS PALETTE IS DUPLICATED IN lawyer-styles.css:345-387 (portal-lawyer-v2.html).
           No shared module exists between the two portals, so a change here is SILENTLY
           absent there. Change both or neither -- docs/open-followups.md entry 74.
           .pending is grey here on purpose even though the row accent above uses amber for
           pending: these pills also encode overdue-ness (.late), and .check-date amber must
           stay distinct from .pending. If the two ever unify, re-colour .check-date. */
        .ihca-mt-pill {
          display: inline-block;
          padding: 5px 12px;
          border-radius: 14px;
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.3px;
          border: 1px solid #ccc;
          background: #fff;
          color: #555;
          line-height: 1.4;
          cursor: default;
          user-select: none;
          text-transform: none;
        }
        .ihca-mt-pill.done { background: #e6f4ea; color: #137333; border-color: #34a853; }
        .ihca-mt-pill.pending { background: #f5f5f5; color: #666; border-color: #ccc; }
        .ihca-mt-pill.late { background: #fdecea; color: #c5221f; border-color: #ea4335; }
        .ihca-mt-pill.na { background: #1f1f1f; color: #fff; border-color: #1f1f1f; }
        /* Incident date is in the future, so overdue cannot be computed. Amber, NOT red: this is
           a data problem to check, not a milestone that is late. Deliberately distinct from both
           .late and .pending so it cannot be mistaken for either. */
        .ihca-mt-pill.check-date { background: #fff8e1; color: #8a6100; border-color: #f0b429; }
        .ihca-mt-pill-wrap {
          display: inline-flex;
          flex-direction: column-reverse;
          align-items: flex-start;
          gap: 4px;
        }
        .ihca-mt-pill-report-flag {
          font-size: 11px;
          font-weight: 600;
          color: #1565c0;
          letter-spacing: 0.3px;
          line-height: 1.2;
          background: #e3f2fd;
          border: 1px solid #90caf9;
          cursor: pointer;
          border-radius: 6px;
          padding: 4px 8px;
          white-space: nowrap;
        }
        .ihca-mt-pill-report-flag::before { content: '\1F4CE\00A0'; }


    /* IHCA BAA Acceptance Modal */
    .baa-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; }
    .baa-modal-backdrop.active { display:flex; }
    .baa-modal { background:#fff; border-radius:8px; max-width:720px; width:100%; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
    .baa-modal-header { background:#111; color:#fff; padding:18px 24px; }
    .baa-modal-header h2 { font-family:'Oswald',sans-serif; font-size:20px; margin:0; }
    .baa-modal-header p { font-size:13px; color:#ccc; margin:6px 0 0; }
    .baa-modal-body { padding:20px 24px; overflow-y:auto; flex:1; font-size:14px; line-height:1.5; color:#333; }
    .baa-modal-body h3 { font-family:'Oswald',sans-serif; font-size:15px; margin:14px 0 6px; color:#111; }
    .baa-modal-body ul { margin:6px 0 10px 20px; }
    .baa-modal-body li { margin-bottom:4px; }
    .baa-modal-body .baa-key { background:#eff6ff; border-left:3px solid #0A78E0; padding:8px 12px; margin:10px 0; font-size:13px; }
    .baa-modal-body a { color:#0A78E0; text-decoration:underline; }
    .baa-modal-footer { background:#f5f5f5; padding:16px 24px; border-top:1px solid #e0e0e0; }
    .baa-checkbox-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:13px; }
    .baa-checkbox-row input { margin-top:3px; flex-shrink:0; }
    .baa-name-row { margin-bottom:12px; }
    .baa-name-row label { display:block; font-size:12px; color:#555; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
    .baa-name-row input { width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:4px; font-size:14px; font-family:inherit; }
    .baa-modal-actions { display:flex; gap:10px; justify-content:flex-end; }
    .baa-btn { padding:10px 20px; border:none; border-radius:4px; font-weight:600; cursor:pointer; font-size:14px; }
    .baa-btn-primary { background:#0A78E0; color:#fff; }
    .baa-btn-primary:disabled { background:#ccc; cursor:not-allowed; }
    .baa-btn-secondary { background:#fff; color:#555; border:1px solid #ccc; }
    .baa-msg { font-size:13px; padding:8px 12px; border-radius:4px; margin-bottom:10px; }
    .baa-msg-error { background:#eff6ff; color:#0A78E0; border:1px solid #fcc; }
    .baa-msg-success { background:#f0fdf4; color:#16a34a; border:1px solid #bbf7d0; }

/* Proper logo treatment in chiro login card */
.chiro-logo-stack {
  text-align: center;
  margin-bottom: 14px;
}
.chiro-logo-box {
  display: inline-block;
  background: var(--red);
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: left;
}
.chiro-logo-line { font-size: 13px; }
.chiro-logo-line2 { font-size: 17px; letter-spacing: 0.04em; }

/* TASK 3: Cleaner filter layout */
.chiro-filters-wrap {
  background: white;
  border: 1px solid var(--gray-light);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.chiro-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chiro-filter-row + .chiro-filter-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-light); }
.chiro-filter-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
  flex-shrink: 0;
}
.chiro-filter-row select {
  padding: 7px 12px;
  border: 1px solid #ddd;
  border-radius: 18px;
  font-size: 13px;
  cursor: pointer;
  background: white;
}
.chiro-filter-row .filter-btn {
  padding: 7px 14px;
  border: 1px solid var(--gray-light);
  border-radius: 18px;
  font-size: 13px;
  cursor: pointer;
  background: white;
  color: var(--gray);
  transition: all 0.15s;
  font-family: inherit;
}
.chiro-filter-row .filter-btn:hover { border-color: var(--red); color: var(--red); }
.chiro-filter-row .filter-btn.active {
  background: var(--red);
  color: white;
  border-color: var(--red);
  font-weight: 600;
}
.chiro-filter-row .filter-btn .filter-count {
  display: inline-block;
  background: rgba(0,0,0,0.08);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  margin-left: 5px;
  font-weight: 600;
}
.chiro-filter-row .filter-btn.active .filter-count { background: rgba(255,255,255,0.25); }


/* ===== block 2 ===== */

/* Chiro login page — professional marketing layout */
.chiro-login-overlay.active {
  display: block !important;
  /* NO background HERE, DELIBERATELY. The shared blue wash is applied to this selector by
     background.css, which is linked after this file and therefore wins at equal specificity.
     Do not add a background back: an opaque one hides the wash, and a transparent one lets the
     chiro dashboard render behind the login screen, because .main is never hidden when logged
     out. This used to paint its own grey gradient, which is why the login screen did not match
     the other portals. */
  overflow-y: auto;
  padding: 0;
}
.chiro-marketing-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 880px) {
  .chiro-marketing-wrap { grid-template-columns: 1fr; padding: 24px 16px 40px; gap: 30px; }
  /* order:-1 PUTS THE LOGIN CARD FIRST ON MOBILE. The wrap is a two-child grid -- .chiro-hero
     then .chiro-login-card -- so collapsing to one column stacked them in DOM order and buried
     the sign-in form under the full marketing column. This page is for EXISTING providers
     signing in; /join does the recruiting.

     Deliberately confined to this media block: above 880px nothing here applies, so the desktop
     two-column layout and the card's position:sticky are untouched by construction.

     KNOWN AND ACCEPTED: `order` moves the visual box, not the tab or screen-reader sequence, so
     keyboard users on mobile still reach the marketing first. Fixing that means reordering the
     DOM and restoring the desktop columns with explicit grid-column rules -- which would touch
     desktop, and desktop was required to stay identical. */
  .chiro-login-card { position: static !important; order: -1; }
}
.chiro-hero h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.12;
  color: #111;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.chiro-hero h1 .accent { color: var(--red); }
.chiro-hero .subhead {
  font-size: 16.5px;
  color: #444;
  line-height: 1.55;
  margin: 0 0 28px;
}
.chiro-pill {
  display: inline-block;
  background: #eff6ff;
  color: var(--red);
  font-family: 'Oswald', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 30px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.chiro-benefits {
  display: grid;
  gap: 14px;
  margin: 28px 0;
}
.chiro-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.chiro-benefit-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: #eff6ff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.chiro-benefit-text { flex: 1; min-width: 0; }
.chiro-benefit-title {
  font-family: 'Oswald', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #111;
  margin: 0 0 3px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.chiro-benefit-body {
  font-size: 13.5px;
  color: #555;
  line-height: 1.5;
}
.chiro-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid #e5e7eb;
  font-size: 12.5px;
  color: #666;
}
.chiro-trust-item { display: flex; align-items: center; gap: 6px; }
.chiro-trust-check { color: var(--red); font-weight: 800; }
.chiro-login-card {
  background: white;
  border-radius: 14px;
  padding: 32px 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  position: sticky;
  top: 24px;
}
.chiro-login-card h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  margin: 0 0 6px;
  color: #111;
  text-align: left;
}
.chiro-login-card .sub {
  font-size: 13.5px;
  color: #666;
  margin: 0 0 22px;
}
.chiro-login-card label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #444;
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chiro-login-card input[type="email"],
.chiro-login-card input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-size: 14.5px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chiro-login-card input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
.chiro-login-card .chiro-login-btn {
  width: 100%;
  background: var(--red);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 22px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s, transform 0.05s;
}
.chiro-login-card .chiro-login-btn:hover { background: #0A3D8F; }
.chiro-login-card .chiro-login-btn:active { transform: translateY(1px); }
.chiro-login-err {
  background: #fee2e2;
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.chiro-login-err.show, .chiro-login-err:not(:empty) { display: block; }
.chiro-signup-cta {
  margin-top: 24px;
  padding: 18px 16px;
  background: #fafafa;
  border-radius: 8px;
  text-align: center;
  font-size: 13.5px;
  color: #555;
}
.chiro-signup-cta strong {
  color: #111;
  display: block;
  margin-bottom: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
}
.chiro-signup-cta-btn {
  display: inline-block;
  margin-top: 10px;
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--red);
  padding: 9px 20px;
  border-radius: 7px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  background: white;
}
.chiro-signup-cta-btn:hover { background: var(--red); color: white; }
.chiro-logo-row {
  text-align: center;
  margin-bottom: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: #111;
}
.chiro-logo-row .accent { color: var(--red); }


/* ===== block 3 ===== */
.btn-rr{display:inline-block;padding:9px 14px;background:#0f766e;color:#fff;border:0;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;margin:12px 0 4px}.btn-rr:hover{background:#0c5c55}.rr-back{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;overflow-y:auto;padding:30px 16px;align-items:flex-start;justify-content:center}.rr-back.on{display:flex}.rr-mod{background:#fff;border-radius:10px;width:100%;max-width:680px;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.2)}.rr-mod h2{margin:0 0 4px;font-size:20px}.rr-mod h3{margin:18px 0 6px;font-size:13px;color:#444;text-transform:uppercase;letter-spacing:.05em}.rr-mod label{display:block;font-size:13px;color:#555;margin:6px 0 4px}.rr-mod input[type=text],.rr-mod input[type=email],.rr-mod input[type=date],.rr-mod textarea{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit;margin-bottom:6px}.rr-mod textarea{min-height:60px;resize:vertical}.rr-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}.rr-grid label{display:flex;align-items:center;gap:6px;font-size:13px;color:#333;cursor:pointer;font-weight:400;margin:0}.rr-grid input{width:auto;margin:0}.rr-row{display:flex;gap:12px}.rr-row>div{flex:1}.rr-auth{background:#fafafa;border-left:3px solid #1565c0;padding:10px 12px;font-size:12px;color:#333;line-height:1.5;margin:8px 0}.rr-sig{display:block;width:100%;height:140px;background:#fff;border:1px dashed #999;border-radius:6px;cursor:crosshair;touch-action:none}.rr-act{display:flex;gap:8px;margin-top:18px;justify-content:flex-end}.rr-act button{padding:10px 18px;border-radius:6px;border:0;font-weight:600;cursor:pointer;font-size:14px}.rr-cn{background:#eee;color:#333}.rr-sb{background:#0f766e;color:#fff}.rr-sb:disabled{background:#999;cursor:not-allowed}.rr-msg{margin-top:10px;font-size:13px;min-height:18px}.rr-msg.err{color:#c00}.rr-msg.ok{color:#0a7a3a}

/* ===== block 4 ===== */

    #ceModal *{box-sizing:border-box;}
    #ceModal .ce-card{background:#faf6f0;max-width:560px;width:100%;border-radius:12px;padding:24px;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;box-shadow:0 12px 48px rgba(0,0,0,.35);}
    #ceModal h2{margin:0;font-size:20px;color:#1a1a1a;}
    #ceModal label{display:flex;flex-direction:column;font-size:12px;font-weight:600;color:#444;gap:4px;}
    #ceModal input{padding:8px 10px;border:1px solid #d0c9bd;border-radius:6px;font-size:14px;background:#fff;color:#1a1a1a;}
    #ceModal .ce-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    #ceModal .ce-btn{cursor:pointer;border:none;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:600;}
    #ceModal .ce-full{grid-column:1 / -1;}
  

/* CaseGoGo rebrand: keep error states red */
.mt-error,.mt-upload-status.err,.baa-msg-error{color:#dc2626}
.baa-msg-error{background:#fff5f5}