/* ===== ca_per_home_view_html (HTML form, scoped) =====
   Clinical Approvals Tab 2, the Home level working view. Every rule comes
   from the form's old <style> block; unscoping this file and folding the four
   designer-gated rules back into the rules they were split out of reproduces
   that block line for line, so nothing is added and nothing is dropped except
   the two mount rules named below.

   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPE IS THE FORM ROOT, .caph-root. The section shell slots this form once
   into its Home level pane and it stays there, so the root travels with every
   element these rules name. :where() adds zero specificity, so each scoped
   selector weighs exactly what the bare selector it replaces did and no tie
   changes hands.

   .caph-root ITSELF STAYS A BARE ROOT RULE. This is a dashboard section
   inside the section shell's pane, not a screen inside the shared drawer
   layout's scroller, so the guide's screen-root rewrite does not apply: the
   pane owns the margin and the scroller and `position: relative` is all this
   root ever had. It is what .caph-generate-bar's `position: sticky` and the
   three overlays measure against.

   NOTHING HERE IS DOUBLED. Every selector that reaches a shared .mar-*,
   .pxm-* or .px-* name is one of the 32 that lead with #caph-cards-slot, so
   each already carries an id on top of the class the dependency declares and
   still outranks the theme the dependency appends to <head> at startup after
   every link. Audited selector by selector; there is no tie to break.

   DESIGNER GATE on `.caph-root.caph-live` (guide step 4). FOUR hides in this
   asset hide a block the designer must show, and they are the four that are
   split into their own gated rule immediately after their base rule:
   `.caph-generate-bar` (revealed at runtime by `.visible`), the three
   `.caph-*-overlay` backdrops (revealed by `.open`), and the two slot mount
   rules. Between them they cover five of the six `anvil:name` blocks
   (`generate_bar`, `sheet_options` inside it, `patient_details_modal`,
   `token_picker_modal`, `mar_history_modal`) and both slot dropzones, so
   ungated the designer canvas gives staff five zero-box tree entries to edit
   and two 0x0 dropzones to drop into. `__init__.py` adds `caph-live` to the
   form root while the form is still detached, so at runtime every gated hide
   applies from before the first paint exactly as the unconditional rule it was
   split out of did, and every reveal is one class heavier than the gate.
   The three backdrops give up `position: fixed` to the gated rule as well:
   left in the base rule, three full-viewport fixed backdrops would cover the
   whole canvas and take the other named blocks with them. On the canvas they
   flow as static blocks instead (`inset` and `z-index` do nothing there), and
   the generate bar flows as a block rather than a flex row, which is the one
   canvas-only difference in each case. Every other hide here is untouched and
   needs no gate: each `hidden` attribute in the template is the real initial
   state, and the rest name a node the dep renders at runtime or a state class
   the module toggles on data.

   THE TWO MOUNT RULES hide the two slot mounts. They are CLASSES rather than
   CSS defaults because the module writes `classList`: a bare
   `display:none` on `.caph-cards-mount` would make the cards permanently
   invisible, since clearing an inline value with `el.style.display = ''`
   falls back to the stylesheet.
   `.caph-cards-hidden` is added by caphShowEmpty and removed by
   caphShowContent; the rail staging mount is never shown and needs no toggle.
   Both rules carry the gate, which is what leaves the cards dropzone and the
   rail staging dropzone droppable on the canvas: the template ships the cards
   mount with `caph-cards-hidden` already on it, and with no live class that
   class simply does nothing there.

   @keyframes caph-generate-spin is already form-prefixed and unique in the
   app, so it carries across unrenamed. No url() and no @font-face here.
*/
/* ==================================================================
   Clinical Approvals — Tab 2 "Per Home View" (mockup v3 FINAL Tab 2).
   T.17/U9: every style derives from px-internal's REAL conventions —
   the bottom bar is the genuine .mar-generate-bar geometry, buttons
   are .mar-btn-generate / .mar-draft-btn, the blockers chip uses the
   estate review-pill warning tokens. All selectors are namespaced
   caph-.
   Per-app colour rides ONLY --accent / --pxm-accent set by the
   orchestrator shell on .ca-page (hub = dep default teal).
   ================================================================== */
.caph-root { position: relative; }

