/* ===== ca_screen_queue_html (HTML form, scoped) =====
   Clinical Approvals Tab 1, the Outstanding screen queue. Every rule comes
   from the form's old <style> block. Unscoping this file, folding the one
   designer-gated rule back into the rule it was split out of, and pasting the
   twelve bulk-pair blocks that moved to clinical_approvals.css back where they
   came from reproduces that block line for line: nothing is added and nothing
   is dropped.

   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPE IS THE FORM ROOT, .ca-sq-root. The section shell slots this form once
   into its Outstanding 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.

   .ca-sq-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:
   `position: relative` anchors the absolute .px-loading-overlay and the
   min-height is the pane's own, both exactly as before.

   TWELVE BLOCKS ARE NOT HERE. The bulk ACUTE/MONTHLY pair renders in TWO
   scopes — inside these cards and inside the meds profile panel, which passes
   `prefix: 'meds'` into the one shared builder — so its rules live in
   theme/assets/clinical_approvals/clinical_approvals.css scoped
   :where(.ca-page), the one ancestor both roots share. That includes
   `button[data-ca-sq-patient-bulk], button[data-ca-sq-meds-bulk]`, which ties
   at (0,1,1) with `.ca-sq-bulk-classify button` and therefore has to stay on
   the same side of the split AND after it: clinical_approvals.css head-links
   after this file, so splitting the pair would flip the winner.

   NOTHING HERE IS DOUBLED. The sixteen selectors leading with
   .ca-sq-editor-mount and the two .px-badge.ca-sq-candidate-cluster rules are
   the only ones reaching a shared .mar-*, .pxm-* or .px-* name, and each
   already carries an id-free second class on the subject that outranks the
   theme the dependency appends to <head> at startup after every link.
   Audited selector by selector; there is no tie to break. Two comments in
   this file already record where the move from a body block to a head link
   cost a rule its document-order win and the rule was left to win on
   specificity instead (the `:last-child` border and the 769px padding).

   DESIGNER GATE on `.ca-sq-root.ca-sq-live` (guide step 4). ONE hide in this
   asset hides something the designer must show: `.ca-sq-staging`, the mount
   div the ca_sq_staging slot sits in. Ungated, that slot's dropzone measures
   0x0 on the canvas and staff have nothing to aim at. `__init__.py` adds
   `ca-sq-live` to the form root while the form is still detached, so at
   runtime the hide applies from before the first paint exactly as the
   unconditional rule it was split out of did, and it never comes off: the
   section shell tears this form down while its DOM is still attached, so
   removing the class in the teardown would reveal the staging mount for the
   rest of the navigation. The designer runs no Python, which is what leaves
   the canvas showing that dropzone.

   Every other hide is either an attribute the markup already carried
   (`[hidden]` on the remaining strip, the cap strip and
   the unassigned-patients alert,
   which the designer canvas hides the same way) or a rule naming DOM Python
   builds rather than the template (the card body, the dependency's own row
   controls).

   @keyframes ca-sq-shimmer is already form-prefixed and unique in the app, so
   it carries across unrenamed. No url() and no @font-face here.
*/
/* ==================================================================
   Clinical Approvals — Tab 1 Screen Queue (U1/U5/AT.3/AR.2).
   T.17: styles derive from px-internal's REAL conventions — the card
   chrome mirrors the estate card + the v3 FINAL mockup (.card/.card-h),
   .px-badge geometry comes from theme.css (only the classification /
   provenance variants are added here), the filter chips are the
   mockup .fchip, buttons keep .mar-btn-generate / .mar-draft-btn
   geometry, and the batch bar mirrors the estate's bottom action bars
   (.mar-generate-bar family).
   ================================================================== */
.ca-sq-root {
  font-family: var(--px-font);
  position: relative;      /* anchors the absolute px-loading-overlay */
  min-height: 220px;
}

