/* ===== ca_clinical_check_row_html (HTML form, scoped) =====
   The per-item clinical-check rail. Two rules carry what an HTML template may
   not carry as style= attributes (both marked below).

   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPE IS THE FORM ROOT, .ca-ccr-root. :where() adds zero specificity, so
   every scoped rule weighs exactly what the bare selector it replaces did and
   no tie changes hands. No selector in this block names a shared px-, pxm- or
   mar- class, so nothing had to be doubled when these rules moved from a body
   <style> block (which beat the dependency's runtime-injected theme on
   document order) into a head link (which loses that tie).

   ONE RULE STAYS UNSCOPED: .ca-ccr-labelled-chip. The module renders that chip
   into the DEPENDENCY-owned .mar-item-header ABOVE this form's root on an
   embedded row (_caCcrSyncLabelledChip walks root.closest('.mar-item-row')),
   so a rule scoped under .ca-ccr-root would stop matching the chip on every
   embedded rail. A standalone rail's chip sits inside the root and the bare
   rule covers it too. Nothing in the dependency declares that class, so the
   head-link move costs it no tie.

   NO DESIGNER GATE. Nothing in this form is hidden until JavaScript runs: the
   overlay's display:none is the modal's real closed state, and the two state
   classes below are data-driven states. The designer canvas loads this
   head-linked asset, so the canvas shows what first paint shows.

   MANY INSTANCES OF THIS FORM LIVE AT ONCE (one rail per medicine line), so
   every rule is written against the root it is handed and none of them names
   an id. */

/* ==================================================================
   Clinical Approvals — per-item clinical-check host chrome (Tab 1).
   T.17: every element derives from real px-internal conventions —
   the compact QUERY badge uses the estate warning tokens, the segmented control is the
   mockup .classify (solid = classification, estate mode colours),
   buttons are .mar-draft-btn geometry, the modal is the estate
   overlay/card pattern.
   ================================================================== */
:where(.ca-ccr-root) .ca-ccr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 16px;
  border-top: 1px dashed var(--px-border);
  font-family: var(--px-font);
  font-size: 12px;
  color: var(--px-text-secondary);
}
/* Fully-inline row merge (owner ruling 2026-07-15): the strip lives
   INSIDE its drug's med row (dep row_host_slot) — the row owns the
   horizontal padding and the drug name; the strip keeps only a hair
   of separation and indents to the row's edit column. */
:where(.ca-ccr-root) .ca-ccr-row.ca-ccr-embedded {
  border-top: none;
  padding: 2px 8px 2px 22px;
}
/* U8: bulk-set select — visually DISTINCT from the green approval
   tick (accent-coloured, smaller, explicit "select" label). */