/* --- header row (mockup .filters) --------------------------------- */
:where(.caph-root) .caph-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
:where(.caph-root) .caph-home-combo { position: relative; }
:where(.caph-root) .caph-home-input {
  min-width: 250px;
  border: 1.5px solid var(--px-border);
  border-radius: 6px;
  padding: 5px 26px 5px 8px;
  font-size: 12.5px;
  font-family: var(--px-font);
  background: var(--px-input-bg, var(--px-bg-card));
  color: var(--px-text-primary);
}
:where(.caph-root) .caph-home-input:focus { border-color: var(--accent); outline: none; }
:where(.caph-root) .caph-home-input:disabled {
  color: var(--px-text-secondary);
  background: var(--px-bg-soft, var(--px-bg-card));
  cursor: progress;
}
:where(.caph-root) .caph-home-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1;
  color: var(--px-text-secondary);
  cursor: pointer;
}
:where(.caph-root) .caph-home-clear:hover { color: var(--px-text-primary); }
:where(.caph-root) .caph-home-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border-strong);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
:where(.caph-root) .caph-home-panel .opt {
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: var(--px-font);
  color: var(--px-text-primary);
  cursor: pointer;
  white-space: nowrap;
}
:where(.caph-root) .caph-home-panel .opt:hover,
:where(.caph-root) .caph-home-panel .opt.active { background: var(--px-bg-soft, #f0f4f8); }
:where(.caph-root) .caph-home-panel .none {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--px-text-secondary);
  font-style: italic;
}
:where(.caph-root) .caph-patient-combo { position: relative; }
:where(.caph-root) .caph-patient-combo-input,
:where(.caph-root) .caph-patient-filter-input {
  min-width: 270px;
  border: 1.5px solid var(--px-border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: var(--px-font);
  background: var(--px-input-bg, var(--px-bg-card));
  color: var(--px-text-primary);
}
:where(.caph-root) .caph-patient-combo-input:focus,
:where(.caph-root) .caph-patient-filter-input:focus {
  border-color: var(--accent);
  outline: none;
}
:where(.caph-root) .caph-patient-combo-input:disabled,
:where(.caph-root) .caph-patient-filter-input:disabled {
  color: var(--px-text-secondary);
  background: var(--px-bg-soft, var(--px-bg-card));
  cursor: not-allowed;
}
:where(.caph-root) .caph-patient-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 61;
  min-width: 100%;
  max-width: 520px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border-strong);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
:where(.caph-root) .caph-patient-panel .opt {
  height: 30px;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: var(--px-font);
  color: var(--px-text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Virtual-scroll spacers keep the panel's real scroll height = the
   whole logical option list, so wheel/touch/scrollbar reach every
   option while only a moving window of rows is in the DOM. */
:where(.caph-root) .caph-patient-panel .caph-picker-pad { flex: none; }
:where(.caph-root) .caph-patient-panel .opt:hover,
:where(.caph-root) .caph-patient-panel .opt.active {
  background: var(--px-bg-soft, #f0f4f8);
}
:where(.caph-root) .caph-patient-panel .none {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--px-text-secondary);
  font-style: italic;
}
:where(.caph-root) .caph-fchip {
  border: 1px solid var(--px-border-strong);
  border-radius: 999px;
  background: var(--px-bg-card);
  font-size: 12px;
  padding: 5px 13px;
  cursor: pointer;
  color: var(--px-text-secondary);
  font-family: var(--px-font);
}
:where(.caph-root) .caph-fchip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
:where(.caph-root) .caph-fchip .n { opacity: .8; font-size: 11px; }
:where(.caph-root) .caph-fchip:disabled { opacity: .5; cursor: not-allowed; }
:where(.caph-root) .caph-selection-btn {
  border: 1px solid var(--px-border-strong);
  border-radius: 6px;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  padding: 5px 10px;
  font: 600 12px var(--px-font);
  cursor: pointer;
}
:where(.caph-root) .caph-selection-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
:where(.caph-root) .caph-selection-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
:where(.caph-root) .caph-selection-btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- body ----------------------------------------------------------- */
:where(.caph-root) .caph-empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--px-text-secondary);
  font-size: 1rem;
}
:where(.caph-root) .caph-cards-note {
  display: none;
  text-align: center;
  padding: 24px;
  color: var(--px-text-muted);
  font-size: .85rem;
  font-style: italic;
}

/* --- slot mounts (see the header) ----------------------------------- */
:where(.caph-root.caph-live) .caph-cards-mount.caph-cards-hidden { display: none; }
:where(.caph-root.caph-live) .caph-rail-staging-mount { display: none; }

/* The red notice box on the generate bar. Its ONE wearer is
   `#caph-cycle-stale-note`, which composes onto it for the danger
   triple and overrides the margin.

   Named for what it IS (owner-approved, 03/09/26): a danger-styled note
   on the action bar. NOT named after
   the stale cycle, which is `.caph-cycle-stale-note`'s job — two
   classes on one element differing by word order is how the next
   reader ends up editing the wrong rule.

   No colour literals and no var() fallbacks: every value is a
   `--px-*` token declared in BOTH theme bands (3C-03b — a fallback
   paints the LIGHT value on DARK, which is how the estate once
   shipped an invisible danger banner). */
:where(.caph-root) .caph-bar-danger-note {
  padding: 10px 14px;
  margin: 0 0 var(--px-space-md) 0;
  border-radius: var(--px-radius-sm);
  font-family: var(--px-font);
  font-size: .85rem;
  background: var(--px-danger-bg);
  color: var(--px-danger-text);
  border-left: 4px solid var(--px-danger);
}

/* F10 unified selection owns the ONE checkbox beside every drug
   name. Hide the dep's older include/approval checkbox on ALL rows,
   including non-profile generation rows which never receive the
   caph-clinical-row marker; otherwise selection_ticks renders both.
   The projected clinical strip still owns profile-row approval. */
:where(.caph-root) #caph-cards-slot [data-med-check],
:where(.caph-root) #caph-cards-slot .caph-clinical-row .pxm-approve-btn {
  display: none !important;
}
:where(.caph-root) #caph-cards-slot .caph-clinical-row .mar-item-edit { padding-left: 22px; }
:where(.caph-root) #caph-cards-slot [data-field-name="converted_instruction"].ca-approval-invalid,
:where(.caph-root) #caph-cards-slot .mar-schedule-row.ca-approval-invalid,
:where(.caph-root) #caph-cards-slot .mar-schedule-row.ca-hostflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-schedule-row.ca-robotflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-schedule-row.ca-rejectflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-schedule-row.ca-uxflag-invalid {
  border: 2px solid #dc2626 !important;
  background: #fef2f2 !important;
  color: #7f1d1d;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}