/* --- filter chips (T.6, default All — U5) -------------------------- */
:where(.ca-sq-root) .ca-sq-filters {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
:where(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-fchip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
:where(.ca-sq-root) .ca-sq-fchip .n { opacity: .8; font-size: 11px; }

:where(.ca-sq-root) .ca-sq-acute-filter { display: inline-flex; }
:where(.ca-sq-root) .ca-sq-acute-rules {
  visibility: hidden;
  position: absolute;
  /* Anchor below the chip even when the filter strip wraps. */
  align-self: flex-end;
  transform: translateY(100%);
  left: 0;
  width: min(680px, 100%);
  box-sizing: border-box;
  overflow: auto;
  z-index: 20;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-md);
  padding: 8px;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
:where(.ca-sq-root) .ca-sq-acute-filter:hover .ca-sq-acute-rules,
:where(.ca-sq-root) .ca-sq-acute-filter:focus-within .ca-sq-acute-rules {
  visibility: visible;
}
:where(.ca-sq-root) .ca-sq-acute-rules table {
  width: 100%;
  border-collapse: collapse;
}
:where(.ca-sq-root) .ca-sq-acute-rules th,
:where(.ca-sq-root) .ca-sq-acute-rules td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--px-border);
  vertical-align: top;
}
:where(.ca-sq-root) .ca-sq-acute-rules th {
  color: var(--px-text-primary);
  font-weight: 600;
}
:where(.ca-sq-root) .ca-sq-acute-rules th[scope="row"] { width: 28%; }
:where(.ca-sq-root) .ca-sq-acute-rules tbody tr:last-child > * { border-bottom: 0; }

/* --- section headers (mockup h2.sec) -------------------------------- */
:where(.ca-sq-root) .ca-sq-sec {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--px-text-muted);
  margin: 22px 0 8px;
  font-weight: 600;
}
:where(.ca-sq-root) .ca-sq-cards {
  height: calc(100vh - 310px);
  min-height: 420px;
  max-height: 900px;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}
:where(.ca-sq-root) .ca-sq-skeleton {
  min-height: 104px;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  background: var(--px-bg-card);
  box-shadow: var(--px-shadow);
  pointer-events: none;
  user-select: none;
}
:where(.ca-sq-root) .ca-sq-skeleton-bar {
  width: 72%;
  height: 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--px-text-muted) 18%, transparent) 0%,
    color-mix(in srgb, var(--px-text-muted) 34%, transparent) 50%,
    color-mix(in srgb, var(--px-text-muted) 18%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: ca-sq-shimmer 1.4s ease-in-out infinite;
}
:where(.ca-sq-root) .ca-sq-skeleton-bar.is-short {
  width: 38%;
}
:where(.ca-sq-root) .ca-sq-skeleton-bar.is-wide {
  width: 88%;
  margin-bottom: 0;
}
@keyframes ca-sq-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.ca-sq-root) .ca-sq-skeleton-bar { animation: none; }
}

/* --- patient cards (estate card chrome) ----------------------------- */
:where(.ca-sq-root) .ca-sq-card {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  margin-bottom: 14px;
}
:where(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-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)));
}
:where(.ca-sq-root) .ca-sq-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--px-border);
  flex-wrap: wrap;
  cursor: pointer;
  /* Sticky patient-name anchoring (owner ruling 2026-07-21): the
     header pins to the top of the .ca-sq-cards scroll viewport while
     any of this patient's card content is visible; the card is the
     sticky containing block, so the bar pushes up naturally when the
     card's bottom meets it (classic sticky-section push-up). Pure
     CSS — PXVIRT slots are normal-flow (height spacers, no
     transforms), so no scroll JS is involved. The opaque background
     (tint variants below) keeps rows from showing through. */
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--px-bg-card);
  border-radius: var(--px-radius) var(--px-radius) 0 0;
}
:where(.ca-sq-root) .ca-sq-card.ca-card-approved .ca-sq-card-h {
  background: color-mix(in srgb, var(--px-mode-acute-strong) 6%, var(--px-bg-card));
}
:where(.ca-sq-root) .ca-sq-card.ca-card-has-query .ca-sq-card-h {
  background: var(--ch-warning-bg,
    color-mix(in srgb, var(--px-warning) 10%, var(--px-bg-card)));
}
:where(.ca-sq-root) .ca-sq-card.is-collapsed .ca-sq-card-h { border-bottom: 0; }
:where(.ca-sq-root) .ca-sq-collapse {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--px-radius-sm);
  background: transparent;
  color: var(--px-text-muted);
  cursor: pointer;
  font-family: var(--px-font);
  font-size: 12px;
}
:where(.ca-sq-root) .ca-sq-collapse:hover { background: var(--px-bg-subtle, var(--px-bg-card)); }
:where(.ca-sq-root) .ca-sq-collapse .ca-sq-chevron {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .15s ease;
}
:where(.ca-sq-root) .ca-sq-card.is-collapsed .ca-sq-collapse .ca-sq-chevron {
  transform: rotate(0deg);
}
:where(.ca-sq-root) .ca-sq-pname { font-weight: 700; font-size: 14.5px; color: var(--px-text-primary); }
:where(.ca-sq-root) .ca-sq-meta { font-size: 12px; color: var(--px-text-muted); }
:where(.ca-sq-root) .ca-sq-card-summary {
  font-size: 11.5px;
  color: var(--px-text-muted);
  white-space: nowrap;
}
:where(.ca-sq-root) .ca-sq-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
:where(.ca-sq-root) .px-badge.ca-sq-candidate-cluster {
  background: var(--px-warning-bg);
  border: 1px solid var(--px-warning-border);
  color: var(--px-warning-text);
}
:where(.ca-sq-root) .px-badge.ca-sq-candidate-cluster.has-high-priority {
  background: var(--px-danger-bg);
  border-color: var(--px-danger-border);
  color: var(--px-danger-text);
}
:where(.ca-sq-root) .ca-sq-card-body[hidden] { display: none !important; }
:where(.ca-sq-root) .ca-sq-tick-l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--px-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
:where(.ca-sq-root) .ca-sq-cardtick {
  width: 19px;
  height: 19px;
  accent-color: var(--accent);
  cursor: pointer;
}
:where(.ca-sq-root) .ca-sq-cardtick:disabled { cursor: not-allowed; }
:where(.ca-sq-root) .ca-sq-cardtick.ca-approval-invalid {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #fef2f2;
}
:where(.ca-sq-root) .ca-sq-editor-mount { padding: 2px 8px; }
/* Per-script mini header + enclosed group block (owner ruling
   2026-07-20, iterated): each script group inside a patient card is
   ONE rounded block — an accent border down the LEFT that wraps onto
   the header (top) and the last row (bottom) with rounded corners,
   content padded clear of the bar, and a gap before the next group.
   Real borders (not an inset shadow) so the frame can curve corners;
   row vertical margins are neutralised so the side walls stay
   continuous regardless of the dep's own row spacing. */
