/* ===== clinical_approvals_html (HTML form, scoped) =====
   The Clinical Approvals section shell: topbar, undo toast, tab bar, the two
   panes, the initial loading overlay and the meds dock. Every rule comes from
   the form's old <style> block. Unscoping this file and folding the two
   designer-gated rules back into the rules they were split out of reproduces
   that block line for line: nothing is added and nothing is dropped.

   Loaded eagerly from anvil.yaml native_deps.head_html, LAST of this section's
   links (alphabetically `clinical_approvals_html.css` sorts after every
   child's). Audited selector by selector against all six child assets: no
   shell rule TIES on specificity with a child rule, so the inverted order
   costs nothing. The only shell rules naming a child class are
   `.ca-page.ca-meds-open .ca-sq-dock-btn` and
   `.ca-page.ca-meds-open .caph-dock-btn` at (0,3,0), against those children's
   own (0,1,0) declarations. Nothing is doubled, and nothing here names a
   shared `px-`, `pxm-` or `mar-` class, so the dependency's runtime theme
   injection has no tie to win either.

   THE ROOT RULE IS `.ca-page` AND EVERY DECLARATION IN IT CARRIES ACROSS
   BYTE-IDENTICAL, `display: flex`, `height: 100vh` and `overflow: hidden`
   INCLUDED. The migration guide's screen-root rewrite ("minus min-height and
   the overflow declarations, plus position: relative and flex: 1 0 auto", and
   "a form root carries no overflow, height or position: fixed") is about a
   screen that is a flex item inside the shared drawer layout's scroller, which
   owns the scrolling. THIS SCREEN OWNS ITS OWN: `.ca-page` is a 100vh flex
   container holding two internal virtual scrollers, and the three RS25b rules
   below exist precisely to suppress every outer scroller. Strip `display:
   flex` and the meds dock stops opening - `.ca-main-col` and
   `.ca-meds-sheet-slot` are flex children sized against this element. Strip
   the height or the overflow and the screen collapses or double-scrolls.
   Nothing is added: no `flex: 1 0 auto`.

   The six custom properties stay ON THIS ELEMENT. The dependency reads
   `--pxm-accent` off the mount root by contract, and
   `_interactions.py::_portal_pattern_editor` copies all six off this node
   before moving the editor into `#px-modal-portal`. A class beats the
   dependency's `:root` default whatever the link order.

   SCOPING. Every selector that already leads with `.ca-page` stays BARE - most
   of this file - because `:where(.ca-page) .ca-page.ca-meds-open X` demands a
   `.ca-page` ancestor of a `.ca-page` element and never matches. Everything
   else is wrapped `:where(.ca-page)`, which adds zero specificity, so no tie
   changes hands. THREE RULES STAY BARE AND UNSCOPED because their subject is
   outside this section's root: `:root:has(#ca-page)`,
   `.anvil-m3-content:has(#ca-page)` and the `.root-content` rule.

   DESIGNER GATE on `.ca-page.ca-live` (guide step 4). TWO declarations in this
   asset hide something the designer must show, and both sit between staff and
   a slot dropzone:
     * `.ca-pane { display: none }` - the Outstanding pane holds the
       `ca_tab1_slot` dropzone, so ungated it measures 0x0 on the canvas.
       `.ca-pane.active { display: block }` at (0,2,0) still beats the gated
       hide at (0,1,0), exactly as it beat the unconditional one.
     * `.ca-meds-sheet-slot { flex: 0 0 0 }` - the dock holds the
       `ca_meds_sheet_slot` dropzone and is collapsed to zero width until the
       panel opens. The base rule carries the OPEN basis so the canvas shows a
       band to aim at; the gated rule collapses it at runtime, winning on
       document order at equal specificity, and
       `.ca-page.ca-meds-open .ca-meds-sheet-slot { flex-basis: ... }` at
       (0,2,0) still opens it.
   `__init__.py` adds `ca-live` to the form root while the form is still
   DETACHED, so at runtime both hides apply from before the first paint exactly
   as the unconditional declarations they were split out of did, and the class
   never comes off: `cleanup()` runs this form's teardown while its DOM is
   still attached, so removing the class there would reveal the Outstanding
   pane and open the dock for the rest of the navigation. The designer runs no
   Python, which is what leaves both bands visible on the canvas.

   Every other hide here is data-driven state the designer canvas hides the
   same way: `.ca-autosave`, `.ca-undo-toast` and the tab-count badge. The
   badge hides through the `ca-tab-count-empty` state class, which the module
   clears by REMOVING the class.
   `.ca-meds-dock-handle` is ungated: it is a 6px drag strip, not a slot mount
   and not an editable block, so there is nothing on the canvas to aim at.
*/