/* The drug name is the ONE element the dep renders on every med row,
   so it is the trailing fallback in every facet selector — a home
   that hides rounds chrome, or a row with no tray/PRN block, still
   gets a visible box instead of a silently unpaintable verdict.
   All five red-box classes must therefore render on it.
   The blank-field prechecks also box their own controls, so the
   operator sees WHICH field the refusal is about without hunting the
   row. */
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-uxflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-rejectflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-hostflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-qtyflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-instrflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-item-drug.ca-robotflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-qty-field.ca-qtyflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-instr-textarea.ca-instrflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-qty-field.ca-uxflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-instr-textarea.ca-uxflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-flag-badge.ca-uxflag-invalid,
:where(.caph-root) #caph-cards-slot .mar-stop-btn.ca-uxflag-invalid,
:where(.caph-root) #caph-cards-slot input.ca-uxflag-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
  border-radius: 4px;
}
:where(.caph-root) #caph-cards-slot .pxm-pc-tickall.ca-approval-invalid,
:where(.caph-root) #caph-cards-slot .pxm-sel-tick.ca-approval-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #fef2f2;
}
:where(.caph-root) #caph-cards-slot .mar-flag-badge.ca-hostflag-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 1px;
  border-radius: 4px;
}
:where(.caph-root) #caph-cards-slot input.ca-hostflag-invalid {
  border: 2px solid #dc2626 !important;
  background: #fef2f2 !important;
  color: #7f1d1d;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}
:where(.caph-root) #caph-cards-slot .mar-item-row.ca-approved-row {
  background: color-mix(in srgb, var(--px-mode-acute-strong) 8%, transparent);
}
:where(.caph-root) #caph-cards-slot details.pxm-pc-card.ca-card-approved {
  border-color: color-mix(in srgb, var(--px-mode-acute-strong) 40%, var(--px-border));
  background: color-mix(in srgb, var(--px-mode-acute-strong) 6%, var(--px-bg-card));
}
:where(.caph-root) #caph-cards-slot details.pxm-pc-card.ca-card-has-query {
  border-color: var(--ch-warning-border, var(--px-warning));
  background: var(--ch-warning-bg,
    color-mix(in srgb, var(--px-warning) 10%, var(--px-bg-card)));
}
/* Sticky patient-name anchoring (owner ruling 2026-07-21): the card's
   summary bar pins to the top of the PXVIRT scroll viewport while any
   of the patient's content is visible and pushes up when the card's
   bottom meets it (the card is the sticky containing block). The dep
   card clips with overflow:hidden, which would trap the sticky bar —
   override to visible (the summary carries its own opaque background
   and top radius so the rounded chrome survives). Pure CSS: PXVIRT
   slots are normal-flow height spacers, no scroll JS involved. */