:where(.ca-sq-root) .ca-sq-script-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 5px 12px;
  color: var(--px-text-secondary);
  font-family: var(--px-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-bottom: 0;
  border-radius: var(--px-radius) var(--px-radius) 0 0;
  box-sizing: border-box;
}
:where(.ca-sq-root) .ca-sq-script-group-ref { color: var(--px-text-primary); }
:where(.ca-sq-root) .ca-sq-script-group-etp { color: var(--accent); font-weight: 800; }
/* Round 2 (owner ruling 2026-07-21): the state badge sits directly
   BESIDE the ETP marker ("<ref> - ETP [badge]"), not at the far end
   of the header — no margin-left:auto push. */
:where(.ca-sq-root) .ca-sq-group-state {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid;
  border-radius: 999px;
  font-family: var(--px-font);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
:where(.ca-sq-root) .ca-sq-group-printed {
  border-color: var(--px-info);
  background: color-mix(in srgb, var(--px-info) 9%, transparent);
  color: var(--px-info);
}
/* Returning-state colour modifier for the shared chip layout. */
:where(.ca-sq-root) .ca-sq-group-returning {
  border-color: var(--px-warning);
  background: color-mix(in srgb, var(--px-warning) 12%, transparent);
  color: var(--px-warning);
}
/* Optimistic (pre-firm) badge variant reads as in-progress. */
:where(.ca-sq-root) .ca-sq-group-pending { font-style: italic; opacity: .85; }
/* Group side walls: every row of the script carries the left accent
   bar + a hairline right edge; content is inset clear of the bar.
   A 1px bottom margin breaks the accent bar into a per-row SEGMENT
   (owner ruling 2026-07-20 addendum): consecutive med rows nearly meet
   and leave a crisp 1px separation tick instead of one continuous
   stroke. The last row overrides this to the inter-group gap below. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-grouped-row,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-grouped-row {
  border-left: 3px solid var(--accent);
  border-right: 1px solid var(--accent);
  margin-top: 0;
  margin-bottom: 1px;
  box-sizing: border-box;
}
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-grouped-row { padding-left: 9px; }
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-grouped-row { padding-left: 6px; }
/* Bottom of the block: the last row closes the frame, rounds off, and
   leaves the gap before the next group. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-group-last,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-group-last {
  border-bottom: 1px solid var(--accent);
  border-radius: 0 0 var(--px-radius) var(--px-radius);
  margin-bottom: 14px;
}
/* Keeps the final row borderless exactly as today, now that the
   editor's sheet loads from <head> and its equal-specificity
   `.pxm-med-rows .mar-item-row:last-child { border-bottom: none }` no
   longer wins on document order. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-group-last:last-child { border-bottom: none; }
/* Hold the embedded bulk-select clear of the left accent bar. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-grouped-row .ca-ccr-embedded .ca-ccr-select-l {
  left: 6px;
}
/* R1 (owner smoke 21/07): state groups carry a THICKER, state-coloured
   left bar - blue while the token is printing/printed, warning-brown
   while returning - matching the badge colours, so the prescription's
   state reads from the frame itself. Padding compensates the extra
   2px so row content does not shift. */
:where(.ca-sq-root) .ca-sq-script-group-h[data-ca-sq-state="printed"],
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-printed,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-printed {
  border-left: 5px solid var(--px-info);
}
:where(.ca-sq-root) .ca-sq-script-group-h[data-ca-sq-state="returning"],
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-returning,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-returning {
  border-left: 5px solid var(--px-warning);
}
:where(.ca-sq-root) .ca-sq-script-group-h[data-ca-sq-state="printed"],
:where(.ca-sq-root) .ca-sq-script-group-h[data-ca-sq-state="returning"] { padding-left: 10px; }
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-printed,
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-returning { padding-left: 7px; }
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-printed,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-returning { padding-left: 4px; }
/* Group state tint (owner ruling 2026-07-20): a subtle full-row wash so
   EVERY row of a printed / returning script reads its state, matching
   the badge in the mini header. Returning outranks printed (set in JS).
   Subtle enough not to fight the approved-row / query tints. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-printed,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-printed {
  background: color-mix(in srgb, var(--px-info) 6%, transparent);
}
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-sq-row-returning,
:where(.ca-sq-root) .ca-sq-queries [data-ca-sq-rail-pid].ca-sq-row-returning {
  background: color-mix(in srgb, var(--px-warning) 8%, transparent);
}
/* Fully-inline row merge (owner ruling 2026-07-15): the dep's own
   row tick + approve chrome is HIDDEN on Tab 1 — the projected
   clinical-check strip carries the row's ONE select checkbox and
   ONE explicit ✓ Approve affordance. The dep still tracks its
   internal tick state (NC-1 edit-approves rides x-field-change). */
:where(.ca-sq-root) .ca-sq-editor-mount [data-med-check] { display: none !important; }
:where(.ca-sq-root) .ca-sq-editor-mount .pxm-approve-btn { display: none !important; }
/* Row-start bulk select (owner ruling 2026-07-16): the 15/07 inline
   merge put the rail in the dep row's LAST host slot. Keep the select
   label INSIDE that rail: the dep's _renderAll rebuild restores ONLY
   [data-row-host-slot] content, so reparenting it beside the drug name
   would lose it on the next dep re-render. Position it visually from
   the preserved slot against the enclosing row instead. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row:has(.ca-ccr-embedded .ca-ccr-select-l) {
  position: relative;
}
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row:has(.ca-ccr-embedded .ca-ccr-select-l) .mar-item-header {
  padding-left: 56px;
  box-sizing: border-box;
}
:where(.ca-sq-root) .ca-sq-editor-mount .ca-ccr-embedded .ca-ccr-select-l {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 1;
}
/* min-width, not unconditional: the dependency's own mobile block sets
   padding-left: 0 on this element below 769px, and its stylesheet is
   injected into <head>, so it does not come later in the document. Scoping
   this rule keeps the rendering right at every width. */
@media (min-width: 769px) {
  :where(.ca-sq-root) .ca-sq-editor-mount .mar-item-edit { padding-left: 22px; }
}
:where(.ca-sq-root) .ca-sq-editor-mount [data-field-name="converted_instruction"].ca-approval-invalid,
:where(.ca-sq-root) .ca-sq-editor-mount .mar-schedule-row.ca-approval-invalid {
  border: 2px solid #dc2626 !important;
  background: #fef2f2 !important;
  color: #7f1d1d;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .12);
}
/* Non-gating regimen nudge: amber is deliberately distinct from the
   red .ca-approval-invalid clinical approval gates above. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-schedule-row.ca-rounds-nudge {
  border-radius: var(--px-radius-sm);
  padding-top: 4px;
  padding-right: 6px;
  padding-bottom: 4px;
}
/* border and background carry their own rule so the red PRN
   round-time error still wins on a nudged row. The editor's sheet is
   injected into <head>, ahead of this block, so its equal-specificity
   (0,3,0) `.pxm-med-rows .mar-schedule-row.mk-prn-invalid` does not
   win on document order, and the amber nudge would mask an invalid
   round time. Both classes land on the SAME element: the editor sets
   mk-prn-invalid on a .mar-schedule-row, and caSqSetItemState toggles
   ca-rounds-nudge on the same node. Radius and padding stay above so
   the nudged-and-invalid row keeps today's geometry. */
:where(.ca-sq-root) .ca-sq-editor-mount .mar-schedule-row.ca-rounds-nudge:not(.mk-prn-invalid) {
  border: 1.5px solid var(--ch-warning-border, var(--px-warning));
  background: var(--ch-warning-bg,
    color-mix(in srgb, var(--px-warning) 10%, transparent));
}
:where(.ca-sq-root) .ca-sq-editor-mount .mar-item-row.ca-approved-row {
  background: color-mix(in srgb, var(--px-mode-acute-strong) 8%, transparent);
}
/* Query rails remain structurally separate because parked items leave
   the editor; whole-card tint is the presentation signal. */

/* --- W3: client-side search over the loaded cards ------------------ */
:where(.ca-sq-root) .ca-sq-search {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  padding: 5px 10px;
  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: 12.5px;
}
:where(.ca-sq-root) .ca-sq-search:focus { border-color: var(--accent); outline: none; }

/* --- Tab-1 home picker (owner 2026-08-15) ---------------------------
   A type-search combo, styled to Tab 2's caph-home-* picker so the two
   tabs' home controls read as one control. */
:where(.ca-sq-root) .ca-sq-home-combo { position: relative; }
:where(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-home-input:focus { border-color: var(--accent); outline: none; }
:where(.ca-sq-root) .ca-sq-home-input:disabled {
  color: var(--px-text-secondary);
  background: var(--px-bg-elevated);
  cursor: progress;
}
:where(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-home-clear:hover { color: var(--px-text-primary); }
:where(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-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(.ca-sq-root) .ca-sq-home-panel .opt:hover,
:where(.ca-sq-root) .ca-sq-home-panel .opt.active { background: var(--px-bg-elevated); }
:where(.ca-sq-root) .ca-sq-home-panel .none {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--px-text-secondary);
  font-style: italic;
}
:where(.ca-sq-root) .ca-sq-summary {
  font-size: 11.5px;
  color: var(--px-text-muted);
  white-space: nowrap;
}

/* --- R4a queue-window cutoff ("Scripts from last N days") ----------- */
:where(.ca-sq-root) .ca-sq-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
:where(.ca-sq-root) .ca-sq-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
:where(.ca-sq-root) .ca-sq-top-btn {
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  padding: 5px 9px;
  font-family: var(--px-font);
  font-size: 11.5px;
  cursor: pointer;
}
:where(.ca-sq-root) .ca-sq-top-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
:where(.ca-sq-root) .ca-sq-dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--px-border-strong));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  font-weight: 700;
}
:where(.ca-sq-root) .ca-sq-dock-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
:where(.ca-sq-root) .ca-sq-cutoff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-family: var(--px-font);
  color: var(--px-text-secondary);
}
:where(.ca-sq-root) .ca-sq-cutoff input[type="number"] {
  width: 56px;
  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;
}
:where(.ca-sq-root) .ca-sq-cutoff input[type="number"]:focus { border-color: var(--accent); outline: none; }