/* ==================================================================
   Clinical Approvals — orchestrator SHELL only (topbar + tabs + slots).
   Tab content, queue cards, strips and the bottom action bar are owned
   by the child packages (ca_screen_queue_html / ca_per_home_view_html).
   T.17: every style derives from px-internal's real conventions
   (theme.css tokens, .mar-btn/.mar-draft-btn geometry, teal accent).
   ================================================================== */
.ca-page {
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-subtle: rgba(13, 148, 136, 0.10);
  --px-loading-accent: #0d9488;
  /* NC-4/U6/U9 AMENDED (owner smoke 18/07): the hub now sets
     --pxm-accent EXPLICITLY on this mount root — the SAME teal as
     the dep's own :root default. Belt-and-braces: the injected
     #pxm-tokens stylesheet is appended to <head> after app CSS, so
     a cascade race could leave dep chrome (the custom-times pill)
     reading an unresolved token and rendering unstyled
     (white-on-white, owner-reported). The mount-root custom
     property is the contract §6.1 mechanism and always wins. */
  --pxm-accent: #0d9488;
  --ca-meds-dock-width: 400px;

  display: flex;
  align-items: stretch;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  font-family: var(--px-font);
  background: var(--px-bg-deep);
  color: var(--px-text-primary);
  position: relative;
  isolation: isolate;
}
:where(.ca-page) .ca-main-col {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}
:where(.ca-page) .ca-meds-sheet-slot {
  position: relative;
  /* DESIGNER GATE: the closed `flex: 0 0 0` is the rule below. See header. */
  flex: 0 0 var(--ca-meds-dock-width);
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  border-left: 0 solid var(--px-border);
  background: var(--px-bg-card);
  box-shadow: none;
  z-index: 100;
  transition: flex-basis var(--px-transition-slow, 350ms ease), border-left-width var(--px-transition-slow, 350ms ease);
}
:where(.ca-page.ca-live) .ca-meds-sheet-slot { flex: 0 0 0; }
.ca-page.ca-meds-open .ca-meds-sheet-slot {
  flex-basis: var(--ca-meds-dock-width);
  border-left-width: 1px;
  box-shadow: -4px 0 14px rgba(0, 0, 0, .04);
}
:where(.ca-page) .ca-meds-dock-handle {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  cursor: col-resize;
  touch-action: none;
  z-index: 1;
}
.ca-page.ca-meds-open .ca-meds-dock-handle { display: block; }
.ca-page.ca-meds-dock-dragging .ca-meds-sheet-slot { transition: none; }
.ca-page.ca-meds-dock-dragging { cursor: col-resize; user-select: none; }
/* The dock-toggle buttons live in the tab children, but their ACTIVE
   state is this shell's ca-meds-open — so the pairing rule lives
   where both halves are owned. */
.ca-page.ca-meds-open .ca-sq-dock-btn,
.ca-page.ca-meds-open .caph-dock-btn {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (max-width: 900px) {
  .ca-page.ca-meds-open .ca-main-col { display: none; }
  .ca-page.ca-meds-open .ca-meds-sheet-slot { flex: 1 1 100%; }
  .ca-page.ca-meds-open .ca-meds-dock-handle { display: none; }
}

/* U-1 round 4 (real-Chrome probe): the shared dependency portals its
   visible scrim to document.body. Pin the overlay token on :root while
   Clinical Approvals is mounted so that body child competes at 1200,
   above the shell sidebar (100) and below alerts/toasts (10000/99999). */
:root:has(#ca-page) { --pxm-z-overlay: 1200; }

/* RS25b (owner smoke 18/07): inner virtual scrollers own CA scrolling.
   Hide both possible outer ancestors only while this screen is
   mounted; the shared modal is portaled outside this chain.

   D-CA-2: the second rule reaches through the APP shell's content slot. The
   shell is an HTML form now, so its slot is an <anvil-slot> element inside the
   `.root-content-mount` div (foundation 5.2), and the classic
   `[anvil-slot="content"]` half went with the app-shell commit. */
.anvil-m3-content:has(#ca-page) { overflow: hidden !important; }
.root-content > .root-content-mount:has(#ca-page) {
  overflow: hidden !important;
}

/* T.10 / NC-10 toasts: the estate's global .px-toast-container
   (theme.css) is top-centre since R8 — no per-screen override. */

/* --- topbar (mockup v3 .topbar: autosave pill + Save flush) -------- */
:where(.ca-page) .ca-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--px-bg-card);
  border-bottom: 1px solid var(--px-border);
  padding: 10px 22px;
}
:where(.ca-page) .ca-topbar .ca-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
}
:where(.ca-page) .ca-topbar .ca-spacer { flex: 1; }
:where(.ca-page) .ca-autosave {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--px-text-muted);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: 999px;
  padding: 4px 12px;
}
:where(.ca-page) .ca-autosave .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--px-success);
}
:where(.ca-page) .ca-autosave .dot.saving { background: var(--px-warning); }
:where(.ca-page) .ca-autosave .dot.failed { background: var(--px-danger); }