:where(.caph-root) #caph-cards-slot details.pxm-pc-card { overflow: visible; }
:where(.caph-root) #caph-cards-slot .pxm-pc-summary {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--pxm-bg-card, var(--px-bg-card));
  border-radius: var(--pxm-radius-lg, 8px) var(--pxm-radius-lg, 8px) 0 0;
}
:where(.caph-root) #caph-cards-slot .pxm-pc-summary:hover {
  background: var(--pxm-bg-elevated, var(--px-bg-subtle));
}
:where(.caph-root) #caph-cards-slot details.pxm-pc-card.ca-card-approved .pxm-pc-summary {
  background: color-mix(in srgb, var(--px-mode-acute-strong) 6%, var(--px-bg-card));
}
:where(.caph-root) #caph-cards-slot details.pxm-pc-card.ca-card-has-query .pxm-pc-summary {
  background: var(--ch-warning-bg,
    color-mix(in srgb, var(--px-warning) 10%, var(--px-bg-card)));
}
/* Query rows are resolve-only: keep the host slot/amber strip and
   hide the editable dep row body until manual resolution. */
:where(.caph-root) #caph-cards-slot .caph-query-parked > :not(.mar-row-host-slot) {
  display: none !important;
}
:where(.caph-root) #caph-cards-slot .caph-query-parked > .mar-row-host-slot {
  display: block;
  margin: 0;
}
/* NO CSS containment on the cards, the med-rows body or .mar-item-row,
   however tempting it looks for a ~3,000-element home. The host's
   clinical check row mounts INTO each row's .mar-row-host-slot
   (__init__.py `get_row_host_slot` -> `slot.closest('.mar-item-row')`),
   and its query/notes modal .ca-ccr-overlay is `position: fixed;
   inset: 0` (ca_clinical_check_row). Both
   `contain: layout` and `contain: paint` make the contained element a
   containing block for fixed-position descendants, so ANY containment
   at card / .pxm-pc-medrows / .mar-item-row level collapses that
   full-viewport scrim to the size of one med row the moment a
   pharmacist opens a query. Paint containment would also clip the
   dep's [data-med-check].mar-invalid outline (2px + 2px offset), which
   is drawn outside the row box on the row's left content edge. Re-adding
   containment here needs .ca-ccr-overlay portalled to body first (the
   pattern editor already does this via _interactions.py
   _portal_pattern_editor). content-visibility / contain:size are
   separately barred: PXVIRT measures real card heights with
   getBoundingClientRect. */

/* --- W.2 host details editor: the "Edit details" affordance is HOST
   chrome injected into each dep card header (the dep card is
   dep-owned — its re-renders wipe the button, Python re-applies it
   after every card sync, same contract as the R7 banners); the modal
   is the estate overlay/card pattern. -------------------------------- */
:where(.caph-root) .caph-edit-details-btn {
  margin-left: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
  border: 1.5px dashed var(--px-border-strong);
  background: transparent;
  color: var(--px-text-secondary);
  white-space: nowrap;
}
:where(.caph-root) .caph-edit-details-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- MAR job holds (prototype variant A): a card whose patient is in a
   running MAR job (locked) or a finished one not yet reloaded (stale).
   The state block is host chrome in the card summary, repainted by
   ca_per_home_view.mjs after every dep re-render. ------------------- */