:where(.ca-sq-root) .ca-sq-toolbar-spacer { flex: 1; }
/* Flashes so it is seen from across the room, and reads as an alert
   rather than as one more filter pill beside it. The number does NOT
   flash - it is read, not signalled. */
:where(.ca-sq-root) .ca-sq-unassigned-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--px-danger);
  border-radius: 999px;
  font-family: var(--px-font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  animation: caSqUnassignedFlash 1s steps(1, end) infinite;
}

@keyframes caSqUnassignedFlash {
  0%   { background: var(--px-danger); color: #fff; }
  50%  { background: transparent; color: var(--px-danger); }
}

/* Shape, radius and colour come from the shared .px-badge this screen
   already wears four times; only the alert colour and a floor width so
   a single digit does not read as a dot are ours. A second class, not a
   scope alone: the dependency's .px-badge is injected after every head
   link, so a bare (0,1,0) here would lose the background tie to it. */
:where(.ca-sq-root) .px-badge.ca-sq-unassigned-count {
  background: var(--px-danger);
  min-width: 18px;
  justify-content: center;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  :where(.ca-sq-root) .ca-sq-unassigned-btn {
    animation: none;
    background: var(--px-danger);
    color: #fff;
  }
}

/* Phase-7B C.4 ported admin-modal launchers — neutral outline
   buttons. */
:where(.ca-sq-root) .ca-sq-btn-manage,
:where(.ca-sq-root) #ca-sq-refusal-retry {
  padding: 6px 12px;
  border-radius: var(--px-radius-sm);
  font-size: .78rem;
  font-family: var(--px-font);
  cursor: pointer;
  border: 1.5px solid #aaa;
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
}
:where(.ca-sq-root) .ca-sq-btn-manage:hover { border-color: var(--accent); color: var(--accent); }

