/* Preserved April 28 Brooks Ops chart design. Local layout overrides are in ops.css. */

  :root {
    --bg: #0f172a;
    --bg-elev: #131c2e;
    --surface: #1a2336;
    --surface-2: #1f293f;
    --line: #2a3550;
    --line-soft: #232d44;
    --text: #f1f5f9;
    --text-2: #b6c0d4;
    --text-3: #7d889f;
    --text-4: #5a6580;
    --accent: #6aa6f8;
    --accent-soft: #2b3d5e;
    --warn: #e3b463;
    --good: #6dc28b;
    --danger: #e88080;
    --aria: #b599f0;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
  }

  /* ------- shell ------- */
  .app {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 100vh;
  }

  /* rail */
  .rail {
    background: var(--bg-elev);
    border-right: 1px solid var(--line-soft);
    padding: 22px 14px;
    position: sticky; top: 0; height: 100vh;
  }
  .brand {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 8px 22px;
  }
  .brand-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(140deg, #3b82f6, #6aa6f8);
    color: white; font-weight: 600; font-size: 15px;
    display: grid; place-items: center;
  }
  .brand-name { font-size: 15px; font-weight: 600; letter-spacing: .1px; }
  .brand-sub  { font-size: 12px; color: var(--text-3); margin-top: 1px; }

  .rail-section { font-size: 11px; color: var(--text-4); letter-spacing: .12em; text-transform: uppercase; padding: 14px 10px 8px; }
  .rail-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px; border-radius: 10px;
    color: var(--text-2); font-size: 14px; font-weight: 500;
    text-decoration: none;
    margin-bottom: 2px;
  }
  .rail-item:hover { background: var(--surface); color: var(--text); }
  .rail-item .count { margin-left: auto; color: var(--text-3); font-size: 12px; }
  .rail-item.aria { color: var(--aria); }
  .rail-item.aria:hover { background: rgba(181,153,240,.08); }

  /* main */
  .main {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    min-width: 0;
  }

  /* sticky chrome wrapper — topbar + patient header + tabs travel together */
  .chrome {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
  }

  /* topbar */
  .topbar {
    height: 56px;
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center;
    padding: 0 24px;
    gap: 16px;
    background: var(--bg);
  }
  .topbar .back {
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px;
  }
  .topbar .back:hover { background: var(--surface); color: var(--text); }
  .topbar .crumbs { color: var(--text-3); font-size: 13px; }
  .topbar .crumbs strong { color: var(--text-2); font-weight: 500; }
  .topbar .search {
    margin-left: auto;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 8px 12px;
    width: 360px;
    color: var(--text-2);
    font-size: 13px;
    display: flex; align-items: center; gap: 8px;
  }
  .topbar .search .kbd { margin-left: auto; color: var(--text-4); font-size: 12px; }

  /* patient header — one row, hard rule below */
  .patient-header {
    padding: 28px 32px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
  }
  .avatar {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(140deg, #3b4a6c, #4f5d80);
    display: grid; place-items: center;
    font-size: 22px; font-weight: 600;
    color: var(--text);
    letter-spacing: .5px;
  }
  .patient-id .name {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.15;
  }
  .patient-id .pronoun {
    color: var(--text-3); font-size: 13px; font-weight: 500;
    margin-left: 10px; vertical-align: middle;
  }
  .meta-row {
    display: flex;
    gap: 36px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .meta-cell { display: flex; flex-direction: column; gap: 2px; min-width: max-content; }
  .meta-lbl  { font-size: 11px; color: var(--text-4); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
  .meta-val  { font-size: 14px; color: var(--text-2); font-weight: 500; white-space: nowrap; }
  .meta-val.nkda { color: var(--good); }

  .header-actions { display: flex; gap: 8px; align-items: center; }
  @media (max-width: 1500px) {
    .patient-header {
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 18px 24px;
    }
    .header-actions {
      grid-column: 1 / -1;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .meta-row { gap: 24px; }
  }
  .btn {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
  }
  .btn:hover { background: var(--surface-2); color: var(--text); }
  .btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #0b1322;
    font-weight: 600;
  }
  .btn.primary:hover { background: #7eb4fa; }
  .btn .kbd { color: rgba(11,19,34,.6); font-size: 12px; margin-left: 6px; font-weight: 500; }
  .btn.ghost .kbd { color: var(--text-4); }
  .btn-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-2);
    display: grid; place-items: center;
    cursor: pointer;
  }
  .btn-icon:hover { background: var(--surface-2); color: var(--text); }

  /* tabs (folder-style) */
  .tabs-wrap {
    background: var(--bg);
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
  }
  .tabs {
    display: flex; gap: 2px;
    align-items: end;
  }
  .tab {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    padding: 14px 18px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: flex; align-items: center; gap: 8px;
  }
  .tab:hover { color: var(--text-2); }
  .tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
  .tab .pill {
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
  }

  /* tab body */
  .tab-body {
    padding: 28px 32px 80px;
    background: var(--bg);
  }
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }

  /* visit context strip */
  .visit-strip {
    display: flex; align-items: center; gap: 22px;
    background: linear-gradient(90deg, rgba(106,166,248,.08), rgba(106,166,248,0));
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 16px 22px;
    margin-bottom: 22px;
  }
  .visit-strip .time {
    font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.4px;
  }
  .visit-strip .sep { width: 1px; height: 28px; background: var(--line); }
  .visit-strip .vs-cell { display: flex; flex-direction: column; gap: 1px; }
  .visit-strip .vs-lbl { font-size: 11px; color: var(--text-4); letter-spacing: .1em; text-transform: uppercase; }
  .visit-strip .vs-val { font-size: 14px; color: var(--text-2); }
  .visit-strip .vs-source { color: var(--text-4); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10px; }
  .visit-strip .vs-cc { flex: 1 1 auto; min-width: 240px; }
  .visit-strip .vs-cc .vs-val { color: var(--text); font-weight: 600; }
  .visit-strip .status {
    margin-left: auto;
    background: rgba(227,180,99,.12);
    color: var(--warn);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    display: flex; align-items: center; gap: 8px;
  }
  .visit-strip .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }

  /* card */
  .card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    margin-bottom: 18px;
  }
  .card-head {
    display: flex; align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-soft);
    gap: 14px;
  }
  .card-head h3 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.1px;
  }
  .card-head .sub { color: var(--text-3); font-size: 13px; }
  .card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
  .card-body { padding: 22px; }

  .toggle {
    display: inline-flex;
    background: var(--bg-elev);
    border: 1px solid var(--line-soft);
    border-radius: 9px;
    padding: 3px;
  }
  .toggle button {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-family: inherit;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 500;
  }
  .toggle button.on {
    background: var(--surface-2);
    color: var(--text);
  }

  /* encounter sheet (top-page mirror) */
  .es-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 18px;
  }
  .es-meta .mc-lbl { font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: .1em; }
  .es-meta .mc-val { font-size: 14px; color: var(--text); margin-top: 3px; }

  .es-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }
  .es-section { }
  .es-h {
    font-size: 12px; font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: .12em;
    padding: 4px 0 10px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 10px;
  }
  .code-row {
    display: flex; align-items: center;
    padding: 8px 0;
    cursor: pointer;
    border-radius: 6px;
  }
  .code-row:hover { background: rgba(255,255,255,.02); }
  .code-row .checkbox {
    width: 18px; height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--line);
    margin-right: 10px;
    flex: 0 0 18px;
  }
  .code-row.on .checkbox {
    background: var(--accent);
    border-color: var(--accent);
    position: relative;
  }
  .code-row.on .checkbox::after {
    content: ''; position: absolute; left: 5px; top: 2px;
    width: 5px; height: 9px;
    border: solid #0b1322; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .code-row .label { font-size: 14px; color: var(--text-2); flex: 1; }
  .code-row.on .label { color: var(--text); font-weight: 500; }
  .code-row .code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--text-4);
  }

  /* charges footer */
  .es-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: end;
  }
  .es-totals { text-align: right; }
  .es-totals .row { display: flex; justify-content: space-between; gap: 28px; padding: 5px 0; font-size: 14px; color: var(--text-2); }
  .es-totals .row.total { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 10px; font-weight: 600; color: var(--text); font-size: 16px; }
  .es-notes label { font-size: 11px; color: var(--text-4); text-transform: uppercase; letter-spacing: .1em; }
  .es-notes textarea {
    margin-top: 8px;
    width: 100%; min-height: 60px;
    background: var(--bg-elev); border: 1px solid var(--line-soft);
    border-radius: 10px; padding: 10px 12px;
    color: var(--text); font-family: inherit; font-size: 14px; resize: vertical;
  }

  /* ===== paper-form recreation of the superbill (dark, structural) ===== */
  .paper-sheet {
    background: var(--surface);
    color: var(--text);
    margin: -22px;
    border-radius: 0 0 14px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    line-height: 1.35;
    border-top: 2px solid var(--accent);
    overflow: hidden;
  }
  .paper-sheet .clinic {
    text-align: center;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-2);
  }
  .paper-sheet .clinic .clinic-name { font-weight: 700; font-size: 13.5px; color: var(--text); letter-spacing: .01em; }
  .paper-sheet .clinic .clinic-line { color: var(--text-3); }
  .paper-sheet .meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    row-gap: 4px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
  }
  .paper-sheet .meta-line {
    display: flex; align-items: end;
    border-bottom: 1px solid var(--line-soft);
    padding: 2px 0;
    gap: 6px;
  }
  .paper-sheet .meta-line .lbl { color: var(--text-4); font-weight: 600; min-width: 64px; font-size: 11px; }
  .paper-sheet .meta-line .lbl-inline { color: var(--text-4); font-weight: 600; margin-left: 14px; font-size: 11px; }
  .paper-sheet .meta-line .v { color: var(--text); flex: 1; }
  .paper-sheet .cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--line);
  }
  .paper-sheet .col { border-right: 1px solid var(--line-soft); }
  .paper-sheet .col:last-child { border-right: none; }
  .paper-sheet .col-head {
    background: var(--bg-elev);
    color: var(--text);
    font-weight: 700;
    font-style: italic;
    font-size: 12.5px;
    padding: 6px 10px;
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line-soft);
  }
  .paper-sheet .col-head em { font-style: italic; font-weight: 800; color: var(--accent); }
  .paper-sheet .col-head .fee {
    text-align: right;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--text-3);
  }
  .paper-sheet .sub-head {
    background: var(--surface-2);
    color: var(--text-2);
    font-weight: 700;
    padding: 5px 10px;
    font-size: 11.5px;
    font-style: italic;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    text-decoration: underline;
    text-decoration-color: var(--line);
  }
  .paper-sheet .dx-head {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    padding: 5px 10px;
    font-size: 11.5px;
    font-style: italic;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-top: 1px solid var(--accent-soft);
  }
  .paper-sheet .item {
    display: grid;
    grid-template-columns: 14px 1fr 50px;
    align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    color: var(--text-2);
    gap: 6px;
  }
  .paper-sheet .item:hover { background: rgba(255,255,255,.025); }
  .paper-sheet .item .pcheckbox {
    width: 12px; height: 12px;
    border: 1.4px solid var(--text-4);
    background: transparent;
    position: relative;
    border-radius: 3px;
  }
  .paper-sheet .item.on .pcheckbox { background: var(--accent); border-color: var(--accent); }
  .paper-sheet .item.on .pcheckbox::after {
    content: '';
    position: absolute; left: 3px; top: 0;
    width: 3px; height: 7px;
    border: solid #0b1322; border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .paper-sheet .item .plabel { font-size: 11.5px; }
  .paper-sheet .item.on .plabel { font-weight: 600; color: var(--text); }
  .paper-sheet .item .pcode {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10.5px;
    color: var(--text-4);
    text-align: right;
  }
  /* drop the dangling border-bottom on each column's last item so unequal
     column heights don't leave floating horizontal lines */
  .paper-sheet .col > .item:last-child { border-bottom: none; }
  .paper-sheet .footer {
    /* explicit overrides — global .footer rule sets display:flex / height:36px / padding:0 24px which would clobber this */
    display: block;
    height: auto;
    border-top: none;
    align-items: stretch;
    gap: 0;
    font-size: 11.5px;
    padding: 16px 20px 18px;
    background: var(--surface);
    color: var(--text);
  }
  .paper-sheet .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 32px;
    font-size: 11.5px;
  }
  .paper-sheet .footer-line {
    display: flex; align-items: end;
    border-bottom: 1px solid var(--line-soft);
    padding: 4px 0;
    gap: 6px;
    min-height: 28px;
  }
  .paper-sheet .footer-line label {
    color: var(--text-4); font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    min-width: 110px;
  }
  .paper-sheet .footer-line .v { color: var(--text); flex: 1; font-size: 12px; }
  .paper-sheet .pay-pills { display: flex; gap: 6px; align-items: center; flex: 1; }
  .paper-sheet .pay-pills button {
    background: transparent;
    border: 1.4px solid var(--line);
    padding: 4px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text-3);
  }
  .paper-sheet .pay-pills button.on { background: var(--accent); color: #0b1322; border-color: var(--accent); }
  .paper-sheet .totals {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
  }
  .paper-sheet .signature-block {
    margin-top: 22px;
    border-bottom: 1px solid var(--line);
    height: 38px;
    display: flex; align-items: end;
    color: var(--text-4);
    font-size: 10.5px;
    font-style: italic;
  }
  .paper-sheet .signature-label {
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--text-2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .paper-sheet .totals-table { font-size: 11.5px; color: var(--text-2); }
  .paper-sheet .totals-table .row {
    display: flex; justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid var(--line-soft);
    font-feature-settings: 'tnum';
  }
  .paper-sheet .totals-table .row.final {
    font-weight: 700; border-bottom: 1px solid var(--line);
    padding-top: 7px; margin-top: 4px;
    font-size: 13px;
    color: var(--text);
  }

  /* ===== "yellow page" indicator on provider-note cards (dark unified) ===== */
  .yellow-sheet {
    border-left: 3px solid #c9bd6f;
  }

  /* ===== Yellow Sheets pane — section headers + expandable prior visits ===== */
  .ys-section {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .12em;
  }
  .ys-section-sub {
    margin: 0 0 16px;
    color: var(--text-3);
    font-size: 13px;
  }
  .prior-visit {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-left: 3px solid #c9bd6f;
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .prior-head {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 140px 110px 1fr 220px 80px 24px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    color: var(--text-2);
    font-family: inherit;
    text-align: left;
  }
  .prior-head:hover { background: rgba(255,255,255,.025); color: var(--text); }
  .prior-head .pv-date { color: var(--text); font-size: 14px; font-weight: 500; }
  .prior-head .pv-type { color: var(--text-2); font-size: 13px; }
  .prior-head .pv-reason { color: var(--text-2); font-size: 13px; }
  .prior-head .pv-codes { color: var(--text-3); font-family: ui-monospace, monospace; font-size: 12px; }
  .prior-head .pv-total { color: var(--text); font-size: 14px; font-weight: 500; text-align: right; font-feature-settings: 'tnum'; }
  .prior-head .pv-arrow {
    color: var(--text-3);
    font-size: 12px;
    transition: transform .15s ease;
    text-align: center;
  }
  .prior-head[aria-expanded="true"] .pv-arrow { transform: rotate(90deg); color: var(--accent); }
  .prior-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--line-soft);
  }
  .prior-body .card { margin-top: 18px; }

  /* yellow sheet */
  .ys-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .field {
    display: grid; grid-template-columns: 140px 1fr; align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .field:last-child { border-bottom: none; }
  .allergies-row { display: flex; align-items: center; gap: 14px; }
  .allergies-row .field-lbl { flex: 0 0 auto; }
  .allergies-line { display: flex; align-items: center; gap: 14px; flex: 1; flex-wrap: wrap; }
  .allergies-line .yn { display: inline-flex; }
  .allergies-detail { color: var(--text-2); font-size: 14px; }
  .allergies-seasonal { display: none; align-items: center; gap: 8px; padding-left: 10px; border-left: 1px solid var(--line-soft); }
  .allergies-seasonal.show { display: inline-flex; }
  .seasonal-lbl { font-size: 12px; color: var(--text-4); text-transform: uppercase; letter-spacing: .08em; }
  .med-sync { margin-top: 18px; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px; }
  .med-sync-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .med-sync-lbl { font-size: 12px; color: var(--text-4); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
  .med-sync-link { font-size: 11px; color: var(--accent); text-decoration: none; }
  .med-sync-link:hover { text-decoration: underline; }
  .med-sync-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
  .med-sync-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: 13px; }
  .med-sync-list li:last-child { border-bottom: none; }
  .med-name { color: var(--text); }
  .med-dose { color: var(--text-3); font-size: 12px; }
  .med-tag { background: var(--surface); color: var(--text-4); font-size: 10px; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
  .med-sync-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
  .med-edit { background: transparent; border: 1px solid var(--line); color: var(--text-2); font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
  .med-edit:hover { border-color: var(--accent); color: var(--accent); }
  .med-sync-note { font-size: 11px; color: var(--text-4); }
  .field-lbl { font-size: 13px; color: var(--text-3); }
  .field-val { font-size: 14px; color: var(--text); }
  .field-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--line);
    color: var(--text);
    font-family: inherit; font-size: 14px;
    padding: 4px 2px;
    width: 100%;
  }
  .field-input:focus { outline: none; border-bottom-color: var(--accent); }

  /* ROS table — paper-form mirror */
  .ros {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-elev);
  }
  .ros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .ros-section { border-right: 1px solid var(--line-soft); }
  .ros-section:last-child { border-right: none; }
  .ros-section h4 {
    margin: 0;
    font-size: 11px; font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    padding: 9px 14px;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-bottom: 1px solid var(--line-soft);
  }
  .ros-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--text-2);
  }
  .ros-row:last-child { border-bottom: none; }
  .yn {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 2px;
    overflow: hidden;
  }
  .yn button {
    background: transparent; border: none;
    color: var(--text-3);
    font-family: inherit; font-size: 12px; font-weight: 500;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    min-width: 32px;
  }
  .yn button.on { background: var(--accent); color: #0b1322; }
  .yn button.on.no { background: #455473; color: var(--text); }

  /* PFSH and notes blocks */
  .pfsh-block { margin-top: 18px; }
  .pfsh-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
  .pfsh-title { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
  .pfsh-sub { font-size: 11px; color: var(--text-4); }
  .pfsh { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 8px; }
  .pfsh-card {
    background: var(--bg-elev);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 14px;
  }
  .pfsh-card .lbl { font-size: 12px; color: var(--text-4); text-transform: uppercase; letter-spacing: .1em; }
  .pfsh-card .val { font-size: 14px; color: var(--text); margin-top: 8px; }
  .pfsh-card .pills { display: flex; gap: 6px; margin-top: 8px; }
  .pill-toggle {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-3);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
  }
  .pill-toggle.on { background: var(--accent); color: #0b1322; border-color: var(--accent); }

  /* freeform with mic */
  .freeform { margin-top: 18px; }
  .freeform label {
    display: flex; align-items: center;
    font-size: 12px; color: var(--text-4);
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 8px;
  }
  .freeform .mic {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    display: grid; place-items: center;
    cursor: pointer;
    font-size: 13px;
  }
  .freeform .mic:hover { color: var(--accent); border-color: var(--accent); }
  .freeform textarea {
    width: 100%; min-height: 84px;
    background: var(--bg-elev); border: 1px solid var(--line-soft);
    border-radius: 10px; padding: 12px 14px;
    color: var(--text); font-family: inherit; font-size: 14px;
    line-height: 1.55;
  }
  .freeform textarea:focus { outline: none; border-color: var(--accent); }
  .freeform .draw-btn {
    margin-left: 8px;
    height: 28px; padding: 0 10px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .freeform .draw-btn:hover { color: var(--accent); border-color: var(--accent); }
  .freeform .draw-btn.on { color: var(--accent); border-color: var(--accent); background: rgba(106,166,248,0.08); }
  .draw-canvas-wrap { margin-top: 10px; background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px; }
  .draw-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .draw-hint { font-size: 11px; color: var(--text-4); }
  .draw-tools { display: flex; gap: 6px; }
  .draw-tool, .draw-clear { background: transparent; border: 1px solid var(--line); color: var(--text-3); font-size: 11px; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
  .draw-tool.on { color: var(--text); border-color: var(--accent); background: rgba(106,166,248,0.08); }
  .draw-clear:hover { color: var(--bad); border-color: var(--bad); }
  .draw-canvas { width: 100%; height: 320px; background: #0b1322; border: 1px dashed var(--line); border-radius: 8px; touch-action: none; cursor: crosshair; display: block; }

  /* assessment grid (yellow back) — three across to economize space */
  .assess {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .assess-card {
    background: var(--bg-elev);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    overflow: hidden;
  }
  .assess-card h4 {
    margin: 0; padding: 10px 14px;
    font-size: 11px; font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase; letter-spacing: .1em;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
  }

  /* exam findings (vulvoscopy + microscopy mini-grids) */
  .vc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 16px;
    margin-top: 12px;
  }
  .vc-item {
    display: flex; align-items: center;
    padding: 6px 0;
    color: var(--text-2);
    font-size: 13px;
    cursor: pointer;
  }
  .vc-item .checkbox {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--line);
    margin-right: 10px;
  }
  .vc-item.on .checkbox {
    background: var(--accent);
    border-color: var(--accent);
    position: relative;
  }
  .vc-item.on .checkbox::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #0b1322; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .vc-item.on { color: var(--text); }

  /* ys footer */
  .ys-foot {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
  }

  /* checklist (per-visit tasks) */
  .checklist {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 14px;
  }
  .check-pill {
    background: var(--bg-elev);
    border: 1px solid var(--line-soft);
    color: var(--text-2);
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    font-size: 13px;
    display: flex; align-items: center; gap: 8px;
  }
  .check-pill.done { color: var(--good); border-color: rgba(109,194,139,.3); }
  .check-pill.done .dot { background: var(--good); }
  .check-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); }

  /* ===== patient info pane ===== */
  .pi-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  }

  /* ===== medical history pane ===== */
  .mh-section {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin-bottom: 18px;
  }
  .mh-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; }
  .mh-card .h {
    padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: center; gap: 10px;
  }
  .mh-card .h h3 { margin: 0; font-size: 14px; font-weight: 600; }
  .mh-card .h .reviewed { margin-left: auto; font-size: 12px; color: var(--text-4); }
  .mh-card .body { padding: 16px 20px; }
  .yn-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0;
    font-size: 13px; color: var(--text-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .yn-row:last-child { border-bottom: none; }

  .table {
    width: 100%; border-collapse: collapse;
  }
  .table th, .table td {
    padding: 10px 0; font-size: 13px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
  }
  .table th { color: var(--text-4); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
  .table td { color: var(--text-2); }

  /* visits pane */
  .visit-row {
    display: grid;
    grid-template-columns: 100px 90px 1fr 1fr 110px 60px;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
    cursor: pointer;
  }
  .visit-row:hover { background: var(--surface-2); }
  .visit-row:last-child { border-bottom: none; }
  .visit-row .date { color: var(--text); font-size: 14px; font-weight: 500; }
  .visit-row .type { color: var(--text-2); font-size: 13px; }
  .visit-row .reason { color: var(--text-2); font-size: 13px; }
  .visit-row .codes { color: var(--text-3); font-family: ui-monospace, monospace; font-size: 12px; }
  .visit-row .total { color: var(--text); font-weight: 500; text-align: right; font-feature-settings: 'tnum'; }
  .visit-row .arrow { color: var(--text-4); text-align: right; }

  /* consents pane */
  .consent-row {
    display: grid;
    grid-template-columns: 1fr 140px 140px 100px;
    gap: 16px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    align-items: center;
  }
  .consent-row:last-child { border-bottom: none; }
  .consent-row .name { color: var(--text); font-size: 14px; font-weight: 500; }
  .consent-row .name .sub { color: var(--text-4); font-size: 12px; font-weight: 400; display: block; margin-top: 2px; }
  .consent-row .signed { color: var(--text-2); font-size: 13px; }
  .consent-row .status { font-size: 13px; }
  .consent-row .status.ok { color: var(--good); }
  .consent-row .status.due { color: var(--warn); }
  .consent-row a { color: var(--accent); text-decoration: none; font-size: 13px; }

  /* footer */
  .footer {
    height: 36px;
    background: var(--bg-elev);
    border-top: 1px solid var(--line-soft);
    display: flex; align-items: center;
    padding: 0 24px;
    color: var(--text-4); font-size: 12px;
    gap: 18px;
  }
  .footer .right { margin-left: auto; }