:where(.caph-root) #caph-cards-slot details.pxm-pc-card[data-caph-mar-state] {
  border-color: var(--px-border-strong);
  border-style: dashed;
}
:where(.caph-root) #caph-cards-slot details.pxm-pc-card[data-caph-mar-state] .pxm-pc-medrows,
:where(.caph-root) #caph-cards-slot details.pxm-pc-card[data-caph-mar-state] .pxm-pc-details,
:where(.caph-root) #caph-cards-slot details.pxm-pc-card[data-caph-mar-state] .pxm-pc-actions {
  opacity: 0.5;
  filter: grayscale(0.6);
}
:where(.caph-root) .caph-mar-card-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
:where(.caph-root) .caph-mar-lock-pill,
:where(.caph-root) .caph-mar-stale-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--px-font);
  white-space: nowrap;
  cursor: pointer;
}
:where(.caph-root) .caph-mar-lock-pill {
  border: none;
  background: var(--px-text-primary);
  color: var(--px-bg-card);
}
:where(.caph-root) .caph-mar-lock-pill::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: caph-generate-spin .7s linear infinite;
}
:where(.caph-root) .caph-mar-lock-pill:hover { opacity: 0.85; }
:where(.caph-root) .caph-mar-stale-text {
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--px-success) 12%, var(--px-bg-card));
  color: color-mix(in srgb, var(--px-success) 70%, var(--px-text-primary));
}
:where(.caph-root) .caph-mar-card-state[data-caph-mar-sig^="stale|Refresh needed"] .caph-mar-stale-text {
  background: var(--px-warning-bg);
  color: var(--px-warning-text);
}
:where(.caph-root) .caph-mar-stale-refresh {
  border: 1.5px solid var(--accent);
  background: var(--px-bg-card);
  color: var(--accent);
}
:where(.caph-root) .caph-mar-stale-refresh:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--px-bg-card));
}
/* Details, MAR history and the "Print individual tokens" picker are
   one overlay family: the backdrop, the card chrome, the heading and the
   footer buttons are written once here, and each modal adds below only
   what makes it itself. */
:where(.caph-root) .caph-pd-overlay,
:where(.caph-root) .caph-sp-overlay,
:where(.caph-root) .caph-mh-overlay {
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 90;
  align-items: center;
  justify-content: center;
}
/* Designer gate, split out of the rule above (see the header). The hide and
   the fixed positioning travel together: on the canvas three full-viewport
   backdrops would bury every other named block, and static is what makes the
   three modals editable in flow. `.open` below is a class heavier, so runtime
   is unchanged. */
:where(.caph-root.caph-live) .caph-pd-overlay,
:where(.caph-root.caph-live) .caph-sp-overlay,
:where(.caph-root.caph-live) .caph-mh-overlay {
  display: none;
  position: fixed;
}
:where(.caph-root) .caph-pd-overlay.open,
:where(.caph-root) .caph-sp-overlay.open,
:where(.caph-root) .caph-mh-overlay.open {
  display: flex;
}
:where(.caph-root) .caph-pd-modal,
:where(.caph-root) .caph-sp-modal,
:where(.caph-root) .caph-mh-modal {
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow-md);
  padding: 22px 26px;
  border-top: 6px solid var(--accent);
  font-family: var(--px-font);
}
:where(.caph-root) .caph-pd-modal { width: min(520px, calc(100vw - 40px)); }
:where(.caph-root) .caph-pd-modal h3,
:where(.caph-root) .caph-sp-modal h3,
:where(.caph-root) .caph-mh-modal h3 { margin: 0 0 2px; color: var(--px-text-primary); font-size: 16px; }
:where(.caph-root) .caph-pd-patient {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-muted);
  margin: 0 0 12px;
}
:where(.caph-root) .caph-pd-field { margin-bottom: 10px; }
:where(.caph-root) .caph-pd-field label {
  display: block;
  font-size: 12px;
  color: var(--px-text-secondary);
  margin-bottom: 3px;
}
:where(.caph-root) .caph-pd-field input,
:where(.caph-root) .caph-pd-field 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-input-bg, var(--px-bg-card));
  color: var(--px-text-primary);
  box-sizing: border-box;
}
:where(.caph-root) .caph-pd-field textarea { min-height: 56px; resize: vertical; }
:where(.caph-root) .caph-pd-field input:focus,
:where(.caph-root) .caph-pd-field textarea:focus { border-color: var(--px-info); outline: none; }
:where(.caph-root) .caph-pd-actions,
:where(.caph-root) .caph-sp-actions,
:where(.caph-root) .caph-mh-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
:where(.caph-root) .caph-pd-cancel,
:where(.caph-root) .caph-sp-cancel,
:where(.caph-root) .caph-mh-close {
  padding: 6px 14px;
  border-radius: var(--px-radius-sm);
  font-size: .8rem;
  font-family: var(--px-font);
  cursor: pointer;
  border: 1.5px solid #aaa;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
}
:where(.caph-root) .caph-pd-cancel:hover,
:where(.caph-root) .caph-sp-cancel:hover,
:where(.caph-root) .caph-mh-close:hover { border-color: var(--accent); color: var(--accent); }
:where(.caph-root) .caph-pd-save,
:where(.caph-root) .caph-sp-confirm {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: var(--px-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
}
:where(.caph-root) .caph-pd-save:hover:not(:disabled),
:where(.caph-root) .caph-sp-confirm:hover:not(:disabled) { background: var(--accent-hover); }
/* The two disabled states are deliberately different: Save is disabled
   BECAUSE it is saving, Print selected because nothing is ticked. */
:where(.caph-root) .caph-pd-save:disabled { opacity: .6; cursor: wait; }
:where(.caph-root) .caph-sp-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* --- "Print individual tokens" picker: only what the shared overlay
   rules above do not already say ------------------------------------ */
:where(.caph-root) .caph-sp-modal,
:where(.caph-root) .caph-mh-modal {
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}
:where(.caph-root) .caph-sp-modal { width: min(680px, calc(100vw - 40px)); }
:where(.caph-root) .caph-sp-subtitle {
  font-size: 12px;
  color: var(--px-text-muted);
  margin: 0 0 12px;
}
:where(.caph-root) .caph-sp-selectall {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--px-text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--px-border);
}
:where(.caph-root) .caph-sp-list { overflow-y: auto; flex: 1 1 auto; }
:where(.caph-root) .caph-sp-group {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--px-bg-card);
  padding: 8px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--px-text-primary);
}
:where(.caph-root) .caph-sp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0 6px 12px;
  border-bottom: 1px solid var(--px-border);
}
:where(.caph-root) .caph-sp-row.caph-sp-blocked { opacity: .55; }
:where(.caph-root) .caph-sp-body { flex: 1 1 auto; min-width: 0; }
:where(.caph-root) .caph-sp-token {
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-text-primary);
}
:where(.caph-root) .caph-sp-line {
  font-size: 12.5px;
  color: var(--px-text-secondary);
  margin-top: 2px;
}
/* Stopped lines are GREYED, never struck through — they still print
   on the physical token, so nothing may read as removed. */