:where(.ca-sq-root) .ca-sq-empty {
  background: var(--px-bg-card);
  border: 1px dashed var(--px-border-strong);
  border-radius: var(--px-radius);
  padding: 26px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--px-text-muted);
  margin: 14px 0;
}

/* Load-failure panel above the cards, with Try again (D7); estate amber
   token (owner ruling 2026-07-15). */
:where(.ca-sq-root) .ca-sq-refusal {
  background: rgba(245, 158, 11, .10);   /* --px-warning @ 10% */
  border: 1.5px solid var(--px-warning);
  border-radius: var(--px-radius);
  padding: 18px 20px;
  font-size: 13.5px;
  color: var(--px-text-primary);
  margin: 0 0 10px;
}
:where(.ca-sq-root) .ca-sq-refusal .ca-sq-refusal-title {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--px-warning);
}
:where(.ca-sq-root) #ca-sq-refusal-retry {
  margin-left: 12px;
  border-color: var(--px-warning);
  color: var(--px-text-primary);
  font-weight: 600;
}
:where(.ca-sq-root) #ca-sq-refusal-retry:hover { background: var(--px-warning-wash); }
/* D7: the kept list while a days change loads. */
:where(.ca-sq-root) .ca-sq-cards.is-stale { opacity: .45; pointer-events: none; }