:where(.ca-ccr-root) .ca-ccr-select-l {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--px-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-select {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
:where(.ca-ccr-root) .ca-ccr-drug {
  font-family: var(--px-mono);
  font-size: 11.5px;
  color: var(--px-text-primary);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* F2: immutable prescriber truth. This is deliberately a full-width
   box, not a review-row-only inline hint:
   every screening row on both tabs must show exactly what arrived. */
:where(.ca-ccr-root) .ca-ccr-raw-rx {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--px-border);
  border-left: 3px solid var(--px-info);
  border-radius: var(--px-radius-sm);
  background: color-mix(in srgb, var(--px-info) 5%, var(--px-bg-card));
  color: var(--px-text-secondary);
  line-height: 1.35;
}
:where(.ca-ccr-root) .ca-ccr-raw-rx-label {
  color: var(--px-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-raw-rx-text {
  min-width: 0;
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--px-border);
  border-left: 3px solid var(--px-warning);
  border-radius: var(--px-radius-sm);
  background: color-mix(in srgb, var(--px-warning) 5%, var(--px-bg-card));
  color: var(--px-text-secondary);
  line-height: 1.35;
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons.is-hp {
  border-left-color: var(--px-danger);
  background: color-mix(in srgb, var(--px-danger) 5%, var(--px-bg-card));
}
/* Marking an item MONTHLY ends its candidacy: the strip stays IN PLACE
   (same box metrics, zero layout shift) with the label struck through
   for the live gesture. On reload it is naturally absent. */
:where(.ca-ccr-root) .ca-ccr-acute-reasons.is-ended {
  border-left-color: var(--px-border-strong);
  background: var(--px-bg-card);
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons-label {
  color: var(--px-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons.is-ended .ca-ccr-acute-reasons-label {
  text-decoration: line-through;
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons-text {
  min-width: 0;
  font-size: 11.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(.ca-ccr-root) .ca-ccr-acute-reasons.is-ended .ca-ccr-acute-reasons-text {
  color: var(--px-text-muted);
}
/* Tab-2 per-row script-state chips (Tab-1 renders these in the script
   mini header instead). */
:where(.ca-ccr-root) .ca-ccr-script-ref {
  font-family: var(--px-mono);
  font-size: 10.5px;
  color: var(--px-text-muted);
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-printed-chip {
  border-color: var(--px-info);
  background: color-mix(in srgb, var(--px-info) 9%, transparent);
  color: var(--px-info);
}
:where(.ca-ccr-root) .ca-ccr-returning-chip {
  border-color: var(--px-warning);
  background: color-mix(in srgb, var(--px-warning) 12%, transparent);
  color: var(--px-warning);
}
:where(.ca-ccr-root) .ca-ccr-hp-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--px-danger);
  background: color-mix(in srgb, var(--px-danger) 12%, transparent);
  color: var(--px-danger);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
/* LABELLED chip (owner ruling 2026-07-21): read-only marker for lines
   with an rx_labelled event. Plain style consistent with the dep's
   .mar-flag-badge unchecked chips (same geometry/typography), but
   never interactive. Rendered by this rail — into the dep med-row
   header on embedded rows, inline after the drug name on standalone
   (query-strip) rows. */
.ca-ccr-labelled-chip {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #888;
  border: 1px solid #bbb;
  white-space: nowrap;
  user-select: none;
}
:where(.ca-ccr-root) .ca-ccr-stopped-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--px-danger);
  background: color-mix(in srgb, var(--px-danger) 10%, var(--px-bg-card));
  color: var(--px-danger);
  font-size: 10px;
  font-weight: 700;
}
:where(.ca-ccr-root) .ca-ccr-spine-return {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid #b45309;
  background: #fffbeb;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* B8 follow-up (owner ruling 2026-07-23): no-home rows carry a
   prominent red badge — the disabled classify chips alone read as a
   bug (hover tooltip was the only cue). */
:where(.ca-ccr-root) .ca-ccr-no-home {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid var(--px-danger);
  background: color-mix(in srgb, var(--px-danger) 12%, transparent);
  color: var(--px-danger);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-classify {
  display: inline-flex;
  border: 1px solid var(--px-border-strong);
  border-radius: 999px;
  overflow: hidden;
}
:where(.ca-ccr-root) .ca-ccr-classify button {
  border: none;
  background: var(--px-bg-card);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  cursor: pointer;
  color: var(--px-text-muted);
  font-family: var(--px-font);
  white-space: nowrap;
}
/* RS34: the group holds five options — a hairline divider keeps the
   segments legible inside the single pill. */
:where(.ca-ccr-root) .ca-ccr-classify button + button { border-left: 1px solid var(--px-border); }
:where(.ca-ccr-root) .ca-ccr-classify button.on-acute { background: var(--px-mode-acute-strong); color: #fff; }
:where(.ca-ccr-root) .ca-ccr-classify button.on-monthly { background: var(--px-mode-monthly-strong); color: #fff; }
/* Owner ruling 2026-08-22: an urgent monthly IS an acute — same
   colour, its own lit class so only one chip in the group lights. */
:where(.ca-ccr-root) .ca-ccr-classify button.on-urgent-monthly { background: var(--px-mode-acute-strong); color: #fff; }
/* Owner ruling 2026-07-16: MONTHLY renders DISABLED (never hidden)
   at all-interim (acutes-only) homes. */
:where(.ca-ccr-root) .ca-ccr-classify button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
:where(.ca-ccr-root) .ca-ccr-classify.ca-approval-invalid {
  border: 2px solid #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}
:where(.ca-ccr-root) .ca-ccr-manual {
  color: var(--px-text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-approved {
  color: var(--px-mode-acute-strong);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-query-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--ch-warning-bg, #fef3c7);
  color: var(--ch-warning, #92400e);
  border: 1px solid var(--ch-warning-border, #fcd34d);
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-parked-note {
  font-size: 11px;
  color: var(--px-text-muted);
  font-style: italic;
}
:where(.ca-ccr-root) .ca-ccr-btn {
  padding: 4px 10px;
  border-radius: var(--px-radius-sm);
  font-size: .74rem;
  font-family: var(--px-font);
  cursor: pointer;
  border: 1.5px solid #aaa;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
:where(.ca-ccr-root) .ca-ccr-btn:disabled {
  color: var(--px-text-muted);
  border-color: var(--px-border);
  cursor: not-allowed;
}
/* The row's ONE explicit approval affordance (owner ruling
   2026-07-15) — solid success-green, mirrors the estate confirm
   geometry (.ca-ccr-btn footprint). */
:where(.ca-ccr-root) .ca-ccr-approve {
  padding: 4px 12px;
  border-radius: var(--px-radius-sm);
  font-size: .74rem;
  font-weight: 700;
  font-family: var(--px-font);
  cursor: pointer;
  border: 1.5px solid var(--px-mode-acute-strong);
  background: var(--px-mode-acute-strong);
  color: #fff;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-approve:hover:not(:disabled) { background: var(--px-mode-acute-strong-hover, var(--px-mode-acute-strong)); }
:where(.ca-ccr-root) .ca-ccr-approve:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  border-color: var(--px-border);
  cursor: not-allowed;
}
:where(.ca-ccr-root) .ca-ccr-approve.ca-approval-invalid:disabled {
  border: 2px solid #dc2626;
  background: #fef2f2;
  color: #7f1d1d;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}
:where(.ca-ccr-root) .ca-ccr-row.ca-approved-row {
  background: color-mix(in srgb, var(--px-mode-acute-strong) 8%, var(--px-bg-card));
}
/* candidate action cluster (phase-7B interim port) — routing-only
   buttons keep the outline .ca-ccr-btn geometry. */
/* READ-ONLY interim indicator (owner ruling 2026-07-16):
   there is no Mark-interim button; this chip only shows RAINN state. */
:where(.ca-ccr-root) .ca-ccr-interim-done {
  color: var(--px-mode-acute-strong);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
:where(.ca-ccr-root) .ca-ccr-spacer { flex: 1; }

/* --- query modal (estate overlay/card pattern) -------------------- */
:where(.ca-ccr-root) .ca-ccr-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 90;
  align-items: center;
  justify-content: center;
}
:where(.ca-ccr-root) .ca-ccr-overlay.open,
:where(.ca-ccr-root) .ca-ccr-overlay.open-notes { display: flex; }
:where(.ca-ccr-root) .ca-ccr-modal {
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow-md);
  width: min(460px, calc(100vw - 40px));
  padding: 22px 26px;
  border-top: 6px solid var(--px-warning);
  font-family: var(--px-font);
}
:where(.ca-ccr-root) .ca-ccr-modal h3 {
  margin: 0 0 4px;
  color: var(--px-text-primary);
  font-size: 16px;
}
:where(.ca-ccr-root) .ca-ccr-modal .ca-ccr-modal-drug {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-muted);
  margin: 0 0 10px;
}
:where(.ca-ccr-root) .ca-ccr-modal .ca-ccr-modal-reason {
  font-size: 12.5px;
  color: var(--px-text-secondary);
  margin: 0 0 10px;
}
/* The reason paragraph's hidden state (a template may not carry an inline
   style). It is a STATE, not a default: caCcrOpenModal and
   caCcrShowSwitchAwayWarning toggle this class rather than write the display
   property, because writing display='' falls back to the stylesheet
   and a plain display:none rule here would hide the paragraph for good. */
:where(.ca-ccr-root) .ca-ccr-modal .ca-ccr-modal-reason.ca-ccr-hidden {
  display: none;
}
/* The modal label's old style="font-size:12px". No other rule in this block or
   in the dependency targets a bare label inside .ca-ccr-modal, so this ties
   with nothing. */
:where(.ca-ccr-root) .ca-ccr-modal label[data-ca-ccr-modal-label] {
  font-size: 12px;
}
:where(.ca-ccr-root) .ca-ccr-modal textarea {
  width: 100%;
  border: 1.5px solid var(--px-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12.5px;
  font-family: var(--px-font);
  background: var(--px-bg-card);
  color: var(--px-text-primary);
  min-height: 64px;
  resize: vertical;
  box-sizing: border-box;
}
:where(.ca-ccr-root) .ca-ccr-modal textarea:focus { border-color: var(--px-info); outline: none; }
:where(.ca-ccr-root) .ca-ccr-modal-err {
  display: none;
  color: var(--px-danger);
  font-size: 11.5px;
  margin-top: 4px;
}
:where(.ca-ccr-root) .ca-ccr-modal-err.show { display: block; }
:where(.ca-ccr-root) .ca-ccr-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
:where(.ca-ccr-root) .ca-ccr-modal-confirm {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 7px 16px;
  border-radius: var(--px-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
}
:where(.ca-ccr-root) .ca-ccr-modal-confirm:hover:not(:disabled) { background: var(--accent-hover); }
:where(.ca-ccr-root) .ca-ccr-modal-confirm:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  border: 1px solid var(--px-border);
  cursor: not-allowed;
}
:where(.ca-ccr-root) .ca-ccr-modal-copy {
  display: none;
  background: var(--px-bg-card);
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
  padding: 7px 16px;
  border-radius: var(--px-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
}
:where(.ca-ccr-root) .ca-ccr-modal-copy:hover { background: var(--px-bg-subtle); }