@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Archivo+Narrow:wght@600;700&display=swap');

  :root {
    --bg: #f4f3f0;
    --surface: #ffffff;
    --border: #e2e0db;
    --border-strong: #c8c4bc;
    --border-divider: #a8a59e;   /* medium-grey separator (bumped delta7 for better contrast against per-view field-group tints; was #d2cfc8) */
    --cv-field-group-bg: #E6F1FB; /* delta9: client-view field-group canvas tint, also used as the staff edit-mode tint to signal "client-domain data" */
    --sv-field-group-bg: #F5F4FE; /* delta9: staff-view field-group canvas tint */
    --text-primary: #1a1916;
    --text-secondary: #6b6760;
    --text-muted: #9e9b96;
    --text-given: #8a7e6e;
    --text-derived: #a8a09a;
    --green: #2d6a4f;
    --green-bg: #ebf5f0;
    --green-border: #b7dfcc;
    --yellow: #92650a;
    --yellow-bg: #fef9ec;
    --yellow-border: #f5d97a;
    --yellow-field: #fffbeb;
    --blue: #1e4a7a;
    --blue-bg: #eef4fb;
    --blue-border: #a8c8eb;
    --blue-field: #f0f6fd;
    --purple: #5a2d82;
    --orange: #c2410c;
    --grey-bg: #f8f7f5;
    --grey-text: #b0ada8;
    --dupe-bg: #f5f3ee;
    --dupe-border: #ddd9d0;
    --amc-bg: #eef6f0;
    --amc-border: #a8d4b8;
    --amc-text: #1a5c38;
    /* Empty-field bg tints (status_rule-driven, both views) */
    --tint-yellow: #fdf7e1;
    --tint-blue: #eef4fb;
    --tint-blue-grey: #eef0f4;
    --tint-orange: #fdf0e6;
    --tint-purple: #f3eaf8;
    --tint-grey: #f4f3f0;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'IBM Plex Sans', sans-serif; background: var(--bg); color: var(--text-primary); font-size: 12px; line-height: 1.4; height: 100vh; display: flex; flex-direction: column; overflow: hidden; user-select: none; }

  /* ── Topbar ────────────────────────────────────────────── */
  .topbar { background: var(--text-primary); color: #fff; padding: 6px 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .topbar-brand { font-family: 'Archivo Narrow', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #e8e4dc; }
  .topbar-sep { color: #555; font-size: 14px; }
  .topbar-actor { font-size: 11px; color: #888; }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .pipeline-label { font-size: 10px; color: #999; text-transform: uppercase; letter-spacing: 0.06em; }
  .pipeline-tag { background: #2563eb; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; }
  .client-badge { background: #1d4ed8; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 3px; }
  .view-toggle { background: #2a2a2a; color: #ddd; border: 1px solid #444; border-radius: 3px; padding: 2px 10px; font-size: 11px; font-weight: 500; cursor: pointer; font-family: 'IBM Plex Sans', sans-serif; }
  .view-toggle:hover { background: #3a3a3a; color: #fff; }

  /* ── Split pane ────────────────────────────────────────── */
  .split-pane { display: flex; flex: 1; overflow: hidden; }
  .left-pane { width: 280px; min-width: 180px; max-width: 480px; flex-shrink: 0; border-right: 2px solid var(--border-strong); background: var(--surface); display: flex; flex-direction: column; overflow: hidden; }
  .pane-divider { width: 5px; background: transparent; cursor: col-resize; flex-shrink: 0; transition: background 0.15s; }
  .pane-divider:hover, .pane-divider.dragging { background: #2563eb33; }
  .left-inner { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
  .lpane-section { display: flex; flex-direction: column; overflow: hidden; min-height: 40px; }
  .lpane-fieldstatus { flex-shrink: 0; border-top: 2px solid var(--border-strong); display: flex; flex-direction: column; }
  .lpane-header { padding: 5px 10px; background: var(--grey-bg); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); flex-shrink: 0; }
  .lpane-header-action { cursor: pointer; color: var(--text-muted); font-size: 12px; line-height: 1; padding: 0 2px; user-select: none; }
  .lpane-header-action:hover { color: var(--text-primary); }
  .lpane-section.snap, .lpane-fieldstatus.snap { transition: height 0.2s ease; }
  .lpane-scroll { overflow-y: auto; flex: 1; }
  .h-divider { height: 4px; background: var(--border); cursor: row-resize; flex-shrink: 0; transition: background 0.15s; }
  .h-divider:hover, .h-divider.dragging { background: #2563eb66; }

  .queue-section-label { padding: 3px 10px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: var(--grey-bg); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
  .queue-card { border-bottom: 1px solid var(--border); cursor: pointer; display: flex; transition: background 0.1s; }
  .queue-card:hover { background: #fafaf8; }
  .queue-card.selected { background: var(--blue-bg); }
  .queue-card-strip { width: 4px; flex-shrink: 0; }
  .queue-card-body { padding: 5px 8px; flex: 1; min-width: 0; }
  .qc-client { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qc-pipeline { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
  .qc-brief { font-size: 10px; color: var(--text-secondary); margin-top: 2px; background: #fef08a; padding: 1px 4px; border-radius: 2px; display: inline-block; }
  .qc-status { font-size: 9px; color: var(--text-muted); margin-top: 2px; font-family: 'IBM Plex Mono', monospace; }

  .timeline-item { display: flex; gap: 6px; padding: 4px 8px; font-size: 10px; border-bottom: 1px solid var(--border); }
  .timeline-item:last-child { border-bottom: none; }
  .timeline-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
  .timeline-action { color: var(--text-primary); font-weight: 500; }
  .timeline-meta { color: var(--text-muted); font-size: 9px; font-family: 'IBM Plex Mono', monospace; }

  .exception-item { padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 10px; }
  .exception-item:last-child { border-bottom: none; }
  .exception-date { font-size: 9px; color: var(--text-muted); font-family: 'IBM Plex Mono', monospace; }
  .exception-text { color: var(--text-secondary); margin-top: 1px; }

  .legend-row { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 10px; color: var(--text-secondary); }
  .legend-swatch { width: 14px; height: 7px; border-radius: 1px; flex-shrink: 0; }

  /* ── Profile pane (shared) ─────────────────────────────── */
  .profile-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 400px; }
  .client-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 5px 16px; display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
  .client-code { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; color: var(--text-muted); }
  .client-name { font-size: 15px; font-weight: 600; }

  .client-info-bar { background: var(--yellow-bg); border-bottom: 1px solid var(--yellow-border); padding: 5px 16px; display: flex; align-items: center; flex-shrink: 0; font-size: 11px; color: var(--yellow); gap: 4px; }
  .info-bar-text { /* no longer clickable — navigate via arrow buttons */ }
  .info-bar-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 9px; font-family: 'IBM Plex Sans', sans-serif; border: 1px solid var(--yellow-border); border-radius: 3px; background: var(--yellow-field); color: var(--yellow); cursor: pointer; user-select: none; padding: 0; line-height: 1; }
  .info-bar-nav-btn:first-of-type { margin-left: 4px; }
  .info-bar-nav-btn:hover:not(:disabled) { background: #fcf3c0; }
  .info-bar-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* Pipeline strip */
  .pipeline-strip { background: var(--surface); border-bottom: 1px solid var(--border); padding: 5px 16px; display: flex; align-items: center; flex-shrink: 0; overflow-x: auto; }
  .ps-node { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; }
  .ps-dot { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; font-family: 'IBM Plex Mono', monospace; }
  .ps-dot.complete { background: var(--green); color: #fff; }
  .ps-dot.active { background: #2563eb; color: #fff; box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
  .ps-dot.locked { background: var(--border); color: var(--text-muted); }
  .ps-label { font-size: 9px; color: var(--text-muted); text-align: center; white-space: nowrap; }
  .ps-label.active { color: #2563eb; font-weight: 600; }
  .ps-label.complete { color: var(--green); }
  .ps-connector { width: 22px; height: 2px; margin-bottom: 11px; }
  .ps-connector.complete { background: var(--green); }
  .ps-connector.active { background: linear-gradient(to right, var(--green), #2563eb); }
  .ps-connector.locked { background: var(--border); }

  /* App guide */
  .app-guide-panel { border-bottom: 1px solid var(--border); background: #1a1a1a; flex-shrink: 0; display: flex; flex-direction: column; min-height: 28px; }
  .app-guide-header { display: flex; align-items: center; padding: 3px 12px; background: #252525; border-bottom: 1px solid #333; flex-shrink: 0; gap: 8px; }
  .app-guide-title { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; color: #bbb; letter-spacing: 0.04em; }
  .app-guide-stage { font-size: 9px; color: #7dd3fc; background: #0c2340; padding: 1px 6px; border-radius: 2px; font-family: 'IBM Plex Mono', monospace; border: 1px solid #1e4a7a; }
  .app-guide-content { overflow-y: auto; flex: 1; padding: 5px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; line-height: 1.6; white-space: pre; color: #c8c4bc; }
  .app-guide-content .screen-head { color: #f0c060; font-weight: 500; }
  .app-guide-content .field-lbl { color: #a8d8a8; }
  .app-guide-content .field-val { color: #e8e4dc; }
  .app-guide-content .amc-note { color: #7cb3f5; }
  .app-guide-content .btn-ref { color: #98d498; }
  .app-guide-resize { height: 5px; background: #2a2a2a; cursor: row-resize; flex-shrink: 0; transition: background 0.15s; }
  .app-guide-resize:hover, .app-guide-resize.dragging { background: #2563eb66; }

  /* PGB stage delimiter highlight (lines starting with --- S<digit>: ...) */
  .app-guide-content .pgb-stage-delim { color: #f0c060; font-weight: 500; }

  /* AMC App Guide button — appears in field-group-label rows of pipeline-area sections (SV only) */
  .amc-app-guide-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; padding: 0 6px; height: 18px;
    margin: 0 6px 0 4px;
    background: var(--blue-bg); color: var(--blue);
    border: 1px solid var(--blue-border); border-radius: 3px;
    cursor: pointer; user-select: none; line-height: 1;
    font-family: 'IBM Plex Sans', sans-serif;
  }
  .amc-app-guide-btn:hover { background: var(--blue-field); }

  /* AMC App Guide popup — fixed-position bubble shown below the clicked button */
  .amc-app-guide-popup {
    position: fixed; max-width: 400px; max-height: 320px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--blue-border); border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 10px 12px; z-index: 1000;
  }
  .amc-app-guide-popup.hidden { display: none; }
  .amc-app-guide-popup-label {
    font-size: 9px; color: var(--blue); text-transform: uppercase;
    letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600;
  }
  .amc-app-guide-popup-section {
    font-size: 13px; font-weight: 600; margin-bottom: 6px;
    color: var(--text-primary);
  }
  .amc-app-guide-popup-body {
    font-size: 12px; line-height: 1.5; white-space: pre-wrap;
    color: var(--text-primary);
  }

  .stage-brief-bar { background: var(--yellow-field); border-bottom: 1px solid var(--yellow-border); padding: 4px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .brief-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--yellow); }
  .brief-text { font-size: 12px; font-weight: 500; background: #fef08a; padding: 1px 7px; border-radius: 2px; }

  /* Profile scroll + sections — identical in both views */
  .profile-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 16px; display: flex; flex-direction: column; gap: 7px; width: 100%; }

  .section-card { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; overflow: visible; flex-shrink: 0; max-width: 960px; }
  .section-header { display: flex; align-items: center; padding: 5px 10px; background: var(--grey-bg); border-bottom: 1px solid var(--border-divider); gap: 6px; cursor: pointer; user-select: none; border-radius: 5px 5px 0 0; }
  .section-header.collapsed { border-radius: 5px; border-bottom: none; }
  .section-header:hover { background: #efede8; }
  .section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); }
  .section-badge { font-size: 9px; padding: 1px 5px; border-radius: 8px; font-weight: 500; flex-shrink: 0; }
  .badge-complete { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
  .badge-active { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
  .badge-pending { background: var(--yellow-bg); color: var(--yellow); border: 1px solid var(--yellow-border); }
  .section-spacer { flex: 1; }

  /* Staff edit-mode controls in section header */
  .section-edit-controls { display: none; gap: 4px; align-items: center; margin-right: 6px; }
  body[data-view="staff"] .section-edit-controls.enabled { display: inline-flex; }
  .section-edit-icon { cursor: pointer; font-size: 11px; padding: 0 5px; border-radius: 3px; user-select: none; line-height: 1.4; border: 1px solid transparent; }
  .section-edit-icon.pencil { color: var(--text-muted); }
  .section-edit-icon.pencil:hover { color: #2563eb; background: var(--blue-bg); border-color: var(--blue-border); }
  .section-edit-icon.save { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
  .section-edit-icon.save:hover { background: #d8ecdf; }
  .section-edit-icon.cancel { color: #b91c1c; border-color: #fbcaca; background: #fef2f2; }
  .section-edit-icon.cancel:hover { background: #fde2e2; }

  /* Editing-state tint */
  /* delta7: edit-mode visual moved from section-header/body (area-level) to field-group
     (section-level). delta9: edit-mode tint now references --cv-field-group-bg — entering
     staff edit mode flips the field-group to the same blue used by client view, structurally
     signaling "you're operating in client-domain data" (the framing for SV edit-mode scope). */
  .field-group.editing { background-color: var(--cv-field-group-bg) !important; }
  /* 260516.1252_delta1: task-area-section gets the per-view field-group tint so its title row
     inherits the same bg as regular sections' label rows. Done items inherit the wrapper bg
     through their transparent zones — yellow stripe + cb-zone still distinguishes pending/queued. */
  body[data-view="staff"]  .task-area-section { background: var(--sv-field-group-bg); }
  body[data-view="client"] .task-area-section { background: var(--cv-field-group-bg); }
  .task-area-section.editing { background-color: var(--cv-field-group-bg) !important; }
  /* Inline edit controls (delta7 — used inside .field-group-label, not in area header). */
  .section-edit-controls.inline { margin-right: 0; margin-left: 4px; }

  .section-clear { display: none; font-size: 9px; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; margin-right: 6px; }
  body[data-view="client"] .section-header:not(.collapsed) .section-clear { display: inline; }
  .section-clear:hover { color: var(--text-secondary); }
  .section-chevron { color: var(--text-muted); font-size: 10px; transition: transform 0.15s; flex-shrink: 0; }
  body[data-view="staff"] .section-chevron { margin-left: auto; }
  .section-chevron.open { transform: rotate(180deg); }
  .section-body { display: none; }
  .section-body.open { display: block; }

  .field-group { padding: 6px 10px; border-bottom: 1px solid var(--border-divider); }
  .field-group:last-child { border-bottom: none; }
  /* Per-view field-group canvas tint (spec 1721). .dupe groups keep their warm reference tint. */
  /* .provider-block is the per-provider field-group analogue in client view (Rendering Providers area). */
  body[data-view="client"] .field-group:not(.dupe),
  body[data-view="client"] .provider-block { background: var(--cv-field-group-bg); }
  body[data-view="staff"]  .field-group:not(.dupe) { background: var(--sv-field-group-bg); }
  .field-group.dupe { background: var(--dupe-bg); border-left: 3px solid var(--dupe-border); }
  /* Staff RefSect dupes: deeper purple to distinguish from the regular staff field-group tint (--sv-field-group-bg). */
  body[data-view="staff"] .field-group.dupe { background: #D4D2F5; }
  .field-group-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
  .from-link { margin-left: auto; font-size: 9px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-style: italic; }
  .from-link:hover { color: #2563eb; }
  .edit-icon { cursor: pointer; color: var(--text-muted); font-size: 10px; padding: 1px 3px; border-radius: 2px; transition: all 0.12s; border: 1px solid transparent; }
  .edit-icon:hover { color: #2563eb; border-color: var(--blue-border); background: var(--blue-bg); }
  .edit-icon.locked { color: var(--border-strong); cursor: default; }

  .fields-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .fields-row:last-child { margin-bottom: 0; }
  .field-item { flex: 1; min-width: 100px; }
  .field-item.wide { flex: 2; min-width: 180px; }
  .field-item.wide-fixed { flex: 0 0 160px; }
  .field-item.medium { flex: 0 0 120px; }
  .field-item.narrow { flex: 0 0 80px; }
  .field-item.xnarrow { flex: 0 0 62px; }
  .field-item.fit { flex: 0 0 auto; }
  .field-item.full { flex: 0 0 100%; }

  .field-label { font-size: 9px; color: var(--text-muted); font-weight: 500; margin-bottom: 1px; display: flex; align-items: center; gap: 3px; }

  /* Read-only field-value (staff display + client pending-amc) — bordered box matching .field-input rhythm */
  .field-value { font-size: 12px; font-weight: 500; color: var(--text-primary); padding: 1px 4px; border-radius: 3px; min-height: 20px; display: flex; align-items: center; cursor: pointer; transition: background-color 0.1s; width: 100%; background-color: var(--surface); border: 1px solid var(--border); }
  .field-value:hover { background-color: #f3f1ec; }
  .field-value.locked-field { color: var(--text-secondary); cursor: default; }
  .field-value.locked-field:hover { background-color: var(--surface); }
  .field-value.empty { color: var(--text-muted); font-style: italic; font-weight: 400; cursor: default; }
  .field-value.derived { color: var(--text-derived); background-color: #f8f6f2; cursor: default; }
  .field-value.derived:hover { background-color: #f8f6f2; }
  /* AMC Default block — plain read-only field-value styling, no colored border or bg */
  .field-value.amc-hardcoded { /* inherits .field-value */ }
  .field-value.copied { color: var(--green) !important; font-style: normal !important; font-weight: 600 !important; background-color: var(--green-bg) !important; border-color: var(--green-border) !important; }
  /* Empty-field bg tints by status_rule (filled fields stay white) */
  /* C6 (spec 0820): staff optional empty fields mirror client .field-input.optional — white. */
  .field-value.optional                    { background-color: var(--surface); }
  /* Pending-client signal must be visually identical across staff and client views
     (admin pattern-matches the yellow marker when flipping views). References the
     same --yellow-field + --yellow-border that .field-input/.field-select/.combobox-input
     use for client empty+required state. */
  .field-value.empty.tint-pending-client   { background-color: var(--yellow-field); border-color: var(--yellow-border); }
  .field-value.empty.tint-pending-amc      { background-color: var(--tint-blue); }
  .field-value.empty.tint-pending-external { background-color: var(--tint-orange); }
  .field-value.empty.tint-confirmed        { background-color: var(--surface); }
  .field-value.empty.tint-exception        { background-color: var(--tint-purple); }
  .field-value.empty.tint-locked           { background-color: var(--tint-grey); }
  .field-value.empty.tint-pending-client:hover,
  .field-value.empty.tint-pending-amc:hover,
  .field-value.empty.tint-pending-external:hover,
  .field-value.empty.tint-exception:hover,
  .field-value.empty.tint-locked:hover     { background-color: inherit; }
  /* Client-view: pending-amc read-only fields get blue-grey tint instead of soft blue */
  body[data-view="client"] .field-value.tint-pending-amc { background-color: var(--tint-blue-grey); }
  body[data-view="client"] .field-value.empty.tint-pending-amc { background-color: var(--tint-blue-grey); }

  .field-given { font-size: 9px; color: var(--text-given); font-family: 'IBM Plex Mono', monospace; margin-top: 1px; padding-left: 5px; }
  .field-given::before { content: 'Given: '; font-weight: 600; }

  .amc-row-label { font-size: 9px; font-weight: 600; color: var(--amc-text); background: var(--amc-bg); border: 1px solid var(--amc-border); border-radius: 3px; padding: 1px 6px; margin-bottom: 4px; display: inline-block; letter-spacing: 0.04em; }
  .client-row-label { font-size: 9px; font-weight: 600; color: var(--text-muted); padding: 1px 0; margin-bottom: 4px; display: inline-block; letter-spacing: 0.04em; }

  .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .dot-green { background: var(--green); }
  .dot-blue { background: #3b82f6; }
  .dot-yellow { background: #eab308; }
  .dot-orange { background: var(--orange); }
  .dot-purple { background: var(--purple); }
  .dot-grey { background: var(--text-muted); }
  .lock-icon { font-size: 8px; color: var(--text-muted); }

  /* Editable inputs (client) */
  .field-input { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-primary); background-color: var(--yellow-field); border: 1px solid var(--yellow-border); border-radius: 3px; padding: 1px 4px; min-height: 20px; width: 100%; outline: none; transition: border-color 0.1s, background-color 0.1s; }
  .field-input:focus { border-color: var(--yellow); }
  .field-input.saved { background-color: var(--surface); border-color: var(--border); }
  .field-input.optional { background-color: var(--surface); border-color: var(--border); }
  .field-input.optional:focus { border-color: var(--border-strong); }
  .field-input:disabled { background-color: var(--grey-bg); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }
  .field-input::placeholder { color: var(--text-muted); font-weight: 400; font-style: italic; }
  /* Invalid (validation failed) — looks unfilled (yellow bg) until corrected */
  .field-input.invalid, .combobox-input.invalid { background-color: var(--yellow-field) !important; border-color: var(--yellow-border) !important; }

  /* Unified chevron — applied identically to native selects AND comboboxes */
  /* !important guards against state classes (.saved, .optional, :disabled) accidentally clobbering */
  .field-select, .combobox-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' stroke='%239e9b96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px 5px !important;
    padding-right: 18px !important;
  }
  .field-select { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-primary); background-color: var(--yellow-field); border: 1px solid var(--yellow-border); border-radius: 3px; padding-top: 1px; padding-bottom: 1px; padding-left: 4px; min-height: 20px; width: 100%; outline: none; cursor: pointer; transition: border-color 0.1s, background-color 0.1s; }
  .field-select.saved { background-color: var(--surface); border-color: var(--border); }
  .field-select.optional { background-color: var(--surface); border-color: var(--border); }
  .field-select:disabled { background-color: var(--grey-bg); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }

  /* ARIA combobox */
  .combobox-wrap { position: relative; width: 100%; }
  .combobox-input { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-primary); background-color: var(--yellow-field); border: 1px solid var(--yellow-border); border-radius: 3px; padding-top: 1px; padding-bottom: 1px; padding-left: 4px; min-height: 20px; width: 100%; outline: none; transition: border-color 0.1s, background-color 0.1s; }
  .combobox-input.saved { background-color: var(--surface); border-color: var(--border); }
  .combobox-input.optional { background-color: var(--surface); border-color: var(--border); }
  .combobox-input:disabled { background-color: var(--grey-bg); color: var(--text-muted); cursor: not-allowed; border-color: var(--border); }
  .combobox-input::placeholder { color: var(--text-muted); font-weight: 400; font-style: italic; }
  .combobox-listbox { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 3px; max-height: 160px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  .combobox-listbox.open { display: block; }
  .combobox-option { padding: 3px 6px; font-size: 11px; cursor: pointer; }
  .combobox-option:hover, .combobox-option[aria-selected="true"] { background: var(--yellow-bg); }
  .combobox-option.focused { background: var(--yellow-bg); outline: 1px solid var(--yellow-border); }

  .field-warning { font-size: 9px; color: var(--yellow); background: var(--yellow-bg); border: 1px solid var(--yellow-border); border-radius: 3px; padding: 2px 6px; margin-top: 3px; display: none; }
  .field-warning.show { display: block; }

  .lic-list { display: flex; flex-direction: column; gap: 3px; }
  .lic-list:not(:empty) { margin-top: 4px; margin-bottom: 4px; }
  .lic-row { display: flex; gap: 6px; align-items: flex-start; }
  .lic-remove { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 2px 4px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
  .lic-remove:hover { color: #dc2626; }

  /* Provider blocks (client) and cards (staff) */
  .provider-block { border-bottom: 1px solid var(--border); padding: 6px 10px; }
  .provider-block:last-of-type { border-bottom: none; }
  .provider-block-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; }
  .add-btn { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 500; color: #2563eb; background: #eef4fb; border: 1px solid #a8c8eb; border-radius: 3px; padding: 3px 10px; cursor: pointer; transition: all 0.12s; display: inline-block; margin: 6px 10px; }
  .add-btn:hover:not(:disabled) { background: #dbeafe; }
  .add-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--grey-bg); color: var(--text-muted); border-color: var(--border); }

  .providers-toolbar { padding: 4px 10px; border-bottom: 1px solid var(--border-divider); display: flex; align-items: center; gap: 5px; background: #fafaf8; }
  .sort-label { font-size: 9px; color: var(--text-muted); font-weight: 500; }
  .sort-btn { font-size: 9px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); cursor: pointer; color: var(--text-secondary); font-family: 'IBM Plex Sans', sans-serif; }
  .sort-btn.active { border-color: #2563eb; color: #2563eb; background: var(--blue-bg); }
  .provider-card { border-bottom: 1px solid var(--text-muted); overflow: visible; }
  .provider-card:last-child { border-bottom: none; }
  .provider-card-header { display: flex; align-items: center; padding: 5px 10px; gap: 7px; cursor: pointer; transition: background 0.1s; }
  .provider-card-header:hover { background: var(--grey-bg); }
  .provider-strip { width: 3px; min-height: 26px; border-radius: 2px; flex-shrink: 0; align-self: stretch; }
  .provider-name { font-weight: 600; font-size: 12px; flex: 1; }
  .provider-meta { display: flex; gap: 10px; flex-wrap: wrap; }
  .provider-meta-item { font-size: 10px; color: var(--text-secondary); }
  .provider-meta-label { font-size: 9px; color: var(--text-muted); }
  /* Yellow "—" pending indicator for empty NPI in provider summary.
     References the same --yellow-field / --yellow-border as cross-view pending signals. */
  .provider-meta-pending { background-color: var(--yellow-field); border: 1px solid var(--yellow-border); padding: 0 4px; border-radius: 2px; font-style: italic; color: var(--text-muted); }
  /* Muted "—" for empty License / Phone / Email meta chips (always rendered so the chip
     count is stable across providers and lifecycle states). */
  .provider-meta-empty { color: var(--text-muted); font-style: italic; }
  /* Click-to-copy spans inside the provider summary row (last/first name, NPI, lic#, phone, email).
     Scoped to .provider-card-header so it doesn't conflict with other .copyable use elsewhere. */
  .provider-card-header .copyable { cursor: pointer; padding: 0 2px; border-radius: 2px; transition: background-color 0.1s; }
  .provider-card-header .copyable:hover { background-color: #f3f1ec; }
  .provider-card-header .copied { color: var(--green) !important; font-weight: 600 !important; background-color: var(--green-bg) !important; }
  .provider-expand-icon { color: var(--text-muted); font-size: 10px; transition: transform 0.15s; flex-shrink: 0; }
  .provider-expand-icon.open { transform: rotate(180deg); }
  /* .provider-detail is also a .field-group (delta5) so it inherits the staff per-view
     tint from body[data-view="staff"] .field-group:not(.dupe) automatically. We strip the
     local `background` to avoid drift, suppress the doubled border-bottom (its parent
     .provider-card already provides one), and keep border-top to separate from header. */
  .provider-detail { padding: 6px 10px; border-top: 1px solid var(--border-divider); border-bottom: none; display: none; }
  .provider-detail.open { display: block; }

  .same-as-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
  .same-as-cb { cursor: pointer; accent-color: #2563eb; width: 12px; height: 12px; }
  .same-as-label { font-size: 10px; color: var(--text-muted); cursor: pointer; user-select: none; margin-right: 10px; }

  /* Modals */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; }
  .modal-overlay.hidden { display: none; }
  .modal { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; padding: 16px; min-width: 320px; max-width: 480px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
  .modal-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
  .modal-body { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }
  .modal-data { background: var(--grey-bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; max-height: 240px; overflow-y: auto; }
  .modal-data table { border-collapse: collapse; width: 100%; }
  .modal-data td { padding: 1px 6px 1px 0; vertical-align: top; }
  .modal-data td:first-child { color: var(--text-muted); white-space: nowrap; padding-right: 12px; }
  .modal-data td:last-child { color: var(--text-primary); font-weight: 500; word-break: break-all; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
  .modal-btn { font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 3px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-secondary); }
  .modal-btn:hover { background: var(--grey-bg); }
  .modal-btn.primary { background: #2563eb; color: #fff; border-color: #2563eb; }
  .modal-btn.primary:hover { background: #1d4ed8; }
  .modal-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
  .modal-btn.danger:hover { background: #b91c1c; }

  /* ── Task Area checklist items ─────────────────────────── */
  /* Split-background layout (spec 0820 C1): stripe + checkbox zone + content zone.
     Pending and queued share identical split; done renders all zones transparent
     so the white section-card shows through. */
  /* delta10: removed border-bottom — checklist items are not separate sections.
     Items are visually separated by their split-bg coloring and content padding. */
  .task-item {
    display: flex;
    align-items: stretch;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
  }

  .task-item-stripe   { flex: 0 0 3px; background: transparent; }
  .task-item-cb-zone  { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; background: transparent; }
  .task-item-content  { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: transparent; min-width: 0; }

  /* Pending + queued: split background (stripe / checkbox zone / view-conditional content) */
  .task-item.pending  .task-item-stripe,
  .task-item.queued   .task-item-stripe   { background: var(--yellow-border); }
  .task-item.pending  .task-item-cb-zone,
  .task-item.queued   .task-item-cb-zone  { background: var(--yellow-field); }
  body[data-view="staff"]  .task-item.pending .task-item-content,
  body[data-view="staff"]  .task-item.queued  .task-item-content { background: var(--sv-field-group-bg); }
  body[data-view="client"] .task-item.pending .task-item-content,
  body[data-view="client"] .task-item.queued  .task-item-content { background: var(--cv-field-group-bg); }

  .task-cb { width: 13px; height: 13px; flex-shrink: 0; accent-color: #2563eb; cursor: pointer; margin: 0; }
  .task-cb:disabled { opacity: 0.35; cursor: not-allowed; }

  .task-label       { font-size: 12px; font-weight: 500; color: var(--text-primary); line-height: 1.35; }
  .task-label.muted { color: var(--text-muted); font-weight: 400; }

  .task-help-link {
    font-size: 10px;
    color: #1e4a7a;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    cursor: pointer;
  }
  .task-help-link.muted { color: var(--text-muted); cursor: default; }

  .task-lock { font-size: 9px; color: var(--text-muted); flex-shrink: 0; }

  .task-date-input {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    background: var(--surface);
    width: 136px;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* ── View-conditional visibility ───────────────────────── */
  body[data-view="staff"] .client-only { display: none !important; }
  body[data-view="client"] .staff-only { display: none !important; }
  body[data-view="client"] .left-pane,
  body[data-view="client"] .pane-divider { display: none !important; }
  body[data-view="client"] .split-pane { background: var(--bg); }
  body[data-view="client"] .profile-pane { background: var(--bg); }