:where(.caph-root) .caph-sp-line.caph-sp-stopped { color: var(--px-text-muted); }
:where(.caph-root) .caph-sp-chip {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--px-font);
  font-size: 0.68rem;
  border: 1px solid var(--px-border-strong);
  color: var(--px-text-muted);
  white-space: nowrap;
}
:where(.caph-root) .caph-sp-empty { padding: 18px 0; }
:where(.caph-root) .caph-sp-empty p { margin: 0; font-size: 12.5px; color: var(--px-text-secondary); }
:where(.caph-root) .caph-sp-empty-lead {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--px-text-primary) !important;
  margin-bottom: 4px !important;
}

:where(.caph-root) .caph-mh-modal { width: min(820px, calc(100vw - 40px)); }
:where(.caph-root) .caph-mh-modal h3 { margin-bottom: 14px; }
:where(.caph-root) .caph-mh-table-wrap { overflow: auto; }
:where(.caph-root) .caph-mh-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--px-text-primary);
  font-size: 12.5px;
}
:where(.caph-root) .caph-mh-table th,
:where(.caph-root) .caph-mh-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--px-border);
  text-align: left;
  white-space: nowrap;
}
:where(.caph-root) .caph-mh-table th {
  color: var(--px-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}
:where(.caph-root) .caph-mh-download {
  border: 1.5px solid var(--accent);
  border-radius: var(--px-radius-sm);
  padding: 5px 10px;
  background: var(--px-bg-card);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
:where(.caph-root) .caph-mh-download:hover { background: var(--px-bg-soft); }
:where(.caph-root) .caph-mh-empty {
  padding: 18px 10px;
  color: var(--px-text-secondary);
  text-align: center;
}
/* --- bottom-pinned action bar = REAL .mar-generate-bar -------------- */
:where(.caph-root) .caph-generate-bar {
  position: sticky;
  bottom: 0;
  background: var(--px-bg-card);
  border-top: 1px solid var(--px-border);
  padding: 10px 24px;
  align-items: center;
  gap: 12px;
  z-index: 10;
  border-radius: 0 0 var(--px-radius) var(--px-radius);
  flex-wrap: wrap;
}
/* Designer gate, split out of the rule above (see the header). caphSetBar adds
   `.visible` at runtime, one class heavier than this, so the bar behaves
   exactly as it did; on the canvas the bar and its `sheet_options` block stay
   visible and editable, flowing as a block rather than a flex row. */
:where(.caph-root.caph-live) .caph-generate-bar { display: none; }
:where(.caph-root) .caph-generate-bar.visible { display: flex; }
:where(.caph-root) .caph-gen-date-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--px-text-secondary);
}
:where(.caph-root) .caph-gen-date-group input[type="date"] {
  padding: 4px 8px; border: 1.5px solid #aaa; border-radius: var(--px-radius-sm);
  background: var(--px-input-bg, var(--px-bg-card)); color: var(--px-text-primary);
  font-family: var(--px-font); font-size: 12px;
}
:where(.caph-root) .caph-gen-date-group input[type="date"]:focus { border-color: var(--accent); outline: none; }
:where(.caph-root) .caph-generation-input-invalid,
:where(.caph-root) .caph-edit-details-btn.ca-uxflag-invalid {
  outline: 2px solid #dc2626 !important;
  outline-offset: 2px;
  background: #fef2f2 !important;
}
:where(.caph-root) .caph-gen-date-group input[type="number"] {
  width: 50px; padding: 4px 6px; border: 1.5px solid #aaa; border-radius: var(--px-radius-sm);
  background: var(--px-input-bg, var(--px-bg-card)); color: var(--px-text-primary);
  font-family: var(--px-font); font-size: 12px; text-align: center;
}
/* RS5 (S8 ruling 2026-07-18): the date range feeds MAR generation and
   robot job windows only — homes with neither (non-tray eMAR /
   config-less) show no date cluster at all. */