/* --- AT.3 batch action bar (px-internal batch pattern) -------------- */
:where(.ca-sq-root) .ca-sq-bulkbar {
  position: sticky;
  bottom: 0;
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--px-bg-card);
  border-top: 1px solid var(--px-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
  padding: 10px 24px;
  margin-top: 12px;
}
:where(.ca-sq-root) .ca-sq-bulk-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--px-text-secondary);
}
:where(.ca-sq-root) .ca-sq-btn-acute,
:where(.ca-sq-root) .ca-sq-btn-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(.ca-sq-root) .ca-sq-btn-acute { background: var(--px-mode-acute-strong); }
:where(.ca-sq-root) .ca-sq-btn-acute:hover { background: var(--px-mode-acute-strong-hover); }
:where(.ca-sq-root) .ca-sq-btn-monthly {
  background: var(--px-mode-monthly-strong);
}
:where(.ca-sq-root) .ca-sq-btn-monthly:hover { background: var(--px-mode-monthly-strong-hover); }
:where(.ca-sq-root) .ca-sq-bulk-note { font-size: 11.5px; color: var(--px-text-muted); margin-left: auto; }

/* components staged here before reparenting into their card mounts */
:where(.ca-sq-root.ca-sq-live) .ca-sq-staging { display: none; }
/* RS9 (owner S4a smoke: "like orange border or something"): the bulk-press
   spinner strip and the load progress line carry the estate amber tokens. */
:where(.ca-sq-root) .ca-sq-remaining-strip {
  margin: 0 0 10px;
  padding: 7px 10px;
  border: 1.5px solid var(--px-warning);
  border-radius: var(--px-radius-sm);
  background: rgba(245, 158, 11, .10);   /* --px-warning @ 10% */
  color: var(--px-text-primary);
  font-size: 12px;
  font-weight: 600;
}
:where(.ca-sq-root) .ca-sq-remaining-strip[hidden],
:where(.ca-sq-root) .ca-sq-unassigned-btn[hidden] { display: none; }
:where(.ca-sq-root) #ca-sq-applying-spinner { display: inline-block; width: 14px; height: 14px; margin: 0; border-width: 2px; }