/* secondary button = real .mar-draft-btn geometry (1.5px outline) */
:where(.ca-page) .ca-btn-d {
  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);
  white-space: nowrap;
}
:where(.ca-page) .ca-btn-d:hover { border-color: var(--accent); color: var(--accent); }
:where(.ca-page) .ca-btn-d.save { border-color: var(--px-border-strong); color: var(--px-text-secondary); }
:where(.ca-page) .ca-btn-d.save.dirty { border-color: #d97706; color: #92400e; background: #fffbeb; }
:where(.ca-page) .ca-btn-d.save.saving { border-color: var(--accent); color: var(--accent); cursor: wait; }
:where(.ca-page) .ca-btn-d.save.saving::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: ca-save-spin .7s linear infinite;
}
/* `.save.failed` ties with `.save.dirty` at (0,3,0) and caSetAutosavePill puts
   BOTH classes on for a failed save, so it stays after it, as it was. */
:where(.ca-page) .ca-btn-d.save.failed { border-color: var(--px-danger); color: var(--px-danger); }
@keyframes ca-save-spin { to { transform: rotate(360deg); } }
:where(.ca-page) .ca-undo-toast {
  display: none;
  position: fixed;
  left: 50%;
  top: 66px;
  transform: translateX(-50%);
  z-index: 120;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--px-radius-sm);
  background: var(--px-text-primary);
  color: var(--px-bg-card);
  box-shadow: var(--px-shadow-lg);
  font-size: 12.5px;
}
:where(.ca-page) .ca-undo-toast.visible { display: flex; }
:where(.ca-page) .ca-undo-toast button {
  border: 1px solid currentColor;
  border-radius: var(--px-radius-sm);
  background: transparent;
  color: inherit;
  padding: 3px 10px;
  font-weight: 700;
  cursor: pointer;
}

/* --- tabs (mockup .tabs) ------------------------------------------ */
:where(.ca-page) .ca-tabs {
  display: flex;
  gap: 4px;
  background: var(--px-bg-card);
  border-bottom: 2px solid var(--px-border);
  padding: 0 22px;
}
:where(.ca-page) .ca-tab {
  padding: 11px 20px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--px-text-muted);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  font-family: var(--px-font);
}
:where(.ca-page) .ca-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
:where(.ca-page) .ca-tab .cnt {
  background: var(--px-bg-elevated);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  margin-left: 6px;
  color: var(--px-text-secondary);
}
/* The template's `style="display:none"` on the count badge, as a state class
   caSetTabCount REMOVES. `.ca-tab .cnt` declares no display of its own, so
   clearing an inline value would fall back to this sheet and hide it for good. */
:where(.ca-page) .ca-tab .cnt.ca-tab-count-empty { display: none; }

/* --- panes (children render inside) ------------------------------- */
/* Full viewport width (owner ruling 2026-07-15 — no max-width cap;
   matches the other hub work screens, e.g. dispatch confirmation). */
:where(.ca-page) .ca-pane {
  padding: 18px 22px 20px;
}
/* DESIGNER GATE: the pane's own `display: none`. See header. */
:where(.ca-page.ca-live) .ca-pane { display: none; }
:where(.ca-page) .ca-pane.active { display: block; }