:where(.caph-root) .caph-date-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
:where(.caph-root) .caph-date-cluster[hidden] { display: none; }
:where(.caph-root) .caph-gen-spacer { flex: 1; }
:where(.caph-root) .caph-sheet-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* RS4 (S8 ruling 2026-07-18): the author display:flex above outranks
   the UA [hidden] rule, so caphSetSheetOptions' group.hidden was
   visually a no-op — eMAR/config-less homes still showed the ticks. */
:where(.caph-root) .caph-sheet-options[hidden] { display: none; }
:where(.caph-root) .caph-sheet-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--px-text-primary);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
:where(.caph-root) .caph-sheet-option input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent);
}
:where(.caph-root) .caph-filter-hint {
  flex-basis: 100%;
  font-size: 0.72rem;
  font-family: var(--px-font);
  color: var(--ch-warning, #d97706);
  text-align: right;
  display: none;
}
:where(.caph-root) .caph-cycle-stale-note {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
}
:where(.caph-root) .caph-btn-generate {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: var(--px-radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
:where(.caph-root) .caph-btn-generate:hover { background: var(--accent-hover); }
@keyframes caph-generate-spin { to { transform: rotate(360deg); } }
:where(.caph-root) .caph-btn-generate:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  border: 1.5px solid var(--px-border);
  opacity: 1;
  cursor: not-allowed;
}
/* monthly-token variant (mockup .btn-gen.monthly — the estate's
   monthly-mode strong amber) */
:where(.caph-root) .caph-btn-generate.monthly { background: var(--px-mode-monthly-strong, #b45309); }
:where(.caph-root) .caph-btn-generate.monthly:hover { background: #92400e; }
:where(.caph-root) .caph-btn-generate.monthly:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
}
/* Blocked-but-pressable: a ticked row fails a red-box validator, so
   the button reads disabled (muted disabled palette) with a red
   outline accent, yet stays clickable so the press-time reveal pass
   can red-box + scroll to the offending row. */
:where(.caph-root) .caph-btn-generate.caph-blocked {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  border: 1.5px solid #dc2626;
  opacity: .6;
  cursor: pointer;
}

/* MONTHLY PROCESSING button (plan §A). Same shape as its siblings;
   the ACTIVE state is the prototype's green, which is the one thing on
   this bar that says "this home prints itself every morning" — amber
   would read as just another token button. */
:where(.caph-root) .caph-monthly-btn { background: var(--px-mode-monthly-strong, #b45309); }
:where(.caph-root) .caph-monthly-btn:hover { background: #92400e; }
:where(.caph-root) .caph-monthly-btn.caph-monthly-active { background: #1a9d5a; }
:where(.caph-root) .caph-monthly-btn.caph-monthly-active:hover { background: #147d47; }
:where(.caph-root) .caph-monthly-btn:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
}
/* RS3 (S8 ruling 2026-07-18): the monthly button is the Print tokens
   button's whole-home twin — one bordered cluster so the pairing is
   unambiguous; ⚡ and the other actions sit clearly outside it. */
:where(.caph-root) .caph-token-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-radius-sm);
  flex: 0 0 auto;
}

/* AU.10.1 "not printed" row badge — SUBTLE muted chip in the dep
   row header, consistent with the .mar-cf-badge chip family. Host
   chrome: injected/removed by caphSetItemState, PHI-free static
   copy. */
:where(.caph-root) .caph-token-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--px-border);
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
}
:where(.caph-root) .caph-stopped-by-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--px-danger-border, #fecaca);
  background: var(--px-danger-bg, #fef2f2);
  color: var(--px-danger-text, #991b1b);
  white-space: nowrap;
  margin-left: 6px;
  vertical-align: middle;
}

/* blockers chip = estate review-pill/warning tokens (mockup
   .blockers-chip) */
:where(.caph-root) .caph-blockers-chip {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--ch-warning-bg, #fef3c7);
  border: 1px solid var(--ch-warning-border, #fcd34d);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--ch-warning, #92400e);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--px-font);
}
:where(.caph-root) .caph-blockers-chip.visible { display: inline-flex; }
:where(.caph-root) .caph-blockers-pop {
  display: none;
  position: absolute;
  bottom: 54px;
  left: 24px;
  max-width: 520px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-md);
  padding: 10px 14px;
  z-index: 30;
  font-size: 12.5px;
}
:where(.caph-root) .caph-blockers-pop.open { display: block; }
:where(.caph-root) .caph-blockers-pop h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--px-text-muted);
}
:where(.caph-root) .caph-blocker-row {
  padding: 4px 0;
  border-bottom: 1px dashed var(--px-border);
  color: var(--px-text-secondary);
}
:where(.caph-root) .caph-blocker-row:last-child { border-bottom: none; }
:where(.caph-root) .caph-blocker-row b { color: var(--px-text-primary); }
:where(.caph-root) .caph-blocker-row .why { color: var(--ch-warning, #92400e); }
/* R202: the live count for the current resident filter when no red box is on screen. */
:where(.caph-root) .caph-offscreen-note {
  background: var(--ch-warning-bg, #fef3c7);
  border: 1px solid var(--ch-warning-border, #fcd34d);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--ch-warning, #92400e);
  align-self: center;
  margin-left: 6px;
}
:where(.caph-root) .caph-offscreen-note[hidden] { display: none; }
:where(.caph-root) .caph-bar-note {
  font-size: 11.5px;
  color: var(--px-text-muted);
  font-style: italic;
  margin-left: auto;
  white-space: nowrap;
}
/* AU.13.1 Tab-2 bulk classification: the same ticked/current-filter
   scope and visual language as Tab 1's batch bar. */
:where(.caph-root) .caph-bulk-classify {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.caph-root) .caph-bulk-classify[hidden] { display: none; }
:where(.caph-root) .caph-bulk-class-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--px-text-secondary);
}
:where(.caph-root) .caph-btn-classify-acute,
:where(.caph-root) .caph-btn-classify-monthly {
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: var(--px-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  font-family: var(--px-font);
  cursor: pointer;
}
:where(.caph-root) .caph-btn-classify-acute {
  background: var(--px-mode-acute-strong);
}
:where(.caph-root) .caph-btn-classify-acute:hover:not(:disabled) {
  background: var(--px-mode-acute-strong-hover);
}
:where(.caph-root) .caph-btn-classify-monthly {
  background: var(--px-mode-monthly-strong);
}
:where(.caph-root) .caph-btn-classify-monthly:hover:not(:disabled) {
  background: var(--px-mode-monthly-strong-hover);
}
:where(.caph-root) .caph-btn-classify-acute:disabled,
:where(.caph-root) .caph-btn-classify-monthly:disabled {
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  border: 1.5px solid var(--px-border);
  cursor: not-allowed;
}
:where(.caph-root) .caph-refresh-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 0 var(--px-space-md) 0;
  border-radius: var(--px-radius-sm);
  font-size: .85rem;
  background: var(--px-warning-bg);
  color: var(--px-warning-text);
}