/* App-wide React chrome, applied when <body> carries "crx-chrome".
   Replaces the legacy geometry: 250px/89px (.left-panel/.top-header) -> 220px/44px. */

:root {
  --crx-topbar-h: 44px;
  --crx-sidebar-w: 220px;
  /* Collapsed the sidebar keeps its icons, so the modules are still one click away. */
  --crx-sidebar-rail: 56px;
}

/* ---------- Fixes for elements the design styles as plain <div>s ----------
   The three handoff stylesheets are byte-for-byte copies, so overrides live here.
   The user chip is a real <button> (it opens a menu), so its default chrome needs clearing. */

.dirA button.user-chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.dirA button.user-chip:hover { background: var(--A-surface-2); }

/* Keep a long name or email fallback from stretching the topbar. */
.dirA .user-meta { max-width: 150px; }
.dirA .user-meta > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Chrome containers ---------- */

body.crx-chrome #crx-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--crx-topbar-h);
  z-index: 1040;
}

body.crx-chrome #crx-sidebar {
  position: fixed;
  top: var(--crx-topbar-h);
  left: 0;
  bottom: 0;
  width: var(--crx-sidebar-w);
  z-index: 1035;
  transition: width 0.2s ease;
  overflow: hidden;
}

/* .dirA's own flex/height rules would fight these fixed containers. */
body.crx-chrome #crx-topbar > .dirA,
body.crx-chrome #crx-sidebar > .dirA {
  height: 100%;
  display: block;
}

body.crx-chrome #crx-sidebar .sidebar {
  width: 100%;
  height: 100%;
  border-right: 1px solid var(--A-rule);
}

/* ---------- Before the bundle arrives ----------
   The chrome and the page are drawn from the HTML alone, so a slow connection shows the
   new shell filling in rather than the old page being replaced. These use literal colours:
   the --A-* tokens live on .dirA, which React only wraps around its own output. */

body.crx-chrome #crx-topbar:empty {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E8EE;
}

body.crx-chrome #crx-sidebar:empty {
  background: #FFFFFF;
  border-right: 1px solid #E5E8EE;
}

.crx-island-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-14) 0;
  height: 100%;
}

.crx-skel {
  border-radius: 4px;
  background: linear-gradient(90deg, #F4F6F9 0%, #EEF1F5 50%, #F4F6F9 100%);
  background-size: 200% 100%;
  animation: crxSkel 1.4s ease-in-out infinite;
}

.crx-skel-title { width: 220px; height: 20px; }
.crx-skel-bar   { height: 34px; }
.crx-skel-body  { flex: 1 1 auto; min-height: 240px; }

/* The patient page reserves its own shapes: a title line, and the summary rail beside
   the tabs — so the columns do not appear from nothing as each island mounts. */
.crx-island-skeleton.is-titlebar { padding: var(--sp-2) 0 var(--sp-10); }
.crx-island-skeleton.is-rail { width: 280px; padding: 0; }
.crx-island-skeleton.is-rail .crx-skel-body { min-height: 260px; border-radius: 6px; }

/* The record sheets (General, Patient Chart): the same width and centring as the card
   that replaces them, so the swap is a fill rather than a jump. */
.crx-island-skeleton.is-sheet { max-width: 860px; margin-inline: auto; padding: var(--sp-6) var(--sp-20) var(--sp-10); gap: var(--sp-14); height: auto; }
.crx-island-skeleton.is-sheet .crx-skel-bar { height: 50px; border-radius: 8px 8px 0 0; margin-bottom: -14px; }
.crx-island-skeleton.is-sheet .crx-skel-body { min-height: 300px; border-radius: 0 0 8px 8px; }

/* Razor's fallback Save row waits behind the skeleton: the island hides it on mount, and
   it should not peek out underneath in the meantime. It shows only if the island never comes. */
#patient-general-root:has(> .crx-island-skeleton) ~ #patientGeneralSaveRow,
#patient-chart-general-root:has(> .crx-island-skeleton) ~ #patientChartSaveRow { display: none; }

/* ---------- One scrollbar, for the whole app ---------- */

/* The default Windows bar is ~17px of grey channel with a stepper arrow at each end. This
   replaces it everywhere, including the document's own bar, which hangs off <html> rather
   than <body> and so was still being drawn by the OS.

   8px of track with a 4px thumb inside it: the transparent border is clipped away, so the
   thumb reads as a slim mark while the whole 8px stays grabbable. */
/* On every scroller, not just the document's. scrollbar-width does not inherit, so setting
   it on <html> alone left every inner pane — the drug column, a step's body, the script —
   with the browser's own bar, arrows and all. Chrome 121+ honours these two and then
   ignores ::-webkit-scrollbar for that element, so the pseudo-elements below are what
   Safari and older WebKit get; both end up the same width. */
html,
* {
  scrollbar-width: thin;
  scrollbar-color: var(--A-rule-strong) transparent;
}

/* WebKit does not inherit the two properties above, so the pseudo-elements are set on
   everything. The .dirA / body.crx-chrome copies below carry the same thing at a higher
   specificity, which is what beats Kendo's own scrollbar rules on the legacy pages. */
::-webkit-scrollbar,
body.crx-chrome::-webkit-scrollbar,
body.crx-chrome ::-webkit-scrollbar,
.dirA::-webkit-scrollbar,
.dirA ::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track,
body.crx-chrome::-webkit-scrollbar-track,
body.crx-chrome ::-webkit-scrollbar-track,
.dirA::-webkit-scrollbar-track,
.dirA ::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb,
body.crx-chrome::-webkit-scrollbar-thumb,
body.crx-chrome ::-webkit-scrollbar-thumb,
.dirA::-webkit-scrollbar-thumb,
.dirA ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--A-rule-strong);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover,
body.crx-chrome::-webkit-scrollbar-thumb:hover,
body.crx-chrome ::-webkit-scrollbar-thumb:hover,
.dirA::-webkit-scrollbar-thumb:hover,
.dirA ::-webkit-scrollbar-thumb:hover {
  background: var(--A-fg-4);
  background-clip: content-box;
}

/* The stepper arrows at each end: a click target of a few pixels that nobody aims for. */
::-webkit-scrollbar-button,
body.crx-chrome::-webkit-scrollbar-button,
body.crx-chrome ::-webkit-scrollbar-button,
.dirA::-webkit-scrollbar-button,
.dirA ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Where a horizontal and a vertical bar meet, which defaults to a grey square. */
::-webkit-scrollbar-corner,
body.crx-chrome::-webkit-scrollbar-corner,
body.crx-chrome ::-webkit-scrollbar-corner,
.dirA::-webkit-scrollbar-corner,
.dirA ::-webkit-scrollbar-corner { background: transparent; }

@keyframes crxSkel {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crx-skel { animation: none; }
}

/* ---------- Island pages ----------
   A page whose whole body is an island owns the content area: the legacy .container
   must not scroll behind it, or the page gets a second scrollbar next to the grid's. */

body.crx-island-page .container.body-content,
body.crx-island-page #rightContentPanel {
  height: 100%;
  overflow: hidden;
  padding: 0;
}

/* The island owns the content area and scrolls inside itself, so the window has nothing
   left to scroll.

   It has to be said on <html>: site.css carries `html { overflow-y: scroll }` — the old
   trick for keeping a scrollbar present so short and long pages do not shift — and once
   <html> has a non-visible overflow the viewport takes ITS value and ignores the body's.
   So the bar showed on every island page with nothing behind it to scroll. */
html:has(> body.crx-island-page) { overflow: hidden; }

/* Kept for the case where that html rule is ever dropped: then this is what propagates. */
body.crx-island-page { overflow: hidden; }

body.crx-island-page [data-crx-island],
body.crx-island-page [data-crx-island] > .dirA,
body.crx-island-page [data-crx-island] > .dirA > .main {
  height: 100%;
}

/* ---------- Legacy CSS that leaks into .dirA ----------
   The design classes are scoped, but unscoped legacy and Bootstrap rules still match
   the same element names, so neutralise the ones that actually collide. */

/* site.css: .page-title { margin-bottom: var(--sp-32) } pushed the title out of line with the crumb. */
.dirA .page-title { margin: 0; }

/* Bootstrap: .table { margin-bottom: 1rem; color: #212529 }. */
.dirA .table { margin-bottom: 0; color: inherit; }

/* Bootstrap's ".table td,.table th { vertical-align: top; border-top: ... }" is the reason
   cell text sat at the top of each row instead of centred. dirA.css sets no vertical-align
   of its own, so Bootstrap's won by default. */
.dirA .table td,
.dirA .table th {
  vertical-align: middle;
  border-top: 0;
}

.dirA .table thead th {
  vertical-align: middle;
  border-bottom: 1px solid var(--A-rule);
}

.dirA .table tbody + tbody { border-top: 0; }

/* Bootstrap sizes .badge in em and forces 700 weight. */
.dirA .badge { vertical-align: baseline; }

/* ---------- Sidebar scrolling ----------
   dirA.css scrolls .sidebar itself, which scrolled the footer away with the links.
   Only the module list should scroll; the footer stays pinned. */

.dirA .sidebar {
  overflow: hidden;
}

.dirA .sidebar-scroll {
  flex: 1 1 auto;
  /* min-height:0 is what lets a flex child shrink and scroll. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dirA .sidebar-footer {
  flex: none;
  margin-top: 0;
}

/* The status light reflects real connectivity, so it must be able to go red. */
.dirA .sidebar-footer .pulse.is-offline {
  background: var(--danger);
  animation: none;
  box-shadow: none;
}

/* ---------- Content area ---------- */

body.crx-chrome .container {
  margin-top: var(--crx-topbar-h);
  margin-left: var(--crx-sidebar-w);
  width: calc(100% - var(--crx-sidebar-w));
  max-width: none;
  transition: margin-left 0.2s ease, width 0.2s ease;
}

body.crx-chrome .container.body-content {
  height: calc(100vh - var(--crx-topbar-h));
}

/* The legacy chrome is gone, so its reserved space goes too. */
body.crx-chrome .left-panel,
body.crx-chrome .top-header {
  display: none !important;
}

/* ---------- Collapsed sidebar: a rail of icons ----------
   Reuses the existing fullwidthPanel class and deSidebarCollapsed cookie. Below 992px the
   sidebar is a drawer that is either over the page or not there at all, so none of this
   applies: the rules live inside the query rather than being undone by it. */

@media (min-width: 992px) {
  body.crx-chrome.fullwidthPanel #crx-sidebar { width: var(--crx-sidebar-rail); }

  body.crx-chrome.fullwidthPanel .container {
    margin-left: var(--crx-sidebar-rail);
    width: calc(100% - var(--crx-sidebar-rail));
  }

  /* The icon alone, centred, with the name shown beside it on hover instead. */
  body.crx-chrome.fullwidthPanel .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 2px;
  }

  body.crx-chrome.fullwidthPanel .nav-label,
  body.crx-chrome.fullwidthPanel .nav-caret,
  body.crx-chrome.fullwidthPanel .nav-children,
  body.crx-chrome.fullwidthPanel .sidebar-state { display: none; }

  /* The light and the number keep one line: at 10px they fit the rail side by side, and
     stacking them left the foot of the sidebar looking like a column of its own. */
  body.crx-chrome.fullwidthPanel .sidebar-footer {
    justify-content: center;
    gap: 5px;
    /* The panel's side padding leaves 40px of a 56px rail, which is less than the light
       and the number need: the number broke across two lines and the light was crushed. */
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
  }

  body.crx-chrome.fullwidthPanel .nav-version { font-size: var(--text-micro); }
  body.crx-chrome.fullwidthPanel .nav-version::before { content: none; }
}

/* Reads as one line beside the state, and stands alone on the rail. */
.dirA .nav-version { white-space: nowrap; }
.dirA .nav-version::before { content: '·'; margin-right: 4px; }

/* The light is 6px and says the whole state, so it is never the thing that gives way. */
.dirA .sidebar-footer .pulse { flex: none; }

/* ---------- Header widgets carried over from the legacy header ----------
   Compact chips, because a 44px topbar has no room for the old full-width blocks.
   The full wording survives as the title/aria-label. */

/* The one pressable thing in a list of states, so it is sized to the row it sits in
   rather than to a page: a quiet outlined pill, not a solid green slab. */
.dirA .crx-xero-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  height: 24px;
  padding: 0 var(--sp-10);
  flex: none;
  border: 1px solid var(--A-accent);
  border-radius: 999px;
  background: var(--A-surface);
  color: var(--A-accent);
  font-family: var(--font);
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.dirA .crx-xero-btn:hover { background: var(--A-tint); }
.dirA .crx-xero-btn:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 2px; }

/* Spans the legacy polling script writes into. site.css gives #total-notification-count
   a display of its own, which beats the browser's [hidden] rule — the write target then
   painted as a red circle over the bell. Nothing in here is ever seen. */
.dirA .crx-sink,
.dirA .crx-sink * { display: none !important; }

/* Notifications: a number, not the bare dot that showed even when nothing was waiting.
   The count sits BESIDE the bell rather than on its corner — at two or three digits a
   corner badge is wider than the 28px button and buries the icon it annotates. With
   nothing waiting this is an ordinary icon button; with something, it grows into a pill. */
.dirA .icon-btn.crx-bell.has-waiting {
  width: auto;
  gap: var(--sp-6);
  padding: 0 var(--sp-8) 0 var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
  color: var(--A-fg);
}

.dirA .icon-btn.crx-bell.has-waiting:hover { background: var(--A-rule-2); }

.dirA .crx-bell-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: crx-badge-in 160ms ease-out;
}

@keyframes crx-badge-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dirA .crx-bell-count { animation: none; }
}

/* The bell leans in while something is waiting and stays quiet when nothing is. */
.dirA .crx-menu-wrap .icon-btn.has-waiting svg { stroke-width: 2.1; }

/* Something in the system menu needs attention; the menu says what. */
/* Waiting work is the one thing in the bar worth noticing, so the bell takes the ink
   while there is something in it and stays quiet when there is not. */
.dirA .crx-menu-wrap .icon-btn svg { width: 17px; height: 17px; }
.dirA .icon-btn.has-waiting { color: var(--A-fg); }

.dirA .icon-btn .crx-status-flag {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--A-surface);
}

/* ---------- Type ----------
   Numbers and codes are set in the mono face, which tracks tighter than the body face at
   the same size — enough at 11px for digits to read as touching. */

.dirA .mono,
.dirA code,
.dirA .crx-drugs-table td.rx,
.dirA .crx-drug-rx { letter-spacing: var(--tracking-caps); }

/* Catalogue names — drugs, lots, medications — are stored uppercase, and uppercase at 13px
   runs together at the base tracking. These are the places that render them. Unscoped where
   the element is portalled out of .dirA, which the combo list and the overlays are. */
.dirA .drg-name,
.dirA .irm-lot,
.dirA .irm-map,
.dirA .lot-row-name,
.dirA .crx-drug-name,
.dirA td.is-editable:not(.num) .sheet-cell-read,
.crx-overlay .rmp-from li > b,
.crx-overlay .tfr-card > header > b,
.crx-overlay .inv-drug-h b,
.combo-option-text,
.combo-label,
.combo-detail-title {
  letter-spacing: var(--tracking-caps);
}

/* The second line under an option is prose, not a name: back to the body's tracking. */
.combo-option-note { letter-spacing: var(--tracking); }

/* Small print that carries content rather than labelling a section: a half point larger
   and a little more open, so it is read rather than squinted at. */
.dirA .crx-menu-id-role,
.dirA .crx-menu-row-sub,
.dirA .ts-loc-sub { font-size: var(--text-meta); letter-spacing: 0.025em; }

/* ---------- Topbar menus (notifications, system, the user) ----------
   One compact menu for all three: the location switcher's wide panel was built for
   choosing between places, and reading as that made a three-item menu look enormous. */

.dirA .crx-menu-wrap { position: relative; }

.dirA .crx-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 232px;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  box-shadow: var(--shadow-3);
  z-index: 100;
  overflow: hidden;
  padding: var(--sp-4);
}

.dirA .crx-menu.is-user { min-width: 248px; }

.dirA .crx-menu-sec {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-8) var(--sp-4);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--A-fg-4);
}

.dirA .crx-menu-sec-count {
  padding: 0 var(--sp-6);
  border-radius: 999px;
  background: var(--danger-100);
  color: var(--danger);
  font-size: var(--text-micro);
  letter-spacing: 0;
}

.dirA .crx-menu-list { display: flex; flex-direction: column; }

.dirA .crx-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  padding: var(--sp-8) var(--sp-8);
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--A-fg-2);
  text-align: left;
  cursor: pointer;
}

.dirA .crx-menu-item:hover { background: var(--A-surface-2); color: var(--A-fg); }
.dirA .crx-menu-item svg { color: var(--A-fg-4); flex: none; }
.dirA .crx-menu-item:hover svg { color: var(--A-fg-2); }

.dirA .crx-menu-item-label { flex: 1; min-width: 0; }

/* Leaving is the one destructive thing here, so it says so on hover rather than by
   sitting permanently in red. */
.dirA .crx-menu-item.is-danger:hover { background: var(--danger-100); color: var(--danger); }
.dirA .crx-menu-item.is-danger:hover svg { color: var(--danger); }

.dirA .crx-menu-count {
  min-width: 20px;
  padding: var(--sp-2) var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
  color: var(--A-fg-4);
  font-size: var(--text-meta);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dirA .crx-menu-count.is-waiting { background: var(--danger-100); color: var(--danger); }

/* Who you are signed in as, above what you can do about it. */
.dirA .crx-menu-id {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .crx-menu-id-main { min-width: 0; line-height: 1.25; }
.dirA .crx-menu-id-name {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dirA .crx-menu-id-role { display: block; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-menu-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--A-rule-2);
}

/* A status the menu reports rather than an action: icon, what it is, how it stands. */
.dirA .crx-menu-row {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8);
}

.dirA .crx-menu-row-icon { color: var(--A-fg-4); flex: none; }
.dirA .crx-menu-row-main { flex: 1; min-width: 0; line-height: 1.25; }
.dirA .crx-menu-row-title { display: block; font-size: var(--text-label); font-weight: 500; color: var(--A-fg); }
.dirA .crx-menu-row-sub {
  display: block;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dirA .crx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dirA .crx-dot.is-ok { background: var(--success); }
.dirA .crx-dot.is-off { background: var(--danger); }

/* Counts in the dropdown: .count was only ever styled for sidebar links. */
.dirA .ts-pop .ts-loc .count {
  min-width: 20px;
  padding: var(--sp-2) var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.dirA .ts-pop .ts-loc .count.is-waiting {
  background: var(--danger-100);
  color: var(--danger);
}

/* Xero: a solid button, green once connected and navy while there is still something to do.
   The classes must stay - handleXeroConnection() reads .btn-success to decide what a click does. */

.dirA button.crx-xero-btn.btn,
.dirA button.crx-xero-btn.btn-primary,
.dirA button.crx-xero-btn.btn-success {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  height: 26px;
  padding: 0 var(--sp-12);
  border-radius: var(--A-radius);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: none;
  text-transform: none;
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.dirA button.crx-xero-btn.btn-success {
  background: var(--success);
  border-color: var(--success);
}

.dirA button.crx-xero-btn.btn-success:hover {
  background: #266A42;
  border-color: #266A42;
}

/* Navy rather than amber: this is the state with an action attached, so it wears
   the same accent every other primary button in the app wears. */
.dirA button.crx-xero-btn.btn-primary {
  background: var(--A-accent);
  border-color: var(--A-accent);
}

.dirA button.crx-xero-btn.btn-primary:hover {
  background: var(--A-accent-2);
  border-color: var(--A-accent-2);
}

/* ---------- Small screens: the sidebar overlays rather than reserving a column ---------- */

@media (max-width: 991px) {
  body.crx-chrome .container {
    margin-left: 0;
    width: 100%;
  }

  body.crx-chrome #crx-sidebar {
    box-shadow: var(--shadow-3);
    width: 0;
  }

  body.crx-chrome.crx-sidebar-open #crx-sidebar {
    width: var(--crx-sidebar-w);
  }

  /* responsive.css opens the backdrop for .fullwidthPanel, which here means "collapsed
     on desktop" -- a click-blocking overlay. Only the drawer opens it. */
  body.crx-chrome #leftMenuBackdrop {
    display: none;
  }

  body.crx-chrome.crx-sidebar-open #leftMenuBackdrop {
    display: block;
    position: fixed;
    inset: var(--crx-topbar-h) 0 0 0;
    background: rgba(14, 33, 58, 0.35);
    z-index: 1034;
  }

  body.crx-chrome #crx-topbar .global-search {
    display: none;
  }
}

/* responsive.css reserves 95px for the old two-row header; the topbar is one 44px row. */
@media (max-width: 575px) {
  body.crx-chrome .container,
  body.crx-chrome .container.body-content {
    margin-top: var(--crx-topbar-h) !important;
    padding-top: 0;
  }
}

/* ---------- Focus ----------
   The ring that lingered after a mouse click is the browser's default. Suppress it for
   pointer interaction only — keyboard focus must stay visible, so it keeps a ring, in
   the design's accent rather than the browser's black. */

.dirA :focus:not(:focus-visible) {
  outline: none;
}

.dirA :focus-visible {
  outline: 2px solid var(--A-accent);
  outline-offset: 1px;
  border-radius: var(--A-radius);
}

/* Inputs already show focus by changing their border, so a ring would double up. */
.dirA input:focus-visible,
.dirA select:focus-visible,
.dirA textarea:focus-visible {
  outline-offset: 0;
}

/* ---------- Account pages (profile, change password) ----------
   A form reads badly at grid width, so the column is capped and centred. */

/* The phone's sign-in page: no shell, so it carries its own centring. */
.dirA .msi {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16);
  background: var(--A-bg-2);
}

.dirA .msi-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-32) var(--sp-24);
  text-align: center;
  background: var(--A-bg);
  border: 1px solid var(--A-rule);
  border-radius: var(--radius-lg);
}

.dirA .msi-card h1 { margin: 0; font-size: var(--text-h2); }
.dirA .msi-card p { margin: 0; color: var(--A-fg-3); }
.dirA .msi-card .btn { margin-top: var(--sp-8); }

.dirA .msi-icon { color: var(--A-fg-3); }
.dirA .msi-icon svg { width: 40px; height: 40px; }
.dirA .msi-icon.is-ok { color: var(--success); }
.dirA .msi-icon.is-warn { color: var(--warning); }
.dirA .msi-icon.is-busy { animation: msi-spin 1.1s linear infinite; }

@keyframes msi-spin { to { transform: rotate(360deg); } }

/* The account column, with the mobile panel beside it. */
.dirA .account-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-24);
  flex-wrap: wrap;
  position: relative;
}

.dirA .account-qr-toggle {
  position: absolute;
  top: 0;
  right: 0;
}

.dirA .mob {
  flex: none;
  width: 280px;
  /* Auto margins centre it in the space left beside the form. */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-16);
  border: 1px solid var(--A-rule);
  border-radius: var(--radius);
  background: var(--A-bg);
}

.dirA .mob-title { margin: 0; font-size: var(--text-body); }
.dirA .mob-qr { width: 100%; background: #fff; border-radius: var(--radius); }
.dirA .mob-qr svg { display: block; width: 100%; height: auto; }
.dirA .mob-quiet { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .mob-device { margin: 0; font-weight: 600; }
.dirA .mob-url { font-size: var(--text-meta); word-break: break-all; }
.dirA .mob-ask { display: flex; flex-direction: column; gap: var(--sp-6); }
.dirA .mob-acts { display: flex; gap: var(--sp-8); }

.dirA .mob-ok,
.dirA .mob-warn {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  font-size: var(--text-meta);
}

.dirA .mob-ok { color: var(--success); }
.dirA .mob-warn { color: var(--warning); }

.dirA .account {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.dirA .account-nav {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .account-nav-link {
  padding: var(--sp-6) var(--sp-12);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.dirA .account-nav-link:hover { color: var(--A-fg); background: var(--A-surface-2); }
.dirA .account-nav-link.is-active { color: var(--A-accent); border-bottom-color: var(--A-accent); }

/* Identity strip: who you are, before the fields that change it. */
.dirA .account-identity {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-tint);
  border-radius: var(--A-radius-md) var(--A-radius-md) 0 0;
}

.dirA .account-avatar,
.dirA .account-identity-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
}

.dirA .account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-100);
  color: var(--A-accent);
  font-weight: 600;
  font-size: 14px;
}

.dirA .account-identity-text { min-width: 0; }
.dirA .account-name { font-size: var(--text-title); font-weight: 600; line-height: 1.25; }

.dirA .account-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  font-size: var(--text-label);
  color: var(--A-fg-3);
  margin-top: var(--sp-4);
}

.dirA .account-role {
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  color: var(--A-fg-2);
  font-weight: 500;
  font-size: var(--text-meta);
}

.dirA .account-body { display: flex; flex-direction: column; gap: var(--sp-16); }

.dirA .account-lede {
  margin: 0;
  font-size: var(--text-label);
  color: var(--A-fg-3);
  max-width: 58ch;
}

.dirA .account-fields { display: flex; flex-direction: column; gap: var(--sp-14); }

.dirA .account-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .account-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  font-size: var(--text-label);
  font-weight: 500;
}

.dirA .account-notice.is-ok { color: var(--success); }
.dirA .account-notice.is-error { color: var(--danger); }

/* Cross-link to the sibling page, as a target rather than a bare anchor. */
.dirA .account-crosslink {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  color: var(--A-fg-2);
  text-decoration: none;
  font-size: var(--text-label);
}

.dirA .account-crosslink:hover { background: var(--A-surface-2); border-color: var(--A-rule-strong, var(--rule-strong)); }
.dirA .account-crosslink span { display: flex; flex-direction: column; flex: 1; }
.dirA .account-crosslink strong { color: var(--A-fg); font-weight: 600; }
.dirA .account-crosslink span span { color: var(--A-fg-3); }

/* Confirmation state after the password is changed. */
.dirA .account-done { text-align: center; padding: var(--sp-32) var(--sp-14); }
.dirA .account-done h2 { margin: var(--sp-14) 0 var(--sp-4); font-size: var(--text-title); font-weight: 600; }
.dirA .account-done p { margin: 0; font-size: var(--text-label); color: var(--A-fg-3); }

.dirA .account-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--success-100);
  color: var(--success);
}

/* ---------- Form fields ---------- */

.dirA .field-row { display: flex; flex-direction: column; }

.dirA .field-label {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  margin-bottom: var(--sp-6);
}

.dirA .field-req { color: var(--danger); margin-left: var(--sp-2); }

.dirA .field-row .input { margin-top: 0; height: 30px; }
/* A refused field gets a red edge and a soft ring, on every control a Field can hold. */
.dirA .field-row.has-error .input,
.dirA .field-row.has-error textarea.input,
.dirA .field-row.has-error select.input,
.dirA .field-row.has-error .combo-trigger,
.dirA .field-row.has-error .crx-date input {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

.dirA .field-row.has-error .field-label { color: var(--danger); }

.dirA .field-hint,
.dirA .field-error {
  margin: var(--sp-6) 0 0;
  font-size: var(--text-meta);
  line-height: 1.4;
}

.dirA .field-hint { color: var(--A-fg-3); }
.dirA .field-error { color: var(--danger); }

.dirA .field-static {
  margin: 0;
  font-size: var(--text-label);
  color: var(--A-fg);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .field-empty { color: var(--A-fg-3); font-style: italic; }

.dirA .field-password { position: relative; display: block; }
.dirA .field-password .input { padding-right: var(--sp-32); }

.dirA .field-reveal {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
  padding: 0;
}

.dirA .field-reveal:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* Password rules: the requirements as a live checklist, not an error after the fact. */
.dirA .pw-rules {
  list-style: none;
  margin: -4px 0 0;
  padding: var(--sp-10) var(--sp-12);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-14);
  background: var(--A-surface-2);
  border-radius: var(--A-radius);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .pw-rules li { display: flex; align-items: center; gap: var(--sp-6); }
.dirA .pw-rules li.is-met { color: var(--success); }

.dirA .pw-rule-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex: none;
}

@media (max-width: 520px) {
  .dirA .pw-rules { grid-template-columns: 1fr; }
}

/* ---------- Profile photo ---------- */

.dirA .photo-picker { display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; }
.dirA .photo-picker-row { display: flex; align-items: center; gap: var(--sp-12); }
.dirA .photo-picker-identity { min-width: 0; }

/* The frame is the control: click it to add a photo, or to see the one you have. */
.dirA .photo-frame {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
  padding: 0;
  border: 1px solid var(--A-rule);
  border-radius: 50%;
  background: var(--navy-100);
  cursor: pointer;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dirA .photo-frame:disabled { cursor: default; opacity: 0.6; }
.dirA .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dirA .photo-initials {
  font-size: 20px;
  font-weight: 600;
  color: var(--A-accent);
  letter-spacing: 0.02em;
}

/* Says the picture is clickable without covering it until you go looking. */
.dirA .photo-frame-hint {
  position: absolute;
  inset: auto 0 0 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 58, 0.62);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}

.dirA .photo-frame:hover .photo-frame-hint,
.dirA .photo-frame:focus-visible .photo-frame-hint { opacity: 1; }

.dirA .photo-controls { display: flex; flex-direction: column; gap: var(--sp-8); }
.dirA .photo-status { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .photo-buttons { display: flex; gap: var(--sp-8); flex-wrap: wrap; }

/* Full-size view. Fixed, so it escapes the panel rather than stretching it. */
.dirA .photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(14, 33, 58, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

.dirA .photo-viewer img {
  max-width: min(520px, 100%);
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-4);
}

.dirA .photo-viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--A-radius);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.dirA .photo-viewer-close:hover { background: rgba(255, 255, 255, 0.28); }

@media (prefers-reduced-motion: reduce) {
  .dirA .photo-frame-hint { transition: none; }
}

/* Topbar avatar carrying a photo: the circle is already sized, so the image just
   fills it. object-fit keeps a non-square photo from stretching. */
.dirA .user-avatar.has-photo {
  padding: 0;
  overflow: hidden;
  background: var(--A-surface-2);
}

.dirA .user-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Choosing between the uploaded photo and the Google one. Both are kept; this only
   decides which is shown, so the control is a choice, not a delete. */
.dirA .photo-choice {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex-wrap: wrap;
  margin: 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .photo-choice:disabled { opacity: 0.6; }

.dirA .photo-choice legend {
  padding: 0 var(--sp-4);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg-3);
}

.dirA .photo-choice-option {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--A-fg-2);
  cursor: pointer;
}

.dirA .photo-choice-option:hover { background: var(--A-surface-2); }

.dirA .photo-choice-option.is-active {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-accent);
}

/* The radio carries the state; the thumbnail and label are the target. */
.dirA .photo-choice-option input { position: absolute; opacity: 0; pointer-events: none; }

.dirA .photo-choice-option img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--A-surface-2);
}

/* The slot is named on the account but its file is gone. */
.dirA .photo-choice-missing {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--A-surface-2);
  border: 1px dashed var(--A-rule-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--A-fg-4);
  font-size: var(--text-meta);
}

.dirA .photo-choice-option input:focus-visible ~ img {
  outline: 2px solid var(--A-accent);
  outline-offset: 1px;
}

/* ---------- Patient setup: the prototype's chart layout ----------
   Summary rail | tabs | aside. The grid and tab bar are mirrored OUTSIDE .dirA on purpose: the
   middle column is the legacy Bootstrap form, which the design system's rules must not reach. */

/* Side columns are auto and each child is placed explicitly: the rail and aside are islands, so
   before they mount they are empty, and the tabs must not be auto-placed into the 280px column. */
.crx-chart-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-10);
  align-items: start;
}

.crx-chart-grid > #patient-rail-root  { grid-column: 1; width: 264px; }
.crx-chart-grid > .crx-patient-setup  { grid-column: 2; min-width: 0; }
.crx-chart-grid > #patient-aside-root { grid-column: 3; width: 302px; }

/* An island with nothing in it takes no space at all. */
.crx-chart-grid > div:empty { display: none; }

/* The same, once it has mounted: React always leaves its .dirA wrapper behind, so a column
   that rendered nothing — the aside on a new patient — would still hold its width.
   Its own rule, not a second selector above: a browser without :has would drop both. */
.crx-chart-grid > div:has(> .dirA:empty) { display: none; }

@media (max-width: 1280px) {
  .crx-chart-grid { grid-template-columns: auto minmax(0, 1fr); }
  .crx-chart-grid > #patient-rail-root { width: 260px; }
  .crx-chart-grid > #patient-aside-root { grid-column: 1 / -1; width: auto; }
}

@media (max-width: 900px) {
  .crx-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .crx-chart-grid > #patient-rail-root,
  .crx-chart-grid > .crx-patient-setup,
  .crx-chart-grid > #patient-aside-root { grid-column: 1; width: auto; }
}

/* Title row: the app's own page header, unchanged. It was boxed and inset here, which
   made this page read differently from Reports and the rest — those render it flush with
   only a bottom rule, so this does the same. */
#patient-titlebar-root { margin: 0 0 var(--sp-10); }

/* ---------- The patient overview ----------
   features/patients/PatientDashboard: what is live on the record, then what has happened
   to it lately. */

.dirA .pt-dash { padding: var(--sp-4) 0 var(--sp-2); }

.dirA .pt-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-10);
  margin-bottom: var(--sp-16);
}

.dirA .pt-stat {
  display: block;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  color: inherit;
}

/* A tile that leads to its tab says so on hover; one that does not stays still. */
a.pt-stat:hover { border-color: var(--A-accent); background: var(--A-tint); text-decoration: none; }

.dirA .pt-stat-h {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

.dirA .pt-stat-h svg { color: var(--A-fg-4); }

.dirA .pt-stat-value {
  display: block;
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
}

.dirA .pt-stat-note {
  display: block;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Something to react to: the one tile worth colouring. */
.dirA .pt-stat.is-danger { border-color: var(--danger-100); background: var(--danger-100); }
.dirA .pt-stat.is-danger .pt-stat-value,
.dirA .pt-stat.is-danger .pt-stat-h svg { color: var(--danger); }

.dirA .pt-timeline {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  padding: var(--sp-12) var(--sp-14) var(--sp-14);
}

.dirA .pt-timeline-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.dirA .pt-timeline-title {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg-3);
}

/* A button because it opens the history panel rather than going anywhere, so it has to
   shed the browser's button chrome and read as the link it did before. */
.dirA .pt-timeline-all {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-accent);
  cursor: pointer;
}
.dirA .pt-timeline-all:hover { text-decoration: underline; }
.dirA .pt-timeline-empty { margin: 0; font-size: var(--text-label); color: var(--A-fg-3); }

.dirA .pt-timeline-list { list-style: none; margin: 0; padding: 0; }

/* A rail down the left: the dots and the line are what make this read as a sequence. */
.dirA .pt-event {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-8) 22px;
}

.dirA .pt-event-mark {
  position: absolute;
  left: 2px;
  top: 13px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--A-rule-strong);
}

.dirA .pt-event-mark.is-success { background: var(--success); }
.dirA .pt-event-mark.is-warning { background: var(--warning); }
.dirA .pt-event-mark.is-danger  { background: var(--danger); }

.dirA .pt-event:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 24px;
  bottom: -2px;
  width: 1px;
  background: var(--A-rule);
}

.dirA .pt-event-top { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.dirA .pt-event-what { font-size: var(--text-label); color: var(--A-fg); }
.dirA .pt-event-meta { font-size: var(--text-meta); color: var(--A-fg-3); margin-top: var(--sp-2); }

/* ---------- The facts a chart leads with ----------
   Allergies, cover and prescriber: each says its state in words, with the colour only
   where the state itself is the warning. */

.dirA .pt-facts {
  list-style: none;
  margin: 0 0 var(--sp-12);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--A-rule-2);
  border: 1px solid var(--A-rule-2);
  border-radius: var(--A-radius);
  overflow: hidden;
}

.dirA .pt-fact {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  background: var(--A-surface);
}

.dirA .pt-fact > svg { color: var(--A-fg-4); flex: none; margin-top: var(--sp-2); }

.dirA .pt-fact-label {
  display: block;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--A-fg-4);
}

.dirA .pt-fact-value {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg);
  word-break: break-word;
}

.dirA .pt-fact-sub { display: block; font-size: var(--text-meta); color: var(--A-fg-3); }

/* Something to react to is the one fact worth colouring. */
.dirA .pt-fact.is-danger { background: var(--danger-100); }
.dirA .pt-fact.is-danger > svg,
.dirA .pt-fact.is-danger .pt-fact-value { color: var(--danger); }

.dirA .pt-fact.is-ok > svg { color: var(--success); }

/* Nothing recorded is not the same as nothing to record. */
.dirA .pt-fact.is-unknown .pt-fact-value { color: var(--A-fg-3); font-weight: 400; }

#patient-titlebar-root .dirA > .page-header {
  border: 0;
  border-bottom: 1px solid var(--A-rule);
  border-radius: 0;
  gap: var(--sp-10);
  box-shadow: var(--shadow-1);
  position: relative;
  z-index: 1;
}

/* The crumb sits on the same baseline as the name, as in the prototype. */
#patient-titlebar-root .page-crumb { gap: var(--sp-6); }
#patient-titlebar-root .page-title { font-size: var(--text-title); font-weight: 600; }

.dirA .page-crumb .crumb-id { font-family: var(--font-mono); letter-spacing: 0.02em; }
.dirA .page-crumb a { color: inherit; text-decoration: none; }
.dirA .page-crumb a:hover { color: var(--A-accent); text-decoration: underline; }
.dirA .page-actions .btn { text-decoration: none; }

/* What the page shows, fenced from Audit trail and Back to list, which act on the record. */
.dirA .crx-page-tools:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-right: var(--sp-6);
  padding-right: var(--sp-10);
  border-right: 1px solid var(--A-rule);
}

/* Rail extras the design system does not carry. */
.dirA .pt-summary .btn { text-decoration: none; }
.dirA .pt-empty-note { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); line-height: 1.5; }

/* Aside column: stacked panels, matching the prototype's right-hand rail. */
.dirA .pt-aside { display: flex; flex-direction: column; gap: var(--sp-10); }
.dirA .pt-aside .panel-h { padding: var(--sp-8) var(--sp-12); font-size: var(--text-label); }
.dirA .pt-aside .panel-b { padding: var(--sp-12); }

.dirA .pt-jump { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) !important; }

.dirA .pt-jump a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--A-radius);
  font-size: var(--text-label);
  color: var(--A-fg-2);
  text-decoration: none;
}

.dirA .pt-jump a:hover { background: var(--A-surface-2); color: var(--A-accent); }

/* ---------- The Bootstrap tab column, mirrored on .pt-tabs ----------
   Everything here has to out-specify site.css, which styles this exact page:
   .patient-info .nav-item paints the grey boxes, .nav-tabs .nav-link.active paints the
   red one, and .fielsets/.legends draw the boxed red section headings. The element is
   .patient-info AND .crx-patient-setup, so matching their specificity is enough — this
   file loads later — but every property they set must actually be named. */

.crx-patient-setup {
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  /* clip, not hidden: hidden makes this a scroll container, which would pin the sheets'
     sticky Save bar (.crx-sheet-foot) in place instead of letting it follow the page. */
  overflow: clip;
}

.crx-patient-setup .nav-tabs {
  border: 0;
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  padding: 0 var(--sp-4);
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* site.css gives these a grey fill and a divider; both have to go. */
.crx-patient-setup .nav-tabs .nav-item {
  background-color: transparent;
  border-right: 0;
  margin-bottom: -1px;
  padding: 0;
}

.crx-patient-setup .nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--sp-8) var(--sp-12);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--A-fg-2);
  background: transparent;
}

.crx-patient-setup .nav-tabs .nav-link:hover {
  color: var(--A-fg);
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--A-rule-strong, var(--rule-strong));
}

.crx-patient-setup .nav-tabs .nav-item.show .nav-link,
.crx-patient-setup .nav-tabs .nav-link.active {
  color: var(--A-accent);
  background: var(--A-surface);
  border-color: transparent;
  border-bottom: 2px solid var(--A-accent);
  border-radius: 0;
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--A-rule), inset 1px 0 0 var(--A-rule), inset -1px 0 0 var(--A-rule);
}

.crx-patient-setup .tab-content { background: var(--A-surface); }

/* A tab whose markup is still on its way. Deliberately quiet: the island inside draws the
   real skeleton once it is here, and two loading states in a row reads as a stutter. */
.crx-pane-loading,
.crx-pane-error {
  padding: var(--sp-24) var(--sp-16);
  font-size: var(--text-label);
  color: var(--A-fg-3);
}

.crx-pane-error { color: var(--danger); }

.crx-pane-error button {
  border: 0;
  background: none;
  padding: 0;
  color: var(--A-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.crx-patient-setup .patient-info-box { padding: var(--sp-14); }

/* ---------- Tabs inside a tab ----------
   Patient Chart holds its own General / Additional Medication pair. Drawn like the page
   tabs above them, two rows of the same thing competed for the same job; as a segmented
   control they read as a choice within the tab you are already on - the same control the
   reports page uses, so the pattern is one thing app-wide. */

.crx-patient-setup .tab-pane .nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2);
  margin: 0 0 var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

.crx-patient-setup .tab-pane .nav-tabs .nav-item {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.crx-patient-setup .tab-pane .nav-tabs .nav-link {
  border: 0;
  border-radius: 3px;
  padding: var(--sp-4) var(--sp-10);
  font-family: var(--font);
  font-size: var(--text-meta);
  font-weight: 400;
  line-height: 18px;
  color: var(--A-fg-2);
  background: transparent;
  box-shadow: none;
}

.crx-patient-setup .tab-pane .nav-tabs .nav-link:hover {
  border: 0;
  color: var(--A-fg);
  background: var(--A-rule-2);
}

.crx-patient-setup .tab-pane .nav-tabs .nav-item.show .nav-link,
.crx-patient-setup .tab-pane .nav-tabs .nav-link.active {
  border: 0;
  color: var(--A-fg);
  background: var(--A-surface);
  font-weight: 500;
  box-shadow: var(--shadow-1);
}

/* ---------- The legacy form, themed in place ----------
   Structure, names and the POST are untouched; only the presentation changes. */

.crx-patient-setup fieldset.fielsets {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  padding: var(--sp-14) var(--sp-14) var(--sp-4);
  margin: 0 0 var(--sp-12);
}

/* Was a boxed red caption sitting on the border; now a quiet section label. */
.crx-patient-setup fieldset.fielsets > legend.legends,
.crx-patient-setup fieldset.fielsets > legend {
  float: none;
  width: auto;
  padding: 0;
  margin: 0 0 var(--sp-10);
  border: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.crx-patient-setup .form-group { margin-bottom: var(--sp-12); }

.crx-patient-setup .form-group > label,
.crx-patient-setup label.control-label,
.crx-patient-setup .form-group label {
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  margin-bottom: var(--sp-6);
}

.crx-patient-setup .form-group label .text-danger,
.crx-patient-setup label .required { color: var(--danger); }

/* Inputs, selects and Kendo pickers all land on the same 30px row. The React islands on
   this page bring their own controls, so the date and range fields are left out: this rule
   outranks their own and was drawing a box around each end of a range. */
.crx-patient-setup .form-control,
.crx-patient-setup select.form-control,
.crx-patient-setup input[type="text"]:not(.crx-range-input):not(.crx-date-input),
.crx-patient-setup input[type="email"],
.crx-patient-setup input[type="tel"],
.crx-patient-setup input[type="number"],
.crx-patient-setup input[type="date"],
.crx-patient-setup .k-textbox,
.crx-patient-setup .k-picker-wrap,
.crx-patient-setup .k-dropdown-wrap,
.crx-patient-setup .k-numeric-wrap {
  height: 30px;
  min-height: 30px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--A-fg);
  box-shadow: none;
}

.crx-patient-setup textarea.form-control { height: auto; min-height: 64px; padding: var(--sp-6) var(--sp-8); }

.crx-patient-setup .form-control:focus,
.crx-patient-setup .k-state-focused {
  border-color: var(--A-accent);
  box-shadow: none;
  outline: none;
}

.crx-patient-setup .form-control:disabled,
.crx-patient-setup .form-control[readonly] {
  background: var(--A-surface-2);
  color: var(--A-fg-3);
}

.crx-patient-setup .form-control::placeholder { color: var(--A-fg-4, var(--ink-4)); }

/* Kendo wraps its widgets in spans that carry their own chrome. */
/* Kendo draws its own border on the wrapper; keep one border, not two. */
.crx-patient-setup .k-widget { border: 0; background: transparent; box-shadow: none; padding: 0; }
.crx-patient-setup .k-dropdown-wrap .k-input,
.crx-patient-setup .k-picker-wrap .k-input {
  height: 28px;
  line-height: 28px;
  padding: 0;
  font-size: var(--text-label);
  color: var(--A-fg);
  background: transparent;
}

.crx-patient-setup .k-select {
  background: transparent;
  border: 0;
  color: var(--A-fg-3);
}

/* Save was solid red — that reads as destructive. Primary is the app's navy. */
.crx-patient-setup .k-button.k-primary,
.crx-patient-setup input[type="submit"].k-primary {
  height: 30px;
  padding: 0 var(--sp-14);
  border: 1px solid var(--A-accent);
  border-radius: var(--A-radius);
  background: var(--A-accent);
  color: #fff;
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  box-shadow: none;
}

.crx-patient-setup .k-button.k-primary:hover,
.crx-patient-setup input[type="submit"].k-primary:hover {
  background: var(--A-accent-2);
  border-color: var(--A-accent-2);
}

.crx-patient-setup .k-button:not(.k-primary),
.crx-patient-setup a.k-button {
  height: 30px;
  padding: 0 var(--sp-12);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
}

.crx-patient-setup .k-button:not(.k-primary):hover,
.crx-patient-setup a.k-button:hover { background: var(--A-surface-2); }

.crx-patient-setup .field-validation-error,
.crx-patient-setup .text-danger { font-size: var(--text-meta); color: var(--danger); }

/* ---------- Record sheet (components/ui/Sheet) ----------
   The General tab and the Patient Chart share it: one card, one section at a time, read as
   text or edited in place. A Field renders both its control and its read face (.field-view),
   and the sheet's mode decides which is seen. Pressing Edit moves nothing. */

/* The gutter is the sheet's own: the Razor .row around the form cancels the tab's inset
   with its negative margins, so without this a narrow column puts the card on the edge.
   max-width is the content box, so on a wide column the card is still 860px and centred. */
.dirA .crx-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  max-width: 860px;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-20) var(--sp-10);
}

.dirA .crx-sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: 0 var(--sp-2);
}

.dirA .crx-sheet-bar h3 { margin: 0; font-size: var(--text-title); font-weight: 600; color: var(--A-fg); }
.dirA .crx-sheet-bar p { margin: var(--sp-2) 0 0; font-size: var(--text-label); color: var(--A-fg-3); }
.dirA .crx-sheet-acts { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }

/* The card: rail, panel and controls as one thing. */
.dirA .crx-sheet-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--A-rule);
  border-radius: 8px;
  background: var(--A-surface);
}

/* The rail: the sections by name. Wraps rather than scrolling in a narrow column. */
.dirA .crx-sheet-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: var(--sp-10) var(--sp-14);
  border-bottom: 1px solid var(--A-rule-2);
  background: var(--A-surface-2);
  border-radius: 8px 8px 0 0;
}

.dirA .crx-sheet-dot { display: flex; align-items: center; min-width: 0; }

.dirA .crx-sheet-dot > button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  height: 30px;
  padding: 0 var(--sp-12) 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--A-fg-3);
  font: inherit;
  font-size: var(--text-label);
  cursor: pointer;
}

.dirA .crx-sheet-dot > button:disabled { cursor: default; opacity: 0.6; }
.dirA .crx-sheet-dot > button:not(:disabled):hover { color: var(--A-fg); background: var(--A-rule-2); }

.dirA .crx-sheet-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--A-rule-strong);
  background: var(--A-surface);
  font-size: var(--text-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-3);
}

.dirA .crx-sheet-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The section on screen is the one thing on the rail with weight. */
.dirA .crx-sheet-dot.is-current > button {
  background: var(--A-surface);
  border-color: var(--A-rule);
  color: var(--A-fg);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.dirA .crx-sheet-dot.is-current .crx-sheet-num {
  border-color: var(--A-accent);
  background: var(--A-accent);
  color: #FFFFFF;
}

.dirA .crx-sheet-dot.is-done > button { color: var(--A-fg-2); }
.dirA .crx-sheet-dot.is-done .crx-sheet-num {
  border-color: var(--success);
  background: var(--success);
  color: #FFFFFF;
}

.dirA .crx-sheet-dot.is-error > button { color: var(--danger); }
.dirA .crx-sheet-dot.is-error .crx-sheet-num {
  border-color: var(--danger);
  background: var(--danger);
  color: #FFFFFF;
}

/* The panel. Room around the fields is what keeps a section from reading as a form. */
.dirA .crx-sheet-body { padding: var(--sp-20) var(--sp-24) var(--sp-24); }

.dirA .crx-sheet-hint { margin: 0 0 var(--sp-16); font-size: var(--text-label); color: var(--A-fg-3); }

.dirA .crx-sheet-panel[hidden] { display: none; }

/* Two fields to a row, always: a slot is the same width on every step and in either mode. */
.dirA .crx-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16) var(--sp-32); }

@media (max-width: 640px) {
  .dirA .crx-sheet-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The read face: the value at the control's height, so a row is as tall either way. Hidden
   everywhere by default — ComboField always supplies one, and outside a Sheet it would print
   the chosen option again under the control. */
.dirA .field-view {
  display: none;
  align-items: center;
  box-sizing: border-box;
  min-height: 30px;
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.dirA .field-view .field-empty { font-style: normal; color: var(--A-fg-4); }

.dirA .crx-sheet.is-read .field-view { display: flex; }
.dirA .crx-sheet.is-read .field-row > :not(.field-label):not(.field-view):not(.field-static):not(.skel) { display: none; }
.dirA .crx-sheet.is-read .field-req { display: none; }

/* Labels read quietly; the value is the thing. Same size in both modes, so nothing shifts. */
.dirA .crx-sheet .field-label { font-size: var(--text-meta); font-weight: 500; color: var(--A-fg-3); margin-bottom: var(--sp-4); }
.dirA .crx-sheet.is-edit .field-label { color: var(--A-fg-2); }

/* Values the sheet never edits read like the others, in both modes. */
.dirA .crx-sheet .field-static {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 30px;
  padding: 0;
  border: 0;
  font-size: var(--text-body);
  line-height: 1.4;
}

/* A yes/no at input height, boxed like the inputs beside it. */
.dirA .crx-sheet .field-check-line.is-boxed {
  display: flex;
  box-sizing: border-box;
  height: 30px;
  padding: 0 var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .crx-sheet .field-check-line.is-boxed:has(input:disabled) {
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  cursor: default;
}

/* Where you are, and the way on. */
.dirA .crx-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-12);
  padding: var(--sp-12) var(--sp-24);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .crx-sheet-count { font-size: var(--text-meta); color: var(--A-fg-3); font-variant-numeric: tabular-nums; }
.dirA .crx-sheet-foot .crx-sheet-acts { margin-left: auto; }

/* ---------- Email addresses, on the Contact step (features/patients/PatientEmails) ---------- */

.dirA .crx-emails { display: flex; flex-direction: column; min-width: 0; }
.dirA .crx-emails .field-label { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; }
.dirA .field-hint-inline { font-size: var(--text-meta); font-weight: 400; color: var(--A-fg-3); }

.dirA .crx-emails-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 30px;
  margin: 0;
  font-size: var(--text-body);
  color: var(--A-fg-4);
}

.dirA .crx-emails-empty.is-error { color: var(--danger); }

.dirA .crx-email-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }

.dirA .crx-email {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-10);
  min-height: 30px;
  padding: var(--sp-4) 0;
  font-size: var(--text-body);
  color: var(--A-fg);
}

.dirA .crx-email > svg { color: var(--A-fg-4); }
.dirA .crx-email-list.is-edit .crx-email { grid-template-columns: auto minmax(0, 1fr) 150px auto; padding: var(--sp-4) 0; }
.dirA .crx-email-list.is-edit .crx-email > .input { height: 28px; }
.dirA .crx-email-list.is-edit .crx-email > input[type="radio"] { margin: 0 var(--sp-2); accent-color: var(--A-accent); cursor: pointer; }

.dirA .crx-email-address {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The address is corrected in place, so its box shares the row with the primary chip. */
.dirA .crx-email-address .input { flex: 1 1 180px; min-width: 0; height: 28px; }

.dirA .crx-email-label { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-email-add {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}

@media (max-width: 640px) {
  .dirA .crx-email-list.is-edit .crx-email { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dirA .crx-email-list.is-edit .crx-email > .input { grid-column: 2; }
  .dirA .crx-email-add { grid-template-columns: minmax(0, 1fr); }
}

.dirA .linklike {
  border: 0;
  background: none;
  padding: 0;
  color: var(--A-accent);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* The tab's own inset comes from the box inside it; a second one here would double it. */
.crx-patient-setup #General { padding: 0; }

/* ---------- The prescription form (features/prescriptions/PrescriptionForm) ----------
   A summary card that stays put beside the steps: the facts a pharmacist checks before
   dispensing anything, while they work down the form. */

/* The page itself does not scroll: the rail stays at the top and the Back/Next controls
   stay at the bottom, and the step's own body is what moves. A form you have to scroll
   the page through loses its navigation the moment the content is a screen long. */
.dirA .rx-form {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: stretch;
  /* No gutter of its own: .page-body already pays it, and paying it twice set the
     columns in from the lifecycle rail directly above them. */
  padding: 0;
  flex: 1;
  height: 100%;
  min-height: 0;
}

/* With a script on show the page is three columns: context, the form, and what it was
   read from. The context column never resizes -- the split trades width between the two
   panes you actually read and type in. */
.dirA .rx-form.has-script.is-split-even   { grid-template-columns: 252px minmax(0, 1fr) minmax(0, 1fr); }
.dirA .rx-form.has-script.is-split-form   { grid-template-columns: 252px minmax(0, 1fr) minmax(300px, 0.52fr); }
.dirA .rx-form.has-script.is-split-script { grid-template-columns: 252px minmax(300px, 0.52fr) minmax(0, 1fr); }

/* ---------- Awaiting approval (features/prescriptions/approval) ----------

   Past Processing the page gains a column: which drug is being approved is a choice, and the
   delivery details are the only thing left to type into, so the two sit together between the
   record on the left and the drug's own panel. */

/* Nothing picked and no script: two columns, the second taking everything left. */
.dirA .rx-form.is-approving { grid-template-columns: 252px minmax(0, 1fr); }

/* With the script up it is three; with no panel on screen "the form" is the drugs column. */

.dirA .rx-form.is-approving.has-script.is-split-even   { grid-template-columns: 252px minmax(260px, 1fr) minmax(0, 1.4fr); }
.dirA .rx-form.is-approving.has-script.is-split-form   { grid-template-columns: 252px minmax(300px, 1fr) minmax(0, 0.8fr); }
.dirA .rx-form.is-approving.has-script.is-split-script { grid-template-columns: 252px minmax(220px, 26%) minmax(0, 1fr); }

/* A drug is open: the picker narrows back and the panel takes the middle. */
.dirA .rx-form.is-approving.has-drug { grid-template-columns: 252px minmax(212px, 26%) minmax(0, 1fr); }

.dirA .rx-form.is-approving.has-drug.has-script.is-split-even   { grid-template-columns: 252px minmax(212px, 22%) minmax(0, 1fr) minmax(0, 1fr); }
.dirA .rx-form.is-approving.has-drug.has-script.is-split-form   { grid-template-columns: 252px minmax(212px, 22%) minmax(0, 1fr) minmax(280px, 0.6fr); }
.dirA .rx-form.is-approving.has-drug.has-script.is-split-script { grid-template-columns: 252px minmax(212px, 20%) minmax(280px, 0.6fr) minmax(0, 1fr); }

/* The record put away: the same layouts without their first track, since a grid pays for
   every track it names. */
.dirA .rx-form.is-approving.no-info { grid-template-columns: minmax(0, 1fr); }

.dirA .rx-form.is-approving.no-info.has-script.is-split-even   { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); }
.dirA .rx-form.is-approving.no-info.has-script.is-split-form   { grid-template-columns: minmax(300px, 1fr) minmax(0, 0.8fr); }
.dirA .rx-form.is-approving.no-info.has-script.is-split-script { grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); }

.dirA .rx-form.is-approving.no-info.has-drug { grid-template-columns: minmax(212px, 30%) minmax(0, 1fr); }

.dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-even   { grid-template-columns: minmax(212px, 26%) minmax(0, 1fr) minmax(0, 1fr); }
.dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-form   { grid-template-columns: minmax(212px, 26%) minmax(0, 1fr) minmax(280px, 0.6fr); }
.dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-script { grid-template-columns: minmax(212px, 24%) minmax(280px, 0.6fr) minmax(0, 1fr); }

/* ---------- A script and its handovers (features/prescriptions/FillBrowser) ----------

   Opening the prescription itself, rather than one of its fills: the record on the left,
   its fills as the column you choose from, the one picked beside them, and the script it
   was read from last. The same four tracks the approval layout uses, for the same reason. */
.dirA .rx-form.is-fills { grid-template-columns: 252px minmax(212px, 26%) minmax(0, 1fr); }

.dirA .rx-form.is-fills.has-script.is-split-even   { grid-template-columns: 252px minmax(212px, 22%) minmax(0, 1fr) minmax(0, 1fr); }
.dirA .rx-form.is-fills.has-script.is-split-form   { grid-template-columns: 252px minmax(212px, 22%) minmax(0, 1fr) minmax(280px, 0.6fr); }
.dirA .rx-form.is-fills.has-script.is-split-script { grid-template-columns: 252px minmax(212px, 20%) minmax(280px, 0.6fr) minmax(0, 1fr); }

/* The record put away, which gives the fill and the script the width it was holding. */
.dirA .rx-form.is-fills.no-info { grid-template-columns: minmax(212px, 30%) minmax(0, 1fr); }

.dirA .rx-form.is-fills.no-info.has-script.is-split-even   { grid-template-columns: minmax(212px, 26%) minmax(0, 1fr) minmax(0, 1fr); }
.dirA .rx-form.is-fills.no-info.has-script.is-split-form   { grid-template-columns: minmax(212px, 26%) minmax(0, 1fr) minmax(280px, 0.6fr); }
.dirA .rx-form.is-fills.no-info.has-script.is-split-script { grid-template-columns: minmax(212px, 24%) minmax(280px, 0.6fr) minmax(0, 1fr); }

/* Nothing has gone out yet, so the panel says so and offers the form instead. */
.dirA .rx-fills-none {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  line-height: 1.5;
}

.dirA .rx-fills-act { margin: var(--sp-12) 0 0; }

/* Two cards that hold their place. The column itself never scrolls: one bar down the
   outside of both meant scrolling past the whole drug list to reach a due date, and the
   heading of whichever card you were in had already gone off the top. */
.dirA .rx-pick {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.dirA .rx-pick-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: var(--sp-12) var(--sp-12) var(--sp-14);
}

/* Drugs takes what its list needs, up to half the column; delivery takes the rest. Each
   scrolls inside itself. */
/* Delivery folded away, which is most of the time: the drugs take the whole column. */
.dirA .rx-pick-card.is-drugs { flex: 1 1 auto; }
.dirA .rx-pick-card.is-delivery { flex: none; }

/* Open, it needs room to be filled in, and the drugs give it back. */
.dirA .rx-pick.is-delivering .rx-pick-card.is-drugs { flex: 0 1 auto; max-height: 53%; }
.dirA .rx-pick.is-delivering .rx-pick-card.is-delivery { flex: 1 1 auto; }

/* The scrolling part of a card. The bar sits in the card's own padding rather than
   pushing the fields in from the edge. */
.dirA .rx-pick-list,
.dirA .rx-pick-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: var(--sp-4);
  margin-right: calc(-1 * var(--sp-4));
}

.dirA .rx-pick-card .btn { flex: none; width: 100%; margin-top: var(--sp-10); justify-content: center; }

/* The fold's header. A button takes none of the page's type, hence font: inherit. */
.dirA .rx-pick-fold {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.dirA .rx-pick-fold > svg {
  flex: none;
  margin-left: auto;
  color: var(--A-fg-3);
  transition: transform 140ms ease;
}

.dirA .rx-pick-card.is-delivery.is-open .rx-pick-fold > svg { transform: rotate(180deg); }

/* What it is set to, said on the closed header so folding hides the fields, not the answer. */
.dirA .rx-pick-sum {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--A-fg-3);
}

.dirA .rx-pick-card.is-delivery .rx-pick-title { margin-bottom: 0; }
.dirA .rx-pick-card.is-delivery.is-open .rx-pick-title { margin-bottom: var(--sp-10); }

@media (prefers-reduced-motion: reduce) {
  .dirA .rx-pick-fold > svg { transition: none; }
}

.dirA .rx-pick-title {
  flex: none;
  margin: 0 0 var(--sp-10);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.dirA .rx-pick-list { display: flex; flex-direction: column; gap: var(--sp-6); }

/* A drug is picked, not opened: the panel beside it is already showing one, so the button
   says which drug and how far along it is rather than acting like a disclosure. */
.dirA .rx-pick-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  cursor: pointer;
  /* A button takes the browser's font, not the page's. Without this the drug name was the
     same 13px as the patient's but drawn in the UA's own face, which is wider and taller
     and reads a size up — especially on a name the record stores in capitals. */
  font: inherit;
  color: inherit;
}

.dirA .rx-pick-item:hover { background: var(--A-tint); }

.dirA .rx-pick-item.is-on {
  border-color: var(--A-accent);
  background: var(--A-tint);
}

.dirA .rx-pick-item.is-ok { border-left: 3px solid #1B7F4B; }
.dirA .rx-pick-item.is-no { border-left: 3px solid #B4451C; }

/* A size under the patient's name: drug names are stored in capitals and mostly wrap. */
.dirA .rx-pick-name {
  display: block;
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.35;
  color: var(--A-fg);
}

/* Rx number and status on one line: the rail above no longer answers this per drug. */
.dirA .rx-pick-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-4);
}

.dirA .rx-pick-foot .badge { flex: none; }

.dirA .rx-pick-rx {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
}

/* ---- the fills of one prescription, under the drug itself ---- */

.dirA .rx-fillbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .rx-fillbar-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rx-fillbar-n {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--A-accent);
  color: #fff;
  font-size: var(--text-meta);
  font-weight: 600;
  text-align: center;
}

.dirA .rx-fillbar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-6);
}

.dirA .rx-fillbar-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-2);
  border-radius: var(--A-radius);
  color: inherit;
  text-decoration: none;
}

.dirA a.rx-fillbar-item:hover { background: var(--A-tint); border-color: var(--A-accent); }

/* The handover on screen: it is where you are, so it is not a way to go. */
.dirA .rx-fillbar-item.is-on {
  border-left-color: var(--A-accent);
  background: var(--A-tint);
  cursor: default;
}

.dirA .rx-fillbar-top {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.dirA .rx-fillbar-order {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rx-fillbar-kind { font-size: var(--text-meta); color: var(--A-fg-2); }

.dirA .rx-fillbar-facts {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rx-fillbar-this { margin-left: auto; color: var(--A-accent); font-weight: 600; }

.dirA .rx-fillbar-none { margin: var(--sp-12) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

/* In the badge's place while the new status is read back, so an approval does not look
   like it did nothing for as long as the round trip takes. */
.dirA .rx-pick-wait {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rx-pick-wait .crx-spin { width: 11px; height: 11px; border-width: 2px; }

/* The rail is being read again: it still shows where the order was, so it says so. */
.dirA .rx-rail.is-busy { opacity: 0.55; transition: opacity 120ms ease; }

/* The four checks, folded.
   Each carries its own evidence, its own note and its own pair of buttons, and four of
   those unfolded at once is a panel nobody reads to the bottom of. Any of them can be
   decided at any time — nothing waits on the one above it. */
.dirA .rx-approve { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .rx-approve-list {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rx-approve-step + .rx-approve-step { border-top: 1px solid var(--A-rule); }

.dirA .rx-approve-step h3 { margin: 0; font-size: inherit; font-weight: inherit; }

/* The whole bar is the control, so there is no small target to find. */
.dirA .rx-approve-head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.dirA .rx-approve-head:hover { background: var(--A-tint); }
.dirA .rx-approve-step.is-open .rx-approve-head { background: var(--A-tint); }
.dirA .rx-approve-step.is-ok.is-open .rx-approve-head { background: var(--success-100); }
.dirA .rx-approve-step.is-no.is-open .rx-approve-head { background: var(--danger-100); }

.dirA .rx-approve-head > svg {
  flex: none;
  margin-left: var(--sp-2, 2px);
  color: var(--A-fg-4);
  transition: transform 120ms ease;
}

.dirA .rx-approve-step.is-open .rx-approve-head > svg { transform: rotate(180deg); }

.dirA .rx-approve-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: 600;
}

.dirA .rx-approve-pip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  font-weight: 700;
}

.dirA .rx-approve-step.is-ok .rx-approve-pip { background: #CFE6DA; color: #0B6B45; }
.dirA .rx-approve-step.is-no .rx-approve-pip { background: #F2D6C7; color: #8A4526; }

.dirA .rx-approve-verdict {
  flex: none;
  font-size: var(--text-micro, var(--text-meta));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

.dirA .rx-approve-step.is-ok .rx-approve-verdict { color: #0B6B45; }
.dirA .rx-approve-step.is-no .rx-approve-verdict { color: #8A4526; }

/* Squared up with the card, not indented under the title. Hanging the body off the pip
   cost 34px of a column that is already narrow, and the fold is plainly the open row's
   without being pushed in to prove it. */
.dirA .rx-approve-body { padding: 0 var(--sp-12) var(--sp-14); }

.dirA .rx-approve-ask {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  line-height: 1.5;
}

.dirA .rx-approve-note {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .rx-approve-act { margin-top: var(--sp-10); }

.dirA .rx-approve-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font: inherit;
  resize: vertical;
}

.dirA .rx-approve-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.dirA .rx-approve-quiet { margin: var(--sp-8) 0 0; font-size: var(--text-meta); color: var(--A-fg-4); }

/* Why a move was made, under the entry that made it. */
.dirA .hist-why { margin: var(--sp-4) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

/* A yes/no flipped from the row: the badge is the button. */
.dirA .crx-flip { border: 0; background: none; padding: 0; cursor: pointer; }
.dirA .crx-flip:disabled { opacity: 0.55; cursor: progress; }
.dirA .crx-flip:hover .badge { filter: brightness(0.96); }

/* Ask FDB again from the approval screen. */
.dirA .rx-approve-recheck { margin: var(--sp-8) 0 0; }

/* Summary or the locked form, inside Drug details. */
.dirA .rx-detail-view { display: flex; margin: 0 0 var(--sp-12); }

.dirA .rx-approve-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin: var(--sp-8) 0 0;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid #F0E0B5;
  border-radius: var(--A-radius);
  background: var(--warning-100);
  font-size: var(--text-meta);
}

.dirA .rx-approve > .rx-approve-warn { margin-top: 0; }

/* The screening messages, as the approval screen has always listed them. */
.dirA .rx-screen-table {
  width: 100%;
  margin-top: var(--sp-8);
  border-collapse: collapse;
  font-size: var(--text-meta);
}

.dirA .rx-screen-table th {
  text-align: left;
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.dirA .rx-screen-table td {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
  vertical-align: top;
}

.dirA .rx-sev { font-weight: 600; white-space: nowrap; }
.dirA .rx-sev.is-major, .dirA .rx-sev.is-severe { color: #8A4526; }
.dirA .rx-sev.is-moderate { color: #8A5A16; }
.dirA .rx-sev.is-low, .dirA .rx-sev.is-minor { color: var(--A-accent); }

/* Drug details, printed rather than typed. */
/* Drug details as the slip that goes in the bag: Rx and date at the head, quantity as the
   one figure, every other field on its own line. */
.dirA .rx-slip { font-variant-numeric: tabular-nums; }

.dirA .rx-slip-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--A-fg-3);
}

.dirA .rx-slip-drug {
  margin: var(--sp-8) 0 var(--sp-10);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
}

/* Ruled above and perforated below, so the count reads as the line it is checked against. */
.dirA .rx-slip-qty {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0;
  padding: var(--sp-8) 0;
  border-top: 2px solid var(--A-fg);
  border-bottom: 1px dashed var(--A-rule);
}

.dirA .rx-slip-qty b { font-size: 22px; font-weight: 600; line-height: 1; }
.dirA .rx-slip-qty span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .rx-slip-sig {
  margin: var(--sp-10) 0 var(--sp-14);
  font-size: var(--text-body);
  line-height: 1.5;
}

.dirA .rx-slip-sect + .rx-slip-sect { margin-top: var(--sp-12); }

.dirA .rx-slip-sect h4 {
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-10);
  border-top: 1px dashed var(--A-rule);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

.dirA .rx-slip-grid { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); }

.dirA .rx-slip-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  min-width: 0;
}

/* A sentence reads badly right-aligned, so it takes its own line under the label. */
.dirA .rx-slip-grid > div.is-wide { flex-direction: column; align-items: stretch; gap: 2px; }

.dirA .rx-slip-grid dt {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.dirA .rx-slip-grid dd {
  margin: 0;
  min-width: 0;
  text-align: right;
  font-size: var(--text-body);
  line-height: 1.4;
}

.dirA .rx-slip-grid > div.is-wide dd { text-align: left; }
.dirA .rx-slip .is-none { color: var(--A-fg-4); }

/* Marks a value that was worked out rather than entered. A mark, not a caption: a line
   under every other row broke the column of figures. */
.dirA .rx-slip-why {
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--sp-4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--A-fg-4);
  cursor: help;
}

.dirA .rx-slip-why:hover,
.dirA .rx-slip-why:focus-visible { color: var(--A-accent); }

/* The label, in a tab rather than a dialog: here it is evidence, not an act. */
.dirA .rx-labeltab { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .rx-labeltab-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  font-size: var(--text-meta);
}

.dirA .rx-labeltab .crx-label-box {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}

/* Scaled, not scrolled: the frame is laid out at the label's own 4.5in and shrunk to the
   column, so it never grows a bar of its own along the bottom. */
.dirA .rx-labeltab .crx-label-box iframe {
  display: block;
  border: 0;
}

.dirA .rx-label-skel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-10);
  padding: var(--sp-16) var(--sp-20, 20px);
}

.dirA .rx-label-skel > span {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--A-surface-2) 25%, var(--A-surface-2) 37%, var(--A-surface-2) 63%);
  background-size: 400% 100%;
  animation: crxSkel 1.4s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dirA .rx-label-skel > span { animation: none; }
}

.dirA .rx-labeltab-name { font-weight: 600; font-variant-numeric: tabular-nums; }
.dirA .rx-labeltab-paper { color: var(--A-fg-3); }
.dirA .rx-spacer { flex: 1 1 auto; }

/* Script or printed label in one column: the switch leads the bar, fenced from the page chips. */
.dirA .rx-preview-swap {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--sp-4);
  height: 26px;
  padding-right: var(--sp-8);
  border-right: 1px solid var(--A-rule);
}

/* Two short words that never shrink; the file name or the paper note gives way instead. */
.dirA .rx-preview-swap .rx-preview-tab { flex: none; max-width: none; }

/* The label wears the script pane's frame, so swapping the two does not change the shape. */
.dirA .rx-script-col > .rx-labeltab {
  gap: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rx-script-col > .rx-labeltab .rx-labeltab-bar {
  flex: none;
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  overflow: hidden;
}

/* The controls hold their size and the wording gives way, as on the script's own bar. */
.dirA .rx-script-col > .rx-labeltab .rx-labeltab-bar .btn,
.dirA .rx-script-col > .rx-labeltab .rx-labeltab-bar .rx-split {
  flex: none;
  height: 26px;
  box-sizing: border-box;
}

.dirA .rx-script-col > .rx-labeltab .rx-labeltab-name,
.dirA .rx-script-col > .rx-labeltab .rx-labeltab-paper {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* One fixed-size sheet, matted like a document viewer rather than stretched. */
.dirA .rx-script-col > .rx-labeltab .crx-label-box {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-12) 0;
  background: var(--A-surface-2);
}

/* Four columns need the width for it. Below that the script folds away first, because it
   has its own button and the approval panel does not. */
@media (max-width: 1500px) {
  .dirA .rx-form.is-approving.has-drug.has-script.is-split-even,
  .dirA .rx-form.is-approving.has-drug.has-script.is-split-form,
  .dirA .rx-form.is-approving.has-drug.has-script.is-split-script { grid-template-columns: 252px minmax(200px, 24%) minmax(0, 1fr); }

  .dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-even,
  .dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-form,
  .dirA .rx-form.is-approving.no-info.has-drug.has-script.is-split-script { grid-template-columns: minmax(200px, 28%) minmax(0, 1fr); }

  .dirA .rx-form.is-approving.has-drug.has-script .rx-script-col { display: none; }

  /* The script's column goes the same way while the fills are being read, and the same
     button in the header brings it back. */
  .dirA .rx-form.is-fills.has-script.is-split-even,
  .dirA .rx-form.is-fills.has-script.is-split-form,
  .dirA .rx-form.is-fills.has-script.is-split-script { grid-template-columns: 252px minmax(200px, 24%) minmax(0, 1fr); }

  .dirA .rx-form.is-fills.no-info.has-script.is-split-even,
  .dirA .rx-form.is-fills.no-info.has-script.is-split-form,
  .dirA .rx-form.is-fills.no-info.has-script.is-split-script { grid-template-columns: minmax(200px, 28%) minmax(0, 1fr); }

  .dirA .rx-form.is-fills.has-script .rx-script-col { display: none; }
}

/* Context: where you are, and who this is for. One column, because both answer the same
   question and splitting them would cost a third of the width to say it twice. */
.dirA .rx-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  min-width: 0;
  min-height: 0;
}

/* The sections, as tabs across the top of the panel they fill. */
/* One line: the sections on the left, what acts on the panel on the right. */
.dirA .rx-tabrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-14);
  /* Out through the card's own padding so the underline runs the full width of the
     panel the tabs belong to, then back in so the labels line up with the content. */
  margin: calc(var(--sp-10) * -1) calc(var(--sp-16) * -1) 0;
  padding: 0 var(--sp-16);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .rx-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-20);
  /* The tabs scroll before the buttons do: losing Upload script off the edge would hide
     the only way to attach one. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.dirA .rx-tabs::-webkit-scrollbar { display: none; }

.dirA .rx-tab-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: none;
  margin-left: auto;
  /* Clear of the rule the tabs sit on, so the buttons read as belonging to the row
     rather than straddling it. */
  padding: var(--sp-6) 0;
}

.dirA .rx-tab-acts .btn { height: 28px; }

.dirA .rx-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  flex: none;
  height: 40px;
  padding: 0 2px;
  border: 0;
  /* The underline is on every tab from the start, transparent until chosen, so picking
     one moves no text. */
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--text-body);
  color: var(--A-fg-3);
  white-space: nowrap;
  cursor: pointer;
}

.dirA .rx-tab:hover { color: var(--A-fg); }

.dirA .rx-tab.is-on {
  border-bottom-color: var(--A-accent);
  color: var(--A-fg);
  font-weight: 600;
}

.dirA .rx-tab-count { font-size: var(--text-meta); color: var(--A-fg-4); }
.dirA .rx-tab-count.is-danger { color: var(--danger); font-weight: 600; }
.dirA .rx-tab-flag { display: inline-flex; color: var(--warning); }

/* ---------- The pages this order is written on ----------
   Pages out of more than one document, drawn onto canvases: no PDF viewer shows a
   selection of pages across two files. */

.dirA .rx-preview-pages {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-8);
  background: var(--A-surface-2);
}

.dirA .rx-preview-page {
  margin: 0 0 var(--sp-12);
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  overflow: hidden;
}

.dirA .rx-preview-page:last-child { margin-bottom: 0; }

.dirA .rx-preview-page figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-10);
  border-bottom: 1px solid var(--A-rule-2);
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-2);
}

/* The drug names give way before the page number does: which page it is never wraps. */
.dirA .rx-preview-page figcaption > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dirA .rx-preview-page-n {
  margin-left: auto;
  flex: none;
  font-weight: 500;
  color: var(--A-fg-3);
}

.dirA .rx-preview-page canvas { display: block; max-width: 100%; height: auto; }
.dirA .rx-preview-page { overflow-x: auto; }

/* The script column. It is a column of the page, never a layer over it. */
.dirA .rx-script-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dirA .rx-script-col > * { flex: 1; min-height: 0; }

/* Three widths, three icons: the filled side of each is the one being given the room. */
.dirA .rx-split {
  display: inline-flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rx-split .crx-iconbtn {
  width: 28px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 0;
  color: var(--A-fg-3);
}

.dirA .rx-split .crx-iconbtn + .crx-iconbtn { border-left: 1px solid var(--A-rule); }
.dirA .rx-split .crx-iconbtn:hover { background: var(--A-surface-2); color: var(--A-fg); }
.dirA .rx-split .crx-iconbtn.is-on { background: var(--A-accent); color: #FFFFFF; }

/* ---------- The script with its free text drawn on it ---------- */

/* Pages painted by pdf.js so the notes can sit on top of them. Same geometry as the
   annotation editor: a note's position is a fraction of the page box, its size is in PDF
   points times the page's own scale. */
.dirA .rx-annotated {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* The gutter is held open whether or not a bar is in it. Without this the pane is one
     width with the bar and another without, and anything fitted to that width oscillates
     between the two. */
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  /* Start, not centre: a centred child wider than its scroller leaves its left edge
     unreachable. The auto margin below centres it only while it fits. */
  align-items: flex-start;
  gap: var(--sp-10);
  padding: var(--sp-10);
  background: var(--A-surface-2);
}

.dirA .rx-annotated > * { margin-inline: auto; }

.dirA .rx-annotated-page {
  position: relative;
  flex: none;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .14);
}

.dirA .rx-annotated-page canvas { display: block; width: 100%; height: 100%; }

/* Not interactive here: this is the reading copy. Editing is the pencil, which opens the
   editor that owns dragging, colour and the change history. */
.dirA .rx-annotated-note {
  position: absolute;
  max-width: 92%;
  white-space: pre-wrap;
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

/* How many notes are on the script, on the button that opens them. */
.dirA .rx-preview-act.has-count { position: relative; color: var(--A-accent); }

.dirA .rx-preview-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--A-accent);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

/* ---------- Icon buttons ---------- */

/* A control whose label is its tooltip. Square, quiet, and the same size everywhere, so a
   row of them reads as a set rather than as leftovers. */
.dirA .crx-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  /* The file-picking variant is a <label>, and Bootstrap gives every label a bottom
     margin. In a centred flex row that margin is part of the box, so the one button
     sat higher than the one beside it. */
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  background: none;
  color: var(--A-fg-2);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.dirA .crx-iconbtn:hover { border-color: var(--A-rule); background: var(--A-surface-2); color: var(--A-fg); }
.dirA .crx-iconbtn:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 1px; }

.dirA .crx-iconbtn.is-on {
  border-color: var(--A-rule);
  background: var(--A-tint);
  color: var(--A-accent);
}

.dirA .crx-iconbtn.is-danger:hover { border-color: var(--danger); color: var(--danger); }

.dirA .crx-iconbtn:disabled,
.dirA .crx-iconbtn.is-off { opacity: .45; cursor: not-allowed; }
.dirA .crx-iconbtn:disabled:hover { border-color: transparent; background: none; color: var(--A-fg-2); }

/* The file-picking variant: a label, because that is what opens a file dialog. */
.dirA .crx-iconbtn.is-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dirA .crx-iconbtn.is-file { position: relative; }

/* ---------- Tooltip ---------- */

/* Dark against a light app, so it reads as a layer above the page rather than another
   panel in it. Portalled to the body, so nothing can clip it.

   The component measures this box and then places it, so there is no transform here:
   a transform moves the box AFTER layout, which means the browser had already squeezed
   it against whatever edge its left offset put it near. Width is content-driven and
   capped, so a short label stays on one line and a long one wraps instead of running
   off the screen. */
.dirA .crx-tip,
.crx-tip {
  position: fixed;
  z-index: 9000;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: 6px 9px;
  border-radius: 5px;
  background: #11202F;
  box-shadow: 0 4px 16px rgba(10, 22, 36, .22), 0 1px 2px rgba(10, 22, 36, .18);
  color: #F2F5F8;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: crx-tip-in 120ms ease-out both;
}

/* The arrow is the same square, rotated: one colour to keep in step, not two. It is
   placed from --tip-arrow rather than centred, so a tooltip nudged back from the edge
   still points at the control it belongs to. */
.crx-tip::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: inherit;
  transform: rotate(45deg);
}

.crx-tip.is-top::after { bottom: -3px; left: var(--tip-arrow, 50%); margin-left: -3.5px; }
.crx-tip.is-bottom::after { top: -3px; left: var(--tip-arrow, 50%); margin-left: -3.5px; }
.crx-tip.is-left::after { right: -3px; top: var(--tip-arrow, 50%); margin-top: -3.5px; }
.crx-tip.is-right::after { left: -3px; top: var(--tip-arrow, 50%); margin-top: -3.5px; }

@keyframes crx-tip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A tooltip that slides is a tooltip you read while it moves. */
@media (prefers-reduced-motion: reduce) {
  .crx-tip { animation: none; }
}

/* What is still missing, said once, next to the button that will refuse because of it. */
/* Not a label: it is the way to whatever is outstanding, now that the button beside it is
   held until that is dealt with. */
.dirA .crx-step-todo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--text-meta);
  color: var(--warning);
  text-align: left;
  cursor: pointer;
}

.dirA .crx-step-todo:hover { text-decoration: underline; }

/* The stage a drug is at, named, beside its pips. The rail above shows the ORDER's
   stage -- the least advanced of its drugs -- so a drug can legitimately be further on
   than the rail, and the pips alone did not say which stage was which. */
.dirA .rx-drug-stage {
  flex: none;
  margin-left: auto;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  white-space: nowrap;
}

/* One pip per stage on a drug's own header: the position is the message, and the name
   beside it carries the rest. */
.dirA .rx-drug-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  margin-left: var(--sp-6);
}

.dirA .rx-drug-pip {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--A-rule);
}

.dirA .rx-drug-pip.is-done { background: var(--A-accent); }
.dirA .rx-drug-pip.is-now { background: var(--warning); }

/* The delivery method, said quietly at the end of the rail, so a rail one stage shorter
   than yesterday's reads as a pickup rather than a missing stage. */
.dirA .rx-rail-method {
  flex: none;
  padding: 2px var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: 10px;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  white-space: nowrap;
}

.dirA .rx-form-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dirA .rx-form .crx-steps { flex: 1; min-height: 0; }

/* The history stands in for the step card, so it inherits its shape and its height. */
.dirA .rx-audit {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-12) var(--sp-16) var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
}

.dirA .rx-audit-head { flex: none; }

.dirA .rx-audit-head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font-size: var(--text-title);
  font-weight: 650;
  color: var(--A-fg);
}

.dirA .rx-audit-head h2 svg { color: var(--A-fg-3); }
.dirA .rx-audit-head p { margin: var(--sp-4) 0 0; font-size: var(--text-label); color: var(--A-fg-3); }

/* The grid takes what is left, and scrolls inside itself rather than growing the page. */
.dirA .rx-audit .crx-grid { flex: 1; min-height: 0; }

.dirA .rx-audit-none {
  flex: 1;
  display: grid;
  place-content: center;
  margin: 0;
  font-size: var(--text-label);
  color: var(--A-fg-3);
}

/* The header button while the history is the thing on show. */
.dirA .page-actions .btn.is-on {
  border-color: var(--A-accent);
  background: var(--A-accent);
  color: #FFFFFF;
}
.dirA .page-actions .btn.is-on svg { color: currentColor; }

/* The one scrolling part of the page.

   It reaches out through the card's own padding and pays it back as its own, so the
   scrollbar rides the card's inner edge instead of floating a long way inside it, while
   the content keeps the inset it had. */
.dirA .rx-form .crx-step-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 calc(var(--sp-16) * -1);
  padding-left: var(--sp-16);
  padding-right: var(--sp-10);
  /* The step's own heading and controls already separate it from the rail above. */
  margin-top: -2px;
}

/* Stacked on a narrow screen, where a fixed frame would leave no room to read in: the
   page takes the scrolling back. */
@media (max-width: 1240px) {
  /* Two columns before one: the script is the first thing that can afford to go under
     the form, and the context column is the last. */
  .dirA .rx-form.has-script.is-split-even,
  .dirA .rx-form.has-script.is-split-form,
  .dirA .rx-form.has-script.is-split-script {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .dirA .rx-form.has-script .rx-script-col { grid-column: 1 / -1; min-height: 420px; }

  /* Two rows cannot share one frame's height: the form's row was left about forty pixels
     tall. The rows take what they need and the page hands back its scroll. */
  .dirA .rx-form.has-script { height: auto; min-height: 0; }

  html:has(> body.crx-island-page:has(.rx-form.has-script)),
  body.crx-island-page:has(.rx-form.has-script) { overflow: auto; }

  body.crx-island-page:has(.rx-form.has-script) [data-crx-island],
  body.crx-island-page:has(.rx-form.has-script) [data-crx-island] > .dirA,
  body.crx-island-page:has(.rx-form.has-script) [data-crx-island] > .dirA > .main {
    height: auto;
    min-height: 100%;
  }

  body.crx-island-page .dirA .page-body:has(.rx-form.has-script) {
    display: block;
    overflow: visible;
  }

  /* Panels that were measured against the frame take their content instead. */
  .dirA .rx-form.has-script .rx-side,
  .dirA .rx-form.has-script .rx-pick,
  .dirA .rx-form.has-script .rx-form-main,
  .dirA .rx-form.has-script .crx-steps { height: auto; min-height: 0; }

  .dirA .rx-form.has-script .rx-side { overflow: visible; }
  .dirA .rx-form.has-script .rx-summary { max-height: none; }
}

@media (max-width: 1000px) {
  .dirA .rx-form,
  .dirA .rx-form.has-script.is-split-even,
  .dirA .rx-form.has-script.is-split-form,
  .dirA .rx-form.has-script.is-split-script {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    overflow: auto;
  }
  .dirA .rx-form .crx-step-body { overflow: visible; }
  .dirA .rx-side { overflow: visible; }
  .dirA .rx-summary { max-height: none; }
}

.dirA .rx-summary {
  /* As tall as its content, and no taller — but never taller than the frame either, so a
     long allergy list scrolls inside the card instead of pushing the form apart.

     flex, not align-self: this card sits in a column, where align-self is the HORIZONTAL
     axis. Setting it to start shrank the card to the width of its longest line and left the
     rest of the track as a gap between it and the form. */
  flex: 0 0 auto;
  width: 100%;
  max-height: 100%;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-1);
  /* Sideways never, downwards when the content asks for it — the single `overflow: hidden`
     that used to end this block clipped the list the line above promises to scroll. */
  overflow-x: hidden;
  overflow-y: auto;
}

.dirA .rx-summary-head {
  padding: var(--sp-12) var(--sp-14);
  border-bottom: 1px solid var(--A-rule-2);
}

/* The patient the order is for: their face, and their name as the way to their chart. */
.dirA .rx-summary-head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.dirA .rx-summary-face {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg-3);
}

.dirA .rx-summary-who { min-width: 0; }

.dirA .rx-summary-name.is-empty { color: var(--A-fg-3); font-weight: 500; }

/* .dirA, or the display:block below wins on specificity and takes the gap with it. */
.dirA a.rx-summary-name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--A-fg);
  text-decoration: none;
}
.dirA a.rx-summary-name:hover { color: var(--A-accent); text-decoration: underline; }
.dirA a.rx-summary-name svg { flex: none; color: var(--A-fg-4); }

.dirA .rx-summary-name {
  display: block;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rx-summary-sub {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rx-summary-facts { margin: 0; padding: var(--sp-10) var(--sp-14); display: grid; gap: var(--sp-8); }

.dirA .rx-summary-fact {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: baseline;
  margin: 0;
}

.dirA .rx-summary-fact dt {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rx-summary-fact dd {
  margin: 0;
  font-size: var(--text-label);
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.dirA .rx-summary-empty { color: var(--A-fg-4); }

/* Allergies are the one fact on this card that can stop a dispense, so they are the one
   thing on it that carries colour. Messages sit under them in the same shape. */
.dirA .rx-summary-note {
  display: flex;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-14);
  border-top: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
}

.dirA .rx-summary-note > svg { flex: none; margin-top: var(--sp-2); }
/* flex:1, not just min-width:0 — without it this column shrinks to its widest child, so a
   list of short allergy names ended 80px short of the card and took its scrollbar with it. */
.dirA .rx-summary-note > div { flex: 1; min-width: 0; }

.dirA .rx-summary-note-label {
  display: block;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

/* Two lines, then the count beneath. A patient with forty allergies would otherwise turn
   the card into a wall of names and push everything else off the screen. */
.dirA .rx-summary-note-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: var(--sp-2);
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.dirA .rx-summary-note-value.is-quiet { color: var(--A-fg-3); }

.dirA .rx-summary-more {
  display: inline-block;
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  font-family: var(--font);
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--A-fg-2);
  cursor: pointer;
}

.dirA .rx-summary-more:hover { border-color: var(--A-rule-strong); color: var(--A-fg); }
.dirA .rx-summary-more:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 1px; }

/* Opened in place, but bounded: forty allergies would otherwise run the card off the page
   and push the form down with it.

   The negative right margin pulls the scroll box out to the card's own edge, so its bar sits
   on that edge instead of floating in the middle of the panel. */
.dirA .rx-summary-list {
  list-style: none;
  margin: var(--sp-2) -14px 0 0;
  padding: 0 var(--sp-8) 0 0;
  max-height: 168px;
  overflow-y: auto;
  display: grid;
  gap: var(--sp-4);
}

.dirA .rx-summary-list li {
  font-size: var(--text-meta);
  line-height: 1.35;
  color: inherit;
  overflow-wrap: anywhere;
}

/* Messages are sentences, not names: numbered and ruled, so one ends where the next starts. */
.dirA .rx-summary-list.is-numbered {
  counter-reset: note;
  gap: 0;
}

.dirA .rx-summary-list.is-numbered li {
  counter-increment: note;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--A-rule-2);
}

.dirA .rx-summary-list.is-numbered li:first-child { border-top: 0; padding-top: var(--sp-2); }

.dirA .rx-summary-list.is-numbered li::before {
  content: counter(note) ".";
  color: var(--A-fg-4);
  font-variant-numeric: tabular-nums;
}

.dirA .rx-summary-note.is-danger .rx-summary-list { color: var(--danger); }

.dirA .rx-summary-note.is-danger { background: var(--danger-100); }
.dirA .rx-summary-note.is-danger > svg,
.dirA .rx-summary-note.is-danger .rx-summary-note-value { color: var(--danger); }
.dirA .rx-summary-note.is-success > svg { color: var(--success); }
.dirA .rx-summary-note.is-warning > svg { color: var(--warning); }
.dirA .rx-summary-note.is-neutral > svg { color: var(--A-fg-4); }
.dirA .rx-summary-note.is-info > svg { color: var(--A-fg-4); }

/* Why this order cannot be fully edited, said once at the top rather than by every field
   silently refusing. */
.dirA .rx-lock {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-fg-4);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  font-size: var(--text-label);
  color: var(--A-fg-2);
}

.dirA .rx-lock > svg { flex: none; color: var(--A-fg-3); }
.dirA .rx-lock.is-delivery { border-left-color: var(--warning); }
.dirA .rx-lock.is-delivery > svg { color: var(--warning); }

/* ---------- Step 2: the drugs, with the script they were read off ---------- */

/* The script is the thing being read; the drug cards are what you fill in from it, so the
   preview takes roughly two thirds and the cards a third. */
.dirA .rx-drugs-split {
  display: grid;
  grid-template-columns: minmax(300px, 43%) minmax(0, 1fr);
  gap: var(--sp-14);
  align-items: start;
}

/* The drugs and their actions are one column, so the buttons sit beside the list they act on.
   The bar holds still; only the cards below it move. */
.dirA .rx-drugs-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dirA .rx-drugs-bar-acts { display: inline-flex; align-items: center; gap: var(--sp-8); margin-left: auto; }

/* ---- side by side: two panes, two scrollbars ----
   The step body gives up its own scrolling so neither pane can push the other out of view.
   Height arrives through the flex chain: a percentage here resolves against a flex item whose
   height is not committed, which silently turns the scroll into a clip. */
.dirA .rx-form .crx-step-body.is-panes {
  display: flex;
  overflow: hidden;
  min-height: 0;
  /* The clip edge must not land on the buttons: flush against it, their border and focus
     ring are cut and the bar reads as sliding under something. */
  padding-top: var(--sp-4);
}

.dirA .crx-step-body.is-panes .rx-drugs-split {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* The bar holds still while the cards run under it, so it has to be opaque and has to end
   in a rule: without both, a card passing behind reads as the bar sitting in a cut-out. */
.dirA .crx-step-body.is-panes .rx-drugs-bar {
  flex: none;
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  background: var(--A-surface);
}

/* Clear of the rule above it, and of the scrollbar beside it. */
.dirA .crx-step-body.is-panes .rx-drugs-list { padding-top: var(--sp-8); }

/* The drugs move under the script. The gutter keeps a card's focus ring off the scrollbar,
   and the drugs keep their own scrolling. */
.dirA .crx-step-body.is-panes .rx-drugs-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: var(--sp-4);
}

/* The script stays put and is exactly as tall as the room it has. */
/* Relative, not static: it must not stick, but the floating zoom positions against it. */
.dirA .crx-step-body.is-panes .rx-preview { position: relative; }

/* Whatever is showing - a framed PDF, an image, or a drawn page - takes the rest of the pane. */
.dirA .crx-step-body.is-panes .rx-preview iframe,
.dirA .crx-step-body.is-panes .rx-preview img {
  flex: 1;
  height: auto;
  min-height: 0;
}

.dirA .crx-step-body.is-panes .rx-preview-none { flex: 1; }

@media (max-width: 900px) {
  /* Stacked, there is nothing to stay beside: the step scrolls as one page again. */
  .dirA .rx-form .crx-step-body.is-panes { display: block; overflow-y: auto; }
  .dirA .crx-step-body.is-panes .rx-drugs-list { flex: none; overflow: visible; }
  .dirA .crx-step-body.is-panes .rx-preview iframe,
  .dirA .crx-step-body.is-panes .rx-preview img { flex: none; height: min(820px, 68vh); }
}

/* Script put away, or none attached: the cards take the whole width rather than leaving
   a third of the step empty. */
.dirA .rx-drugs-split.is-full { grid-template-columns: minmax(0, 1fr); }

/* The script given the whole step, for reading a faint fax. The drugs are a click away. */
.dirA .rx-drugs-split.is-wide { grid-template-columns: minmax(0, 1fr); }
.dirA .rx-drugs-split.is-wide .rx-drugs-pane { display: none; }

/* The viewer's zoom, rebuilt on our own bar: its toolbar will not narrow to this pane. */
.dirA .rx-preview-zoom { flex: none; }
.dirA .rx-preview-zoom {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  overflow: hidden;
}

.dirA .rx-preview-zoom button {
  min-width: 26px;
  height: 24px;
  padding: 0 var(--sp-6);
  border: 0;
  border-right: 1px solid var(--A-rule);
  background: var(--A-surface);
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
}

.dirA .rx-preview-zoom button:last-child { border-right: 0; }
.dirA .rx-preview-zoom button:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* The middle button says where the zoom is and puts it back; it is the widest of the three. */
.dirA .rx-preview-zoom button:nth-child(2) { min-width: 44px; font-variant-numeric: tabular-nums; }

/* At the page's corner the way a map carries its zoom, and out of a bar with no room left. */
.dirA .rx-preview-zoom.is-float {
  position: absolute;
  left: var(--sp-12);
  top: calc(40px + var(--sp-12));
  z-index: 2;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
  background: var(--A-surface);
}

.dirA .rx-preview:hover .rx-preview-zoom.is-float,
.dirA .rx-preview:focus-within .rx-preview-zoom.is-float {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dirA .rx-preview-zoom.is-float { transition: none; }
}

.dirA .rx-preview-wide {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .rx-preview-wide:hover { background: var(--A-surface-2); color: var(--A-fg); }

@media (max-width: 900px) {
  .dirA .rx-drugs-split { grid-template-columns: minmax(0, 1fr); }
}

.dirA .rx-drugs-list { display: flex; flex-direction: column; gap: var(--sp-8); }

/* A card keeps its own height. Once the list is a bounded flex column the default shrink
   squashes every card below the first into a sliver instead of letting the list scroll. */
.dirA .rx-drugs-list > * { flex: none; }

.dirA .rx-drugs-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.dirA .rx-drugs-heading { margin-right: auto; }

/* A file input wearing the button style; the native control cannot be made to match.
   The margin reset is bootstrap.css's `label { margin-bottom: .5rem }`, which pushed this
   4px above the button beside it. */
.dirA label.btn { margin-bottom: 0; }
.dirA .rx-drugs-upload { cursor: pointer; }
.dirA .rx-drugs-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dirA .rx-drugs-heading { font-size: var(--text-label); color: var(--A-fg-3); white-space: nowrap; }

.dirA .rx-drug {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rx-drug.is-open { border-color: var(--A-rule-strong); box-shadow: var(--shadow-1); }

.dirA .rx-drug-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.dirA .rx-drug-head:hover { background: var(--A-surface-2); }

.dirA .rx-drug-num {
  flex: none;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-2);
}

.dirA .rx-drug.is-open .rx-drug-num {
  background: var(--A-accent);
  border-color: var(--A-accent);
  color: #FFFFFF;
}

.dirA .rx-drug-titles { flex: 1; min-width: 0; }

.dirA .rx-drug-title {
  display: block;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dirA .rx-drug-rx {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.02em;
  color: var(--A-fg-2);
}

.dirA .rx-drug-caret { flex: none; color: var(--A-fg-4); transition: transform 0.12s var(--ease-out); }
.dirA .rx-drug.is-open .rx-drug-caret { transform: rotate(90deg); }

.dirA .rx-drug-body {
  padding: var(--sp-12) var(--sp-14) var(--sp-14);
  border-top: 1px solid var(--A-rule-2);
  /* Measured: the script preview halves this card without the viewport changing at all. */
  container-type: inline-size;
  container-name: rxdrug;
}

.dirA .rx-drug-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-12);
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule-2);
}

/* A file input styled as a link: the native control is a grey button that cannot be made
   to match anything else on the page. */
.dirA .rx-drug-file,
.dirA .rx-preview-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  height: 28px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  font-size: var(--text-meta);
  white-space: nowrap;
  color: var(--A-accent);
  cursor: pointer;
}

.dirA .rx-preview-pick:hover { background: var(--navy-100); text-decoration: none; }

/* Below this the label goes and the plus speaks for itself; the tooltip still names it. */
@media (max-width: 1500px) {
  .dirA .rx-preview-pick > span { display: none; }
  .dirA .rx-preview-pick { padding: 0; width: 28px; justify-content: center; }
}

.dirA .rx-drug-file:hover { text-decoration: underline; }

.dirA .rx-drug-file input[type="file"],
.dirA .rx-preview-pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.dirA .rx-drug-file span {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dirA .rx-drug-clearfile {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  cursor: pointer;
}
.dirA .rx-drug-clearfile:hover { color: var(--danger); }

.dirA .rx-drug-remove { margin-left: auto; }

.dirA .rx-drug-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--text-meta);
  color: var(--danger);
  cursor: pointer;
}

.dirA .rx-drug-remove:hover { text-decoration: underline; }

/* ---------- A drug's schedule: two boxes that stay shut ----------
   Most prescriptions use the twelve-month default and set no refill frequency, so neither
   set of fields is on screen until someone says this drug is different. */

.dirA .rx-sched {
  margin-top: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  overflow: hidden;
}

.dirA .rx-sched.is-on,
.dirA .rx-sched.is-open { background: var(--A-surface); }

.dirA .rx-sched-head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  width: 100%;
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--text-label);
  color: var(--A-fg);
}

.dirA .rx-sched-head.is-button {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-label);
  text-align: left;
  cursor: pointer;
}

.dirA .rx-sched-head.is-button:hover { background: var(--A-surface-2); }

.dirA .rx-sched-title { font-weight: 500; }

.dirA .rx-sched-hint {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  margin-left: auto;
}

.dirA .rx-sched-caret {
  margin-left: auto;
  display: inline-flex;
  color: var(--A-fg-4);
  transition: transform 0.12s var(--ease-out);
}

.dirA .rx-sched.is-open .rx-sched-caret { transform: rotate(90deg); }

.dirA .rx-sched-fields {
  padding: var(--sp-4) var(--sp-12) var(--sp-12);
  border-top: 1px solid var(--A-rule-2);
}

/* The app's switch: a flag that takes effect where it is, rather than on save. */
.dirA .crx-switch {
  position: relative;
  flex: none;
  width: 30px;
  height: 17px;
  cursor: pointer;
}

.dirA .crx-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.dirA .crx-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--A-rule-strong);
  transition: background 0.12s var(--ease-out);
  pointer-events: none;
}

.dirA .crx-switch-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.28);
  transition: transform 0.12s var(--ease-out);
}

.dirA .crx-switch input:checked + .crx-switch-slider { background: var(--A-accent); }
.dirA .crx-switch input:checked + .crx-switch-slider::before { transform: translateX(13px); }
.dirA .crx-switch input:disabled + .crx-switch-slider { opacity: 0.55; }
.dirA .crx-switch input:focus-visible + .crx-switch-slider { outline: 2px solid var(--A-accent); outline-offset: 2px; }

/* The detail panel beside a hovered row — the old dropdown tooltip, anchored to the list
   rather than floating over it, so it never covers the option it describes. */
.crx-portal.combo-pop { overflow: visible; }

.combo-detail {
  position: absolute;
  top: 0;
  width: 340px;
  max-height: 360px;
  overflow-y: auto;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
  /* Reachable: it can carry a button, held open while the pointer is on its way there. */
}

.combo-detail-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
}

.combo-detail-title {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.combo-detail-status {
  flex: none;
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  font-size: var(--text-meta);
  font-weight: 600;
}
.combo-detail-status.is-ok { background: var(--success-100); color: var(--success); }
.combo-detail-status.is-warn { background: var(--warning-100); color: var(--warning); }
.combo-detail-status.is-bad { background: var(--danger-100); color: var(--danger); }

.combo-detail dl { margin: 0; display: grid; gap: var(--sp-4); }
.combo-detail dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-10); }
.combo-detail dt { font-size: var(--text-meta); color: var(--A-fg-3); }
.combo-detail dd { margin: 0; font-size: var(--text-meta); color: var(--A-fg); overflow-wrap: anywhere; }

.combo-detail-warn {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-meta);
  font-weight: 500;
  color: var(--danger);
}

/* Whichever side has room, measured when the list is placed — a viewport breakpoint
   cannot know where on the page the field is. */
.combo-detail.is-right { left: calc(100% + 8px); }
.combo-detail.is-left { right: calc(100% + 8px); }

.combo-more {
  padding: var(--sp-8) var(--sp-10);
  text-align: center;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* Clearing the field without opening it. */
.dirA .combo { position: relative; }

.dirA .combo-clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
  padding: 0;
}
.dirA .combo-clear:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* The chevron stays at the edge of the field, where every other dropdown puts it, and the
   clear button sits just inside it. Reserving the room on the TRIGGER pushed the chevron 46px
   in, which read as a control floating in the middle of the box — so the room is reserved on
   the label instead, and only the text stops short of the x. */
.dirA .combo-clear { right: 26px; }
.dirA .combo:has(.combo-clear) .combo-trigger.has-value .combo-label { padding-right: 22px; }

.dirA .combo-clear { opacity: 0; transition: opacity 120ms ease; }
.dirA .combo:hover .combo-clear,
.dirA .combo-clear:focus-visible { opacity: 1; }

/* Nothing hovers on a touch screen, so there the button is simply always there. */
@media (hover: none) {
  .dirA .combo-clear { opacity: 1; }
}

/* A drug name is long, so its field spans the row — but on a wide screen a single control
   running the whole width reads as a mistake. It fills a narrow card and stops there. */
/* A field is as wide as it needs to be, not as wide as the card. A sig on its own row ran
   the full width for a phrase of a few words. */
.dirA .rx-drug-body .field-wide .combo,
.dirA .rx-drug-body .field-wide .input,
.dirA .rx-drug-body .field-span .combo,
.dirA .rx-drug-body .field-span .input { max-width: 520px; }

/* An address needs a whole row for its tag, street and phone — but not the whole width of
   a page-wide step. */
.dirA .rx-form .field-wide .rx-address .combo { max-width: 560px; }

/* The drug takes the room; its checks sit at the end of the same line. */
.dirA .rx-drug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-10) var(--sp-12);
}

.dirA .rx-drug-row > .field-row { flex: 1 1 260px; min-width: 0; }

/* A diagnosis is a sentence: the ICD box fills its span. */
.dirA .field-row.is-wide { min-width: 0; }
.dirA .field-row.is-wide .combo { width: 100% !important; max-width: 720px; }
.dirA .rx-drug-body .field-span .field-row.is-wide .combo { max-width: 720px; }
.dirA .rx-drug-row > .field-row .combo { max-width: none; }
.dirA .rx-drug-row .rx-drug-acts { flex: none; padding-bottom: var(--sp-2); }

/* The label as it would print, in a frame of its own so its styles stay inside it. */

/* The inventory workbench, brought in rather than navigated to. */
.crx-overlay .rx-inv-frame {
  height: min(70vh, 640px);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  overflow: hidden;
}

.crx-overlay .rx-inv-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Something to do about an option, inside its detail panel. */
.combo-detail-action {
  margin-top: var(--sp-10);
  width: 100%;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-accent);
  border-radius: var(--A-radius);
  background: var(--A-accent);
  font: inherit;
  font-size: var(--text-meta);
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}
.combo-detail-action:hover { filter: brightness(1.06); }

/* The two things done to a drug that are not typing into it. */
.dirA .rx-drug-acts { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

.dirA .rx-drug-act {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: 32px;
  padding: 0 var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  font: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}

.dirA .rx-drug-act svg { color: var(--A-fg-3); transition: color 0.12s; }

.dirA .rx-drug-act:hover:not(:disabled) {
  border-color: var(--A-accent);
  color: var(--A-accent);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.dirA .rx-drug-act:hover:not(:disabled) svg { color: var(--A-accent); }
.dirA .rx-drug-act:active:not(:disabled) { transform: translateY(0.5px); }
.dirA .rx-drug-act:disabled { opacity: 0.65; cursor: default; }

/* Screened already: the shield reports rather than asks. */
.dirA .rx-drug-act.is-done > svg:first-of-type { color: var(--success); }

/* Not screened is an amber dot; screened is a green disc with a tick. */
.dirA .rx-act-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

.dirA .rx-act-mark.is-done {
  width: 16px;
  height: 16px;
  background: var(--success);
  color: #fff;
  box-shadow: none;
}

.dirA .rx-act-mark.is-done svg { width: 10px; height: 10px; color: #fff; }

/* Done reads on the whole chip, not only on its mark. */
.dirA .rx-drug-act.is-done {
  border-color: rgba(46, 125, 79, 0.45);
  background: rgba(46, 125, 79, 0.06);
}

/* Said to a screen reader only — sighted readers get the mark and the button's title. */
.dirA .crx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A click that fetches has to look like one. */
.crx-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.7;
  animation: crx-spin 0.6s linear infinite;
  flex: none;
}

@keyframes crx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .crx-spin { animation-duration: 2s; }
}

/* -------------------------------------------------- screening popup */

.dirA .rx-screen-tabs,
.crx-overlay .rx-screen-tabs {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--A-rule);
  margin-bottom: var(--sp-10);
}

.crx-overlay .rx-screen-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-12);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg-2);
  cursor: pointer;
}
.crx-overlay .rx-screen-tab.is-on { color: var(--A-accent); border-bottom-color: var(--A-accent); }

/* Check every message at once, for a screen that runs to a dozen of them. */
.crx-overlay .rx-screen-all {
  margin-left: auto;
  align-self: center;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-accent);
  cursor: pointer;
}
.crx-overlay .rx-screen-all:hover { text-decoration: underline; }

.crx-overlay .rx-screen-count {
  min-width: 18px;
  padding: 0 var(--sp-6);
  border-radius: 9px;
  background: var(--A-surface-2);
  font-size: var(--text-micro);
  line-height: 16px;
  text-align: center;
}

.crx-overlay .rx-screen-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-24) var(--sp-4);
  margin: 0;
  color: var(--A-fg-3);
  font-size: var(--text-label);
}

.crx-overlay .rx-screen-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }

/* Which check a run of messages came from. */
.crx-overlay .rx-screen-head {
  padding: var(--sp-10) var(--sp-2) var(--sp-2);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

.crx-overlay .rx-screen-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

/* Nothing to acknowledge here — read it and move on. */
.crx-overlay .rx-screen-row.is-note { grid-template-columns: minmax(0, 1fr) auto; background: transparent; }

.crx-overlay .rx-screen-row input[type="checkbox"] { margin-top: var(--sp-2); }
.crx-overlay .rx-screen-row p { margin: 0; font-size: var(--text-label); line-height: 1.45; }

.crx-overlay .rx-screen-from { display: block; margin-top: var(--sp-4); font-size: var(--text-meta); color: var(--A-fg-3); }

/* What the chosen drug is and what is left of it — the old dropdown tooltip, kept on the
   card where the quantities are typed against it. */
.dirA .rx-drug-facts {
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  padding: var(--sp-10) var(--sp-12);
}

.dirA .rx-drug-facts-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

.dirA .rx-drug-facts-name {
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.dirA .rx-drug-facts dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--sp-4) var(--sp-14);
}

.dirA .rx-drug-facts dl > div { display: flex; gap: var(--sp-6); min-width: 0; }
.dirA .rx-drug-facts dt { flex: none; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-drug-facts dd {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

/* A drug with no usable stock is listed with its reason, and refuses to be chosen. */
.combo-option-text {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  text-align: left;
  /* The name is one line; the rest of it is in the panel beside the list. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-option-note {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What kind of thing an option is: a pill before the label, in the row and in the closed box.
   Unscoped, because the list is portalled out of .dirA. */
.combo-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--A-fg-2);
  white-space: nowrap;
}

.combo-tag svg { width: 11px; height: 11px; }
.combo-tag.is-ok { background: var(--success-100); color: var(--success); }
.combo-tag.is-info { background: rgba(31, 78, 121, 0.10); color: var(--A-accent); }

/* In the trigger it sits before the value, which then takes what is left. */
.combo-trigger .combo-tag { margin-right: var(--sp-2); }

.combo-option[data-disabled="true"] { opacity: 0.6; }
.combo-option[data-disabled="true"] .combo-option-note { color: var(--danger); }

/* The script beside the drugs, because the two are read against each other. */
.dirA .rx-preview {
  /* Sticky only matters when the step body scrolls as a whole, which it does on a narrow
     screen. Wide, the .is-panes rules below give this pane its own height instead. */
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rx-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  /* The pane is a flex column now; without this the bar is squeezed by the page below it. */
  flex: none;
  flex-wrap: nowrap;
  /* 40px, matching the tab row in the card beside it: two toolbars at two heights read
     as a mistake however well each one is centred. */
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden;
}

/* Every control on this bar is 26px tall. They had been 22, 24 and 28: centred on the
   same line, but three different boxes, which is what makes a toolbar look ragged. */
.dirA .rx-preview-bar .rx-preview-act,
.dirA .rx-preview-bar .rx-preview-zoom,
.dirA .rx-preview-bar .rx-split { height: 26px; box-sizing: border-box; }

/* Narrower here: this bar also carries the Script/Label switch. */
.dirA .rx-preview-bar .rx-split .crx-iconbtn { width: 22px; height: 24px; }
.dirA .rx-preview-bar .rx-split .crx-iconbtn svg { width: 14px; height: 14px; }

/* The actions never shrink and never wrap: the file name absorbs every narrowing, which is
   why it is the only thing in the bar allowed to lose characters. */
.dirA .rx-preview-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

/* One shape for every action in the bar, icon or link. */
.dirA .rx-preview-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  background: none;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .rx-preview-act:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* The file's own name, which is what identifies it — truncated, never wrapped. */
.dirA .rx-preview-name {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: var(--sp-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--A-fg);
  font-weight: 500;
}

.dirA .rx-preview-bar a {
  display: inline-flex;
  align-items: center;
  color: var(--A-fg-3);
}
.dirA .rx-preview-bar a:hover { color: var(--A-accent); }

/* The pages of this order's one document: what is on file, then what is queued behind it.
   They save as a single merged document, so this is a way of looking, not a choice. */
.dirA .rx-preview-tabs {
  display: flex;
  gap: var(--sp-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.dirA .rx-preview-tabs::-webkit-scrollbar { height: 0; }

.dirA .rx-preview-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  flex: none;
  max-width: 190px;
  padding: var(--sp-4) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
}

.dirA .rx-preview-tab > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dirA .rx-preview-tab.is-on {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-accent);
  font-weight: 500;
}

.dirA .rx-preview-tab [role="button"] {
  display: inline-flex;
  flex: none;
  color: var(--A-fg-4);
}
.dirA .rx-preview-tab [role="button"]:hover { color: var(--danger); }

/* A queued page is marked on its own chip rather than by a line of prose under the bar. */
.dirA .rx-preview-tab.is-on { border-color: var(--A-accent); }

.dirA .rx-preview iframe,
.dirA .rx-preview img {
  display: block;
  width: 100%;
  /* A fallback for the stacked layout; side by side, .is-panes hands it the pane's height. */
  height: min(820px, 68vh);
  border: 0;
  object-fit: contain;
  background: var(--A-surface-2);
}

.dirA .rx-preview-acts { display: inline-flex; align-items: center; gap: var(--sp-10); }

/* The one page a single-drug edit may see, drawn to fit and scrolled only within itself. */
.dirA .rx-preview-locked {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  padding: var(--sp-8);
  background: var(--A-surface-2);
}

.dirA .rx-preview-locked canvas {
  align-self: flex-start;
  /* Centred by margin rather than by justify-content, for the same reason as above. */
  margin-inline: auto;
  max-width: 100%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.16);
}

.dirA .rx-preview-wait {
  margin: auto;
  font-size: var(--text-label);
  color: var(--A-fg-3);
}

.dirA .rx-preview-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-48) var(--sp-20);
  color: var(--A-fg-3);
  text-align: center;
}

.dirA .rx-preview-none p { margin: 0; font-size: var(--text-label); max-width: 34ch; }

/* ---------- Allergies, edited from the prescription they are checked against ---------- */

.dirA .rx-allergies {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  padding: var(--sp-12) var(--sp-14);
  margin-bottom: var(--sp-12);
}

.dirA .rx-allergies-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}

.dirA .rx-allergies-title { font-size: var(--text-label); font-weight: 600; color: var(--A-fg); }
.dirA .rx-allergies-count { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-allergies-empty { margin: 0 0 var(--sp-10); font-size: var(--text-label); color: var(--A-fg-3); }

/* Recorded as having none: there is nothing to add to, and the panel says why rather than
   showing controls that would be refused. */
.dirA .rx-allergies-nka {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-10);
  font-size: var(--text-meta);
  color: var(--success);
}

.dirA .rx-allergy-chips {
  list-style: none;
  margin: 0 0 var(--sp-10);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

/* Red, because this is the list a dispense is checked against. */
.dirA .rx-allergy-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10);
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: var(--danger-100);
  font-size: var(--text-meta);
  color: var(--A-fg);
}

.dirA .rx-allergy-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
}

.dirA .rx-allergy-chip button:hover:not(:disabled) { background: rgb(196 35 42 / 14%); }
.dirA .rx-allergy-chip button:disabled { opacity: 0.5; cursor: default; }

/* ---------- Step 4: what is about to be saved ---------- */

.dirA .rx-review { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .rx-review-allergy {
  display: flex;
  gap: var(--sp-8);
  margin: 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--danger);
  border-radius: var(--A-radius);
  background: var(--danger-100);
  font-size: var(--text-label);
  color: var(--A-fg);
}

.dirA .rx-review-allergy svg { flex: none; color: var(--danger); }

.dirA .rx-review-empty { margin: 0; font-size: var(--text-label); color: var(--A-fg-3); }

.dirA .rx-review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }

.dirA .rx-review-list li {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .rx-review-drug { font-size: var(--text-label); font-weight: 500; color: var(--A-fg); }
.dirA .rx-review-meta { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-review-sig { font-size: var(--text-label); color: var(--A-fg-2); }

/* ---------- Form steps (components/ui/FormSteps) ----------
   A long form taken a section at a time. Every panel stays in the DOM because these islands
   post through a Razor form; only the inactive ones are hidden. */

/* One raised card holding the rail, the panel and the controls: three parts of a single
   thing, rather than three boxes stacked on the page. */
.dirA .crx-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-16);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
}

.dirA .crx-step-panel[hidden] { display: none; }

/* The rail: where you are, what is done, what is left. Wraps rather than scrolling, so a
   narrow column stacks the steps instead of hiding them. */
.dirA .crx-step-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-2);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--sp-10);
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .crx-step-dot { display: flex; align-items: center; min-width: 0; }

/* The connector, drawn between steps rather than as an element of its own. */
.dirA .crx-step-dot + .crx-step-dot::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: none;
  margin: 0 var(--sp-2);
  background: var(--A-rule-strong);
}

.dirA .crx-step-dot > button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  padding: var(--sp-6) var(--sp-10) var(--sp-6) var(--sp-6);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--A-fg-3);
  font: inherit;
  font-size: var(--text-label);
  cursor: pointer;
}

.dirA .crx-step-dot > button:disabled { cursor: default; }
.dirA .crx-step-dot > button:not(:disabled):hover { background: var(--A-surface-2); }

.dirA .crx-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--A-rule-strong);
  background: var(--A-surface);
  font-size: var(--text-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-3);
}

.dirA .crx-step-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The step being filled is the one thing on the rail with weight. */
.dirA .crx-step-dot.is-current > button {
  background: var(--A-tint);
  border-color: var(--A-accent);
  color: var(--A-fg);
  font-weight: 600;
}
.dirA .crx-step-dot.is-current .crx-step-num {
  border-color: var(--A-accent);
  background: var(--A-accent);
  color: #FFFFFF;
}

.dirA .crx-step-dot.is-done > button { color: var(--A-fg-2); }
.dirA .crx-step-dot.is-done .crx-step-num {
  border-color: var(--success);
  background: var(--success);
  color: #FFFFFF;
}

.dirA .crx-step-dot.is-error > button { color: var(--danger); }
.dirA .crx-step-dot.is-error .crx-step-num {
  border-color: var(--danger);
  background: var(--danger);
  color: #FFFFFF;
}

.dirA .crx-step-body { padding: 0; }

.dirA .crx-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-14);
  /* No bottom margin: .crx-steps is a flex column with its own gap, and the two stacked.
     It showed most on Drugs, where there is no hint line to fill the space. */
  margin: 0;
}

.dirA .crx-step-head h4 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--A-fg);
}
.dirA .crx-step-head p {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* The sentence gives way, the button beside it does not. */
.dirA .crx-step-head > p { flex: 1 1 220px; min-width: 0; }
.dirA .crx-step-head > .btn { flex: none; }

.dirA .crx-step-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .crx-step-count {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
}

.dirA .crx-step-acts { display: flex; align-items: center; gap: var(--sp-8); margin-left: auto; }

/* Something behind you is unfilled. Said once, quietly, rather than as red on every step. */
.dirA .crx-step-warn {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-left: 2px solid var(--warning);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

/* Read-only: there is nothing to step through, so the sections simply stack. */
.dirA .crx-steps.is-read {
  gap: var(--sp-12);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.dirA .crx-steps.is-read .crx-step-panel {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-1);
  padding: var(--sp-14) var(--sp-16) var(--sp-16);
}
.dirA .crx-steps.is-read .crx-step-h {
  margin: 0 0 var(--sp-10);
  padding: 0 0 var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

/* ---------- Shared form fields ----------
   Used by components/ui/fields.tsx. The .field-row / .field-label / .input basics are
   further up with the account pages; these are the additions the wider set needs. */

.dirA .field-grid { display: grid; gap: var(--sp-14) var(--sp-16); align-items: start; }

/* A tall box sets the height of its whole grid row, so a note stays two lines. */
.dirA .rx-drug-body textarea.input,
.dirA .rx-form textarea.input { min-height: 48px; }
.dirA .field-wide { grid-column: 1 / -1; }
/* A whole row until the span fits: a grid invents tracks rather than clamping an oversized
   span. Each threshold is the width at which that many 150px columns and their gaps fit. */
.dirA .field-span { grid-column: 1 / -1; min-width: 0; }

@container rxdrug (min-width: 340px) {
  .dirA .field-span[data-span="2"] { grid-column: span 2; }
}

@container rxdrug (min-width: 505px) {
  .dirA .field-span[data-span="3"] { grid-column: span 3; }
}

@container rxdrug (min-width: 670px) {
  .dirA .field-span[data-span="4"] { grid-column: span 4; }
}

/* Number with a unit: the suffix sits inside the box so it reads as part of the value. */
.dirA .field-affix { position: relative; display: block; }
.dirA .field-affix.has-suffix .input { padding-right: 46px; }

.dirA .field-suffix {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  pointer-events: none;
}

/* Native date and number controls: keep their pickers, match everything else. */
.dirA .field-row input[type="date"].input { padding-right: var(--sp-6); }
.dirA .field-row input[type="number"].input { -moz-appearance: textfield; }
.dirA .field-row input[type="number"].input::-webkit-outer-spin-button,
.dirA .field-row input[type="number"].input::-webkit-inner-spin-button { margin-left: var(--sp-4); }

.dirA select.input { padding-right: var(--sp-24); cursor: pointer; }

/* Search: icon in, clear button out, no browser-drawn cross. */
.dirA .field-search { position: relative; display: block; }

.dirA .field-search > svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--A-fg-3);
  pointer-events: none;
}

.dirA .field-search .input { padding-left: 28px; padding-right: 28px; }
.dirA .field-search .input::-webkit-search-cancel-button { display: none; }

.dirA .field-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
  padding: 0;
}

.dirA .field-clear:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* Checkbox reads as one line, so the label goes beside the box rather than above it. */
.dirA .field-check-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--text-label);
  color: var(--A-fg);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
}

.dirA .field-check-line input { margin: 0; }
.dirA .field-check .field-hint { margin-left: 21px; }

/* A ComboBox inside a Field should fill the column, not keep its toolbar width. */
.dirA .field-row .combo { width: 100% !important; }

/* In a form the combo is a field, so it wears the field's chrome rather than the
   toolbar chip's — one row of controls, all the same height and ground. */
.dirA .field-row .combo-trigger {
  height: 30px;
  padding: 0 var(--sp-8);
  background: var(--A-surface);
  border-color: var(--A-rule);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--A-fg);
  transition: border-color 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}

/* Nothing chosen yet reads like a placeholder, as it does in a text field. */
.dirA .field-row .combo-trigger:not(.has-value) .combo-label { color: var(--A-fg-4); }

.dirA .field-row .combo-trigger:hover:not(:disabled) { border-color: var(--A-rule-strong); }

/* A locked choice reads like a locked text field, not like an empty one. */
.dirA .field-row .combo-trigger:disabled {
  background: var(--A-surface-2);
  border-color: var(--A-rule-strong);
  color: var(--A-fg-3);
  cursor: default;
}
.dirA .field-row .combo-trigger[aria-expanded='true'] {
  border-color: var(--A-accent);
  box-shadow: 0 0 0 2px var(--navy-100);
}

.dirA .field-row.has-error .combo-trigger { border-color: var(--danger); }

/* ---------- Legends: a tinted bar, matching a panel header ---------- */

.crx-patient-setup fieldset.fielsets {
  padding: 0 0 var(--sp-4);
  overflow: hidden;
}

.crx-patient-setup fieldset.fielsets > legend.legends,
.crx-patient-setup fieldset.fielsets > legend {
  display: block;
  float: none;
  width: 100%;
  padding: var(--sp-8) var(--sp-14);
  margin: 0 0 var(--sp-14);
  border: 0;
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  box-shadow: none;
  font-family: var(--font);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--A-fg-2);
}

/* The legend now spans the panel, so the fields need their own inset. */
.crx-patient-setup fieldset.fielsets > .row,
.crx-patient-setup fieldset.fielsets > div:not(legend) { padding-left: var(--sp-14); padding-right: var(--sp-14); }
.crx-patient-setup fieldset.fielsets > .row { margin-left: 0; margin-right: 0; }

/* ---------- Plain tables inside the form (email addresses, and the like) ---------- */

.crx-patient-setup table:not(.k-grid-table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font);
  font-size: var(--text-label);
}

.crx-patient-setup table:not(.k-grid-table) > thead > tr > th,
.crx-patient-setup table:not(.k-grid-table) > tr > th {
  height: 28px;
  padding: var(--sp-6) var(--sp-8);
  background: var(--A-surface-2);
  border: 0;
  border-bottom: 1px solid var(--A-rule);
  text-align: left;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.crx-patient-setup table:not(.k-grid-table) > tbody > tr > td {
  height: 30px;
  padding: var(--sp-4) var(--sp-8);
  border: 0;
  border-bottom: 1px solid var(--A-rule-2);
  color: var(--A-fg);
  vertical-align: middle;
}

.crx-patient-setup table:not(.k-grid-table) > tbody > tr:hover > td { background: var(--A-tint); }

/* ---------- Kendo grids (delivery address, audit trail) ---------- */

.crx-patient-setup .k-grid {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--A-fg);
  overflow: hidden;
}

.crx-patient-setup .k-grid .k-grid-header,
.crx-patient-setup .k-grid .k-grid-header-wrap,
.crx-patient-setup .k-grid .k-header {
  background: var(--A-surface-2);
  border-color: var(--A-rule);
  color: var(--A-fg-3);
}

.crx-patient-setup .k-grid .k-grid-header th.k-header,
.crx-patient-setup .k-grid th.k-header {
  height: 28px;
  padding: var(--sp-6) var(--sp-8);
  border-width: 0 0 1px 0;
  border-bottom: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
  white-space: nowrap;
}

.crx-patient-setup .k-grid td {
  height: 30px;
  padding: var(--sp-4) var(--sp-8);
  border-width: 0 0 1px 0;
  border-bottom: 1px solid var(--A-rule-2);
  color: var(--A-fg);
  vertical-align: middle;
}

.crx-patient-setup .k-grid tr.k-alt > td,
.crx-patient-setup .k-grid tr.k-alt { background: transparent; }
.crx-patient-setup .k-grid tbody tr:hover > td { background: var(--A-tint); }
.crx-patient-setup .k-grid tr.k-state-selected > td { background: var(--A-tint); color: var(--A-fg); }

.crx-patient-setup .k-grid .k-grid-toolbar {
  background: var(--A-surface);
  border-bottom: 1px solid var(--A-rule);
  padding: var(--sp-8);
}

.crx-patient-setup .k-pager-wrap,
.crx-patient-setup .k-grid .k-pager {
  background: var(--A-surface);
  border-top: 1px solid var(--A-rule);
  border-bottom: 0;
  color: var(--A-fg-2);
  font-size: var(--text-label);
  min-height: 36px;
}

.crx-patient-setup .k-pager-wrap .k-link,
.crx-patient-setup .k-pager-wrap .k-state-selected {
  border-radius: var(--A-radius);
  border: 0;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  color: var(--A-fg-2);
}

.crx-patient-setup .k-pager-wrap .k-state-selected {
  background: var(--A-accent);
  color: #fff;
}

/* Kendo's own action icons in a row. */
.crx-patient-setup .k-grid .k-button,
.crx-patient-setup .k-grid a.k-button { height: 24px; padding: 0 var(--sp-8); font-size: var(--text-label); }

/* The grid's search box, so it matches the fields above it. */
.crx-patient-setup .k-textbox,
.crx-patient-setup .k-grid-search {
  height: 30px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font-size: var(--text-label);
}

/* ---------- Patient tabs: full width, flush left ---------- */

/* The first tab should meet the container edge, not sit 4px inside it. */
.crx-patient-setup .nav-tabs { padding: 0; }

/* Islands inside the tabs: the mount point and the .dirA wrapper mountIsland adds are
   both plain blocks, and .dirA is a flex column, so they need telling to fill the row
   or the grid inside renders at content width with a gap to its right. */
.crx-patient-setup [id$="-root"],
.crx-patient-setup [id$="-root"] > .dirA {
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}

/* A grid in a tab sizes to the column it is in; its own scroller handles the rest. */
.crx-patient-setup .data-grid,
.crx-patient-setup .table-scroll { max-width: 100%; min-width: 0; }

/* fieldset > island should not pay the section inset twice. */
.crx-patient-setup fieldset.fielsets > div[id$="-root"] { padding-left: var(--sp-14); padding-right: var(--sp-14); }

/* ---------- A plain sub-section inside the form (email addresses) ---------- */

.crx-patient-setup .crx-subsection {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.crx-patient-setup .crx-subsection-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-10);
  flex-wrap: wrap;
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  font-size: var(--text-label);
}

.crx-patient-setup .crx-subsection-h strong { font-weight: 600; color: var(--A-fg); }
.crx-patient-setup .crx-subsection-h .meta { font-size: var(--text-meta); color: var(--A-fg-3); }
.crx-patient-setup .crx-subsection-b { padding: var(--sp-12); }

/* The tab strip runs edge to edge: no list padding, no first-item inset, and the strip
   squares off its own top corners so the first tab meets the container border. */
.crx-patient-setup ul.nav-tabs {
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.crx-patient-setup ul.nav-tabs > .nav-item:first-child,
.crx-patient-setup ul.nav-tabs > li:first-child { margin-left: 0; padding-left: 0; }
.crx-patient-setup ul.nav-tabs > .nav-item > .nav-link { margin-left: 0; }

/* ---------- Patient chart: sticky rail, aside panels ---------- */



.dirA .pt-alert-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.dirA .pt-care-team { display: flex; flex-direction: column; gap: var(--sp-10); }

/* The same as the messages box: opening it scrolls rather than grows. */
.dirA .pt-care-list { display: flex; flex-direction: column; gap: var(--sp-10); }
.dirA .pt-care-list.is-open {
  max-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--sp-4);
}

.dirA .pt-care-member { display: flex; align-items: center; gap: var(--sp-10); }

.dirA .pt-care-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-100);
  color: var(--A-accent);
  font-size: var(--text-micro);
  font-weight: 600;
}

.dirA .pt-care-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dirA .pt-care-text strong { font-size: var(--text-label); font-weight: 600; color: var(--A-fg); }
.dirA .pt-care-text span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .pt-care-more { align-self: flex-start; font-size: var(--text-meta); }

/* ---------- Aside panels: allergies and messages ---------- */

.dirA .panel-h .panel-action {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg-2);
  cursor: pointer;
  padding: 0;
}

.dirA .panel-h .panel-action:hover { background: var(--A-surface-2); color: var(--A-accent); }
.dirA .panel-h .meta + .panel-action { margin-left: var(--sp-8); }

.dirA .pt-chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }

/* The panel is a column: the chips, then the control that opens them. */
.dirA .pt-allergies { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }

/* Three lines of chips, open or closed. Opening it scrolls what is already there rather
   than pushing the panels below it down the column. A chip is 16px of button inside 2px of
   padding either side, so a line is 20px. */
.dirA .pt-chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: flex-start;
  align-self: stretch;
  max-height: calc(20px * 3 + var(--sp-6) * 2);
  overflow: hidden;
}

.dirA .pt-chip-box.is-open { overflow-y: auto; overscroll-behavior: contain; }

/* A chip with its own remove, so taking an allergy off is one click from where it is. */
.dirA .pt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-8);
  border-radius: 999px;
  font-size: var(--text-meta);
  font-weight: 500;
  background: var(--A-surface-2);
  color: var(--A-fg-2);
}

.dirA .pt-chip.is-danger { background: var(--danger-100); color: var(--danger); }

.dirA .pt-chip button {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  padding: 0;
}

.dirA .pt-chip button:hover { opacity: 1; background: rgba(0, 0, 0, 0.07); }
.dirA .pt-chip button:disabled { opacity: 0.3; cursor: default; }

.dirA .pt-more { font-size: var(--text-meta); flex-basis: 100%; text-align: left; }

/* Add form inside a panel. */
.dirA .pt-add { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-4); }
.dirA .pt-add textarea.input { min-height: 54px; padding: var(--sp-6) var(--sp-8); height: auto; }

.dirA .pt-add-results {
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
}

.dirA .pt-add-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--sp-6) var(--sp-10);
  border: 0;
  border-bottom: 1px solid var(--A-rule-2);
  background: var(--A-surface);
  font-size: var(--text-label);
  color: var(--A-fg);
  cursor: pointer;
}

.dirA .pt-add-results button:last-child { border-bottom: 0; }
.dirA .pt-add-results button:hover { background: var(--A-tint); color: var(--A-accent); }
.dirA .pt-add-note { margin: 0; padding: var(--sp-8) var(--sp-10); font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .pt-panel-error { margin: var(--sp-4) 0 0; flex-basis: 100%; font-size: var(--text-meta); color: var(--danger); }

/* Messages */
.dirA .pt-messages { display: flex; flex-direction: column; gap: var(--sp-10); }

/* Opened, the rest of the messages arrive inside this box and it scrolls; the control that
   opened it stays below, outside the scroll, so it is always reachable. */
.dirA .pt-msg-list { display: flex; flex-direction: column; gap: var(--sp-10); }
.dirA .pt-msg-list.is-open {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--sp-4);
}

.dirA .pt-message {
  border-left: 2px solid var(--A-rule-strong, var(--rule-strong));
  padding-left: var(--sp-10);
}

.dirA .pt-message > p { margin: 0 0 var(--sp-4); font-size: var(--text-label); color: var(--A-fg); line-height: 1.45; }

.dirA .pt-message-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .pt-message-foot > span { margin-right: auto; }

/* Sized to the 10.5px footer, not to the grid rows these classes come from. */
.dirA .pt-message-foot .row-action {
  width: 20px;
  height: 20px;
}
.dirA .pt-message-foot .row-action svg,
.dirA .pt-pos svg {
  width: 12px;
  height: 12px;
}

/* Till toggle: an icon whose two states differ in fill, not in dimness — a faded icon
   reads as disabled rather than "off". */
.dirA .pt-pos {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg-3);
  cursor: pointer;
  padding: 0;
}

.dirA .pt-pos:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .pt-pos.is-on {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.dirA .pt-pos.is-on:hover { background: #266A42; border-color: #266A42; color: #fff; }
.dirA .pt-pos:disabled { opacity: 0.5; cursor: default; }

/* ---------- Patient audit log (Audits tab) ----------
   An event list, not a table: each row is one change, read left to right as
   when / what / who. */

.dirA .audit-log { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .audit-log-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .audit-log-bar .field-row { margin: 0; }
.dirA .audit-log-count { margin-left: auto; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .audit-log-list { display: flex; flex-direction: column; }

.dirA .audit-entry {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) auto;
  gap: var(--sp-14);
  align-items: baseline;
  padding: var(--sp-10) var(--sp-2);
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .audit-entry:last-child { border-bottom: 0; }
.dirA .audit-entry:hover { background: var(--A-tint); }

.dirA .audit-entry-time {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dirA .audit-entry-head { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; }

/* The action name is the thing you scan for, so it is monospaced and coloured by kind. */
.dirA .audit-action {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
}

.dirA .audit-action.is-neutral { color: var(--A-fg); }
.dirA .audit-action.is-success { color: var(--success); }
.dirA .audit-action.is-danger { color: var(--danger); }

.dirA .audit-entry-target { font-size: var(--text-label); color: var(--A-fg-2); }

.dirA .audit-entry-meta {
  margin-top: var(--sp-2);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow-wrap: anywhere;
}

/* How many fields the save moved, beside the area it moved them in. */
.dirA .audit-entry-count {
  margin-left: var(--sp-8);
  padding: 0 var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

/* The grid aligns on the first baseline, so a tall entry keeps its time in line. */
.dirA .audit-entry { align-items: start; }
.dirA .audit-entry-time { line-height: 1.7; }

.dirA .audit-entry-actor {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  white-space: nowrap;
}

.dirA .audit-entry-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-100);
  color: var(--A-accent);
  font-size: 9.5px;
  font-weight: 600;
}

.dirA .audit-log-note { margin: var(--sp-4) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

@media (max-width: 760px) {
  .dirA .audit-entry { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .dirA .audit-entry-actor { justify-content: flex-start; }
}

/* ---------- History, opened over the tabs ----------
   It is about the whole record rather than one part of it, so it takes the middle column
   instead of being a tab among the parts. */

.crx-patient-setup.is-history > ul.nav-tabs { display: none; }
.crx-patient-setup.is-history > .tab-content > .tab-pane { display: none; }
.crx-patient-setup.is-history > .tab-content > #Audits { display: block; }

/* The bar, the filters and the footer stay put; only the entries move. */
body.crx-patient-page .crx-patient-setup.is-history > .tab-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.crx-patient-page .crx-patient-setup.is-history > .tab-content > #Audits { display: flex; }

body.crx-patient-page .crx-patient-setup.is-history :is(
  #Audits,
  #Audits > .patient-info-box,
  #patient-auditlog-root,
  #patient-auditlog-root > .dirA,
  #patient-auditlog-root .audit-log
) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Its .dirA wrapper is height:100%, which in a box with a real height took the lot. */
body.crx-patient-page .crx-patient-setup.is-history #Audits > .patient-info-box > .dirA {
  flex: none;
  height: auto;
}

/* Both pad their top, and the bar's negative margin was cut for a 12px box. */
body.crx-patient-page .crx-patient-setup.is-history > .tab-content,
body.crx-patient-page .crx-patient-setup.is-history > .tab-content > #Audits,
body.crx-patient-page .crx-patient-setup.is-history #Audits > .patient-info-box { padding-top: 0; }
body.crx-patient-page .crx-patient-setup.is-history .pt-history-h { margin-top: 0; }

body.crx-patient-page .crx-patient-setup.is-history .audit-log-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  body.crx-patient-page .crx-patient-setup.is-history > .tab-content { overflow: visible; }
  body.crx-patient-page .crx-patient-setup.is-history .audit-log-list { overflow: visible; }
}

/* Reads as a container header, like the ones the other columns carry. */
.dirA .pt-history-h,
.pt-history-h {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  margin: calc(var(--sp-12) * -1) calc(var(--sp-12) * -1) var(--sp-12);
  border-bottom: 1px solid var(--A-rule, #e3e6ec);
  border-radius: var(--A-radius-md, 8px) var(--A-radius-md, 8px) 0 0;
  background: var(--A-surface-2, #f4f6f9);
}

.pt-history-t {
  font-size: var(--text-title, 13px);
  font-weight: 650;
  color: var(--A-fg, #1b2230);
}

.pt-history-s { font-size: var(--text-meta, 11px); color: var(--A-fg-3, #7b8699); }
.pt-history-h > .btn { margin-left: auto; }

/* The audit column is a third the width of the drug page these rows were drawn for, so the
   field takes a line of its own and the two values share the next. Keeping them on one line
   broke a date one letter per line. */
.dirA .audit-entry .hist-edits li { flex-wrap: wrap; }
.dirA .audit-entry .hist-field { flex: 0 0 100%; white-space: normal; }
.dirA .audit-entry .hist-from,
.dirA .audit-entry .hist-to { flex: 0 1 auto; min-width: 0; }

/* Aside toggle: hiding the column gives the tabs the width back. */

/* Aside toggle: hiding the column gives the tabs the width back. */
.crx-chart-grid.is-aside-hidden > #patient-aside-root { display: none; }

/* Pressed = the panel is showing. The icon carries it; the tooltip says which. */
.dirA .pt-panel-toggle { border: 1px solid transparent; }
.dirA .pt-panel-toggle.is-active {
  background: var(--A-tint);
  border-color: var(--navy-100);
  color: var(--A-accent);
}

/* ---------- Audit log: range bar, area chips, actor card ---------- */

.dirA .audit-range { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .audit-range .input { width: 140px; height: 28px; }

.dirA .audit-sources { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.dirA .audit-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  cursor: pointer;
}

.dirA .audit-chip:hover { background: var(--A-surface-2); }
.dirA .audit-chip span { color: var(--A-fg-3); font-variant-numeric: tabular-nums; }

.dirA .audit-chip.is-on {
  background: var(--A-tint);
  border-color: var(--navy-100);
  color: var(--A-accent);
  font-weight: 500;
}

.dirA .audit-chip.is-on span { color: var(--A-accent); }

.dirA .audit-log-more {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .audit-log-more span { font-size: var(--text-meta); color: var(--A-fg-3); }

/* The actor is a button, so it must not look like plain text. */
.dirA button.audit-entry-actor {
  border: 0;
  background: transparent;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--A-radius);
  cursor: pointer;
  font: inherit;
}

.dirA button.audit-entry-actor:hover { background: var(--A-surface-2); color: var(--A-accent); }

.dirA .audit-actor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(14, 33, 58, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
}

.dirA .audit-actor-card {
  position: relative;
  width: min(360px, 100%);
  background: var(--A-surface);
  border-radius: var(--A-radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--sp-20);
}

.dirA .audit-actor-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .audit-actor-close:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .audit-actor-head { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: var(--sp-14); }
.dirA .audit-actor-head strong { display: block; font-size: var(--text-body); font-weight: 600; }

.dirA .audit-actor-role { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .audit-actor-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-100);
  color: var(--A-accent);
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Patient setup page: full-bleed header, sticky rail ----------
   #rightContentPanel is padded (15px) AND scrollable (overflow:auto) in site.css.
   The padding inset the page header, so this page did not match the others; and the
   overflow makes that element the scrollport, so a sticky rail measures its top from
   there, not from the viewport — offsetting by the topbar height was wrong. */

/* The header only reads as a bar because of what sits under it: every other redesigned
   page is a white .page-header on a --A-bg body, and that contrast is the "depth". This
   page sat on a white panel, so the bar disappeared into it. */
/* BOTH of these, exactly as body.crx-island-page does above: .container.body-content is
   a Bootstrap .container and keeps 15px of side padding of its own, so zeroing only
   #rightContentPanel still left the header inset and stopped it reaching the left edge. */
/* The chart owns the content area and scrolls inside its own columns, like every other
   redesigned page. It used to scroll in the window instead, which left the page as tall as
   its tallest column -- a screen of nothing under the short ones. */
body.crx-patient-page .container.body-content,
body.crx-patient-page #rightContentPanel {
  padding: 0;
  border-radius: 0;
  background: #FBFBFC;
  overflow: hidden;
}

/* Stated outright rather than as 100%: this rule comes after the one on body.crx-chrome
   that gives the container its height, so a percentage here would replace that height with
   one measured against a <body> that has none -- which is auto, and the page grows again. */
body.crx-patient-page .container.body-content { height: calc(100vh - var(--crx-topbar-h)); }
body.crx-patient-page #rightContentPanel { height: 100%; }

/* Said on <html> as well: site.css carries `html { overflow-y: scroll }`, and once <html>
   has a non-visible overflow the viewport takes ITS value and ignores the body's. */
html:has(> body.crx-patient-page) { overflow: hidden; }
body.crx-patient-page { overflow: hidden; }

/* Header, then the columns taking what is left. */
body.crx-patient-page #rightContentPanel {
  display: flex;
  flex-direction: column;
}

/* The page's own breathing room, minus the header which spans the full width. */
body.crx-patient-page .crx-chart-grid,
body.crx-patient-page #rightContentPanel > .patient-info,
body.crx-patient-page #rightContentPanel > .modal { margin-left: var(--sp-14); margin-right: var(--sp-14); }

body.crx-patient-page .crx-chart-grid { margin-bottom: var(--sp-14); }

/* On an island page the header is a flex:none row above a scrolling body, so it stays put
   by construction. This page scrolls in the window instead, so the same effect is sticky —
   pinned under the fixed app bar, with the gap below it as padding rather than margin so
   the tabs pass behind an unbroken band rather than through a transparent one. */
/* A row above a scrolling body, so it stays put by construction rather than by sticking. */
body.crx-patient-page #patient-titlebar-root {
  flex: none;
  z-index: 30;
  margin: 0;
  padding-bottom: var(--sp-14);
  background: #FBFBFC;
}

body.crx-patient-page .crx-chart-grid {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* Each column scrolls in itself, so one running long never stretches the others. */
body.crx-patient-page .crx-chart-grid > #patient-rail-root,
body.crx-patient-page .crx-chart-grid > #patient-aside-root {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The tab strip stays; what is under it scrolls. */
body.crx-patient-page .crx-chart-grid > .crx-patient-setup {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.crx-patient-page .crx-patient-setup > ul.nav-tabs { flex: none; }

body.crx-patient-page .crx-patient-setup > .tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The title row's own height (52px) plus that padding: what a sticky thing below it has
   to clear. */
body.crx-patient-page { --crx-chart-head: calc(var(--crx-topbar-h) + 66px); }

/* Follows the page: it is the context every tab is read against. Scrolls inside itself
   only if taller than the viewport, so it cannot trap the page. */
.crx-chart-grid > #patient-rail-root {
  align-self: stretch;
  /* No max-height and no inner scroll. The card is a short, bounded summary, and capping it
     clipped its own bottom edge and shadow against the scroll box. */
}

.crx-chart-grid > #patient-aside-root { align-self: stretch; }

/* Stacked under 900px: one column, so the window scrolls again and nothing is boxed. */
@media (max-width: 900px) {
  html:has(> body.crx-patient-page),
  body.crx-patient-page { overflow: auto; }

  body.crx-patient-page .container.body-content,
  body.crx-patient-page #rightContentPanel { height: auto; overflow: visible; }

  body.crx-patient-page .crx-chart-grid > #patient-rail-root,
  body.crx-patient-page .crx-chart-grid > #patient-aside-root,
  body.crx-patient-page .crx-patient-setup > .tab-content { overflow: visible; }
}

/* Second row of the audit bar: the filters that narrow what the first row selected. */
.dirA .audit-log-bar.is-filters {
  border-bottom: 0;
  padding-bottom: 0;
}

.dirA .audit-select {
  width: auto;
  min-width: 132px;
  height: 28px;
  padding-right: 22px;
}

/* ---------- Medical conditions: one grid, edited in place ---------- */

.dirA .conditions { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .conditions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.dirA .conditions-bar h3 { margin: 0; font-size: var(--text-title); font-weight: 600; }
.dirA .conditions-bar p { margin: var(--sp-2) 0 0; font-size: var(--text-label); color: var(--A-fg-3); }

.dirA .conditions-search { display: flex; flex-direction: column; gap: var(--sp-8); max-width: 460px; }

.dirA .conditions-table td { vertical-align: middle; }
.dirA .conditions-table .input { height: 28px; margin: 0; }
.dirA .conditions-table .mono { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--A-fg-2); }

/* A stopped condition is history, not current: kept legible but visibly past. */
.dirA .conditions-table tr.is-stopped td { color: var(--A-fg-3); }
.dirA .conditions-table tr.is-stopped td:nth-child(2) { text-decoration: line-through; }

.dirA .pt-add-results button .mono {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  margin-right: var(--sp-8);
}

/* Tab panes were flush to the card edge, so a search box or chip sat on the border.
   The pane owns the inset; .patient-info-box keeps its own for the legacy forms. */
.crx-patient-setup .tab-content > .tab-pane { padding: var(--sp-6); }
.crx-patient-setup .tab-content > .tab-pane > .patient-info-box { padding: var(--sp-10); }

/* ---------- Kendo pickers: one box, not two ----------
   Both the wrapper and the inner input were given a border, so the field read as two boxes.
   The wrapper owns the chrome; the input and the button sit inside it, flush. */

.crx-patient-setup .k-picker-wrap,
.crx-patient-setup .k-dropdown-wrap,
.crx-patient-setup .k-numeric-wrap,
.crx-patient-setup .k-multiselect-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.crx-patient-setup .k-picker-wrap > input,
.crx-patient-setup .k-picker-wrap > .form-control,
.crx-patient-setup .k-dropdown-wrap > input,
.crx-patient-setup .k-dropdown-wrap > .form-control,
.crx-patient-setup .k-numeric-wrap > input,
.crx-patient-setup .k-numeric-wrap > .form-control {
  flex: 1;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font-family: var(--font);
  font-size: var(--text-label);
  color: var(--A-fg);
}

/* The picker button belongs inside the field, separated by a hairline rather than a box. */
.crx-patient-setup .k-picker-wrap > .k-select,
.crx-patient-setup .k-dropdown-wrap > .k-select,
.crx-patient-setup .k-numeric-wrap > .k-select {
  flex: none;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--A-rule);
  border-radius: 0;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  cursor: pointer;
}

.crx-patient-setup .k-picker-wrap > .k-select:hover,
.crx-patient-setup .k-dropdown-wrap > .k-select:hover { background: var(--A-rule-2); color: var(--A-fg); }

/* Focus belongs to the whole field, so it lands on the wrapper. */
.crx-patient-setup .k-picker-wrap.k-state-focused,
.crx-patient-setup .k-dropdown-wrap.k-state-focused,
.crx-patient-setup .k-picker-wrap:focus-within,
.crx-patient-setup .k-dropdown-wrap:focus-within {
  border-color: var(--A-accent);
  box-shadow: none;
}

/* A Kendo widget sizes itself; let it fill the column like every other field. */
.crx-patient-setup .k-widget.k-datepicker,
.crx-patient-setup .k-widget.k-dropdown,
.crx-patient-setup .k-widget.k-numerictextbox { width: 100%; display: block; }

/* ---------- Patient portrait in the rail ---------- */

.dirA .pt-portrait { display: flex; flex-direction: column; gap: var(--sp-6); flex: none; }

.dirA .pt-portrait-frame {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--A-rule);
  border-radius: 50%;
  background: var(--navy-100);
  overflow: hidden;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dirA .pt-portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dirA .pt-avatar-initials {
  font-size: 20px;
  font-weight: 600;
  color: var(--A-accent);
  letter-spacing: 0.02em;
}

.dirA .pt-portrait-hint {
  position: absolute;
  inset: auto 0 0 0;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 33, 58, 0.62);
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s var(--ease-out);
}

.dirA .pt-portrait-frame:hover .pt-portrait-hint,
.dirA .pt-portrait-frame:focus-visible .pt-portrait-hint { opacity: 1; }

.dirA .pt-portrait-confirm { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--text-meta); flex-wrap: wrap; }
.dirA .pt-portrait-confirm > span { color: var(--A-fg-3); }
.dirA .pt-portrait-confirm .linklike { font-size: var(--text-meta); }
.dirA .pt-portrait-error { margin: 0; font-size: var(--text-meta); color: var(--danger); max-width: 120px; }

/* Actions on the full-size view, so replace and remove are where the photo is. */
.dirA .photo-viewer-bar {
  position: absolute;
  bottom: 24px;
  display: flex;
  gap: var(--sp-8);
}

.dirA .photo-viewer-bar button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  height: 28px;
  padding: 0 var(--sp-12);
  border: 0;
  border-radius: var(--A-radius);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  cursor: pointer;
}

.dirA .photo-viewer-bar button:hover { background: #fff; }
.dirA .photo-viewer-bar button.is-danger { color: var(--danger); }
.dirA .photo-viewer-bar button:disabled { opacity: 0.6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .dirA .pt-portrait-hint { transition: none; }
}

/* ---------- Checkboxes and radios are not text fields ----------
   Several of these carry class="form-control" (Kendo's CheckBoxFor sets it), so the
   sizing above turned them into 30px-tall empty boxes that could not be clicked. */

.crx-patient-setup .form-control[type="checkbox"],
.crx-patient-setup .form-control[type="radio"],
.crx-patient-setup input[type="checkbox"],
.crx-patient-setup input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  margin: var(--sp-6) 0 0;
  border: 1px solid var(--A-rule-strong, var(--rule-strong));
  border-radius: 3px;
  background: var(--A-surface);
  box-shadow: none;
  accent-color: var(--A-accent);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  appearance: auto;
  -webkit-appearance: auto;
}

.crx-patient-setup input[type="radio"] { border-radius: 50%; }

/* Kendo renders its own checkbox chrome; leave that alone and just line it up. */
.crx-patient-setup .k-checkbox-wrapper,
.crx-patient-setup .k-checkbox-label { margin-top: var(--sp-4); font-size: var(--text-label); color: var(--A-fg); }
.crx-patient-setup .k-checkbox { width: 16px; height: 16px; }

/* ===================================================== KENDO POPUPS (compact) ===
   Kendo appends every popup to <body>, outside .dirA, which is why these kept their stock
   size. Size and colour only, scoped to the patient pages. Each rule mirrors the theme's
   selector shape and names the same properties, or the override only half-applies. */

body.crx-patient-page .k-animation-container { font-family: var(--font); }

body.crx-patient-page .k-animation-container .k-popup,
body.crx-patient-page .k-animation-container .k-list-container,
body.crx-patient-page .k-animation-container .k-calendar-container {
  border: 1px solid #E5E8EE;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
  padding: 0;
  background: #fff;
  font-size: var(--text-meta);
}

/* ---- the filter row above a searchable dropdown ---- */

body.crx-patient-page .k-list-filter {
  padding: var(--sp-6) var(--sp-8);
  min-height: 0;          /* theme: calc(2.75rem + 1.5em) — the whole reason it was tall */
  border-bottom: 1px solid #E5E8EE;
}

body.crx-patient-page .k-list-filter > .k-textbox {
  height: 26px;
  min-height: 0;
  /* Right padding leaves room for the magnifier, which the theme positions over the box. */
  padding: 0 26px 0 var(--sp-8);
  border: 1px solid #E5E8EE;
  border-radius: 4px;
  background: #fff;
  font-size: var(--text-meta);
  line-height: 24px;
  box-shadow: none;
}
body.crx-patient-page .k-list-filter > .k-textbox:focus,
body.crx-patient-page .k-list-filter > .k-textbox.k-state-focused {
  border-color: var(--navy, #1B3A58);
  box-shadow: none;
}

/* Kendo's textbox can be a span wrapping the real input; style whichever one is there. */
body.crx-patient-page .k-list-filter > .k-textbox > input,
body.crx-patient-page .k-list-filter > .k-textbox > .k-input {
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-meta);
  color: #1A1D21;
  box-shadow: none;
}

body.crx-patient-page .k-list-filter > .k-icon {
  /* Theme puts a 1rem-scale icon at right:1.75rem; at this size that is a magnifier
     bigger than the text it filters, floating well clear of the box edge. */
  right: 14px;
  font-size: 13px;
  width: 13px;
  height: 13px;
  color: #8A93A0;
}

/* ---- the options ---- */

body.crx-patient-page .k-list-container .k-list { padding: var(--sp-4); }
body.crx-patient-page .k-list-container .k-list-scroller { max-height: 240px; }

body.crx-patient-page .k-list-container .k-item,
body.crx-patient-page .k-list-container .k-list .k-item,
body.crx-patient-page .k-list-container .k-list-optionlabel {
  /* Theme: 3px 1.5rem at 32px min-height. This is .combo-option, exactly. */
  padding: var(--sp-6) var(--sp-8);
  min-height: 0;
  line-height: 1.35;
  border-radius: 4px;
  font-size: var(--text-meta);
  color: #4A5360;
}

body.crx-patient-page .k-list-container .k-item:hover,
body.crx-patient-page .k-list-container .k-item.k-state-hover,
body.crx-patient-page .k-list-container .k-list-optionlabel:hover,
body.crx-patient-page .k-list-container .k-list-optionlabel.k-state-hover {
  background: #F4F6F9;
  color: #1A1D21;
}

body.crx-patient-page .k-list-container .k-item.k-state-selected,
body.crx-patient-page .k-list-container .k-item.k-selected,
body.crx-patient-page .k-list-container .k-list-optionlabel.k-state-selected {
  /* A tint and the accent colour, not a full blue fill — the row stays readable and the
     list does not turn into a block of colour. */
  background: #F4F7FA;
  color: var(--navy, #1B3A58);
  font-weight: 600;
}

body.crx-patient-page .k-list-container .k-item.k-state-focused,
body.crx-patient-page .k-list-container .k-list-optionlabel.k-state-focused {
  box-shadow: none;
  background: #F4F6F9;
}

body.crx-patient-page .k-nodata { padding: var(--sp-10); font-size: var(--text-meta); color: #8A93A0; }

/* ---- the calendar ---- */

body.crx-patient-page .k-calendar {
  width: 236px;
  border: 0;
  font-size: var(--text-label);
}
body.crx-patient-page .k-calendar .k-header,
body.crx-patient-page .k-calendar .k-calendar-header {
  padding: var(--sp-6);
  background: #fff;
  border-bottom: 0;
}
body.crx-patient-page .k-calendar .k-nav-fast,
body.crx-patient-page .k-calendar .k-calendar-title {
  font-size: var(--text-label);
  font-weight: 600;
  color: #1A1D21;
}
body.crx-patient-page .k-calendar th,
body.crx-patient-page .k-calendar .k-calendar-th {
  padding: var(--sp-2) 0;
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A93A0;
}
body.crx-patient-page .k-calendar td { padding: 0; }
body.crx-patient-page .k-calendar .k-link {
  /* 28px square with tabular digits — the same cell as .crx-cal-d. */
  width: 28px; height: 28px;
  padding: 0;
  line-height: 28px;
  border-radius: 4px;
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  color: #1A1D21;
}
body.crx-patient-page .k-calendar .k-link:hover { background: #F4F6F9; }
body.crx-patient-page .k-calendar .k-today .k-link { border: 1px solid #C9D0DA; font-weight: 600; box-shadow: none; }
body.crx-patient-page .k-calendar .k-state-selected .k-link,
body.crx-patient-page .k-calendar .k-selected .k-link {
  background: var(--navy, #1B3A58);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
body.crx-patient-page .k-calendar .k-other-month .k-link { color: #8A93A0; }
body.crx-patient-page .k-calendar .k-footer,
body.crx-patient-page .k-calendar .k-calendar-footer {
  padding: var(--sp-6);
  border-top: 1px solid #EEF1F5;
}
body.crx-patient-page .k-calendar .k-footer .k-link {
  width: auto; height: auto; line-height: 1.3;
  font-size: var(--text-meta);
  color: var(--navy, #1B3A58);
}

/* Delivery address form (features/patients/DeliveryAddressForm). The fieldset around it
   already supplies the frame and the legend, so the island only owns its own spacing. */
.dirA .crx-delivery-form { padding: var(--sp-4) 0; }
.dirA .crx-delivery-actions {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-14);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--A-rule-2);
}

/* ============================================================== DOCUMENTS ====
   features/patients/PatientDocuments — list on the left, what you picked on the right. */

/* This sits in the chart's middle column, between the rail and the side panel, so what
   decides the layout is the column's width and not the window's - a viewport media query
   never fires here however cramped the two panes get. */
.dirA .crx-docs {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

/* Below this the preview is too narrow to read a page in, so the list moves above it and
   the document gets the full column. */
@container (max-width: 660px) {
  .dirA .crx-docs { grid-template-columns: minmax(0, 1fr); }
  .dirA .crx-docs-items { max-height: 220px; }
}

/* Same rule for browsers without container queries, on the window this time. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .dirA .crx-docs { grid-template-columns: minmax(0, 1fr); }
  }
}

.dirA .crx-docs-list {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .crx-docs-bar {
  display: flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .crx-docs-search {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-6);
  height: 28px; padding: 0 var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  color: var(--A-fg-3);
}
.dirA .crx-docs-search:focus-within { border-color: var(--A-accent); }
.dirA .crx-docs-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font-family: var(--font); font-size: var(--text-label); color: var(--A-fg);
}

.dirA .crx-docs-items {
  list-style: none; margin: 0; padding: var(--sp-4);
  max-height: 520px; overflow-y: auto;
}
.dirA .crx-docs-items > li { display: flex; align-items: stretch; gap: var(--sp-2); }

.dirA .crx-doc {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-8);
  border: 1px solid transparent; border-radius: var(--A-radius);
  background: transparent;
  text-align: left; cursor: pointer;
}
.dirA .crx-doc:hover { background: var(--A-surface-2); }

/* The selected document is the one on show beside it, so it is marked, not merely hovered. */
.dirA .crx-doc.is-selected {
  background: var(--A-tint);
  border-color: var(--A-accent);
}

.dirA .crx-doc-icon { flex: none; color: var(--A-fg-3); display: inline-flex; }
.dirA .crx-doc.is-selected .crx-doc-icon { color: var(--A-accent); }

.dirA .crx-doc-text { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
/* Name and source tag on one line: the tag is how you tell an eFax from an upload at a
   glance, so it sits with the name rather than below it. */
.dirA .crx-doc-top {
  display: flex; align-items: center; gap: var(--sp-6); min-width: 0;
}
.dirA .crx-doc-top .badge { flex: none; }

.dirA .crx-doc-name {
  font-size: var(--text-label); font-weight: 500; color: var(--A-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The Rx number a script came in on, set in the mono face like every other Rx number. */
.dirA .crx-doc-rx {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-meta); letter-spacing: 0.02em;
  color: var(--A-fg-2);
}
.dirA .crx-doc-meta {
  display: flex; align-items: center; gap: var(--sp-6);
  font-size: var(--text-meta); color: var(--A-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dirA .crx-doc-ext {
  flex: none;
  padding: 0 var(--sp-4); border-radius: 3px;
  background: var(--A-surface-2); color: var(--A-fg-3);
  font-size: var(--text-meta);
}
.dirA .crx-doc-del { align-self: center; }

.dirA .crx-docs-preview {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  min-height: 320px;
}

/* A document's name is often a 40-character machine name with no spaces in it. The actions
   wrap under it rather than squeezing it into a column one word wide. */
.dirA .crx-preview-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-8) var(--sp-12);
  padding: var(--sp-12) var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
}
.dirA .crx-preview-h > div:first-child { min-width: 200px; flex: 1 1 260px; }
.dirA .crx-preview-h h3 {
  margin: 0; font-size: var(--text-title); font-weight: 600; color: var(--A-fg);
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.dirA .crx-preview-acts { display: flex; align-items: center; gap: var(--sp-8); flex: none; }
.dirA .crx-preview-h p  { margin: var(--sp-2) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-preview-b { padding: var(--sp-12) var(--sp-14); }

/* A fixed height rather than one that follows the file: the panel must not jump between a
   portrait scan and a landscape one while you click down the list. Sized off the window so
   the tab fits one screen rather than running past the bottom of it. */
.dirA .crx-preview-b.is-image,
.dirA .crx-preview-b.is-pdf { height: clamp(320px, calc(100vh - 330px), 760px); }

/* The PDF fills its panel; the fallback line sits under it for the rare browser that
   renders nothing, rather than replacing the viewer. */
.dirA .crx-preview-b.is-pdf {
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.dirA .crx-preview-b.is-pdf iframe {
  flex: 1; min-height: 0; width: 100%;
  border: 1px solid var(--A-rule); border-radius: var(--A-radius);
  background: var(--A-surface-2);
}
.dirA .crx-preview-fallback { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-preview-b.is-image {
  display: flex; align-items: center; justify-content: center;
  background: var(--A-surface-2);
}
.dirA .crx-preview-b.is-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.dirA .crx-preview-b.is-pdf { padding: 0; }
.dirA .crx-preview-b.is-pdf object { width: 100%; height: 100%; border: 0; display: block; }
.dirA .crx-preview-fallback { padding: var(--sp-16); font-size: var(--text-label); color: var(--A-fg-2); }

.dirA .crx-upload { padding: var(--sp-14); display: flex; flex-direction: column; gap: var(--sp-12); }
.dirA .crx-upload-pick { display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; margin-top: var(--sp-4); }
.dirA .crx-upload-pick input[type="file"] { font-size: var(--text-label); }
.dirA .crx-upload-file { font-size: var(--text-meta); color: var(--A-fg-3); }

/* ---------- A label in a preview ----------
   One frame for both previews (features/printing): a caption naming the paper, and the
   label itself in a bordered box on the dialog's ground. */

.dirA .crx-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-14);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-2);
}

/* An order prints one label per drug, so the preview stacks them. */
.dirA .crx-labels { display: flex; flex-direction: column; gap: var(--sp-14); }

.dirA .crx-labels-count {
  margin: 0 0 var(--sp-10);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

.dirA .crx-label { margin: 0 auto; width: 100%; }

.dirA .crx-label figcaption {
  margin-bottom: var(--sp-4);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

/* A frame, because the label is an iframe carrying its own page styles. */
.dirA .crx-label-box {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgb(16 24 40 / 10%);
}

.dirA .crx-label-box iframe { display: block; width: 100%; border: 0; }

/* Continuous paper, shown whole: the receipt reads as a slip on the counter rather than a
   window onto one, and the dialog is the only thing that scrolls. */
.dirA .crx-label.is-paper { max-width: 320px; }
.dirA .crx-label.is-paper .crx-label-box {
  border-radius: 2px;
  box-shadow: 0 2px 10px rgb(16 24 40 / 12%);
}
.dirA .crx-label.is-paper iframe { min-height: 120px; }

/* ---------- Send to an external pharmacy (features/dispensing) ---------- */

/* Who the transfer goes to. externalpharmacypicker.js renders everything inside this
   element, Kendo widgets included, so the rules here only give it the panel's own spacing
   and type rather than restyling its parts. */
/* The body sets the rhythm; nothing inside adds its own bottom margin. Three stacked
   margins were what put a hole between CC and Subject. */
/* Said in place of the button it replaces, so the reason sits where the action was. */
.dirA .till-cart-note.is-warn { color: #B4451C; }

/* ---- the scan modal's own fields, now React inside a Bootstrap modal ---- */

.dirA .rx-scan-pickers { display: grid; gap: var(--sp-12); }

.dirA .rx-scan-field { display: grid; gap: var(--sp-4); }

.dirA .rx-scan-field > label {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-2);
  margin: 0;
}

/* The asterisk the Bootstrap form used, kept so a required field still reads as one. */
.dirA .rx-scan-field > label.required::after { content: ' *'; color: var(--danger, #B42318); }

.dirA .rx-scan-field .rx-scan-opt { font-weight: 400; color: var(--A-fg-3); }

/* ---- how many refills travel with a transferred drug ---- */

/* Asked before the letter is composed, because the letter says how many are going. */
.dirA .xfr-intro { margin: 0 0 var(--sp-4); font-weight: 600; }
.dirA .xfr-sub { margin: 0 0 var(--sp-12); font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .xfr-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dirA .xfr-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .xfr-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dirA .xfr-drug { font-weight: 600; }

.dirA .xfr-rx,
.dirA .xfr-left { font-size: var(--text-meta); color: var(--A-fg-3); }

/* Lit once some are being kept: that is the half of the split nobody asked for. */
.dirA .xfr-left.is-changed { color: var(--A-accent); }

.dirA .xfr-ctl { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.dirA .xfr-cap { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .xfr-step {
  display: flex;
  align-items: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  overflow: hidden;
}

.dirA .xfr-step button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: var(--A-surface-2);
  color: var(--A-fg);
  cursor: pointer;
}

.dirA .xfr-step button:hover:not(:disabled) { background: var(--A-tint); }
.dirA .xfr-step button:disabled { opacity: .4; cursor: default; }

.dirA .xfr-step input {
  width: 56px;
  height: 30px;
  border: 0;
  border-left: 1px solid var(--A-rule);
  border-right: 1px solid var(--A-rule);
  background: var(--A-surface);
  color: var(--A-fg);
  font: inherit;
  text-align: center;
}

.dirA .xfr-error {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-10) 0 0;
  font-size: var(--text-meta);
  color: #B4451C;
}

.dirA .crx-pharmacy-form { display: grid; gap: var(--sp-16); }
.dirA .crx-pharmacy-form > * { margin: 0; }

.dirA .crx-pharmacy-recipients { margin-bottom: 0; }

.dirA .crx-pharmacy-recipients .form-group { margin-bottom: var(--sp-10); }

.dirA .crx-pharmacy-recipients .control-label {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .crx-pharmacy-recipients small { font-size: var(--text-meta); line-height: 1.45; }

/* ---- Who a transfer goes to (features/dispensing/PharmacyPicker) ---- */
.dirA .crx-pp { display: grid; gap: var(--sp-12); }
.dirA .crx-pp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); }
.dirA .crx-pp-group { display: grid; gap: var(--sp-6); }

.dirA .crx-pp-label {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--A-fg-2);
}
.dirA .crx-pp-label small { font-weight: 400; color: var(--A-fg-3, var(--A-fg-2)); }

/* The combo boxes fill the dialog rather than keeping their default width. */
.dirA .crx-pp .combo { width: 100%; }

.dirA .crx-pp-empty { margin: 0; font-size: var(--fs-13); color: var(--A-fg-2); }
.dirA .crx-pp-empty.is-error { color: var(--danger); }
.dirA .crx-pp-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--A-accent); text-decoration: underline; font: inherit;
}

.dirA .crx-pp-sendsto {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  margin: 0; font-size: var(--fs-12); color: var(--A-fg-2); overflow-wrap: anywhere;
}
.dirA .crx-pp-sendsto svg { flex: none; margin-top: 2px; color: var(--A-fg-4); }

/* CC: chips in a box that behaves like one field. */
.dirA .crx-pp-cc {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  min-height: 38px; padding: var(--sp-4) var(--sp-6);
  border: 1px solid var(--A-rule); border-radius: var(--radius-8); background: var(--A-surface);
}
.dirA .crx-pp-cc:focus-within { border-color: var(--A-accent); }
.dirA .crx-pp-cc-in { flex: 1 1 140px; min-width: 120px; border: 0; outline: none; background: none;
  font: inherit; color: var(--A-fg); padding: var(--sp-4) var(--sp-2); }

.dirA .crx-pp-chip {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: 2px var(--sp-4) 2px var(--sp-8);
  border-radius: 999px; background: var(--A-surface-2);
  font-size: var(--fs-12); color: var(--A-fg);
}
.dirA .crx-pp-chip.is-bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.dirA .crx-pp-chip button {
  display: inline-flex; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; opacity: .7;
}
.dirA .crx-pp-chip button:hover { opacity: 1; }

.dirA .crx-pp-hint { font-size: var(--text-meta); color: var(--A-fg-2); }

/* Adding one that is not on the list yet. */
.dirA .crx-pp-add {
  display: grid; gap: var(--sp-8);
  padding: var(--sp-12); border: 1px solid var(--A-rule); border-radius: var(--radius-8);
  background: var(--A-surface-2);
}
.dirA .crx-pp-add-hint { margin: 0; font-size: var(--fs-12); color: var(--A-fg-2); }
.dirA .crx-pp-add-act { display: flex; justify-content: flex-end; gap: var(--sp-8); }

.dirA .crx-pharmacy-note {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-14);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid #F0E0B5;
  border-radius: var(--A-radius);
  background: var(--warning-100);
  font-size: var(--text-meta);
  color: #8A6508;
}

.dirA .crx-pharmacy-field {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
}

.dirA .crx-pharmacy-field > span {
  display: block;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-2);
}

.dirA .crx-pharmacy-field > small {
  display: block;
  margin-top: var(--sp-4);
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}

/* Addresses this pharmacy has been sent to before: one click adds one. */
/* Addresses used before, searched from the field rather than listed above it. */
.dirA .crx-pharmacy-to { position: relative; display: block; }

.dirA .crx-pharmacy-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 210px;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-4);
  list-style: none;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
}

.dirA .crx-pharmacy-list-h {
  padding: var(--sp-6) var(--sp-8) var(--sp-6);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-4);
}

.dirA .crx-pharmacy-list button {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  padding: var(--sp-6) var(--sp-8);
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  font: inherit;
  font-size: var(--text-label);
  color: var(--A-fg);
  text-align: left;
  cursor: pointer;
}

.dirA .crx-pharmacy-list button svg { flex: none; color: var(--A-fg-4); }
.dirA .crx-pharmacy-list button:hover { background: var(--A-surface-2); }
.dirA .crx-pharmacy-list button:hover svg { color: var(--A-accent); }

/* ---------------------------------------------------- the email, previewed */

.dirA .crx-pharmacy-preview {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  overflow: hidden;
  background: var(--A-surface);
}

/* A header strip like a message's: who it is going to, and the pencil to change it. */
.dirA .crx-pharmacy-preview-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  margin: 0;
  padding: var(--sp-8) var(--sp-10) var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}

.dirA .crx-pharmacy-preview-to {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  font-size: var(--text-label);
  color: var(--A-fg-2);
}

.dirA .crx-pharmacy-preview-to > svg { flex: none; color: var(--A-fg-4); }

.dirA .crx-pharmacy-preview-to > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Edit and expand sit together, so the strip reads as one set of controls. */
.dirA .crx-pharmacy-preview-act { display: inline-flex; align-items: center; gap: var(--sp-6); flex: none; }

/* Styled in place, not portalled: prescription/index.js reads this element on send. */
.dirA .crx-pharmacy-preview.is-full {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.dirA .crx-pharmacy-preview.is-full .crx-pharmacy-preview-h {
  padding: var(--sp-12) var(--sp-16);
}

.dirA .crx-pharmacy-preview.is-full .crx-pharmacy-body {
  flex: 1 1 auto;
  max-height: none;
  /* The letter is a page: held to a readable measure rather than stretched to the screen. */
  width: min(820px, 100%);
  margin: 0 auto;
}

/* The email as the pharmacy will receive it, so it keeps its own formatting. */
.dirA .crx-pharmacy-body {
  max-height: 320px;
  overflow: auto;
  padding: var(--sp-16) var(--sp-20);
  border: 0;
  background: #FFFFFF;
  font-size: var(--text-label);
  line-height: 1.55;
  color: var(--A-fg);
}

.dirA .crx-pharmacy-body.is-editing {
  background: var(--A-tint);
  box-shadow: inset 0 0 0 2px var(--navy-100);
  outline: none;
}

.dirA .crx-pharmacy-hint {
  display: block;
  padding: var(--sp-6) var(--sp-12) var(--sp-8);
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  color: var(--A-accent);
}

/* ========================================================== DISPENSING ====
   features/dispensing: the drugs on one order, as its own table under the row. */

.dirA .crx-drugs {
  padding: var(--sp-10) var(--sp-12) var(--sp-12);
  margin: var(--sp-2) 0;
  background: var(--A-tint);
  border-left: 3px solid var(--A-accent);
  border-radius: 0 var(--A-radius-md) var(--A-radius-md) 0;
}

.dirA .crx-drugs-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}

.dirA .crx-drugs-title {
  font-size: var(--text-title);
  font-weight: 650;
  color: var(--A-accent);
}

.dirA .crx-drugs-count {
  font-size: var(--text-micro);
  font-weight: 600;
  color: #fff;
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  background: var(--A-accent);
}

/* At the end of the same line, so nothing moves when it appears. */
.dirA .crx-drugs-bulk {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.dirA .crx-drugs-selected {
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-accent);
}

/* A white card on the tinted ground, so the table is plainly its own thing. */
.dirA .crx-drugs-table-wrap {
  border: 1px solid var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-1);
  /* Scrolls both ways: twelve columns will not always fit the middle of the page. */
  overflow: auto;
  max-height: 340px;
}

.dirA .crx-drugs-table {
  width: 100%;
  /* The sum of the widths declared on the header row. */
  min-width: 1544px;
  /* Fixed, so the header row's widths are the column widths; auto layout sized by content. */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-label);
}

.dirA .crx-drugs-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--navy-100);
  border-bottom: 1px solid var(--A-accent);
  padding: var(--sp-8) var(--sp-12);
  border-right: 1px solid var(--A-rule-2);
  text-align: left;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--A-accent);
  white-space: nowrap;
}

.dirA .crx-drugs-table tbody td {
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule-2);
  border-right: 1px solid var(--A-rule-2);
  color: var(--A-fg-2);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dirA .crx-drugs-table tbody td:last-child,
.dirA .crx-drugs-table thead th:last-child { border-right: 0; }

/* A quiet stripe, so the eye holds its line across ten columns. */
.dirA .crx-drugs-table tbody tr:nth-child(even) td { background: var(--A-bg); }
.dirA .crx-drugs-table tbody tr:last-child td { border-bottom: 0; }
.dirA .crx-drugs-table tbody tr:hover td { background: var(--A-surface-2); }

/* Ticked for a bulk action: the tint says which rows the bar above will act on. */
.dirA .crx-drugs-table tbody tr.is-picked td { background: var(--A-tint); }
.dirA .crx-drugs-table tbody tr.is-picked td:first-child { box-shadow: inset 2px 0 0 var(--A-accent); }

/* Expired by a person: history, and no longer actionable. */
.dirA .crx-drugs-table tbody tr.is-expired td { color: var(--A-fg-4); }
.dirA .crx-drugs-table tbody tr.is-expired .crx-drug-name { color: var(--A-fg-4); }

/* Pinned so a checkbox is never the column that gives way when the table is narrow. */
.dirA .crx-drugs-table th.pick,
.dirA .crx-drugs-table td.pick {
  width: 34px;
  min-width: 34px;
  padding-right: 0;
  text-align: center;
}


/* ---------- The till: who is here, what they owe, what is being paid for ---------- */

/* Side by side, each scrolling on its own, so the cart never leaves the screen. */
.dirA .till {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: var(--sp-12);
  align-items: stretch;
  min-height: 0;
  flex: 1;
}

.dirA .till-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  overflow: hidden;
}

.dirA .till-col-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}

.dirA .till-col-t { font-weight: 600; color: var(--A-fg); }

.dirA .till-col-t.is-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.dirA .till-col-t.is-link:hover { color: var(--A-accent); text-decoration: underline; }
.dirA .till-col-t.is-link svg { opacity: .55; }

/* The header carries the warning; the notes are what is to be read, so they stay plain text
   with a marker down the side. Amber behind every line turned the whole panel into a colour
   and left the messages harder to read than ordinary notes. */
.dirA .till-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--warning);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  font-size: var(--text-meta);
  line-height: 1.45;
}

.dirA .till-note svg { flex: none; margin-top: 1px; }

.dirA .till-col-n {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--A-accent);
  color: #fff;
  font-size: var(--text-meta);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.dirA .till-col-h .chip-filter { margin-left: auto; }

/* The refresh button sits at the end of the header, the way a grid carries it. */
.dirA .till-col-act { margin-left: auto; flex: none; }
.dirA .till-col-h .chip-filter + .till-col-act { margin-left: var(--sp-6); }

.dirA .till-col-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-8); }

/* The bar floats over the foot of the columns, so their lists scroll out from under it
   instead of ending behind it. */
.dirA .till:has(.till-bar) .till-col-body { padding-bottom: 76px; }

.dirA .till-col.is-empty { align-items: center; justify-content: center; }

/* ---- the patients ---- */

.dirA .till-search {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  color: var(--A-fg-3);
}

.dirA .till-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--A-fg);
  font-size: var(--text-body, 13px);
}

.dirA .till-patient {
  display: block;
  width: 100%;
  padding: var(--sp-8);
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.dirA .till-patient:hover { background: var(--A-surface-2); }
.dirA .till-patient.is-on { background: var(--A-tint); border-color: var(--A-accent); }

.dirA .till-patient-name { display: block; font-weight: 500; color: var(--A-fg); }

.dirA .till-patient-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* ---- the orders ---- */

.dirA .till-order {
  margin-bottom: var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .till-order.is-on { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .till-order.is-settled { opacity: 0.75; }
.dirA .till-order.is-settled:hover { opacity: 1; }

.dirA .till-order-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8);
}

.dirA .till-order-toggle {
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
  transition: transform .12s ease;
}

.dirA .till-order-toggle[aria-expanded="true"] { transform: rotate(90deg); }

/* Two lines of identity, then the money, then what can be done. */
.dirA .till-order-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dirA .till-order-l1,
.dirA .till-order-l2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8);
  min-width: 0;
}
.dirA .till-order-l2 { color: var(--A-fg-3); font-size: var(--text-meta); }

/* Between the identity and the actions, so neither crowds the figures. */
.dirA .till-order-money {
  display: flex;
  align-items: baseline;
  gap: var(--sp-16);
  margin: 0 auto;
  padding: 0 var(--sp-12);
  flex: none;
}
.dirA .till-order-money .till-fact > b {
  font-size: var(--text-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dirA .till-order-money .till-fact.is-owed > b { color: var(--danger); }

/* A charge the insurer carries: priced like the rest, owed by nobody at the counter. */
.dirA .till-covered {
  margin-left: var(--sp-6);
  font-size: var(--text-meta);
  font-style: normal;
  color: var(--A-fg-3);
}

.dirA .till-order-no {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .till-order-add {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 3px var(--sp-8);
  border: 1px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  cursor: pointer;
}

.dirA .till-order-add:hover:not(:disabled) { border-color: var(--A-accent); color: var(--A-accent); }
/* Once it is in the cart the button is already filled, so hover darkens it instead of
   recolouring the text -- which turned the label the colour of its own background. */
.dirA .till-order-add.is-on:hover:not(:disabled) {
  background: var(--A-accent-2);
  border-color: var(--A-accent-2);
  color: #fff;
}
.dirA .till-order-add.is-on { background: var(--A-accent); border-color: var(--A-accent); color: #fff; }
.dirA .till-order-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* A settled order has nothing to add, so its two actions take that slot. */
/* The order's own actions, bigger than a grid row's: they are the point of the row. */
.dirA .till-order-acts { display: inline-flex; gap: var(--sp-4); flex: none; }
.dirA .till-order .till-order-acts .row-action { width: 32px; height: 32px; }
.dirA .till-order .till-order-acts .row-action svg { width: 20px; height: 20px; }
.dirA .row-action.is-receipt { color: var(--A-fg-2); }
.dirA .row-action.is-receipt:hover { background: var(--A-surface-2); color: var(--A-accent); }
.dirA .row-action.is-handover { color: var(--success); }
.dirA .row-action.is-handover:hover { background: var(--success-100); color: var(--success); }
.dirA .row-action.is-refund { color: var(--danger); }
.dirA .row-action.is-refund:hover { background: var(--danger-100); color: var(--danger); }

/* Undoing a handover: the same weight as a refund, because it is the same kind of act. */
.dirA .row-action.is-void { color: var(--danger); }
.dirA .row-action.is-void:hover { background: var(--danger-100); color: var(--danger); }

/* ---------- Giving a payment back (pos/RefundDialog) ---------- */

.dirA .rfd-sum {
  display: flex; align-items: baseline; gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--A-radius-md);
  background: var(--A-tint);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}
.dirA .rfd-sum strong {
  margin-left: auto;
  color: var(--A-fg);
  font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dirA .rfd-how {
  margin: var(--sp-10) 0 0;
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  line-height: 1.45;
}

.dirA .rfd-warn,
.dirA .rfd-stop {
  display: flex; align-items: flex-start; gap: var(--sp-8);
  margin: var(--sp-10) 0 var(--sp-16);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--danger);
  border-radius: var(--A-radius);
  background: var(--danger-100);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  line-height: 1.45;
}
.dirA .rfd-stop { margin: 0; }
.dirA .rfd-warn svg,
.dirA .rfd-stop svg { flex: none; margin-top: 2px; color: var(--danger); }

/* ---- the cart ---- */

.dirA .till-cart-clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  cursor: pointer;
  text-decoration: underline;
}

.dirA .till-cart-item {
  margin-bottom: var(--sp-8);
  padding: var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
}

.dirA .till-cart-top { display: flex; align-items: center; gap: var(--sp-8); }
.dirA .till-cart-amount { margin-left: auto; font-weight: 600; }

.dirA .till-cart-x {
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .till-cart-x:hover { color: var(--danger, #B42318); }

.dirA .till-cart-sub {
  display: flex;
  gap: var(--sp-8);
  margin-top: 2px;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .till-cart-foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}

/* Where these go, across the panel: the choice comes before the doing. */
.dirA .till-cart-foot .seg { width: 100%; }
.dirA .till-cart-foot .seg button { flex: 1 1 0; justify-content: center; }

/* The actions read as a column of equal-width controls rather than a button and a link. */
.dirA .till-cart-foot > .btn { width: 100%; justify-content: center; }

.dirA .till-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-h3, 15px);
}

.dirA .till-cart-warn { margin: 0; color: var(--danger, #B42318); font-size: var(--text-meta); }
.dirA .till-cart-note { margin: 0; color: var(--A-fg-3); font-size: var(--text-meta); }

/* ---- how many refills go to the other pharmacy ---- */

.dirA .till-count { display: flex; align-items: center; gap: 4px; margin-top: 6px; }

.dirA .till-count button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.dirA .till-count button:hover:not(:disabled) { background: var(--A-surface-2); }
.dirA .till-count button:disabled { opacity: .4; cursor: default; }

.dirA .till-count input {
  width: 46px;
  height: 24px;
  padding: 0 4px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  text-align: center;
}

.dirA .till-count-of { color: var(--A-fg-3); font-size: var(--text-meta); }

/* ---- a drug waiting to be refilled ---- */

.dirA .till-rx {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  padding: var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .till-rx.is-on { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .till-rx-pick { display: flex; align-items: center; padding-top: 2px; }
.dirA .till-rx-main { flex: 1; min-width: 0; }

.dirA .till-rx-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}

/* Read with the script it belongs to, not away at the other end of the line. */
.dirA .till-rx-state { display: inline-flex; align-items: center; gap: var(--sp-6); }

/* The name leads its own line now, so it is set as the heading of one. */
.dirA .till-rx-sub > .crx-drug-name { font-size: var(--text-body); font-weight: 600; color: var(--A-fg); }

/* Centred against the three lines beside them, at the size the other cards use. */
.dirA .till-rx { align-items: center; }
.dirA .till-rx-acts { display: inline-flex; align-items: center; gap: var(--sp-4); flex: none; }
.dirA .till-rx-acts .grid-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--A-radius-md);
  color: var(--A-fg-2);
}

.dirA .till-rx-acts .grid-row-action svg { width: 20px; height: 20px; }
.dirA .till-rx-acts .grid-row-action:hover { color: var(--A-accent); background: var(--A-tint); }

.dirA .till-rx-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-10);
  margin-top: var(--sp-4);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}

/* Each fact is a label and a value, so the eye finds the one it came for instead of
   reading the line. The label stays quiet; the value carries the weight. */
.dirA .till-fact { display: inline-flex; align-items: baseline; gap: var(--sp-4); }
.dirA .till-fact > i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}
.dirA .till-fact > b {
  font-weight: 500;
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
}

/* The date it was owed, once it is past. */
.dirA .till-fact.is-late > i,
.dirA .till-fact.is-late > b { color: var(--danger); }

/* The Rx number is the row's identity, so it is boxed rather than set in the run of text. */
.dirA .till-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}
.dirA .till-tag > b {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}
.dirA .till-tag > .mono { color: var(--A-fg); font-variant-numeric: tabular-nums; }

/* What is left to give is the number the work turns on, so it is read first. */
.dirA .till-left > b {
  font-weight: 700;
  font-size: var(--text-body);
  color: var(--A-fg);
  margin-right: 1px;
  font-variant-numeric: tabular-nums;
}
.dirA .till-left.is-out > b { color: var(--danger); }

/* The order this drug last went out in; clicking it ticks that whole order again. */
.dirA .till-rx-ord {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  padding: 0 var(--sp-6);
  color: var(--A-fg-3);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dirA .till-rx-ord:hover {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-accent);
}

.dirA .till-cart-who { margin: 0; color: var(--A-fg-3); font-size: var(--text-meta); text-align: center; }

/* In the drawer the panel has no frame of its own. */
.dirA .pos-checkout.is-bare { border: 0; background: transparent; padding: 0; }

/* Nothing picked yet: the orders column is not there, so the patients take its room. */
.dirA .till.is-idle { grid-template-columns: minmax(0, 1fr) 300px; }

/* The refill till builds its order as drugs are ticked, so the column it goes in
   is not there until there is something to put in it. */
.dirA .till.no-order { grid-template-columns: 260px minmax(0, 1fr); }
.dirA .till.is-idle.no-order { grid-template-columns: 260px minmax(0, 1fr); }

/* ---- the dispensing queue: orders left, their drugs right ---- */

/* An order card carries far more than a patient name, so its column is wider. */
.dirA .till.is-orders { grid-template-columns: 400px minmax(0, 1fr); }
.dirA .till.is-orders.is-idle { grid-template-columns: minmax(0, 1fr); }

/* One order to a row across the whole width: the queue is read top to bottom, and
   tiling it made the eye travel sideways to find the next one. */
.dirA .till.is-orders.is-idle .till-col-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.dirA .till.is-orders.is-idle .disp-card { flex-direction: row; margin: 0; }

/* Three lines, always: what the order is, who it is for, when it happened. They used to
   share a wrapping row, which put the patient up beside the order number. */
.dirA .till.is-orders.is-idle .disp-card-hit {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.dirA .till.is-orders.is-idle .disp-card-top,
.dirA .till.is-orders.is-idle .disp-card-who,
.dirA .till.is-orders.is-idle .disp-card-hit > .till-rx-sub { margin-top: 0; width: auto; }

.dirA .till.is-orders.is-idle .disp-card-top > .badge { margin-left: 0; }

/* Beside an open order the card is an index entry: the way it leaves sits on the title
   line with the status, so there is no strip underneath holding one icon. */
.dirA .disp-tags > .disp-ship { flex: none; }

/* Who wrote it, and the way it leaves, on one quiet line under the patient. */
.dirA .disp-card-by { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; min-width: 0; }
/* The patient leads the card, so it stays on the base size and the prescriber drops a
   step under it. Both came in at 13px before, which left the line with no hierarchy. */
.dirA .till.is-orders .disp-card-p { font-size: var(--text-body); }
.dirA .till.is-orders .disp-card-by .till-fact > b { font-size: var(--text-label); }

/* The pager sizes itself to the column it is in, not to the window. */
.dirA .till-queue-foot { container-type: inline-size; }

/* Typed, so the far end of the list is reachable once the numbers are hidden. */
.dirA .pager-at {
  display: none;
  align-items: center;
  align-self: center;
  gap: 3px;
  white-space: nowrap;
}
.dirA .page-of { color: var(--A-fg-3); line-height: 1; }

.dirA .page-jump {
  width: 2.6em;
  min-width: 28px;
  height: 22px;
  padding: 0 2px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  font: inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dirA .page-jump:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 1px; }

@container (max-width: 430px) {
  /* Three things will not share one line here, so it becomes two named rows: how many per
     page on top, then what you are looking at and how to move on. A grid rather than a
     wrapped flex row -- the full-width item that forces a flex wrap takes a line of its
     own, which left an empty row and a gap twice the size of the one asked for. */
  .dirA .pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "size  nav"
      "count nav";
    align-items: center;
    align-content: center;
    row-gap: var(--sp-4);
    column-gap: var(--sp-10);
  }

  .dirA .pager > .page-size { grid-area: size; justify-self: start; }
  .dirA .pager-count { grid-area: count; min-width: 0; }

  /* Spanning both rows, so it is centred against the pair rather than tied to the lower
     one. It is one control for the whole list, not a companion to the count. */
  .dirA .pager-right { grid-area: nav; align-self: center; margin-left: 0; }

  /* Numbers do not fit, so the arrows page and the box jumps to anywhere. */
  .dirA .pager-right .page-btn:not([aria-label]),
  .dirA .pager-right .page-gap { display: none; }
  .dirA .pager-at { display: inline-flex; }
}

.dirA .till.is-orders.is-idle .disp-card-hit > .till-rx-sub { margin-right: auto; }

/* Money over actions, set off down the right-hand edge rather than along the bottom. */
/* Spread out, the state sits in line with the actions down the right-hand edge and is
   centred against the card's two lines. No panel behind it: the card is the surface. */
.dirA .till.is-orders.is-idle .disp-card-foot {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-12);
  padding: var(--sp-8) var(--sp-12);
  border-top: 0;
  background: transparent;
  border-radius: 0;
}

/* Fixed tracks down the right-hand side: the amount, the tags and the actions each keep
   their own width, so they line up down the list. Given the leftover space instead, each
   one sat wherever that row's text and icon count happened to leave it. */
.dirA .till.is-orders.is-idle .disp-card-hit { flex: 1 1 0; min-width: 0; }

.dirA .disp-mid { display: none; }

.dirA .till.is-orders.is-idle .disp-mid {
  display: flex;
  flex: 0 0 120px;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--sp-12);
}

.dirA .till.is-orders.is-idle .disp-card-foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 206px 300px;
  align-items: center;
  gap: var(--sp-12);
}

.dirA .till.is-orders.is-idle .disp-card-foot .disp-tags,
.dirA .till.is-orders.is-idle .disp-card-foot .row-actions { justify-content: flex-end; }

/* Too narrow for fixed tracks: let them close up rather than squeeze the order's details. */
@media (max-width: 1120px) {
  .dirA .till.is-orders.is-idle .disp-mid { flex: 0 0 auto; }
  .dirA .till.is-orders.is-idle .disp-card-foot {
    display: flex;
    gap: var(--sp-10);
  }
}

.dirA .till.is-orders.is-idle .disp-card-foot .row-actions { margin-left: 0; }

.dirA .till-col-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-6); }

.dirA .till-queue-foot {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  padding: var(--sp-4) var(--sp-8);
}

/* The pager fills the strip, so its own rows centre in it rather than settling low. */
.dirA .till-queue-foot > .pager { flex: 1; min-width: 0; align-content: center; }

.dirA .till-col.is-empty { align-items: center; justify-content: center; }

.dirA .disp-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: var(--sp-6) 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .disp-card:hover { border-color: var(--A-rule-strong); }

.dirA .disp-card.is-on {
  border-color: var(--A-accent);
  box-shadow: inset 3px 0 0 var(--A-accent);
}



/* Archived orders are still readable, just plainly not the live queue. */
.dirA .disp-card.is-archived { background: var(--A-surface-2); }
.dirA .disp-card.is-archived .disp-card-p { color: var(--A-fg-3); }

/* The whole card is the target; the actions beside it keep their own. */
.dirA .disp-card-hit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.dirA .disp-card-top,
.dirA .disp-card-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}

.dirA .disp-card-top > .badge { margin-left: auto; }

.dirA .disp-card-n { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .disp-card-p { font-weight: 600; color: var(--A-fg); }

.dirA .disp-card-who > .crx-invoice { margin-left: auto; }

/* Money on the left, what can be done on the right: one line, never wrapped into a
   narrow column beside the card. */
.dirA .disp-card-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  border-radius: 0 0 var(--A-radius-md) var(--A-radius-md);
}

.dirA .disp-card-foot .row-actions { margin-left: auto; display: inline-flex; }

/* Narrow, the strip carries the delivery arrangements on the left and what the order comes
   to on the right. Its state has moved up beside the order number, where the eye already is. */
.dirA .disp-card-foot > .till-rx-sub { margin: 0; flex: 1; min-width: 0; }
.dirA .disp-card-foot > .disp-money { margin-left: auto; }

/* Beside the number it belongs to, not away in a corner: the two together are what the
   order IS, and the eye reads them as one thing. */
.dirA .disp-card-top > .disp-tags { flex: none; }

/* Wide enough for the longer of the two labels, so the icons start at the same place on
   every card whether or not the move is offered. */
.dirA .disp-card-adv {
  flex: none;
  width: 268px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* Centred on the card rather than sitting under its last line. */
.dirA .disp-card-acts {
  flex: none;
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 0 var(--sp-12) 0 var(--sp-8);
}


/* In the narrow column the two names stack: side by side they wrapped mid-name against the
   tags, and who it is for matters more than fitting it on one line. */
.dirA .till.is-orders:not(.is-idle) .disp-card-who {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* Narrow too, the status stays beside the number it belongs to. */
.dirA .till.is-orders:not(.is-idle) .disp-card-hit { position: relative; }

.dirA .disp-money { display: inline-flex; align-items: baseline; gap: var(--sp-8); }
.dirA .disp-owed { font-weight: 600; color: var(--A-fg); font-variant-numeric: tabular-nums; }

/* ---------- Why a status was changed ----------
   A history, drawn as one: a rail down the left with a mark per entry and the entry itself
   on a card beside it. */

.dirA .rsn-list { list-style: none; margin: 0; padding: var(--sp-4) 0 0; }

.dirA .rsn-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--sp-12);
  padding-bottom: var(--sp-14);
}

/* The rail joins one entry to the next, so it stops at the last. */
.dirA .rsn-item::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--A-rule);
}
.dirA .rsn-item:last-child { padding-bottom: 0; }
.dirA .rsn-item:last-child::before { display: none; }

.dirA .rsn-mark {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--A-rule);
  background: var(--A-surface);
  color: var(--A-fg-3);
}
.dirA .rsn-mark svg { width: 13px; height: 13px; }

.dirA .rsn-item.is-danger  .rsn-mark { border-color: var(--danger-100); background: var(--danger-100); color: var(--danger); }
.dirA .rsn-item.is-warning .rsn-mark { border-color: var(--warning-100); background: var(--warning-100); color: #8A6508; }

.dirA .rsn-card {
  min-width: 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

/* The one that still stands: lifted off the page rather than labelled twice. */
.dirA .rsn-item.is-latest .rsn-card {
  border-color: var(--A-rule-strong);
  box-shadow: var(--shadow-1);
}

.dirA .rsn-top { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.dirA .rsn-rx { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .rsn-now {
  margin-left: auto;
  padding: 1px var(--sp-6);
  border-radius: 999px;
  background: var(--A-tint);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--A-accent);
}

.dirA .rsn-reason {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--A-fg);
  line-height: 1.4;
}
.dirA .rsn-reason.is-none { font-weight: 500; font-style: italic; color: var(--A-fg-4); }

.dirA .rsn-drug { margin: var(--sp-2) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

/* Typed by a person, so its own line breaks are kept and it is shown as said. */
.dirA .rsn-note {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-6) var(--sp-10);
  border-left: 2px solid var(--A-rule-strong);
  border-radius: 0 var(--A-radius) var(--A-radius) 0;
  background: var(--A-surface-2);
  font-size: var(--text-label);
  color: var(--A-fg-2);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dirA .rsn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }

.dirA .rsn-chip {
  padding: 0 var(--sp-6);
  border: 1px solid var(--warning-100);
  border-radius: 999px;
  background: var(--warning-100);
  font-size: var(--text-micro);
  color: #8A6508;
}

.dirA .rsn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--A-rule-2);
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}
.dirA .rsn-meta span { display: inline-flex; align-items: center; gap: var(--sp-4); }
.dirA .rsn-meta svg { width: 12px; height: 12px; }

.dirA .rsn-empty { margin: 0; padding: var(--sp-16); text-align: center; color: var(--A-fg-3); }

/* ---------- The row's own menu ---------- */

.dirA .row-action.is-more.is-on { background: var(--A-tint); color: var(--A-accent); }

/* Portalled to body, so it is outside .dirA and names its own type. */
.more-menu {
  position: fixed;
  z-index: 1200;
  width: max-content;
  min-width: 168px;
  max-width: 272px;
  padding: 5px;
  border: 1px solid var(--A-rule, #e3e6ec);
  border-radius: 10px;
  background: var(--A-surface, #fff);
  /* Two layers: a tight one that lifts it off the card, a wide soft one for depth. */
  box-shadow: 0 1px 2px rgb(16 32 48 / 8%), 0 10px 28px -6px rgb(16 32 48 / 18%);
  font-family: var(--font);
  font-size: var(--text-body, 13px);
  transform-origin: top right;
  animation: more-in 110ms ease-out;
}

@keyframes more-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.more-menu .more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--A-fg, #20262e);
  font: inherit;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

/* The glyph is a hint beside the word, so it sits back until the row is reached for. */
.more-menu .more-item svg { flex: none; width: 16px; height: 16px; color: var(--A-fg-4, #9aa3b0); }

.more-menu .more-item:hover,
.more-menu .more-item:focus-visible {
  background: var(--A-tint, #f4f7fa);
  color: var(--A-accent, #1b3a58);
  outline: none;
}

.more-menu .more-item:hover svg,
.more-menu .more-item:focus-visible svg { color: inherit; }

/* Ending the order is set apart, and the rule is the only one in the menu. It is drawn in
   the gap above the row -- offset from the row's own top edge, not from wherever an
   absolutely positioned box would otherwise have landed. */
.more-menu .more-item.is-danger {
  margin-top: 7px;
  color: var(--danger, #b3261e);
}

.more-menu .more-item.is-danger::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--A-rule-2, #eef1f5);
}

.more-menu .more-item.is-danger svg { color: var(--danger, #b3261e); opacity: .75; }

.more-menu .more-item.is-danger:hover,
.more-menu .more-item.is-danger:focus-visible {
  background: color-mix(in srgb, var(--danger, #b3261e) 9%, transparent);
  color: var(--danger, #b3261e);
}

.more-menu .more-item.is-danger:hover svg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .more-menu { animation: none; }
}

.dirA .disp-settled { font-size: var(--text-meta); color: var(--A-fg-3); }

/* Holds the amount's place while it is being worked out, so the row does not jump. */
.dirA .disp-money-wait {
  display: inline-block;
  width: 64px;
  height: 11px;
  border-radius: 3px;
  background: var(--A-surface-2);
}

/* One ink for every action, so a row of them reads as a row rather than a paint chart.
   The colour arrives on hover, where it belongs to the one being reached for. */
.dirA .disp-card .row-actions,
.dirA .disp-open-h .row-actions { gap: 2px; }

.dirA :is(.disp-card, .disp-open-h, .drg-card) .row-action { color: var(--A-fg-2); }

/* data-grid.css loads after this one and colours archive, unarchive, void and delete for
   the grids. Matched class for class here so the queue keeps one ink. */
.dirA :is(.disp-card, .disp-open-h, .drg-card)
  .row-action:is(.is-archive, .is-unarchive, .is-void, .is-delete) { color: var(--A-fg-2); }

/* Ending an order is the one that still warns before it is pressed. */
.dirA :is(.disp-card, .disp-open-h, .drg-card)
  .row-action:is(.is-void, .is-delete):hover { color: var(--danger); }

.dirA :is(.disp-card, .disp-open-h, .drg-card)
  .row-action:not(.is-void):not(.is-delete):hover {
  color: var(--A-accent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* The order's own actions on one side, what acts on its drugs on the other. */
.dirA .row-actions-split {
  width: 1px;
  align-self: stretch;
  margin: 2px var(--sp-4);
  background: var(--A-rule);
}

/* Status and how it settled, read together. */
.dirA .disp-tags { display: inline-flex; align-items: center; gap: var(--sp-6); }

/* The open order's header: who and what, then the money, then the actions. */
.dirA .disp-open-h { flex-wrap: wrap; row-gap: var(--sp-4); }

.dirA .till-tag.is-link {
  border: 1px solid var(--A-rule);
  font: inherit;
  cursor: pointer;
}
.dirA .till-tag.is-link:hover:not(:disabled) {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-accent);
}
.dirA .till-tag.is-link:disabled { cursor: default; }


/* ---- the drugs on an order ---- */

.dirA .drg-list { display: flex; flex-direction: column; gap: var(--sp-8); }

.dirA .drg-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .drg-card.is-on {
  border-color: var(--A-accent);
  box-shadow: inset 3px 0 0 var(--A-accent);
}
.dirA .drg-card.is-expired { background: var(--A-surface-2); }
.dirA .drg-card.is-expired .crx-drug-name { color: var(--A-fg-3); }

.dirA .drg-card-pick { display: flex; align-items: center; padding-top: 2px; }

.dirA .drg-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dirA .drg-card-main:disabled { cursor: default; }
.dirA .drg-card-main:not(:disabled):hover .crx-drug-name { color: var(--A-accent); }

.dirA .drg-card-sig > span { display: block; font-size: var(--text-meta); color: var(--A-fg-2); }

.dirA .drg-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}
/* Beside the drug it describes, as the status sits beside the order number on a card.
   Pushed right it read as part of the buttons rather than part of the drug. */
.dirA .drg-card-top > .badge { margin-left: 0; }

.dirA .drg-card .crx-drug-name { font-size: var(--text-body); font-weight: 600; }

/* The sig is a sentence, so it is set as one rather than squeezed into a cell. */
.dirA .drg-card-sig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-2);
  padding-left: var(--sp-10);
  border-left: 2px solid var(--A-rule);
}
.dirA .drg-card-sig > span { margin: 0; }
.dirA .drg-card-sig i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
  margin-right: var(--sp-6);
}

.dirA .drg-card .row-actions { display: inline-flex; gap: 2px; flex: none; }

/* Hover lifts the glyph to full strength; its colour is the action's own, set below. */

.dirA .drg-card .row-action:hover svg { opacity: 1; }

.dirA .crx-drugs-h > input[type="checkbox"] { flex: none; }

/* ---- what is waiting, while nobody is picked ---- */

.dirA .till-brief .till-col-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-16);
}

.dirA .brief-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-10);
}

.dirA .brief-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left-width: 3px;
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  text-align: left;
  cursor: pointer;
}
.dirA .brief-count > b { font-size: 24px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dirA .brief-count > i {
  font-style: normal;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}
.dirA .brief-count:hover:not(.is-flat) { border-color: var(--A-accent); background: var(--A-tint); }

/* A tile that is also the filter says so while it is on. */
.dirA .brief-count.is-on { border-color: var(--A-accent); background: var(--A-tint); }

/* The kinds, side by side in the open patient's header. */
.dirA .till-kinds { display: inline-flex; align-items: center; gap: var(--sp-4); margin-left: auto; }

.dirA .brief-count.is-late { border-left-color: var(--danger); }
.dirA .brief-count.is-late > b { color: var(--danger); }
.dirA .brief-count.is-soon { border-left-color: var(--warning); }
.dirA .brief-count.is-soon > b { color: var(--warning); }
.dirA .brief-count.is-ok { border-left-color: var(--success); }
.dirA .brief-count.is-ok > b { color: var(--success); }
.dirA .brief-count.is-flat { cursor: default; border-left-color: var(--A-rule); }
.dirA .brief-count.is-flat > b { color: var(--A-fg); }

.dirA .brief-note { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .brief-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.dirA .brief-block h4 {
  margin: 0;
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.dirA .brief-rows { display: flex; flex-direction: column; gap: var(--sp-6); }

.dirA .brief-row {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  text-align: left;
  cursor: pointer;
}
.dirA .brief-row:hover { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .brief-row-n { flex: 1; min-width: 0; font-weight: 500; color: var(--A-fg); }
.dirA .brief-row-m { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .brief-row-d { font-size: var(--text-meta); color: var(--danger); font-variant-numeric: tabular-nums; }

.dirA .brief-how {
  margin: auto 0 0;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* The shared drugs table carries a min-width for the dispensing list's twelve columns.
   These five would be stretched to it and scroll sideways for no reason. */
.dirA .till-order .crx-drugs-table { min-width: 0; }
.dirA .till-order .crx-drugs-table-wrap { border: 0; border-radius: 0; box-shadow: none; }

/* One under another once there is no room for three. */
@media (max-width: 1100px) {
  .dirA .till { grid-template-columns: 1fr; }
  .dirA .till-col { max-height: 420px; }
}

/* R1 before an Rx number. Quiet: it qualifies the number, it is not a status. */
.dirA .rx-supply {
  display: inline-block;
  margin-right: var(--sp-4);
  padding: 0 4px;
  border: 1px solid var(--A-rule-strong);
  border-radius: 3px;
  background: var(--A-surface-2);
  color: var(--A-fg-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

.dirA .crx-drugs-table th.acts,
.dirA .crx-drugs-table td.acts { width: 140px; min-width: 140px; }

.dirA .crx-drugs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dirA .crx-drugs-table td.num { color: var(--A-fg); }

/* Something still owed on this drug, which is what a dispenser is looking for. */
.dirA .crx-drugs-table td.num.is-open { color: #8A6508; font-weight: 600; }

.dirA .crx-drugs-table td.rx {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.02em;
  color: var(--A-fg-2);
}

.dirA .crx-drugs-table .crx-drug-name { font-weight: 500; color: var(--A-fg); }
.dirA .crx-drugs-table .crx-drug-name:hover { color: var(--A-accent); text-decoration: underline; }

/* Why a payment was refunded, under the status it belongs to. Truncated here, whole on hover. */
.dirA .crx-drugs-table .crx-drug-refund {
  display: block;
  max-width: 150px;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10.5px;
  color: var(--danger);
}

/* The long columns hold their width and ellipsise; the whole value is on hover. nowrap is
   what makes the ellipsis engage — without it the text wrapped and a long drug name or sig
   grew the row to three lines instead. */
.dirA .crx-drugs-table td.drug .crx-drug-name { display: inline; }

.dirA .crx-drugs-empty {
  margin: 0;
  padding: var(--sp-10) var(--sp-2);
  font-size: var(--text-label);
  color: var(--A-fg-3);
}

.dirA .crx-drugs-empty.is-error { color: var(--danger); }

/* ============================================================== RX PROFILE ====
   features/patients/RxProfile. */

/* Filters and options are one crx-filter-bar now (components/ui/FilterBar). */

.dirA .rx-resume { display: inline-flex; align-items: center; margin: 0 var(--sp-2) 0 0; }
.dirA .rx-resume input { cursor: pointer; }

/* Complete-a-partial is its own action, distinct from a plain refill. */
.dirA .row-action.is-partial { color: #8A6508; }
.dirA .row-action.is-partial:hover { background: var(--warning-100); color: #8A6508; }

/* ---- row states ----
   One class per row, set from RowState on the server. Each says something different about
   the prescription, so none of them is only a colour: the status badge carries the word. */

/* Refills exhausted, or the validity window has lapsed. */
.dirA .table tbody tr.rx-dead-row td { color: var(--A-fg-3); }
.dirA .table tbody tr.rx-dead-row td:first-child { box-shadow: inset 2px 0 0 var(--danger); }

/* Expired by a person: history, and no longer processable. */
.dirA .table tbody tr.rx-expired-row td { color: var(--A-fg-4); }
.dirA .table tbody tr.rx-expired-row td:first-child { box-shadow: inset 2px 0 0 var(--A-fg-4); }

/* Parked on the profile — saved for later, or migrated in. */
.dirA .table tbody tr.rx-parked-row td:first-child   { box-shadow: inset 2px 0 0 var(--warning); }
.dirA .table tbody tr.rx-profiled-row td:first-child { box-shadow: inset 2px 0 0 var(--A-accent); }

/* A refill with no inventory linked. Marked like .no-inventory-row above, not washed. */
.dirA .table tbody tr.rx-no-inventory-row td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.dirA .table tbody tr.rx-no-inventory-row td { background: color-mix(in srgb, var(--warning-100) 45%, transparent); }
.dirA .table tbody tr.rx-no-inventory-row:hover td { background: var(--warning-100); }

/* Email addresses on the overview sheet: one per line, the primary marked. */
.dirA .pt-emails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.dirA .pt-emails > li { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }

.dirA .pt-email-label,
.dirA .pt-email-primary {
  font-size: var(--text-meta);
  line-height: 1.6;
  padding: 0 var(--sp-6);
  border-radius: 3px;
}
.dirA .pt-email-label   { background: var(--A-surface-2); color: var(--A-fg-3); }
.dirA .pt-email-primary { background: var(--success-100); color: var(--success); font-weight: 600; }

/* Upload panel: Save and Cancel stack in the header, so they stay in view above a preview
   that can run several hundred pixels tall. */
.dirA .crx-preview-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  flex: none;
  align-items: stretch;
}

/* ---------- Fill history (an opened Rx Profile row) ----------
   One line per fill on a rail, so the chain reads down rather than across eight columns. */

.dirA .rx-fills { padding: var(--sp-4) var(--sp-2) var(--sp-6); }

.dirA .rx-fills-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  flex-wrap: wrap;
  margin-bottom: var(--sp-8);
}
.dirA .rx-fills-title {
  font-size: var(--text-title);
  font-weight: 650;
  color: var(--A-fg-3);
}
.dirA .rx-fills-count {
  font-size: var(--text-micro);
  color: var(--A-fg-4);
  padding: 0 var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
}
.dirA .rx-fills-drug {
  margin-left: auto;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dirA .rx-fills-list { list-style: none; margin: 0; padding: 0; }

.dirA .rx-fill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10) var(--sp-8) 26px;
  border: 1px solid var(--A-rule-2);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  margin-bottom: var(--sp-4);
}
.dirA .rx-fill:last-child { margin-bottom: 0; }
.dirA .rx-fill:hover { border-color: var(--A-rule); background: var(--A-surface-2); }

/* The rail: a dot per fill, joined by a line, so the list reads as a sequence. */
.dirA .rx-fill-mark {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--A-rule-strong);
}
.dirA .rx-fill-mark.is-success { background: var(--success); }
.dirA .rx-fill-mark.is-warning { background: var(--warning); }
.dirA .rx-fill-mark.is-danger  { background: var(--danger); }

.dirA .rx-fill:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(50% + 6px);
  height: calc(100% - 6px);
  width: 1px;
  background: var(--A-rule);
}

.dirA .rx-fill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }

.dirA .rx-fill-top { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.dirA .rx-fill-rx {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--A-fg);
}
.dirA .rx-fill-delivery {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  padding: 0 var(--sp-6);
  border-radius: 3px;
  background: var(--A-surface-2);
}

/* Where a transferred fill went: each pharmacy with its branch, on its own line. */
.dirA .rx-fill-transfer {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* Shared by the transfer line and the money facts: the label, then the value. */
.dirA .rx-fill-transfer i,
.dirA .rx-fill-facts i,
.dirA .rx-fill-plan i {
  font-style: normal;
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

/* Which handover of the script this is: original, refill n, partial, completion, trial. */
.dirA .rx-fill-kind {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--A-fg-3);
  padding: 0 var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  white-space: nowrap;
}

/* How this handover was charged. It belongs to the fill, not to the script. */
.dirA .rx-fill-plan {
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  padding: 0 var(--sp-6);
  border-radius: 3px;
  background: var(--A-surface-2);
}

.dirA .rx-fill-facts {
  display: flex;
  align-items: baseline;
  gap: var(--sp-12);
  flex-wrap: wrap;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}
.dirA .rx-fill-facts b {
  font-weight: 600;
  color: var(--A-fg-2);
  font-variant-numeric: tabular-nums;
}
/* Something still to do: the one fact on the line worth a second glance. */
.dirA .rx-fill-facts .is-open b { color: var(--warning); }


.dirA .rx-fill-actions { flex: none; }

/* Expired stays listed — it is the patient's history — but recedes. */
.dirA .rx-fill.is-expired { background: var(--A-surface-2); }
.dirA .rx-fill.is-expired .rx-fill-rx,
.dirA .rx-fill.is-expired .rx-fill-facts b { color: var(--A-fg-4); }

.dirA .rx-fills-empty { margin: 0; padding: var(--sp-10); font-size: var(--text-meta); color: var(--A-fg-3); }

/* =============================================================== OVERLAYS ====
   Modal and Drawer. Portalled to body, so these selectors are unscoped by design. */

.crx-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;                 /* above the Kendo dialogs still on these pages */
  display: flex;
  background: rgb(16 24 40 / 42%);
  animation: crx-overlay-in 120ms ease-out;
}

.crx-overlay.is-modal  { align-items: center; justify-content: center; padding: var(--sp-24); }
.crx-overlay.is-drawer { align-items: stretch; justify-content: flex-end; }

.crx-overlay-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;                 /* lets the body scroll instead of the panel growing */
  background: var(--A-surface);
  color: var(--A-fg);
  box-shadow: 0 24px 64px rgb(16 24 40 / 28%);
}

.crx-overlay.is-modal .crx-overlay-panel {
  width: 100%;
  max-height: calc(100vh - 48px);
  border-radius: var(--A-radius-md);
  animation: crx-modal-in 140ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.crx-overlay.is-modal .crx-overlay-panel.is-sm { max-width: 420px; }
/* An explicit width (the print preview sizes itself to the paper) overrides the class cap;
   the inline max-width:100% keeps it inside a narrow viewport. */
.crx-overlay.is-modal .crx-overlay-panel[style*="width"] { max-width: 100%; }
.crx-overlay.is-modal .crx-overlay-panel.is-md { max-width: 640px; }
.crx-overlay.is-modal .crx-overlay-panel.is-lg { max-width: 920px; }

.crx-overlay.is-drawer .crx-overlay-panel {
  width: min(560px, 100vw);
  height: 100vh;
  max-height: 100vh;
  border-left: 1px solid var(--A-rule);
  animation: crx-drawer-in 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Full width on a phone: a 560px panel at 400px would simply be the page, badly. */
@media (max-width: 600px) {
  .crx-overlay.is-drawer .crx-overlay-panel { width: 100vw; border-left: 0; }
  .crx-overlay.is-modal { padding: var(--sp-12); }
}

@keyframes crx-overlay-in { from { opacity: 0; } }
@keyframes crx-modal-in   { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes crx-drawer-in  { from { transform: translateX(16px); opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  .crx-overlay, .crx-overlay-panel { animation: none; }
}

/* ---- header ---- */

.crx-overlay-h {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-16);
  border-bottom: 1px solid var(--A-rule);
  flex: none;
}
.crx-overlay-title { min-width: 0; flex: 1; }
.crx-overlay-title h2 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  color: var(--A-fg);
  line-height: 1.3;
}
.crx-overlay-title p {
  margin: var(--sp-4) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  line-height: 1.45;
}

.crx-overlay-close {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--A-radius);
  background: transparent; color: var(--A-fg-3);
  cursor: pointer; padding: 0;
}
.crx-overlay-close:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* ---- body: the only part that scrolls ---- */

/* A column with a gap, so stacked panels are separated by it rather than by whatever margin
   each one happens to carry. Without it their borders meet and read as one broken box. */
.crx-overlay-b {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-16);
}

/* Panels are the drawer's sections; nothing inside them should touch their edges either. */
.crx-overlay-b > .panel { flex: none; }

/* ---- footer ---- */

.crx-overlay-f {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  flex: none;
}
/* An error or a hint in the footer takes the space; the buttons stay right. */
.crx-overlay-f .crx-overlay-note { margin-right: auto; font-size: var(--text-meta); color: var(--A-fg-3); }
.crx-overlay-f .crx-overlay-note.is-error { color: var(--danger); }

/* A titled group of fields: a heading and a hairline, not a card. */
.dirA .crx-form-group + .crx-form-group { margin-top: var(--sp-20); }

.dirA .crx-form-group-h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .crx-form-group-h h3 {
  margin: 0;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .crx-form-group-h p { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }
/* The panel wears .dirA to style its fields; its page-level height and background are not
   wanted here. */
.crx-overlay .crx-overlay-panel.dirA {
  height: auto;
  background: var(--A-surface);
}
.crx-overlay.is-drawer .crx-overlay-panel.dirA { height: 100vh; }

/* Inside a panel a field grid is the whole width, and the panel supplies the padding. */
.crx-overlay-b .field-grid { gap: var(--sp-12) var(--sp-14); }
.crx-overlay-b > :first-child { margin-top: 0; }

/* Drug lookup in the Add medication panel: a list of results, not a grid. */
.dirA .crx-drug-find {
  padding: var(--sp-12);
  margin-bottom: var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}
.dirA .crx-drug-find .field-search { width: 100%; margin-top: var(--sp-4); }

.dirA .crx-drug-results {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: var(--sp-4);
  max-height: 220px;
  overflow-y: auto;
  background: var(--A-surface);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
}
.dirA .crx-drug-results button {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-6) var(--sp-8);
  border: 0;
  border-radius: var(--A-radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dirA .crx-drug-results button:hover { background: var(--A-surface-2); }
.dirA .crx-drug-name { font-size: var(--text-label); font-weight: 500; color: var(--A-fg); }
.dirA .crx-drug-meta { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-drug-picked {
  display: flex; align-items: center; gap: var(--sp-6);
  margin: var(--sp-8) 0 0;
  font-size: var(--text-meta);
  color: var(--success);
  font-weight: 500;
}

/* ---------- Form sections (FieldSet) ----------
   The editor is the same record in the same shape: one card per section, two across,
   with the fields inside each card. Only the values become inputs. */

.dirA .crx-fieldset {
  display: block;
  padding: var(--sp-14) var(--sp-16) var(--sp-16);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: none;
}

.dirA .crx-fieldset + .crx-fieldset { margin-top: 0; }

.dirA .crx-fieldset > .panel-h {
  margin: 0 0 var(--sp-10);
  padding: 0 0 var(--sp-8);
  border: 0;
  border-bottom: 1px solid var(--A-rule-2);
  border-radius: 0;
  background: transparent;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--A-fg);
}

.dirA .crx-fieldset > .panel-b { padding: 0; }

/* The General tab and the Patient Chart are record sheets (see "Record sheet" above): they
   take the tab's full width, so the read and edit faces share every edge. */

/* A drawer is one column wide; its sections stack rather than sitting side by side. */
.crx-overlay .crx-fieldset { border: 0; padding: 0; }
.crx-overlay .crx-fieldset + .crx-fieldset { margin-top: var(--sp-16); }

/* ---------- Checkboxes ----------
   Sized and aligned explicitly: the browser default is larger than the words beside it. */

.dirA .field-check-line input[type="checkbox"],
.crx-patient-setup .crx-check-line input[type="checkbox"],
.crx-overlay .field-check-line input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  accent-color: var(--A-accent, #1B3A58);
  cursor: pointer;
}

/* The words take the remaining width and wrap as a block, rather than the box being
   dragged along by the first word. */
.dirA .field-check-line > span,
.crx-patient-setup .crx-check-line > span { min-width: 0; line-height: 1.35; }

.crx-patient-setup .crx-check-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  height: 30px;                 /* the row height the inputs beside it use */
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--A-fg);
  cursor: pointer;
  white-space: nowrap;
}

/* Editing in place: the note becomes the box, rather than a dialog for two lines. */
.dirA .pt-message-edit { display: flex; flex-direction: column; gap: var(--sp-6); }
.dirA .pt-message-edit textarea.input { min-height: 52px; margin-top: 0; }
.dirA .pt-message-edit-actions { display: flex; justify-content: flex-end; gap: var(--sp-6); }

/* Confirmation dialogs (components/ui/ConfirmDialog). */
.crx-confirm-body { margin: 0; font-size: var(--text-label); line-height: 1.5; color: var(--A-fg-2); }
.crx-confirm-body b { color: var(--A-fg); }

/* The record about to go, quoted so there is no doubt which one it is. */
.crx-confirm-quote {
  display: block;
  margin-bottom: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  border-left: 2px solid var(--A-rule-strong);
  background: var(--A-surface-2);
  border-radius: 0 var(--A-radius) var(--A-radius) 0;
  color: var(--A-fg);
}

/* A destructive confirm is red, not navy — the button is the last chance to notice. */
.dirA .btn.btn-primary.is-danger,
.crx-overlay .btn.btn-primary.is-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.dirA .btn.btn-primary.is-danger:hover:not(:disabled),
.crx-overlay .btn.btn-primary.is-danger:hover:not(:disabled) {
  background: #A3121A;
  border-color: #A3121A;
}

/* Separator between the two dates on a fill, when it carries both. */
.dirA .rx-fill-sep { margin: 0 var(--sp-6); color: var(--A-fg-4); }

/* Print preview: the stage the label's iframe sits on. */
.crx-print-noprinter { color: var(--danger); font-weight: 500; }

/* A preview that will not commit anything, said next to the printer rather than in the body
   where it would read as part of the label. */
.crx-print-proof { color: var(--warning); }

.crx-print-copies {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0 auto 0 0;          /* takes the left of the footer; buttons stay right */
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}
.crx-print-copies input {
  width: 58px;
  height: 26px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  font-family: var(--font);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
}
.crx-print-copies input:focus { outline: none; border-color: var(--A-accent); }

/* ========================================================== KENDO DIALOGS ====
   Every confirmation in the app is a Kendo .Dialog() — delete, archive, refill, the
   no-inventory prompt. Restyled to match components/ui/Overlay rather than converted, so
   all of them change at once and their OkEvent/CancelEvent wiring is untouched.
   app-chrome.css loads after the Kendo theme, which is why these win. */

.k-dialog-wrapper .k-overlay {
  background: rgb(16 24 40 / 42%);
  opacity: 1;
}

.k-dialog-wrapper .k-dialog {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgb(16 24 40 / 28%);
  background: #fff;
  font-family: var(--font);
  overflow: hidden;
}

/* The stock titlebar is a solid red band, which makes a routine "are you sure" read as an
   error. A title is a heading, and the buttons below say what will happen. */
.k-dialog-wrapper .k-dialog .k-dialog-titlebar,
.k-dialog-wrapper .k-dialog .k-window-titlebar {
  padding: var(--sp-14) var(--sp-16);
  border: 0;
  border-bottom: 1px solid var(--rule, #E2E6EC);
  background: #fff;
  color: var(--ink, #1A1D21);
  font-size: var(--text-title);
  font-weight: 600;
}

.k-dialog-wrapper .k-dialog .k-dialog-content,
.k-dialog-wrapper .k-dialog .k-window-content {
  padding: var(--sp-16);
  font-size: var(--text-label);
  line-height: 1.5;
  color: var(--ink-3, #5B6470);
}
.k-dialog-wrapper .k-dialog .k-dialog-content p { margin: 0; }

/* ---- the buttons ---- */

.k-dialog-wrapper .k-dialog .k-dialog-buttongroup {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  border: 0;
  border-top: 1px solid var(--rule, #E2E6EC);
  background: var(--bg-soft, #F7F8FA);
}

/* Kendo stretches its dialog buttons edge to edge; they are actions, not a segmented bar. */
.k-dialog-wrapper .k-dialog .k-dialog-buttongroup .k-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 84px;
  height: 30px;
  padding: 0 var(--sp-14);
  border: 1px solid var(--rule-strong, #C9D0DA);
  border-radius: 4px;
  background: #fff;
  color: var(--ink, #1A1D21);
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: 500;
  box-shadow: none;
}
.k-dialog-wrapper .k-dialog .k-dialog-buttongroup .k-button:hover {
  background: var(--bg-soft, #F7F8FA);
  border-color: var(--ink-4, #8A93A0);
}

.k-dialog-wrapper .k-dialog .k-dialog-buttongroup .k-button.k-primary,
.k-dialog-wrapper .k-dialog .k-dialog-buttongroup .k-button.k-button-solid-primary {
  border-color: var(--navy, #1B3A58);
  background: var(--navy, #1B3A58);
  color: #fff;
  font-weight: 600;
}
.k-dialog-wrapper .k-dialog .k-dialog-buttongroup .k-button.k-primary:hover {
  background: var(--navy-700, #15304A);
  border-color: var(--navy-700, #15304A);
}

/* The close X, where a dialog has one. */
.k-dialog-wrapper .k-dialog .k-dialog-titlebar .k-dialog-actions .k-button {
  color: var(--ink-4, #8A93A0);
  background: transparent;
  border: 0;
}
.k-dialog-wrapper .k-dialog .k-dialog-titlebar .k-dialog-actions .k-button:hover {
  color: var(--ink, #1A1D21);
  background: var(--bg-soft, #F7F8FA);
}

/* A note inside a Kendo dialog: the icon sits beside the text rather than inside it. */
.k-dialog-wrapper .crx-dialog-note { display: flex; gap: var(--sp-10); align-items: flex-start; }
.k-dialog-wrapper .crx-dialog-note > i { font-size: var(--text-title); line-height: 1.3; flex: none; }
.k-dialog-wrapper .crx-dialog-note.is-warning > i { color: var(--warning, #B8860B); }
.k-dialog-wrapper .crx-dialog-note b { display: block; color: var(--ink, #1A1D21); font-weight: 600; }
.k-dialog-wrapper .crx-dialog-note p { margin: var(--sp-4) 0 0; color: var(--ink-3, #5B6470); }

/* The body of a DialogHost dialog: icon beside the text, not inside it. */
.dirA .crx-dialog-body { display: flex; align-items: flex-start; gap: var(--sp-12); }
.dirA .crx-dialog-body > svg { flex: none; margin-top: var(--sp-2); }
.dirA .crx-dialog-body.is-warning > svg { color: var(--warning); }
.dirA .crx-dialog-body.is-danger  > svg { color: var(--danger); }
.dirA .crx-dialog-body.is-info    > svg { color: var(--A-accent); }

.dirA .crx-dialog-message { margin: 0; font-size: var(--text-body); font-weight: 500; color: var(--A-fg); }
.dirA .crx-dialog-detail  { margin: var(--sp-4) 0 0; font-size: var(--text-label); color: var(--A-fg-3); line-height: 1.5; }

/* Why the order is being moved: under the question, not beside it. */
.dirA .crx-reason-fields { display: grid; gap: var(--sp-12); margin-top: var(--sp-16); }
.dirA .crx-reason-fields textarea.input { height: auto; padding: var(--sp-6) var(--sp-8); resize: vertical; }
.dirA .crx-reason-fields .field-label i { font-style: normal; font-weight: 400; color: var(--A-fg-4); }
.dirA .crx-reason-fields .field-label .req { color: var(--danger); }
.dirA .crx-reason-hint {
  margin: 0; font-size: var(--text-meta); color: var(--A-fg-3);
}

.dirA .crx-reason-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); }

.dirA .crx-reason-add {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--text-meta); font-weight: 600; color: var(--A-accent);
  text-transform: none; letter-spacing: 0;
}
.dirA .crx-reason-add:hover { text-decoration: underline; }

/* The new reason is written where it will be used, so the dialog is never left for it. */
.dirA .crx-reason-new {
  display: grid; gap: var(--sp-10);
  padding: var(--sp-12); border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md); background: var(--A-surface-2);
}
.dirA .crx-reason-new-h {
  margin: 0; font-size: var(--text-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--A-fg-3);
}
.dirA .crx-reason-opt { display: flex; align-items: flex-start; gap: var(--sp-8); cursor: pointer; margin: 0; }
.dirA .crx-reason-opt input { margin-top: 2px; }
.dirA .crx-reason-opt span { display: grid; gap: 1px; min-width: 0; }
.dirA .crx-reason-opt b { font-size: var(--text-label); font-weight: 600; color: var(--A-fg); }
.dirA .crx-reason-opt small { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .crx-reason-new-acts { display: flex; justify-content: flex-end; gap: var(--sp-8); }

/* ==========================================================================
   Prescribers
   ========================================================================== */

/* A name with what it belongs to under it, in one grid cell. */
.dirA .rx-who { display: grid; gap: var(--sp-2); min-width: 0; }
.dirA .rx-who-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dirA .rx-who-sub { font-size: var(--text-meta); color: var(--A-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A licence about to lapse, or already lapsed. */
.dirA .prs-lic { display: inline-flex; align-items: center; gap: var(--sp-6); font-weight: 600; }
.dirA .prs-lic.is-soon { color: var(--warning); }
.dirA .prs-lic.is-gone { color: var(--danger); }

/* -------------------------------------------------------------- the form */

/* A form, not a table: at full width the grid gave five columns to hold a first name. */
.dirA .prs-form { display: grid; gap: var(--sp-14); max-width: 820px; margin: 0 auto; padding-bottom: var(--sp-8); }

.dirA .prs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
}

.dirA .prs-head h2 { margin: 0; font-size: var(--text-head); font-weight: 650; color: var(--A-fg); }
.dirA .prs-head p { margin: var(--sp-4) 0 0; font-size: var(--text-label); color: var(--A-fg-3); }

/* A floor under the step body: the licence step holds three fields, and without one the card
   would shrink to half its height between steps. This page scrolls, so it takes what it needs. */
.dirA .prs-form .crx-step-body { min-height: 220px; }

/* ------------------------------------------------------------- the history */

.dirA .prs-audit {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .prs-audit-head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  width: 100%;
  padding: var(--sp-12) var(--sp-14);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  text-align: left;
  cursor: pointer;
}

.dirA .prs-audit-head:hover { background: var(--A-surface-2); }
.dirA .prs-audit-head svg { color: var(--A-fg-3); }
.dirA .prs-audit-caret { margin-left: auto; transition: transform 0.15s; }
.dirA .prs-audit.is-open .prs-audit-caret { transform: rotate(90deg); }

.dirA .prs-audit-body { border-top: 1px solid var(--A-rule); padding: var(--sp-10); }
.dirA .prs-audit-body .crx-grid { max-height: 420px; }

/* ------------------------------------------- the form beside its eFax */

.dirA .prs-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--sp-14);
  align-items: start;
}

.dirA .prs-split-form { min-width: 0; }
.dirA .prs-split .prs-form { max-width: none; }

@media (max-width: 1100px) {
  .dirA .prs-split { grid-template-columns: minmax(0, 1fr); }
}

.dirA .prs-script {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: min(78vh, 900px);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .prs-script-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}

.dirA .prs-script-name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .prs-script-bar a { display: inline-flex; color: var(--A-fg-3); }
.dirA .prs-script-bar a:hover { color: var(--A-accent); }

.dirA .prs-script iframe { flex: 1; width: 100%; border: 0; display: block; }
.dirA .prs-script img { flex: 1; width: 100%; object-fit: contain; min-height: 0; }

.dirA .prs-script-none {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-10);
  padding: var(--sp-24);
  text-align: center;
  color: var(--A-fg-3);
}

.dirA .prs-script-none p { margin: 0; font-size: var(--text-label); max-width: 34ch; }

/* ==========================================================================
   Users
   ========================================================================== */

/* Every row starts on the same mark, so the eye runs down one edge: their picture where
   they have set one, their initials where they have not. */
.dirA .usr-who { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; }

.dirA .usr-face {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--A-surface-2);
}

.dirA .usr-face.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--A-fg-3);
}

.dirA .usr-who-name {
  min-width: 0;
  font-weight: 600;
  color: var(--A-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Deactivated, so the name reads back a shade before the Status column confirms it. */
.dirA .usr-who-name.is-off { color: var(--A-fg-3); font-weight: 500; }

/* Fields in one column. A FieldGrid's gap does this for a row of them; a stack has none. */
.dirA .field-stack { display: grid; gap: var(--sp-14); }

/* On a two-column list nothing else holds the actions off the first column. */
.dirA .mst .row-actions { padding-right: var(--sp-8); }

/* A declared width is only a hint to an auto table. This is the floor. */
.dirA .mst .table th:first-child,
.dirA .mst .table td:first-child { min-width: 96px; }

/* ------------------------------------------------------------ insurance */

.dirA .ins-plan-name, .dirA .ins-emp-name { font-weight: 600; color: var(--A-fg); }

/* The group numbers under an employer: the reason a row opens. */
.dirA .ins-groups { display: grid; gap: var(--sp-10); }

.dirA .ins-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
}

.dirA .ins-groups-title { font-size: var(--text-meta); font-weight: 600; color: var(--A-fg-3); }

.dirA .ins-groups-add { display: flex; align-items: center; gap: var(--sp-8); }
.dirA .ins-groups-add .input { max-width: 220px; margin-top: 0; }

/* Numbers, not rows: they are short and there are usually a handful. */
.dirA .ins-groups-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dirA .ins-groups-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .ins-group-no { font-variant-numeric: tabular-nums; color: var(--A-fg); }

/* ------------------------------------------------------- price table rules */

.dirA .prt-name { font-weight: 600; }

/* Ordered, because the order is the rule: the first match sets the price. */
.dirA .prt-rules {
  display: grid;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}

.dirA .prt-rules li {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .prt-rules li.is-editing { border-color: var(--A-accent); background: var(--A-tint); }

.dirA .prt-rank {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-3);
}

.dirA .prt-sentence {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-6);
  font-size: var(--text-label);
  min-width: 0;
}

.dirA .prt-sentence b { font-weight: 600; color: var(--A-fg); }
.dirA .prt-word { color: var(--A-fg-3); }

/* The builder says the same sentence with the words still editable. */
.dirA .prt-builder {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-10);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .prt-clause { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.dirA .prt-clause .prt-word { font-size: var(--text-label); }
.dirA .prt-number { width: 110px; margin-top: 0; }

.dirA .prt-builder-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
.dirA .prt-problem { margin-right: auto; font-size: var(--text-meta); color: var(--danger); }

/* Try it */
.dirA .prt-tryout { display: grid; gap: var(--sp-10); margin-top: var(--sp-10); }

.dirA .prt-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(96px, 100%), 1fr));
  gap: var(--sp-8);
  margin: 0;
}

.dirA .prt-prices div {
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .prt-prices dt { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .prt-prices dd {
  margin: var(--sp-2) 0 0;
  font-size: var(--text-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dirA .prt-result {
  display: flex; align-items: baseline; gap: var(--sp-8);
  margin: 0;
  font-size: var(--text-label);
  color: var(--A-fg-2);
}

.dirA .prt-result b { font-size: var(--text-head); color: var(--A-fg); font-variant-numeric: tabular-nums; }
.dirA .prt-result.is-none { color: var(--warning); align-items: center; }

/* ---------------------------------------------------- rounding table bands */

.dirA .rnd-bands {
  display: grid;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}

.dirA .rnd-bands li {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font-variant-numeric: tabular-nums;
}

.dirA .rnd-bands li.is-editing { border-color: var(--A-accent); background: var(--A-tint); }

/* A band that overlaps its neighbour, or leaves a hole before it: both make the table
   behave in ways nothing on the row would otherwise show. */
.dirA .rnd-bands li.is-overlap { border-left-color: var(--danger); }
.dirA .rnd-bands li.is-gap { border-left-color: var(--warning); }
.dirA .rnd-bands li.is-hit { border-color: var(--A-accent); box-shadow: inset 0 0 0 1px var(--A-accent); }

.dirA .rnd-range { font-size: var(--text-label); font-weight: 600; }
.dirA .rnd-word { font-weight: 400; color: var(--A-fg-3); }

.dirA .rnd-to {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-8);
  border-radius: 3px;
  background: var(--A-surface-2);
  font-size: var(--text-label);
  font-weight: 600;
}

.dirA .rnd-fault { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rnd-bands li.is-overlap .rnd-fault { color: var(--danger); }
.dirA .rnd-bands li.is-gap .rnd-fault { color: var(--warning); }
.dirA .rnd-bands .row-actions { margin-left: auto; }

/* Three numbers and a button, on one line while there is room. */
.dirA .rnd-builder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-8);
  padding: var(--sp-10);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .rnd-field { display: grid; gap: var(--sp-4); }
.dirA .rnd-field > span { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rnd-field .input { width: 110px; margin-top: 0; }

.dirA .rnd-builder-acts { display: flex; align-items: center; gap: var(--sp-8); }
.dirA .rnd-problem { flex-basis: 100%; margin: 0; font-size: var(--text-meta); color: var(--danger); }
.dirA .rnd-note { flex-basis: 100%; margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .rnd-tryout { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-12); }

.dirA .rnd-result {
  display: flex; align-items: baseline; gap: var(--sp-8);
  margin: 0 0 var(--sp-4);
  font-size: var(--text-label);
  color: var(--A-fg-2);
}

.dirA .rnd-result b { font-size: var(--text-head); color: var(--A-fg); font-variant-numeric: tabular-nums; }
.dirA .rnd-result.is-none { color: var(--warning); align-items: center; }

/* --------------------------------------------------- currency & custom drugs */

.dirA .cur-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dirA .cur-name { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 600; }
.dirA .cur-rate { font-variant-numeric: tabular-nums; }
.dirA .cur-rate.is-base { color: var(--A-fg-4); }

.dirA .cdr-name { font-weight: 600; }

/* The setup page: panels down the column, with the save row under them. */
/* Centred and the same width as the prescriber setup page, so the two read alike. */
.dirA .cdr-page { display: grid; gap: var(--sp-14); max-width: 820px; margin: 0 auto; }

.dirA .cdr-page .panel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
}

.dirA .panel-h-note { font-size: var(--text-meta); font-weight: 400; color: var(--A-fg-3); }

.dirA .cdr-save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-8);
  padding-bottom: var(--sp-12);
}
.dirA .cdr-count { font-variant-numeric: tabular-nums; }

/* Ingredients read as a list of facts, not a grid: there are only ever a handful. */
.dirA .cdr-ingredients {
  display: grid;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-10);
  padding: 0;
  list-style: none;
}

.dirA .cdr-ingredients li {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .cdr-ing-name { flex: 1; min-width: 0; font-size: var(--text-label); }
.dirA .cdr-ing-ndc { font-size: var(--text-meta); color: var(--A-fg-3); font-variant-numeric: tabular-nums; }

/* An ingredient with no First Databank match behind it; worth saying so. */
.dirA .cdr-ing-free {
  padding: var(--sp-2) var(--sp-6);
  border-radius: 3px;
  background: var(--warning-100, var(--A-surface-2));
  color: var(--warning);
  font-size: var(--text-micro);
}

/* The hint sits under the box, not beside it. */
.dirA .cdr-search { display: grid; justify-items: start; gap: var(--sp-6); }
.dirA .cdr-search .field-hint { margin: 0; }

.dirA .cdr-messages {
  display: grid;
  gap: var(--sp-6);
  margin: 0 0 var(--sp-12);
  padding: 0;
  list-style: none;
}

.dirA .cdr-messages li {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}

.dirA .cdr-messages li.is-editing { border-color: var(--A-accent); background: var(--A-tint); }

.dirA .cdr-kind {
  flex: none;
  padding: var(--sp-2) var(--sp-8);
  border-radius: 3px;
  background: var(--A-surface-2);
  color: var(--A-fg-2);
  font-size: var(--text-micro);
  font-weight: 600;
}

.dirA .cdr-kind.is-screening { background: var(--navy-100); color: var(--navy); }
.dirA .cdr-kind.is-precaution { background: var(--warning-100); color: var(--warning); }

.dirA .cdr-text { flex: 1; min-width: 0; font-size: var(--text-label); }
.dirA .cdr-severity { font-size: var(--text-meta); color: var(--A-fg-3); white-space: nowrap; }
.dirA .cdr-messages .row-actions { margin-left: auto; }

.dirA .cdr-builder {
  display: grid;
  gap: var(--sp-10);
  padding: var(--sp-10);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .cdr-builder-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-8); }
.dirA .cdr-problem { margin-right: auto; font-size: var(--text-meta); color: var(--danger); }

/* ------------------------------------------------- insurance company setup */

.dirA .ins-co-name { font-weight: 600; }
.dirA .ins-co-page { display: grid; gap: var(--sp-14); max-width: 980px; margin: 0 auto; }
.dirA .ins-co-main { display: grid; gap: var(--sp-14); align-content: start; }

/* With a workbook open the page earns its width: the form is narrow and the mapping is not. */
.dirA .ins-co-page.is-split {
  max-width: none;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  align-items: start;
}

.dirA .ins-co-page.is-split .ins-co-side { min-width: 0; }

/* The form stays put while the mapping — much the taller of the two — scrolls past it. */
@media (min-width: 1100px) {
  .dirA .ins-co-page.is-split .ins-co-main {
    position: sticky;
    top: var(--sp-8);
  }
}

/* The save row belongs to the page, not to either column. */
.dirA .ins-co-page.is-split .cdr-save,
.dirA .ins-co-page.is-split > .account-notice { grid-column: 1 / -1; }

@media (max-width: 1099px) {
  .dirA .ins-co-page.is-split { grid-template-columns: minmax(0, 1fr); }
}
.dirA .ins-co-lede { margin: 0 0 var(--sp-12); font-size: var(--text-label); color: var(--A-fg-3); max-width: 62ch; }

.dirA .ins-co-copay { display: inline-flex; align-items: center; gap: var(--sp-8); }

/* Tabular, so Yes and No hold the same width and the switches stay in a column. */
.dirA .ins-co-copay-state {
  min-width: 24px;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
}

/* While the change is in flight: the switch has already moved, so say it is not settled. */
.dirA .ins-co-copay.is-busy { opacity: 0.6; }

/* ---- the claim template mapper ---- */

.dirA .ins-tmpl { display: grid; gap: var(--sp-12); }

.dirA .ins-tmpl-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

.dirA .ins-tmpl-name { flex: 1; min-width: 0; font-size: var(--text-label); overflow-wrap: anywhere; }

.dirA .ins-tmpl-shape { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-12); }
.dirA .ins-tmpl-count { margin: 0 0 var(--sp-4) auto; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .ins-tmpl-lede { margin: 0; font-size: var(--text-meta); color: var(--A-fg-3); max-width: 78ch; }
.dirA .ins-tmpl-lede b { font-weight: 600; color: var(--A-fg-2); }

/* One row per spreadsheet column, so the table is as wide as the file is. */
.dirA .ins-tmpl-map { width: 100%; border-collapse: separate; border-spacing: 0; }

.dirA .ins-tmpl-map th {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-3);
  text-align: left;
}

.dirA .ins-tmpl-map td {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
  vertical-align: middle;
}

.dirA .ins-tmpl-map tr.is-mapped td { background: var(--A-tint); }
.dirA .ins-tmpl-map tr.is-focus td { box-shadow: inset 0 0 0 1px var(--A-accent); }

/* ---- the sheet as it reads ---- */

.dirA .ins-sheet {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .ins-sheet-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface-2);
}

.dirA .ins-sheet-title { font-size: var(--text-label); font-weight: 600; }
.dirA .ins-sheet-meta { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .ins-sheet-hint { margin-left: auto; font-size: var(--text-meta); color: var(--A-fg-4); }

/* A spreadsheet is wider than the page; it scrolls on its own rather than stretching it. */
.dirA .ins-sheet-scroll { max-height: 340px; overflow: auto; }

.dirA .ins-sheet-grid { border-collapse: separate; border-spacing: 0; font-size: var(--text-meta); }

.dirA .ins-sheet-grid th,
.dirA .ins-sheet-grid td {
  min-width: 120px;
  max-width: 200px;
  padding: var(--sp-4) var(--sp-8);
  border-right: 1px solid var(--A-rule-2);
  border-bottom: 1px solid var(--A-rule-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The column letters stay put while the sheet scrolls under them. */
.dirA .ins-sheet-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--A-surface-2);
  text-align: left;
  vertical-align: top;
}

.dirA .ins-sheet-col { display: block; font-weight: 700; color: var(--A-fg); }

.dirA .ins-sheet-to {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  margin-top: 3px;
  padding: 1px var(--sp-6);
  border: 1px solid var(--A-accent);
  border-radius: 999px;
  background: var(--A-surface);
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--A-accent);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dirA .ins-sheet-to::before { content: '\2192'; opacity: 0.8; }

.dirA .ins-sheet-grid thead th.is-mapped { background: var(--A-tint); }
.dirA .ins-sheet-grid .is-focus { background: var(--A-tint); }

/* The row numbers: the gutter is how the header row is chosen. */
.dirA .ins-sheet-gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 40px;
  width: 40px;
  background: var(--A-surface-2);
  color: var(--A-fg-4);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dirA .ins-sheet-grid thead .ins-sheet-gutter {
  z-index: 3;
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--A-fg-4);
  text-align: center;
  white-space: normal;
}
.dirA .ins-sheet-gutter.is-click { cursor: pointer; }
.dirA .ins-sheet-gutter.is-click:hover { background: var(--A-accent); color: #fff; }

.dirA .ins-sheet-grid tr.is-header td { background: var(--warning-100); font-weight: 600; color: var(--A-fg); }
.dirA .ins-sheet-grid tr.is-header .ins-sheet-gutter { background: var(--warning); color: #fff; }
.dirA .ins-sheet-grid tr.is-data td { color: var(--A-fg-2); }

.dirA .ins-sheet-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .ins-sheet-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--A-rule);
}

.dirA .ins-sheet-swatch.is-header { background: var(--warning-100); }
.dirA .ins-sheet-swatch.is-data { background: var(--A-surface); margin-left: var(--sp-10); }
.dirA .ins-sheet-key .ins-sheet-swatch + span { margin-right: var(--sp-10); }

.dirA .ins-sheet-warn {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--A-rule);
  font-size: var(--text-meta);
  color: var(--warning);
}
.dirA .ins-tmpl-col { font-weight: 600; font-variant-numeric: tabular-nums; }
.dirA .ins-tmpl-head { color: var(--A-fg-2); overflow-wrap: anywhere; }

/* What the file already holds here, so the right claim field is obvious from the data. */
.dirA .ins-tmpl-sample { display: flex; flex-direction: column; gap: 1px; }
.dirA .ins-tmpl-sample span {
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}
.dirA .ins-tmpl-map .input { margin-top: 0; width: 100%; max-width: 280px; }

/* Cells picked out of the preview: clickable above the claims, dotted once set. */
.dirA .ins-sheet-grid td.is-pickable { cursor: cell; }
.dirA .ins-sheet-grid td.is-pickable:hover {
  outline: 1px dashed var(--A-accent);
  outline-offset: -1px;
}

.dirA .ins-sheet-grid td.is-set {
  position: relative;
  background: var(--info-100, var(--A-tint));
  font-weight: 600;
}

.dirA .ins-sheet-set {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--A-accent);
}

.dirA .ins-sheet-swatch.is-set { background: var(--info-100, var(--A-tint)); margin-left: var(--sp-10); }

/* The list of those cells, under the preview. */
.dirA .ins-cells {
  border: 1px solid var(--A-rule);
  border-radius: var(--radius);
  background: var(--A-surface);
}

.dirA .ins-cells-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .ins-cells-title { font-size: var(--text-meta); font-weight: 700; color: var(--A-fg); }
.dirA .ins-cells-note { font-size: var(--text-meta); color: var(--A-fg-4); }
.dirA .ins-cells .ins-tmpl-map { margin: 0; }

/* A cell's own formatting, as a toolbar rather than a row of labelled fields. */
.dirA .ins-fmt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.dirA .ins-fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  background: none;
  font-size: var(--text-meta);
  line-height: 1;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .ins-fmt-btn:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .ins-fmt-btn.is-on {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-accent);
}

.dirA .ins-fmt-sep {
  width: 1px;
  height: 16px;
  margin: 0 var(--sp-4);
  background: var(--A-rule);
}

.dirA .ins-tmpl-map .input.ins-fmt-size {
  width: 52px;
  min-width: 52px;
  height: 24px;
  padding: 0 var(--sp-4);
  text-align: center;
}

/* The colour well: the swatch is the letter's underline, as in a word processor. */
.dirA .ins-fmt-color {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .ins-fmt-color:hover { background: var(--A-surface-2); color: var(--A-fg); }

.dirA .ins-fmt-color input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.dirA .ins-fmt-color span { pointer-events: none; }

.dirA .ins-fmt-color span::after {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: 3px;
  border-radius: 1px;
  background: var(--A-rule-2);
}

.dirA .ins-fmt-color.is-set span::after { background: currentColor; }

/* The value column stacks a format picker under the value itself. */
.dirA .ins-cells .ins-tmpl-map td > * + * { margin-top: var(--sp-4); }

/* A formula reads as code, not prose: the brackets and {row} have to be exact. */
.dirA .ins-tmpl-map .input.ins-formula {
  font-family: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);
  font-size: var(--text-meta);
}

/* ------------------------------------------------- custom warning labels */

.dirA .cwl-text { color: var(--A-fg); overflow-wrap: anywhere; }
.dirA .cwl-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--A-fg-2); }

/* Priority reads as a rank, not a number: 1 keeps its slot, 4 is dropped first. */
.dirA .cwl-pri {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .cwl-pri-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: var(--text-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.dirA .cwl-pri.is-p1 .cwl-pri-n { background: var(--danger, #c0392b); }
.dirA .cwl-pri.is-p2 .cwl-pri-n { background: var(--warning, #d68910); }
.dirA .cwl-pri.is-p3 .cwl-pri-n { background: var(--A-accent); }
.dirA .cwl-pri.is-p4 .cwl-pri-n { background: var(--A-fg-4); }

.dirA .cwl-pri-w { white-space: nowrap; }

/* Roughly the printed slot: 1.3in x 0.35in, centred, as the bottle carries it. */
.dirA .cwl-preview {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--radius);
  background: var(--A-surface-2);
}

.dirA .cwl-preview-cap {
  flex: 0 0 auto;
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--A-fg-4);
}

.dirA .cwl-preview-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  min-height: 35px;
  padding: 2px var(--sp-4);
  border: 1px dashed var(--A-rule-2);
  border-radius: 3px;
  background: #fff;
  color: #000;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ drugs & quote */

.dirA .drg-name { color: var(--A-fg); font-weight: 500; }

.dirA .drg-class { color: var(--A-fg-2); }
.dirA .tnum { font-variant-numeric: tabular-nums; }

/* What a bulk panel is about to change, named rather than counted alone. */
.dirA .drg-affected {
  margin-top: var(--sp-12);
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--radius);
  background: var(--A-surface-2);
}

.dirA .drg-affected-h {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--A-fg);
}

.dirA .drg-affected ul {
  margin: 0;
  padding-left: var(--sp-16);
  max-height: 180px;
  overflow: auto;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

/* The AI review table: wide, so it scrolls inside the panel rather than stretching it. */
.dirA .drg-ai-lede {
  margin: 0 0 var(--sp-10);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .drg-ai-wait { display: flex; flex-direction: column; gap: var(--sp-8); }
.dirA .drg-ai-scroll { max-height: 60vh; overflow: auto; }

.dirA .drg-ai {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-meta);
}

.dirA .drg-ai th,
.dirA .drg-ai td {
  padding: var(--sp-6) var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  text-align: left;
  vertical-align: middle;
}

.dirA .drg-ai thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--A-surface-2);
  font-weight: 600;
  color: var(--A-fg-3);
  white-space: nowrap;
}

.dirA .drg-ai tbody tr.is-taken { background: var(--A-tint); }
.dirA .drg-ai-low { color: var(--danger, #c0392b); font-weight: 600; }
.dirA .drg-ai-why { color: var(--A-fg-3); }

.dirA .drg-ai-src {
  display: inline-block;
  padding: 1px var(--sp-8);
  border-radius: 999px;
  background: var(--A-surface-2);
  font-size: var(--text-micro);
  color: var(--A-fg-3);
  white-space: nowrap;
}

/* A source that is a published reference, not the model's own guess. */
.dirA .drg-ai-src.is-ref {
  background: var(--ok-100, #e3f2e8);
  color: var(--ok, #1e6b3a);
}

/* ------------------------------------------------------------ price quote */

.dirA .pq-page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: 900px;
  margin: 0 auto;
}

.dirA .pq-go { margin-top: var(--sp-12); }

.dirA .pq-figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.dirA .pq-figure {
  flex: 1 1 180px;
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--radius);
  background: var(--A-surface-2);
}

.dirA .pq-figure span {
  display: block;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .pq-figure b {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
}

/* The number that answers the question gets the weight. */
.dirA .pq-figure.is-lead {
  border-color: var(--A-accent);
  background: var(--A-tint);
}

.dirA .pq-figure.is-lead b { font-size: 26px; color: var(--A-accent); }

.dirA .pq-note {
  margin: var(--sp-12) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-4);
  max-width: 70ch;
}

/* --------------------------------------------------------- drug setup */

/* The steps take the page rather than a card's width: three of them hold grids. */
.dirA .drg-form {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-14);
  align-items: stretch;
  padding: var(--sp-8) var(--sp-14);
  flex: 1;
  height: 100%;
  min-height: 0;
}

.dirA .drg-form .crx-steps { min-height: 0; }

/* A drug has no photograph; the card keeps the slot so both pages line up. */
.dirA .rx-summary-face.is-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--A-tint);
  color: var(--A-accent);
}

@media (max-width: 1100px) {
  .dirA .drg-form { grid-template-columns: minmax(0, 1fr); }
}

/* Each step scrolls on its own, so the rail and the buttons stay where they are. */
.dirA .drg-setup .crx-step-body.is-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: var(--sp-4);
}

/* ------------------------------------------------------------ the lots */

.dirA .drg-lots-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
}

.dirA .drg-lots-count { margin-right: auto; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .crx-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  cursor: pointer;
}

/* The lot table borrows the child grid's look; only its width differs. */
.dirA .drg-audit-table { min-width: 1900px; }

/* ------------------------------------------------------- warning labels */

.dirA .drg-warn { display: flex; flex-direction: column; gap: var(--sp-16); }

.dirA .drg-warn-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
}

/* ------------------------------------------------------------- lots */

.dirA .lot-step { display: flex; flex-direction: column; gap: var(--sp-12); }

/* What the shelf holds, before any one lot is read. */
.dirA .lot-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-10);
}

.dirA .lot-total {
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .lot-total span { display: block; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .lot-total b {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
}

.dirA .lot-total.is-lead { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .lot-total.is-lead b { color: var(--A-accent); font-size: 26px; }
.dirA .lot-total.is-warn b { color: var(--warning); }
.dirA .lot-total.is-bad b { color: var(--danger); }

/* The shelf being looked at. */
.dirA .lot-shelves {
  display: inline-flex;
  margin-right: auto;
  padding: 2px;
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface-2);
}

.dirA .lot-shelves button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-12);
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .lot-shelves button span {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--A-rule-2);
  font-size: var(--text-micro);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dirA .lot-shelves button:hover { color: var(--A-fg); }

.dirA .lot-shelves button.is-on {
  background: var(--A-surface);
  color: var(--A-accent);
  font-weight: 600;
  box-shadow: var(--shadow-1);
}

.dirA .lot-shelves button.is-on span { background: var(--A-tint); color: var(--A-accent); }

/* The shelf being looked at, and what can be done to it. */
.dirA .lot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
}
/* One row per lot, opening onto its detail: a dozen lots stay one scannable column. */
.dirA .lot-rows { display: flex; flex-direction: column; gap: 6px; }

.dirA .lot-row {
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

.dirA .lot-row:hover { box-shadow: var(--shadow-1); }
.dirA .lot-row.is-open { box-shadow: var(--shadow-1); }
.dirA .lot-row.is-ok { border-left-color: var(--success); }
.dirA .lot-row.is-warn { border-left-color: var(--warning); }
.dirA .lot-row.is-bad { border-left-color: var(--danger); }

.dirA .lot-row-h { display: flex; align-items: center; gap: var(--sp-8); padding-right: var(--sp-10); }

/* The whole line toggles; the actions sit outside the button. */
.dirA .lot-row-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: 1;
  min-width: 0;
  padding: var(--sp-10) var(--sp-12);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dirA .lot-row-toggle > svg:first-child { flex: none; color: var(--A-fg-4); transition: transform 120ms ease; }
.dirA .lot-row-toggle[aria-expanded='true'] > svg:first-child { transform: rotate(90deg); }

/* The record's own word for this lot, said plainly rather than left to a colour. */
.dirA .lot-state {
  flex: none;
  min-width: 78px;
  padding: 1px var(--sp-8);
  border-radius: 999px;
  background: var(--A-surface-2);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  color: var(--A-fg-3);
  white-space: nowrap;
}

.dirA .lot-state.is-ok { background: rgba(46, 125, 79, 0.12); color: var(--success); }
.dirA .lot-state.is-warn { background: rgba(184, 134, 11, 0.14); color: var(--warning); }
.dirA .lot-state.is-bad { background: var(--danger-100); color: var(--danger); }

/* What the lot is, over the brand on the box. */
.dirA .lot-row-id { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.dirA .lot-row-name {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dirA .lot-row-med {
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dirA .lot-no {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.03em;
  color: var(--A-fg-2);
}

.dirA .lot-row-when { flex: none; font-size: var(--text-meta); color: var(--A-fg-3); white-space: nowrap; }
.dirA .lot-row-when.is-bad { color: var(--danger); font-weight: 600; }
.dirA .lot-row-when.is-warn { color: var(--warning); font-weight: 600; }
.dirA .lot-row-when.is-none { color: var(--A-fg-4); }

.dirA .lot-row-q {
  flex: none;
  min-width: 72px;
  text-align: right;
  font-size: var(--text-h5, 16px);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
}

.dirA .lot-row.is-bad .lot-row-q { color: var(--danger); }

/* The lot that leaves the shelf first is flagged on its line. */
.dirA .lot-flag {
  flex: none;
  padding: 1px var(--sp-8);
  border-radius: 999px;
  background: var(--A-accent);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
}

/* The detail, indented to the line it belongs to. */
.dirA .lot-row-b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--sp-10) var(--sp-16);
  margin: 0;
  padding: var(--sp-12) var(--sp-14) var(--sp-12) 40px;
  border-top: 1px solid var(--A-rule-2);
  background: var(--A-surface-2);
}

.dirA .lot-row-b > div { min-width: 0; }

.dirA .lot-row-b dt {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--A-fg-4);
}

.dirA .lot-row-b dd {
  margin: 2px 0 0;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .dirA .lot-row-toggle { flex-wrap: wrap; row-gap: var(--sp-6); }
  .dirA .lot-row-id { flex-basis: 100%; order: -1; }
  .dirA .lot-row-b { padding-left: var(--sp-14); }
}

/* The "N more" control on a history entry. */
.dirA .lot-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-meta);
  color: var(--A-accent);
  cursor: pointer;
}

.dirA .lot-more[aria-expanded='true'] > svg { transform: rotate(180deg); }
.dirA .lot-more > svg { transition: transform 120ms ease; }

/* The prescription's history sits in the step card's place, so it scrolls inside it. */
.dirA .rx-audit .hist-page { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-14); }

/* ------------------------------------------------------------- history */

.dirA .hist { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); }

.dirA .hist-entry {
  position: relative;
  display: flex;
  gap: var(--sp-12);
  padding: 0 0 var(--sp-16) 0;
}

/* The thread joining one change to the next. */
.dirA .hist-entry::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--A-rule-2);
}

.dirA .hist-entry:last-child::before { display: none; }

.dirA .hist-dot {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  border: 1px solid var(--A-rule);
}

.dirA .hist-entry.is-new .hist-dot { background: var(--success); border-color: var(--success); color: #fff; }
.dirA .hist-entry.is-gone .hist-dot { background: var(--danger); border-color: var(--danger); color: #fff; }

.dirA .hist-body { min-width: 0; flex: 1; padding-top: 3px; }

.dirA .hist-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}

/* Who made the change, as initials rather than an address. */
.dirA .hist-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--A-tint);
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--A-accent);
}

.dirA .hist-what { font-size: var(--text-label); color: var(--A-fg-2); }
.dirA .hist-what b { color: var(--A-fg); }
.dirA .hist-when { margin-left: auto; font-size: var(--text-meta); color: var(--A-fg-4); }

/* Which drug an entry is about, shown only on an order of several. */
.dirA .hist-rx {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}
.dirA .hist-rx .mono { color: var(--A-fg-4); }

/* One line per field: what it was, what it became. */
.dirA .hist-edits {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule-2);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

.dirA .hist-edits li {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 2px 0;
  font-size: var(--text-meta);
}

.dirA .hist-edits li + li { border-top: 1px solid var(--A-rule-2); }
.dirA .hist-edits svg { flex: none; color: var(--A-fg-4); }

.dirA .hist-field {
  flex: 0 0 170px;
  color: var(--A-fg-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dirA .hist-from {
  color: var(--A-fg-4);
  text-decoration: line-through;
  overflow-wrap: anywhere;
}

.dirA .hist-to { font-weight: 600; color: var(--A-fg); overflow-wrap: anywhere; }

.dirA .hist-note { margin: var(--sp-6) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

/* ------------------------------------------------ the inventory panel */

/* Which drug this stock maps to, shown when the panel is opened from a prescription. */
.dirA .inv-drug {
  padding: var(--sp-12);
  margin-bottom: var(--sp-14);
  border: 1px solid var(--A-accent);
  border-radius: var(--A-radius-md);
  background: var(--A-tint);
}

.dirA .inv-drug-h {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  margin-bottom: var(--sp-10);
}

.dirA .inv-drug-h > svg { color: var(--A-accent); flex: none; margin-top: 2px; }
.dirA .inv-drug-h > div { min-width: 0; margin-right: auto; }
.dirA .inv-drug-h b { display: block; color: var(--A-fg); }

.dirA .inv-drug-h span {
  display: block;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .inv-drug-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-6) var(--sp-10);
  margin: 0 0 var(--sp-10);
}

.dirA .inv-drug-facts dt {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--A-fg-4);
}

.dirA .inv-drug-facts dd { margin: 0; font-size: var(--text-meta); color: var(--A-fg); }

/* The prices are the drug's, not the lot's — set apart so they are not read as stock. */
.dirA .inv-drug-facts.is-price {
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}

.dirA .inv-drug-facts.is-price dd { font-variant-numeric: tabular-nums; font-weight: 600; }

.dirA .inv-drug .field-hint { margin: 0; }
.dirA .inv-drug .field-hint a { color: var(--A-accent); }

/* History and Dispensed take the step pane rather than floating over it: both are read. */
.dirA .drg-aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.dirA .drg-aside-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .drg-aside-h h4 { margin: 0; font-size: var(--text-h4, 15px); color: var(--A-fg); }
.dirA .drg-aside-h p { margin: 0; margin-right: auto; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .drg-aside-b {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-14);
}

.dirA .hist-page { display: flex; flex-direction: column; gap: var(--sp-12); }

.dirA .hist-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-10);
}

.dirA .hist-count { font-size: var(--text-meta); color: var(--A-fg-4); }

/* The range control sits under the presets, as it does on a report. */
.dirA .hist-range {
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

/* What is left to read, said next to the control that reads it. */
.dirA .hist-more {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .hist-more span { font-size: var(--text-meta); color: var(--A-fg-4); }

/* ----------------------------------------------------------- error page
   Rendered outside any island, so these take the tokens from :root, not .dirA. */

.crx-error {
  max-width: 820px;
  margin: 0 auto;
  padding-block: var(--sp-32, 32px) var(--sp-40, 40px);
  padding-inline: var(--sp-16, 16px);
  font-family: var(--font);
  color: var(--A-fg);
}

.crx-error-card {
  padding: var(--sp-28, 28px);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}

.crx-error-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-14, 14px);
  border-radius: 50%;
  background: var(--warning-100, rgba(184, 134, 11, 0.12));
  color: var(--warning);
}

.crx-error-mark svg { width: 26px; height: 26px; }

.crx-error-card h1 {
  margin: 0 0 var(--sp-8, 8px);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--A-fg);
  text-wrap: balance;
}

.crx-error-say {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--A-fg-2);
  font-size: var(--text-label);
  line-height: 1.55;
}

/* What support needs, kept where it can be read out or copied. */
.crx-error-ref {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8, 8px);
  margin-top: var(--sp-18, 18px);
  padding: var(--sp-8, 8px) var(--sp-10, 10px);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

.crx-error-ref > span {
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--A-fg-4);
}

.crx-error-ref code {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  letter-spacing: 0.03em;
  color: var(--A-fg);
  user-select: all;
}

.crx-error-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-10, 10px);
  margin-top: var(--sp-20, 20px);
}

/* The page's own buttons. .btn is only defined under .dirA, and this page renders outside
   it on purpose, so the design system's button is restated here rather than the browser's
   showing through. */
.crx-error .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6, 6px);
  height: 32px;
  padding: 0 var(--sp-14, 14px);
  border: 1px solid var(--A-rule, #DDE3EA);
  border-radius: var(--A-radius, 6px);
  background: var(--A-surface, #FFFFFF);
  color: var(--A-fg, #16202C);
  font-family: var(--font, inherit);
  font-size: var(--text-label, 12px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.crx-error .btn:hover { background: var(--A-surface-2, #F3F5F8); }

.crx-error .btn-primary {
  background: var(--A-accent, #1F3A5F);
  border-color: var(--A-accent, #1F3A5F);
  color: #FFFFFF;
}

.crx-error .btn-primary:hover {
  background: var(--A-accent-2, #2B4E7E);
  border-color: var(--A-accent-2, #2B4E7E);
}

/* Inside the reference pill, where it sits beside the id rather than under it. */
.crx-error-ref .btn { height: 26px; padding: 0 var(--sp-10, 10px); }

.crx-error .btn:focus-visible {
  outline: 2px solid var(--A-accent, #1F3A5F);
  outline-offset: 2px;
}

.crx-error-foot {
  margin: var(--sp-16, 16px) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}

/* Development and QA only: folded away, because it is for whoever is debugging. */
.crx-error-tech {
  margin-top: var(--sp-14, 14px);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.crx-error-tech > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-8, 8px);
  padding: var(--sp-10, 10px) var(--sp-14, 14px);
  cursor: pointer;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-fg-2);
  list-style: none;
}

.crx-error-tech > summary::-webkit-details-marker { display: none; }

.crx-error-tech > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid var(--A-fg-4);
  border-block: 4px solid transparent;
  transition: transform 120ms ease;
}

.crx-error-tech[open] > summary::before { transform: rotate(90deg); }

.crx-error-tech > summary em {
  margin-left: auto;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

.crx-error-msg {
  padding: var(--sp-10, 10px) var(--sp-14, 14px);
  border-top: 1px solid var(--A-rule-2);
  background: var(--danger-100);
  color: var(--danger);
  font-size: var(--text-meta);
  font-weight: 500;
}

/* The trace scrolls in its own box rather than running the page off the screen. */
.crx-error-tech pre {
  max-height: 320px;
  margin: 0;
  padding: var(--sp-12, 12px) var(--sp-14, 14px);
  overflow: auto;
  border-top: 1px solid var(--A-rule-2);
  background: var(--A-surface-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--A-fg-3);
  white-space: pre;
  tab-size: 2;
}

/* ------------------------------------------------- inventory summary */

.dirA .ivs { display: flex; flex-direction: column; gap: var(--sp-12); }

.dirA .ivs-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-10);
}

.dirA .ivs-figure {
  padding: var(--sp-12) var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  text-align: left;
  font: inherit;
  color: inherit;
}

.dirA .ivs-figure > span {
  display: block;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .ivs-figure > b {
  display: block;
  margin-top: 2px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg);
}

.dirA .ivs-figure > em {
  display: block;
  font-style: normal;
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

.dirA .ivs-figure.is-warn > b { color: var(--warning); }

/* The count that names the page's whole job, and doubles as its filter. */
.dirA button.ivs-figure { cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.dirA button.ivs-figure:hover { border-color: var(--A-accent); }

.dirA .ivs-figure.is-lead { border-color: var(--danger); background: var(--danger-100); }
.dirA .ivs-figure.is-lead > b { color: var(--danger); font-size: 30px; }
.dirA .ivs-figure.is-lead > span,
.dirA .ivs-figure.is-lead > em { color: var(--danger); opacity: 0.85; }
.dirA .ivs-figure.is-lead.is-on { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18); }

.dirA .ivs-chart {
  padding: var(--sp-12) var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

/* One bar for the whole shelf; a band's width is its share of the lots. */
.dirA .ivs-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--A-rule-2);
}

.dirA .ivs-seg {
  flex-basis: 0;
  min-width: 6px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: filter 120ms ease;
}

.dirA .ivs-seg:hover { filter: brightness(1.08); }
.dirA .ivs-seg.is-on { box-shadow: inset 0 0 0 2px var(--A-fg); }

.dirA .ivs-seg.is-ok { background: var(--success); }
.dirA .ivs-seg.is-warn { background: var(--warning); }
.dirA .ivs-seg.is-dead { background: var(--A-fg-4); }
.dirA .ivs-seg.is-bad { background: var(--danger); }

.dirA .ivs-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-12);
  margin-top: var(--sp-8);
}

.dirA .ivs-key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 2px var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .ivs-key-item:hover { background: var(--A-surface-2); color: var(--A-fg); }
.dirA .ivs-key-item.is-on { border-color: var(--A-rule-strong); background: var(--A-surface-2); color: var(--A-fg); }
.dirA .ivs-key-item b { font-variant-numeric: tabular-nums; color: var(--A-fg); }

.dirA .ivs-key-item i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.dirA .ivs-key-item i.is-ok { background: var(--success); }
.dirA .ivs-key-item i.is-warn { background: var(--warning); }
.dirA .ivs-key-item i.is-dead { background: var(--A-fg-4); }
.dirA .ivs-key-item i.is-bad { background: var(--danger); }

.dirA .ivs-key-clear {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-meta);
  color: var(--A-accent);
  cursor: pointer;
}

/* ------------------------------------------------------------ locations */

/* Contain, not cover: a logo is rarely square and must not be cropped to fit. */
.dirA .loc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  object-fit: contain;
  background: var(--A-surface-2);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  padding: 2px;
}

.dirA .loc-logo.is-empty { color: var(--A-fg-4); }

/* A grid thumbnail takes its size from the row, with clearance, so a taller logo cannot
   push the row open and sit against the dividers. */
.dirA .loc-logo.is-thumb {
  width: calc(var(--A-row-h) - 8px);
  height: calc(var(--A-row-h) - 8px);
  vertical-align: middle;
}

.dirA .loc-name { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: 600; }

/* The picker: the logo as it will look, and what to do about it. */
.dirA .loc-logo-pick { display: flex; align-items: flex-start; gap: var(--sp-12); }

.dirA .loc-logo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }

.dirA .loc-logo-note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ master lists */

/* Eighteen lists: a rail to choose one, a pane to work in. */
.dirA .mst {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--sp-24);
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  .dirA .mst { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .dirA .mst-rail { max-height: 220px; }
}

.dirA .mst-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  min-height: 0;
  padding-right: var(--sp-4);
  overflow-y: auto;
}

.dirA .mst-rail-groups { display: grid; gap: var(--sp-4); }
.dirA .mst-rail-group { display: grid; gap: var(--sp-2); }
/* Open groups breathe; folded ones sit together as a short menu. */
.dirA .mst-rail-group.is-open { margin-bottom: var(--sp-10); }

/* What kind of list these are, and the control that folds them away. */
.dirA .mst-rail-head {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-6) var(--sp-10);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--A-fg-3);
  text-align: left;
  cursor: pointer;
}
.dirA .mst-rail-head:hover { background: var(--A-surface-2); color: var(--A-fg-2); }
.dirA .mst-rail-head > span { flex: 1 1 auto; min-width: 0; }

/* The chevron turns down as the group opens. */
.dirA .mst-rail-head > svg { flex: none; transition: transform .12s ease; }
.dirA .mst-rail-group.is-open .mst-rail-head > svg { transform: rotate(90deg); }

/* How many lists are in there, said quietly. */
.dirA .mst-rail-head > em {
  flex: none;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-4);
}

/* A folded group still says it holds the list being looked at. */
.dirA .mst-rail-dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--A-accent);
}

.dirA .mst-rail-item {
  padding: var(--sp-6) var(--sp-10);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  color: var(--A-fg-2);
  text-align: left;
  cursor: pointer;
}

/* A rule down the left, so an open group reads as holding its lists. */
.dirA .mst-rail-group.is-open .mst-rail-item {
  margin-left: var(--sp-16);
  border-left: 1px solid var(--A-rule);
  border-radius: 0 var(--A-radius) var(--A-radius) 0;
}
.dirA .mst-rail-group.is-open .mst-rail-item.is-on { border-left-color: var(--A-accent); }

.dirA .mst-rail-item:hover { background: var(--A-surface-2); }
.dirA .mst-rail-item.is-on { background: var(--A-tint); color: var(--A-fg); font-weight: 600; }

.dirA .mst-rail-none { margin: 0; padding: 0 var(--sp-10); color: var(--A-fg-3); }

/* ---- the pane ---- */

/* The add/edit form says which it is, so the button at its foot is unambiguous. */
.dirA .mst-child-form-h {
  margin: 0 0 var(--sp-8);
  font-size: var(--text-meta);
  font-weight: 700;
  color: var(--A-fg-3);
}

/* ---- a list whose rows own rows (features/master/MasterDetail) ---- */
.dirA .mst-md {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--sp-16);
  /* Both panes to the foot: .mst already constrains the height, so it is not guessed. */
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.dirA .mst-md-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .mst-md-find { padding: var(--sp-10); border-bottom: 1px solid var(--A-rule); }
.dirA .mst-md-rows {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--sp-6);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dirA .mst-md-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name chev" "facts chev";
  align-items: center;
  gap: 0 var(--sp-8);
  width: 100%;
  padding: var(--sp-8) var(--sp-10);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dirA .mst-md-row:hover { background: var(--A-surface-2); }
.dirA .mst-md-row.is-on { background: var(--A-tint); }
.dirA .mst-md-row > svg { grid-area: chev; flex: none; color: var(--A-fg-4); }
.dirA .mst-md-row.is-on > svg { color: var(--A-accent); }

.dirA .mst-md-row-name {
  grid-area: name;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--A-fg);
}
.dirA .mst-md-row.is-on .mst-md-row-name { font-weight: 600; }
.dirA .mst-md-row-facts { grid-area: facts; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .mst-md-add { padding: var(--sp-8) var(--sp-10); border-top: 1px solid var(--A-rule); }

/* What the chosen row holds. Scrolls on its own: the nesting has no natural ceiling. */
.dirA .mst-md-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-16);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

/* The row's name and its actions stay put while what it holds scrolls under them. */
.dirA .mst-md-detail > .mst-md-head {
  position: sticky;
  top: calc(var(--sp-16) * -1);
  z-index: 1;
  margin-top: calc(var(--sp-16) * -1);
  padding-top: var(--sp-16);
  background: var(--A-surface);
}

.dirA .mst-md-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-bottom: var(--sp-14);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
}
.dirA .mst-md-head h3 { margin: 0; min-width: 0; font-size: var(--fs-16); }
.dirA .mst-md-head-acts { display: inline-flex; gap: var(--sp-6); flex: none; }

.dirA .mst-md-none { margin: 0; padding: var(--sp-16); color: var(--A-fg-3); }

@media (max-width: 900px) {
  .dirA .mst-md { grid-template-columns: minmax(0, 1fr); }
  .dirA .mst-md-rows { max-height: 40vh; }
  /* Stacked, so each pane takes a share rather than one filling the screen. */
  .dirA .mst-md { flex: 0 1 auto; }
  .dirA .mst-md-rows { max-height: 40vh; }
  .dirA .mst-md-detail { max-height: 60vh; }
  .dirA .mst-md-detail > .mst-md-head { position: static; margin-top: 0; }
}

.dirA .mst-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.dirA .mst-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-14);
  margin-bottom: var(--sp-14);
}

.dirA .mst-head h2 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--A-fg);
}

.dirA .mst-head p { margin: var(--sp-2) 0 0; color: var(--A-fg-3); }

.dirA .mst-head-acts { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; }

/* A file picker wearing a button: the input itself is never shown. */
.dirA .mst-import { position: relative; overflow: hidden; cursor: pointer; }
.dirA .mst-import input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dirA .mst-import:has(input:disabled) { opacity: .6; cursor: default; }

/* data-grid.css hands its height to a .data-grid that is a direct child of .page-body;
   here the grid sits inside the pane, so the chain has to carry on. */
.dirA .mst-pane > .data-grid,
.dirA .mst-pane > .data-grid > .table-wrap {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dirA .mst-pane > .data-grid > .table-wrap > .table-scroll { flex: 0 1 auto; min-height: 0; }
.dirA .mst-pane > .data-grid > .toolbar { flex: none; }

/* A list of one is a form, not a grid with a single row in it. */
.dirA .mst-single {
  display: grid;
  gap: var(--sp-14);
  justify-items: start;
  max-width: 320px;
  padding-top: var(--sp-4);
}

/* ------------------------------------------------------------ role permissions */

.dirA .prm-wrap { display: flex; flex-direction: column; min-height: 0; }

.dirA .prm-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  flex-wrap: wrap;
  padding-bottom: var(--sp-16);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .prm-head-id { flex: 1; min-width: 200px; }

.dirA .prm-head-id h2 {
  margin: 0;
  font-size: var(--text-head);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--A-fg);
}

.dirA .prm-head-id p {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin: var(--sp-4) 0 0;
  color: var(--A-fg-2);
}

/* A role that grants nothing can be handed out and change nobody's access. */
.dirA .prm-none { color: var(--warning); font-weight: 600; }

.dirA .prm-dirty {
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  background: var(--warning-100);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--warning);
}

.dirA .prm-head-act { display: flex; gap: var(--sp-8); }

/* ---- the two panes ---- */

.dirA .prm {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-20);
  align-items: start;
  padding-top: var(--sp-16);
}

/* Opened beside the roles list, the permissions scroll themselves rather than running
   the page past the header that saves them. */
.dirA .rol-pane .prm-body {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: var(--sp-8);
}

@media (max-width: 860px) {
  .dirA .prm { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .dirA .prm-rail { flex-direction: row; flex-wrap: wrap; position: static; }
}

.dirA .prm-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: sticky;
  top: var(--sp-16);
}

.dirA .prm-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  width: 100%;
  padding: var(--sp-6) var(--sp-10);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  color: var(--A-fg-2);
  text-align: left;
  cursor: pointer;
}

.dirA .prm-rail-item:hover { background: var(--A-surface-2); }

.dirA .prm-rail-item.is-open {
  background: var(--A-tint);
  color: var(--A-fg);
  font-weight: 600;
}

.dirA .prm-rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* How much of this module the role holds, so the rail answers before you open anything. */
.dirA .prm-rail-count {
  flex: none;
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-3);
}

.dirA .prm-rail-count.is-zero { color: var(--A-fg-4); }

/* ---- the detail ---- */

.dirA .prm-body { min-width: 0; display: grid; gap: var(--sp-16); }

.dirA .prm-found { margin: 0; color: var(--A-fg-3); }

.dirA .prm-module-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .prm-module-name { font-size: var(--text-title); font-weight: 650; color: var(--A-fg); }
.dirA .prm-module-count { font-size: var(--text-meta); color: var(--A-fg-3); font-variant-numeric: tabular-nums; }
.dirA .prm-empty { margin: var(--sp-10) 0 0; color: var(--A-fg-3); }

/* Each area is a line until it is opened; then it is a panel of its own. */
.dirA .prm-subs { display: grid; padding-top: var(--sp-8); }

/* A box and the words beside it are one control: they sit together and share the accent.
   Lost in a rewrite, which left the browser's own blue and no gap at all. */
.dirA .prm-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  cursor: pointer;
}

/* Every box on this page, whatever level it sits at. */
.dirA .prm-check input,
.dirA .prm-check input[type="checkbox"] {
  flex: none;
  accent-color: var(--A-accent);
  cursor: pointer;
}

.dirA .prm-sub { border-bottom: 1px solid var(--A-rule-2); }
.dirA .prm-sub:last-child { border-bottom: 0; }

.dirA .prm-sub-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-2) 0;
}

/* The disclosure carries the whole line, so the row is one wide target rather than a word. */
.dirA .prm-sub-open {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: 1;
  min-width: 0;
  padding: var(--sp-8) var(--sp-8) var(--sp-8) 0;
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  color: var(--A-fg);
  text-align: left;
  cursor: pointer;
}

.dirA .prm-sub-open:hover { background: var(--A-surface-2); }

.dirA .prm-sub-open > svg {
  flex: none;
  color: var(--A-fg-4);
  transition: transform 0.12s var(--ease-out);
}

.dirA .prm-sub.is-open .prm-sub-open > svg { transform: rotate(90deg); }

.dirA .prm-sub-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* What it grants, in a word, so a closed area still answers the question. */
.dirA .prm-sub-state {
  flex: none;
  padding: var(--sp-2) var(--sp-8);
  border-radius: 999px;
  font-size: var(--text-meta);
  font-weight: 600;
}

.dirA .prm-sub-state.is-all { background: var(--success-100); color: var(--success); }
.dirA .prm-sub-state.is-some { background: var(--warning-100); color: var(--warning); }
.dirA .prm-sub-state.is-none { background: var(--A-surface-2); color: var(--A-fg-3); }

.dirA .prm-sub-count {
  flex: none;
  width: 46px;
  text-align: right;
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--A-fg-3);
}

/* An open area is a panel of its own, so its chips read as being inside something
   rather than loose on the page. */
.dirA .prm-sub.is-open {
  margin: var(--sp-10) 0;
  border: 1px solid var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* The heading is a band, not a tint: against the white body below it the two have to be
   told apart at a glance, which a shade off white was not doing. */
.dirA .prm-sub.is-open .prm-sub-h {
  padding: var(--sp-2) var(--sp-10);
  background: var(--navy-100);
  border-bottom: 1px solid var(--A-rule-strong);
}

.dirA .prm-sub.is-open .prm-sub-name { color: var(--A-accent); }
.dirA .prm-sub.is-open .prm-sub-open > svg { color: var(--A-accent); }

/* A state badge reads against the band, not the white it was drawn for. */
.dirA .prm-sub.is-open .prm-sub-state.is-none { background: var(--A-surface); }

.dirA .prm-sub.is-open .prm-sub-open:hover { background: transparent; }

/* Opened: the chips sit under the line, indented to the name they belong to. */
.dirA .prm-sub.is-open .prm-grants,
.dirA .prm-sub.is-open > .prm-empty {
  margin: 0;
  padding: var(--sp-8) var(--sp-12) var(--sp-10) var(--sp-32);
}

@media (prefers-reduced-motion: reduce) {
  .dirA .prm-sub-open > svg { transition: none; }
}

/* The actions an area offers, as chips that wrap. A fixed column each ran off the
   page the moment an area offered ten of them, with nothing to scroll. */
.dirA .prm-grants { display: flex; flex-direction: column; gap: var(--sp-2); }

.dirA .prm-grant-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .prm-grant-row:last-child { border-bottom: 0; }

/* The name the chips belong to: its own column so they all start in line. */
.dirA .prm-grant-label {
  flex: 0 0 auto;
  width: 150px;
  padding-top: 2px;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .prm-grant-row.is-all .prm-grant-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--A-fg-3);
}

.dirA .prm-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
}

.dirA .prm-grants .prm-grant-row { border-bottom-color: var(--A-rule); }
.dirA .prm-grants .prm-grant-row:last-child { border-bottom: 0; }

.dirA .prm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  padding: 3px var(--sp-8) 3px var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
  white-space: nowrap;
  cursor: pointer;
}

.dirA .prm-chip:hover { border-color: var(--A-accent); }

/* Granted reads at a glance, which is what the page is scanned for. */
.dirA .prm-chip.is-on {
  border-color: var(--A-accent);
  background: var(--A-tint);
  color: var(--A-fg);
  font-weight: 600;
}

.dirA .prm-chip input[type="checkbox"] {
  flex: none;
  margin: 0;
  accent-color: var(--A-accent);
  cursor: pointer;
}

/* The submodule's own actions, as against those of an area inside it. */
.dirA .prm-row-self { font-weight: 600; color: var(--A-fg); }

@media (max-width: 760px) {
  .dirA .prm-grant-row { flex-direction: column; gap: var(--sp-4); }
  .dirA .prm-grant-label { width: auto; }
}

/* ---- what saving will do ---- */

.dirA .prm-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  flex-wrap: wrap;
  margin-top: var(--sp-16);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
  color: var(--A-fg-2);
}

/* ---------- Insurer payment, opened from the payments list ----------
   features/insurance/PaymentDetails.tsx — the cheque, then what it settled. */

.dirA .pay-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-10) var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
}

.dirA .pay-file {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-10) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .pay-file a { color: var(--A-accent); }

.dirA .pay-claims-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-10);
  margin: var(--sp-16) 0 var(--sp-8);
  font-size: var(--text-label);
}

.dirA .pay-claims-h > span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .pay-claims { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }

.dirA .pay-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6) var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .pay-claim-id { display: flex; align-items: baseline; gap: var(--sp-8); min-width: 0; }
.dirA .pay-claim-id > b { font-weight: 600; color: var(--A-fg); }

.dirA .pay-claim-id > i {
  font-style: normal;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* The four figures run under both, so a long claim status cannot squeeze them. */
.dirA .pay-claim-sums {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-20);
}

.dirA .pay-claim-note {
  grid-column: 1 / -1;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* ------------------------------------------------------------ roles
   features/roles/RolesPage.tsx — a card each; its permissions open in place. */

.dirA .rol-name { font-weight: 600; color: var(--A-fg); }

/* A role nobody holds is not broken, just unused, so it reads back rather than warns. */
.dirA .rol-none { color: var(--A-fg-3); }

/* A role that grants nothing does nothing: it can be handed out and change nobody's access. */
.dirA .rol-empty { color: var(--warning); font-weight: 600; }

.dirA .rol-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--sp-16);
}

.dirA .rol-bar-act { display: flex; align-items: center; gap: var(--sp-8); }

/* The list, and the open role's permissions beside it rather than instead of it. */
.dirA .rol-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
}

.dirA .rol-split.is-open { grid-template-columns: 300px minmax(0, 1fr); }

/* The list stays put while a long permission list scrolls beside it. */
.dirA .rol-split.is-open .rol-cards { position: sticky; top: 0; }

.dirA .rol-pane { min-width: 0; }

/* One role to a row, in a list that scrolls itself rather than running off the page. */
.dirA .rol-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: var(--sp-4);
}

/* Narrowed beside the permissions, the row wraps rather than squeezing its name away. */
.dirA .rol-split.is-open .rol-card-main { flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
.dirA .rol-split.is-open .rol-card-name { min-width: 0; margin-right: 0; width: 100%; }

/* While a role is open the list is an index, and deleting is done on the role itself:
   the heading beside it carries that. Thirteen bins in a column invite a misclick. */
.dirA .rol-split.is-open .rol-card-acts { display: none; }

@media (max-width: 1100px) {
  .dirA .rol-split.is-open { grid-template-columns: minmax(0, 1fr); }
  .dirA .rol-split.is-open .rol-cards { position: static; max-height: 260px; }
  .dirA .rol-card-name { min-width: 0; }
}

.dirA .rol-card {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.dirA .rol-card:hover { border-color: var(--A-accent); box-shadow: var(--shadow-2); }
.dirA .rol-card.is-on { border-color: var(--A-accent); background: var(--A-tint); }

/* Nothing to open: the card reads, and must not look like it is waiting to be pressed. */
.dirA .rol-card.is-flat:hover { border-color: var(--A-rule); box-shadow: none; }
.dirA .rol-card.is-flat .rol-card-main { cursor: default; }

/* The system role is the one you cannot break, and says so before it is opened. */
.dirA .rol-card.is-system { border-left: 3px solid var(--A-accent); }

/* One line: name, then what it costs to touch, then the way in. */
.dirA .rol-card-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-width: 0;
  padding: var(--sp-8) var(--sp-12);
  border: 0;
  border-radius: inherit;
  background: transparent;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
}

.dirA .rol-card-main:focus-visible { outline: 2px solid var(--A-accent); outline-offset: -2px; }

/* A column of its own, so the figures beside it line up down the list however long
   the names are, with room to breathe after the longest of them. */
.dirA .rol-card-name {
  flex: 0 0 auto;
  min-width: 180px;
  margin-right: var(--sp-16);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  white-space: nowrap;
}

.dirA .rol-card-facts {
  display: flex;
  align-items: baseline;
  gap: var(--sp-20);
  flex: none;
}

.dirA .rol-fact { display: inline-flex; align-items: baseline; gap: var(--sp-6); }

.dirA .rol-fact > i {
  font-style: normal;
  font-size: var(--text-meta);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--A-fg-3);
}

.dirA .rol-fact > b {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  font-variant-numeric: tabular-nums;
}

.dirA .rol-fact > b.is-none { font-weight: 400; color: var(--A-fg-3); }

.dirA .rol-card-acts {
  flex: none;
  display: inline-flex;
  margin-left: auto;
  padding-right: var(--sp-8);
}
.dirA .rol-card-acts .row-action:disabled { opacity: .35; cursor: default; }

/* The heading is the role's name, and renaming it happens where it is read. */
.dirA .prm-head-name { display: flex; align-items: center; gap: var(--sp-8); }

.dirA .prm-head-name h2.is-editable {
  cursor: text;
  border-radius: var(--A-radius);
  padding: 0 var(--sp-4);
  margin: 0 calc(var(--sp-4) * -1);
}

.dirA .prm-head-name h2.is-editable:hover { background: var(--A-surface-2); }

.dirA .prm-rename {
  font-size: var(--text-h2, 18px);
  font-weight: 600;
  height: auto;
  padding: var(--sp-2) var(--sp-6);
  max-width: 280px;
}

/* Last active: quiet by default, because on a healthy list every row has a recent one and
   the column is there to be scanned for the stale ones. */
.dirA .usr-seen { color: var(--A-fg-3); }

/* Inside the write's own throttle, so they are at the counter right now. */
.dirA .usr-seen.is-now { color: var(--success); font-weight: 600; }

/* Never stamped. Not the same as idle, so it does not borrow the warning colour. */
.dirA .usr-seen.is-never { color: var(--A-fg-4); font-style: italic; }

/* Every user has a role, so a pill round it would mark nothing. */
.dirA .usr-role { font-weight: 600; color: var(--A-fg-2); }

/* Where they may dispense: the grant this page exists to make. */
.dirA .usr-where {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-6);
  min-width: 0;
  color: var(--A-fg-2);
}

.dirA .usr-where-more {
  flex: none;
  padding: var(--sp-2) var(--sp-6);
  border-radius: 999px;
  background: var(--A-surface-2);
  font-size: var(--text-micro);
  font-weight: 700;
  color: var(--A-fg-3);
}

/* Reachable nowhere is the one state worth catching the eye: the account works and opens
   on an empty app. */
.dirA .usr-nowhere { color: var(--warning); font-weight: 600; }

/* ------------------------------------------------------------ user setup */

.dirA .usr-form { max-width: 720px; margin: 0 auto; padding-bottom: var(--sp-8); }

/* ---- the record's identity line ---- */

.dirA .usr-rec {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-14);
  padding-bottom: var(--sp-20);
  border-bottom: 1px solid var(--A-rule);
}

/* Shown, never changed: a profile picture is the account holder's own to set. */
.dirA .usr-rec-face {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--A-surface-2);
}

.dirA .usr-rec-face.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-title);
  font-weight: 650;
  color: var(--A-fg-3);
}

.dirA .usr-rec-id { flex: 1; min-width: 0; }

.dirA .usr-rec-id h2 {
  margin: 0;
  font-size: var(--text-head);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

.dirA .usr-rec-mail {
  margin: var(--sp-2) 0 0;
  color: var(--A-fg-2);
  overflow-wrap: anywhere;
}

/* The status sits with the identity it belongs to, and says what it means underneath. */
.dirA .usr-rec-status { flex: none; display: grid; justify-items: end; gap: var(--sp-6); }

.dirA .usr-rec-status p {
  margin: 0;
  max-width: 220px;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  text-align: right;
}

@media (max-width: 620px) {
  /* Stacked, it reads left with everything else rather than hanging off the right. */
  .dirA .usr-rec { flex-wrap: wrap; }
  .dirA .usr-rec-status { justify-items: start; }
  .dirA .usr-rec-status p { text-align: left; }
}

/* Why there is no upload control here, said once rather than left to be discovered. */
.dirA .usr-rec-note {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* ---- sections ---- */

.dirA .usr-sec { padding-top: var(--sp-20); }
.dirA .usr-sec + .usr-sec { margin-top: var(--sp-4); border-top: 1px solid var(--A-rule); }

/* Weight and size carry these, not tracked caps. */
.dirA .usr-sec-h {
  margin: 0 0 var(--sp-14);
  font-size: var(--text-title);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--A-fg);
}

/* ---- the pharmacies actually chosen ---- */

.dirA .usr-picked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.dirA .usr-picked li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  font-size: var(--text-label);
  color: var(--A-fg);
}

.dirA .usr-picked li button {
  display: flex;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  color: var(--A-fg-4);
  cursor: pointer;
}

.dirA .usr-picked li button:hover { background: var(--A-surface); color: var(--danger); }

/* An account that reaches no pharmacy signs in to an empty app, so it is marked. */
.dirA .usr-picked-none {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--warning);
}

.dirA .usr-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-8);
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--A-rule);
}

/* ------------------------------------------------- inventory workbench */

/* Embedded in an iframe: the list fills the frame, without the page's own header. */
.dirA .irm-embed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  height: 100%;
  min-height: 0;
  padding: var(--sp-10);
}

.dirA .irm-lot { display: flex; flex-direction: column; line-height: 1.3; }
.dirA .irm-lot > b { font-weight: 500; color: var(--A-fg); }
.dirA .irm-lot > em {
  font-style: normal;
  font-size: var(--text-micro);
  color: var(--A-fg-4);
  font-variant-numeric: tabular-nums;
}

.dirA .irm-map {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  min-width: 0;
  color: var(--A-accent);
  text-decoration: none;
}

.dirA .irm-map:hover { text-decoration: underline; }
.dirA .irm-map.is-suspect { color: var(--danger); }

/* A tint rather than a border: the row still has to read as one of many. */
.dirA .table tr.is-suspect-row > td { background: var(--danger-100); }
.dirA .table tr.is-suspect-row:hover > td { background: var(--danger-100); filter: brightness(0.98); }

/* --------------------------------------------------------- remap drawer */

.dirA .rmp { display: flex; flex-direction: column; gap: var(--sp-10); }

.dirA .rmp-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--A-fg-2);
  margin-top: var(--sp-4);
}

/* Says why these rows are listed when nothing has been typed yet. */
.dirA .rmp-label em {
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

.dirA .rmp-from {
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .rmp-from h4 {
  margin: 0 0 var(--sp-6);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rmp-from ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); }
.dirA .rmp-from li { display: flex; flex-direction: column; font-size: var(--text-meta); }
.dirA .rmp-from li > b { font-weight: 500; color: var(--A-fg); }
.dirA .rmp-from li > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--A-fg-4);
  font-size: var(--text-micro);
}

.dirA .rmp-warn {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  font-size: var(--text-meta);
  color: var(--warning);
}

/* Four phrasings cover almost every remap; typing one out is the exception. */
.dirA .rmp-reasons { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.dirA .rmp-reason {
  padding: 2px var(--sp-8);
  border: 1px dashed var(--A-rule-strong);
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: var(--text-micro);
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .rmp-reason:hover { border-style: solid; border-color: var(--A-accent); color: var(--A-accent); }

.dirA .rmp-note { margin: 0; font-size: var(--text-micro); color: var(--A-fg-4); }

/* ------------------------------------------------------ transfer drawer */

.dirA .tfr { display: flex; flex-direction: column; gap: var(--sp-12); }

.dirA .tfr-card {
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .tfr-card > header { display: flex; flex-direction: column; margin-bottom: var(--sp-10); }
.dirA .tfr-card > header > b { font-weight: 600; color: var(--A-fg); }
.dirA .tfr-card > header > span { font-size: var(--text-micro); color: var(--A-fg-4); }

.dirA .tfr-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--sp-10);
}

.dirA .tfr-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.dirA .tfr-field > span { font-size: var(--text-micro); color: var(--A-fg-3); }
.dirA .tfr-bad { font-style: normal; font-size: var(--text-micro); color: var(--danger); }

/* Same red edge and ring a refused Field gets, on a bare input outside one. */
.dirA .tfr-field .input.is-bad {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.14);
}

/* What the move will do at the destination, before it runs. */
.dirA .tfr-out {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-10) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}

.dirA .tfr-out.is-ok { color: var(--success); }
.dirA .tfr-out.is-warn { color: var(--warning); }
.dirA .tfr-out > em { font-style: normal; color: var(--A-fg-4); }

/* ------------------------------------------------- drug card on hover */

.dirA .drug-hover { display: inline-flex; align-items: center; gap: var(--sp-6); min-width: 0; }

/* A cannabis product carries a mark in the row, not only in the card. */
.dirA .irm-cannabis {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--success);
}

/* Portalled out of the table, which clips its own overflow at the column edge. */
.drug-card {
  position: fixed;
  z-index: 1200;
  width: 300px;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}

.drug-card-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--A-rule);
}

.drug-card-title {
  font-weight: 600;
  color: var(--A-fg);
  letter-spacing: var(--tracking-caps);
  overflow-wrap: anywhere;
}

.drug-card-tag {
  flex: none;
  margin-left: auto;
  padding: 1px var(--sp-6);
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  font-size: var(--text-micro);
  font-weight: 600;
}

.drug-card dl { display: grid; gap: var(--sp-4); margin: 0; }
.drug-card dl > div { display: flex; gap: var(--sp-8); min-width: 0; }
.drug-card dt { flex: none; width: 110px; font-size: var(--text-meta); color: var(--A-fg-3); }
.drug-card dd {
  margin: 0;
  font-size: var(--text-meta);
  color: var(--A-fg);
  overflow-wrap: anywhere;
}

/* A field the drug record leaves empty, said rather than left blank. */
.drug-card dd.is-unset { color: var(--A-fg-4); font-style: italic; }

/* ------------------------------------------- free text on the prescription PDF */

.rxa-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  padding: var(--sp-16);
  background: rgba(16, 20, 28, 0.62);
}

/* .dirA carries a page layout this panel is not; take back what does not belong here. */
.rxa-shell.dirA { height: auto; background: none; }

.rxa-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: var(--A-radius-md);
  background: var(--A-bg) !important;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.rxa-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: none;
  flex-wrap: nowrap;
  padding: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-surface);
  overflow: hidden;
}

.rxa-bar > * { flex: none; }

/* Icon-only for the document's own actions, so the bar stays one line. */
.rxa-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--A-radius);
  background: none;
  color: var(--A-fg-2);
  cursor: pointer;
}

.rxa-icon-btn:hover:not(:disabled) { background: var(--A-surface-2); color: var(--A-fg); }
.rxa-icon-btn:disabled { opacity: 0.4; cursor: default; }

.rxa-bar-rule {
  width: 1px;
  height: 20px;
  flex: none;
  background: var(--A-rule);
}

.rxa-count-chip {
  flex: none;
  min-width: 20px;
  text-align: center;
  padding: 1px var(--sp-6);
  border-radius: 999px;
  background: var(--navy-100);
  font-size: var(--text-micro);
  font-weight: 600;
  color: var(--A-accent);
  font-variant-numeric: tabular-nums;
}

.rxa-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-label);
  font-weight: 600;
  white-space: nowrap;
  color: var(--A-fg);
}

.rxa-hint {
  flex: 0 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-meta);
  color: var(--A-fg-4);
}
.rxa-sp { flex: 1; }

.rxa-body { display: flex; flex: 1; min-height: 0; }

/* ---- the pages */

.rxa-pages {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: var(--sp-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-14);
  background: var(--A-surface-2);
}

.rxa-pages.is-adding .rxa-layer { cursor: crosshair; }

.rxa-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  margin: auto;
  color: var(--A-fg-3);
}

.rxa-page {
  position: relative;
  flex: none;
  background: #fff;
  box-shadow: var(--shadow-1);
}

.rxa-page canvas { display: block; width: 100%; height: 100%; }

/* The notes sit on this layer, so the canvas underneath can be repainted freely. */
.rxa-layer { position: absolute; inset: 0; }

.rxa-note,
.rxa-ghost {
  position: absolute;
  white-space: pre;
  font-family: Arial, Helvetica, sans-serif;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}

.rxa-note { cursor: grab; }
.rxa-note:hover,
.rxa-note.is-active,
.rxa-note.is-peeking { outline-color: var(--A-accent); background: var(--navy-100); }
.rxa-shell.is-readonly .rxa-note { cursor: default; }
.rxa-note.is-dragging { cursor: grabbing; opacity: 0.85; }
.rxa-note.is-saving { opacity: 0.55; }

.rxa-ghost { pointer-events: none; outline-color: var(--A-accent); opacity: 0.75; }
.rxa-ghost.is-placeholder { color: var(--A-fg-4); font-style: italic; }
.rxa-ghost.is-pinned { opacity: 1; }

/* ---- the history panel */

.rxa-side {
  width: 350px;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--A-rule);
  background: var(--A-surface);
}

.rxa-side-head {
  flex: none;
  padding: var(--sp-12) var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

.rxa-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: none;
  padding: var(--sp-8) var(--sp-14);
  border-bottom: 1px solid var(--A-rule);
  background: var(--navy-100);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.rxa-filter-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rxa-filter button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--A-accent);
  text-decoration: underline;
  cursor: pointer;
}

.rxa-hist {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0 var(--sp-14);
  list-style: none;
}

.rxa-hist > li { display: grid; gap: var(--sp-4); padding: var(--sp-12) 0; font-size: var(--text-meta); }
.rxa-hist > li + li { border-top: 1px solid var(--A-rule); }
.rxa-hist > li.is-clickable { cursor: pointer; }
.rxa-hist > li.is-clickable:hover .rxa-where { color: var(--A-accent); }
.rxa-hist-none { color: var(--A-fg-4); }

.rxa-act { display: flex; align-items: center; gap: var(--sp-8); }
.rxa-where { font-size: var(--text-micro); color: var(--A-fg-4); }

.rxa-txt { color: var(--A-fg); white-space: pre-wrap; word-break: break-word; }
.rxa-txt del { color: var(--A-fg-4); }

.rxa-reason {
  padding: var(--sp-6) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-accent);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  color: var(--A-fg-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.rxa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-12);
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

.rxa-meta span { display: inline-flex; align-items: center; gap: 3px; }

.dirA .rxa-quote {
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .rxa-body { flex-direction: column; }
  .rxa-side { width: auto; height: 38%; border-left: 0; border-top: 1px solid var(--A-rule); }
  .rxa-hint { display: none; }
}

/* --------------------------------------------------------- colour picker */

.crx-color { display: inline-flex; min-width: 0; }

.crx-color-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  height: 30px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font-family: var(--font);
  font-size: var(--text-body);
  letter-spacing: var(--tracking);
  color: var(--A-fg);
  cursor: pointer;
}

.crx-color-trigger:hover:not(:disabled) { border-color: var(--A-rule-strong); }
.crx-color-trigger:focus-visible { border-color: var(--A-accent); box-shadow: 0 0 0 2px var(--navy-100); }
.crx-color-trigger:disabled { opacity: 0.55; cursor: default; }

.crx-color-chip {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(16 24 40 / 14%);
}

.crx-color-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Portalled, so it is never clipped by the field's own box. */
.crx-color-pop {
  position: fixed;
  z-index: 1300;
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
}

.crx-color-kit {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-6);
}

.crx-color-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--A-radius);
  box-shadow: inset 0 0 0 1px rgb(16 24 40 / 14%);
  color: #fff;
  cursor: pointer;
  transition: transform 100ms ease;
}

.crx-color-swatch:hover { transform: scale(1.08); }
.crx-color-swatch.is-on { box-shadow: inset 0 0 0 1px rgb(16 24 40 / 14%), 0 0 0 2px var(--A-accent); }

.crx-color-hex {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule);
}

.crx-color-hex > span {
  flex: none;
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

.crx-color-hex .input {
  height: 28px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* While a newly attached script is being read, the button says so and refuses a second file. */
.dirA .rx-drugs-upload.is-busy { opacity: 0.65; pointer-events: none; }
/* ---------- New prescription menu (manual / scan / upload) ---------- */

.dirA .rx-new { position: relative; display: inline-flex; }

.dirA .rx-new-menu {
  position: absolute;
  top: calc(100% + var(--sp-6));
  right: 0;
  z-index: 60;
  width: 290px;
  padding: var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
}

/* The button sits left on a phone, so a right-anchored 290px menu ran off screen. */
@media (max-width: 660px) {
  .dirA .rx-new-menu {
    right: auto;
    left: 0;
    width: min(290px, calc(100vw - var(--sp-24)));
  }
}

.dirA .rx-new-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  width: 100%;
  padding: var(--sp-8) var(--sp-10);
  border: 0;
  border-radius: var(--A-radius);
  background: none;
  font: inherit;
  letter-spacing: var(--tracking);
  color: var(--A-fg);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dirA .rx-new-item:hover { background: var(--A-surface-2); }
.dirA .rx-new-item:focus-visible { outline: 2px solid var(--A-accent); outline-offset: -2px; }

.dirA .rx-new-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--A-radius);
  background: var(--navy-100);
  color: var(--A-accent);
}

.dirA .rx-new-item b { display: block; font-weight: 600; }
.dirA .rx-new-item small { display: block; font-size: var(--text-micro); color: var(--A-fg-4); }
/* ---------- Prescription lifecycle rail ---------- */

/* Where the prescription is in its life. Sits above the form, which keeps its own
   entry steps -- two different ideas, two different strips. */
.dirA .rx-rail {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  flex: none;
  margin-bottom: var(--sp-12);
  padding: var(--sp-10) var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .rx-rail-track {
  display: flex;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dirA .rx-rail-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  flex: 1;
  min-width: 0;
  padding: 0 var(--sp-4);
  text-align: center;
}

/* The connector: drawn from each stage back to the one before it, so the first
   stage has no tail hanging off the left. */
.dirA .rx-rail-stage + .rx-rail-stage::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--A-rule);
}

.dirA .rx-rail-stage.is-done + .rx-rail-stage.is-done::before,
.dirA .rx-rail-stage.is-done + .rx-rail-stage.is-now::before {
  background: var(--A-accent);
}

/* Paid / Unpaid beside the delivery method: the counter reads both before handing over. */
.dirA .rx-rail-pay {
  align-self: center;
  padding: 2px var(--sp-6);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  font-size: var(--text-micro);
  font-weight: 600;
  white-space: nowrap;
}
.dirA .rx-rail-pay.is-ok { border-color: var(--teal-100); color: var(--teal); }
.dirA .rx-rail-pay.is-owed { border-color: var(--red-100); color: var(--red-700); }

.dirA .rx-rail-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  color: #fff;
}

/* A stage behind us is filled and ticked. The one it is on is ringed and haloed but hollow:
   it is the work in hand, and filling it reads as finished. */
.dirA .rx-rail-stage.is-done .rx-rail-dot {
  border-color: var(--A-accent);
  background: var(--A-accent);
}

.dirA .rx-rail-stage.is-now .rx-rail-dot {
  border-color: var(--A-accent);
  box-shadow: 0 0 0 3px var(--navy-100);
}

/* The last stage, once reached: nothing follows it, so it is filled like a stage behind us. */
.dirA .rx-rail-stage.is-end .rx-rail-dot {
  background: var(--A-accent);
}

.dirA .rx-rail-label {
  font-size: var(--text-micro);
  line-height: 1.25;
  color: var(--A-fg-4);
  overflow-wrap: anywhere;
}

.dirA .rx-rail-stage.is-now .rx-rail-label {
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rx-rail-stage.is-done .rx-rail-label { color: var(--A-fg-3); }

/* Who moved it and when, on hover. Positioned over everything else, so a long
   reason is readable rather than clipped by the rail's own box. */
.dirA .rx-rail-pop {
  position: absolute;
  top: calc(100% + var(--sp-6));
  left: 50%;
  z-index: 40;
  display: grid;
  gap: 2px;
  width: max-content;
  max-width: 260px;
  padding: var(--sp-8) var(--sp-10);
  transform: translateX(-50%);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  box-shadow: var(--shadow-2);
  text-align: left;
}

.dirA .rx-rail-pop b { font-size: var(--text-meta); font-weight: 600; color: var(--A-fg); }
.dirA .rx-rail-pop small { font-size: var(--text-micro); color: var(--A-fg-4); }
.dirA .rx-rail-pop em {
  font-size: var(--text-micro);
  font-style: normal;
  color: var(--A-fg-2);
  white-space: pre-wrap;
}

/* Ended journey: the stages it reached, muted, then how it ended. */
.dirA .rx-rail.is-stopped .rx-rail-track { opacity: .62; }
.dirA .rx-rail.is-stopped .rx-rail-stage.is-now .rx-rail-label { font-weight: 500; }

/* Off-rail (voided, rejected, parked, transferred out): shown instead of the rail. */
.dirA .rx-rail-off {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  flex: 1;
  min-width: 0;
  padding: var(--sp-4) 0;
  color: var(--A-fg-2);
}

.dirA .rx-rail-off > svg { flex: none; color: var(--warning); }
.dirA .rx-rail-off-name { font-weight: 600; color: var(--A-fg); }

.dirA .rx-rail-off-why {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .rx-rail-off-when {
  margin-left: auto;
  flex: none;
  font-size: var(--text-micro);
  color: var(--A-fg-4);
}

.dirA .rx-rail-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex: none;
}

@media (max-width: 900px) {
  .dirA .rx-rail { flex-direction: column; align-items: stretch; gap: var(--sp-10); }
  .dirA .rx-rail-acts { justify-content: flex-end; flex-wrap: wrap; }
  .dirA .rx-rail-label { display: none; }
  .dirA .rx-rail-stage.is-now .rx-rail-label { display: block; }
}

/* ---------- Cannabis authorization, and records a draft could not match ---------- */

/* The refusal stays on the form, not only behind a button. A control that cannot be used,
   with no reason beside it, is the thing people file bug reports about. */
.dirA .rx-cannabis-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--A-radius-md);
  background: var(--danger-100);
  color: var(--danger);
  font-size: var(--text-meta);
}

.dirA .rx-cannabis-banner svg { flex: none; }
.dirA .rx-cannabis-banner span { flex: 1; min-width: 0; }

.dirA .rx-cannabis-banner button {
  flex: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.dirA .rx-cannabis-ok {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  color: var(--success);
}

.dirA .rx-cannabis-bad { margin: 0 0 var(--sp-8); color: var(--danger); font-weight: 600; }

/* One unmatched record at a time: what the document says, who that might already be, and
   only then the offer to create it. */
.dirA .rx-missing-sec + .rx-missing-sec {
  margin-top: var(--sp-14);
  padding-top: var(--sp-14);
  border-top: 1px solid var(--A-rule);
}

.dirA .rx-missing-sec h4 {
  margin: 0 0 var(--sp-4);
  font-size: var(--text-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--A-fg-3);
}

.dirA .rx-missing-read { margin: 0 0 var(--sp-8); color: var(--A-fg); }
.dirA .rx-missing-hint { margin: 0 0 var(--sp-6); color: var(--A-fg-3); font-size: var(--text-meta); }

.dirA .rx-missing-looking {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}

.dirA .rx-missing-looking svg { animation: crx-spin 1s linear infinite; }

.dirA .rx-missing-cands { list-style: none; margin: 0 0 var(--sp-8); padding: 0; display: grid; gap: var(--sp-4); }

.dirA .rx-missing-cands li {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .rx-missing-cands li span { flex: 1; min-width: 0; font-size: var(--text-meta); }

/* Creating a record is the last resort, so it is the quietest thing on the panel. */
.dirA .rx-missing-else {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--A-fg-3);
  font: inherit;
  font-size: var(--text-meta);
  text-decoration: underline;
  cursor: pointer;
}

.dirA .rx-missing-else:hover { color: var(--A-accent); }

/* ---------- Reading a script into drugs ---------- */

.dirA .rx-read-ask { margin: 0 0 var(--sp-8); color: var(--A-fg-2); }
.dirA .rx-read-ask.is-quiet { margin: 0; color: var(--A-fg-3); font-size: var(--text-meta); }

/* Who the document says it is for, against who that resolved to. Both, because a wrong match
   is only visible next to the text it was made from. */
.dirA .rx-read-who { margin: 0 0 var(--sp-12); display: grid; gap: var(--sp-6); }

.dirA .rx-read-who > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--sp-8);
}

.dirA .rx-read-who dt { color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .rx-read-who dd { margin: 0; color: var(--A-fg); }
.dirA .rx-read-who > div.is-unmatched dd { color: var(--warning); }

.dirA .rx-read-count {
  margin: 0 0 var(--sp-8);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
}

.dirA .rx-read-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }

.dirA .rx-read-lines li {
  display: grid;
  gap: 2px;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
}

/* A line with nothing behind it is the one that still needs a person, so it is marked. */
.dirA .rx-read-lines li.is-unmatched {
  background: var(--warning-100);
  box-shadow: inset 2px 0 0 var(--warning);
}

.dirA .rx-read-line-name { color: var(--A-fg); }
.dirA .rx-read-line-note { color: var(--A-fg-3); font-size: var(--text-meta); }

.dirA .rx-read-warn {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin: var(--sp-12) 0 0;
  color: var(--warning);
  font-size: var(--text-meta);
}

.dirA .rx-read-warn svg { flex: none; margin-top: 1px; }

/* ---------- Master lists: rows that belong to one row ---------- */

/* A pharmacy's locations, under the pharmacy's own fields: the email a transfer is sent to
   lives here, so the parent is not finished without it. */
.dirA .mst-child {
  margin-top: var(--sp-16);
  padding-top: var(--sp-14);
  border-top: 1px solid var(--A-rule);
}

/* The header already draws that line here. Nested children keep theirs. */
.dirA .mst-md-detail > .mst-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.dirA .mst-child h4 {
  margin: 0 0 var(--sp-10);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--A-fg-3);
}

.dirA .mst-child-quiet { margin: 0 0 var(--sp-10); font-size: var(--text-meta); color: var(--A-fg-4); }

.dirA .mst-child-list { margin: 0 0 var(--sp-12); padding: 0; list-style: none; }

.dirA .mst-child-list > li {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .mst-child-main {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-12);
  flex: 1;
  min-width: 0;
}

.dirA .mst-child-cell { font-size: var(--text-body); min-width: 0; overflow-wrap: anywhere; }
.dirA .mst-child-cell + .mst-child-cell { color: var(--A-fg-3); font-size: var(--text-meta); }

.dirA .mst-child-form { display: flex; flex-direction: column; gap: var(--sp-10); }
.dirA .mst-child-acts { display: flex; justify-content: flex-end; gap: var(--sp-8); }

/* ---------- Prescription approval queue (features/dispensing/ApprovalQueuePage) ----------

   The queue stays on the left while a drug is being approved, so the next one is a click away
   rather than a scroll back up. The script sits beside the checks because comparing the two
   is the work. */

/* The queue holds its width while a drug is open: it is a list to work down beside the work,
   and stretched across the window its own fields stretch with it. With nothing open there is
   no work to sit beside, so it takes the page and its cards flow across it. */
.dirA .rxq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  min-height: 0;
  flex: 1;
}
.dirA .rxq.is-open { grid-template-columns: 300px minmax(0, 1fr); }

.dirA .rxq:not(.is-open) .rxq-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-content: start;
}
.dirA .rxq.is-open.has-preview { grid-template-columns: 280px minmax(360px, 1fr) minmax(0, 1fr); }

@media (max-width: 1200px) {
  .dirA .rxq.is-open.has-preview { grid-template-columns: 260px minmax(0, 1fr); }
  .dirA .rxq.is-open.has-preview .rxq-preview { display: none; }
}

/* ---- the queue ---- */

.dirA .rxq-queue,
.dirA .rxq-work,
.dirA .rxq-blank,
.dirA .rxq-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

/* The search box is the panel's own, as on the write-off tab; what is being listed is
   set above the panel, in the page's filter bar. */
.dirA .rxq > .rxq-queue > .till-search { flex: none; }

.dirA .rxq-count {
  flex: none;
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rxq-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-14);
  padding: var(--sp-10) var(--sp-12) var(--sp-14);
}

.dirA .rxq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  margin: auto;
  padding: var(--sp-20, 20px);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  text-align: center;
}

/* ---- an order's drugs, kept together ---- */

/* The queue is read by order: a patient with four drugs is one thing to work through, and
   saying their name on all four cards buried the one field that differs -- the drug.
   The order is drawn as one panel, so its drugs read as being held by it. */
.dirA .rxq-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

/* Tinted and ruled off, and it scrolls with its drugs: held at the top it slid over them. */
.dirA .rxq-group-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--A-rule-2);
  border-radius: calc(var(--A-radius-md) - 1px) calc(var(--A-radius-md) - 1px) 0 0;
  background: var(--A-surface-2);
  font-size: var(--text-meta);
}

.dirA .rxq-group-who {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--A-fg);
}

.dirA .rxq-group-order {
  flex: none;
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
}

.dirA .rxq-group-n { flex: none; margin-left: auto; color: var(--A-fg-3); }

.dirA .rxq-group-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-10);
}

/* ---- one drug ---- */

.dirA .rxq-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  text-align: left;
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-2);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  font: inherit;
  cursor: pointer;
}

.dirA .rxq-item:hover { background: var(--A-tint); }
.dirA .rxq-item.is-on { border-color: var(--A-accent); background: var(--A-tint); }

/* The stripe says where the drug stands before a word is read: untouched, part way, sent back. */
.dirA .rxq-item.is-part { border-left-color: #1B7F4B; }
.dirA .rxq-item.is-no { border-left-color: #B4451C; }

.dirA .rxq-item-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.dirA .rxq-item-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.35;
  color: var(--A-fg);
}

.dirA .rxq-item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .rxq-item-rx {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* How long it has been waiting, which is what decides the order they are worked in. */
.dirA .rxq-item-age {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

.dirA .rxq-item-checks {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: auto;
}

.dirA .rxq-item-left {
  flex: none;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
  font-variant-numeric: tabular-nums;
}

.dirA .rxq-item.is-no .rxq-item-left { color: #B4451C; }

/* One pip per check, counted in words beside them so the bars are not a riddle. */
.dirA .rxq-pips { display: flex; flex: 1; gap: 3px; }

.dirA .rxq-pips i {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: var(--A-rule);
}

.dirA .rxq-pips i.is-ok { background: #1B7F4B; }
.dirA .rxq-pips i.is-no { background: #B4451C; }

/* ---- the work ---- */

.dirA .rxq-work { padding: var(--sp-12); gap: var(--sp-10); }
.dirA .rxq-work .crx-step-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ---- the script ---- */

.dirA .rxq-script-pane,
.dirA .rxq-script-none {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.dirA .rxq-script-none {
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}

.dirA .rxq-script-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-meta);
  overflow: hidden;
}

.dirA .rxq-script-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--A-fg);
  font-weight: 500;
}

.dirA .rxq-script-page { flex: none; color: var(--A-fg-3); font-variant-numeric: tabular-nums; }

.dirA .rxq-script-box {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  padding: var(--sp-10);
  background: var(--A-surface-2);
}

/* Centred by margin, not by justify-content: a centred child wider than its scroller
   leaves its left edge unreachable. */
.dirA .rxq-script-box > canvas,
.dirA .rxq-script-box > img {
  align-self: flex-start;
  margin-inline: auto;
  max-width: 100%;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(20, 30, 50, .14);
}

.dirA .rxq-script-box > iframe { flex: 1; min-width: 0; border: 0; background: var(--A-surface); }
.dirA .rxq-script-wait { margin: auto; font-size: var(--text-meta); color: var(--A-fg-3); }

/* The preview column holds the script and the label behind one switch, as the prescription
   page does; the label pane wears the script pane's frame so swapping changes nothing else. */
.dirA .rxq-preview > .rx-labeltab { gap: 0; height: 100%; }

.dirA .rxq-preview > .rx-labeltab .rx-labeltab-bar {
  flex: none;
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--sp-8);
  border-bottom: 1px solid var(--A-rule-2);
  overflow: hidden;
}

.dirA .rxq-preview > .rx-labeltab .crx-label-box {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-12) 0;
  background: var(--A-surface-2);
}

.dirA .rxq-preview > .rx-labeltab .rx-labeltab-name,
.dirA .rxq-preview > .rx-labeltab .rx-labeltab-paper {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dirA .rxq-preview > .rx-labeltab .rx-labeltab-bar .btn { flex: none; height: 26px; box-sizing: border-box; }

/* The header carries both the hide control and Close. */
.dirA .rxq-head-acts { display: inline-flex; align-items: center; gap: var(--sp-8); flex: none; }

/* Nothing picked: the second column says so rather than standing empty. */
.dirA .rxq-blank {
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}

.dirA .rxq-blank p { margin: 0; }

/* A level below again: a location's addresses, indented so the nesting is visible. */
.dirA .mst-child .mst-child {
  margin-top: var(--sp-12);
  margin-left: var(--sp-12);
  padding-left: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 0;
  border-left: 2px solid var(--A-rule);
}

/* ---------- Sidebar sections ----------

   Work, Records and Back office. Headings rather than controls: the sections never collapse,
   so the sidebar has the same shape every time it is opened and a destination stays where it
   was yesterday. */

/* 6 and 6 rather than 10 and 10: the rule has to read as the end of one section, and the
   gap either side of it was doing that three times over -- margin, padding, and then the
   heading's own lead -- which left the border floating well below the last link. */
.dirA .sidebar-sec + .sidebar-sec {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--A-rule-2);
}

.dirA .sidebar-sec-head {
  margin: 0;
  padding: var(--sp-2) var(--sp-12) var(--sp-4);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--A-fg-4);
}

/* Collapsed to the rail there is no room for a word, and the rule alone still separates one
   section from the next. */
body.crx-chrome.fullwidthPanel .sidebar-sec-head { display: none; }

/* ---------- Beside the rail (shell/Sidebar) ----------
   The name of the icon under the pointer, and, for a module, its submodules — so a collapsed
   sidebar is still a sidebar rather than a row of guesses. Portalled to <body>, because the
   rail clips its own overflow. */

.dirA .nav-fly {
  position: fixed;
  z-index: 1045;
  min-width: 150px;
  max-width: 260px;
  padding: var(--sp-6) 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  box-shadow: 0 10px 30px rgb(16 24 40 / 14%);
  animation: nav-fly-in .12s var(--ease-out);
}

/* A name alone is a tooltip, so it is a label rather than a menu with one line in it. */
.dirA .nav-fly-head {
  display: block;
  padding: var(--sp-4) var(--sp-12);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg);
  white-space: nowrap;
}

.dirA .nav-fly.has-items .nav-fly-head {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--A-rule-2);
}

/* The submodules stand on their own here: there is no parent row above them to hang off. */
.dirA .nav-fly .sidebar-link.nav-child {
  margin-left: 0;
  padding-left: var(--sp-12);
  white-space: nowrap;
}

@keyframes nav-fly-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dirA .nav-fly { animation: none; }
}

/* ---------- POS checkout ----------
   Taking the money sits under the list it is for, as a panel rather than a dialog: the
   orders being paid for stay on screen while the amounts are entered. */
.dirA .pos-checkout {
  margin-top: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .pos-checkout-h {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-12);
  background: var(--A-surface-2);
  border-bottom: 1px solid var(--A-rule-2);
  font-size: var(--text-label);
}

.dirA .pos-checkout-title { font-weight: 600; color: var(--A-fg); }

.dirA .pos-checkout-count {
  padding: 1px var(--sp-6);
  border-radius: 999px;
  background: var(--A-tint);
  color: var(--A-accent);
  font-size: var(--text-meta);
  font-weight: 600;
}

.dirA .pos-checkout-patient { color: var(--A-fg-2); }

/* The amount is the point of the panel, so it sits at the far end in its own weight. */
.dirA .pos-checkout-total { margin-left: auto; color: var(--A-fg-2); }
.dirA .pos-checkout-total b { font-size: var(--text-body); color: var(--A-fg); }
.dirA .pos-checkout-total em { font-style: normal; color: var(--A-fg-3); }

.dirA .pos-checkout-body { padding: var(--sp-12); }

.dirA .pos-checkout-settled {
  margin: 0;
  padding: var(--sp-12);
  color: var(--A-fg-3);
  font-size: var(--text-label);
}

.dirA .pos-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--A-rule-2);
}

/* ---------- Split payment ---------- */
.dirA .pos-tenders { margin-top: var(--sp-10); }

.dirA .pos-tender {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--A-rule-2);
}

.dirA .pos-tender-row {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
}

/* The amount and the button that fills it to the balance, as one control. */
.dirA .pos-tender-amt { position: relative; flex: 1; min-width: 0; }
.dirA .pos-tender-amt .field-row { margin: 0; }

/* Inside the box, at its right edge: the field is already as narrow as the row allows. */
.dirA .pos-fill-rest {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--A-radius);
  background: var(--A-tint);
  color: var(--A-accent);
  cursor: pointer;
  transition: background .14s ease;
}
.dirA .pos-fill-rest:hover { background: var(--navy-100); }
.dirA .pos-fill-rest:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 1px; }

/* Out of flow, so neither the CI$ equivalent nor a refusal grows the cell and drops the
   method and the currency beside it half a line. The row makes room for them instead. */
.dirA .pos-tender-amt .field-error,
.dirA .pos-tender-amt .field-hint {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 3px 0 0;
  font-size: var(--text-meta);
}
.dirA .pos-tender-amt .field-hint { color: var(--A-fg-3); font-variant-numeric: tabular-nums; }
.dirA .pos-tender:has(.field-error),
.dirA .pos-tender:has(.field-hint) { padding-bottom: var(--sp-16); }

/* Room for the button, so a four-figure amount does not run under it. */
.dirA .pos-tender-amt .input { padding-right: 32px; }

/* Under the payment it belongs to, indented past its number so the two read as one. */
.dirA .pos-tender-card {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
  margin: var(--sp-8) 0 var(--sp-2) 28px;
}
.dirA .pos-tender-card > .combo { flex: none; width: 140px; }
.dirA .pos-tender-card > .field-row { flex: 1; min-width: 0; }

.dirA .pos-tender-n {
  width: 20px; height: 20px;
  margin-bottom: var(--sp-4);
  border-radius: 999px;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.dirA .pos-tender-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

/* Zero is the answer being looked for, so it is stated plainly and only lights up when not. */
.dirA .pos-remaining { margin-left: auto; color: var(--A-fg-3); font-size: var(--text-label); }
.dirA .pos-remaining b { color: var(--A-fg); }
.dirA .pos-remaining.is-open b { color: var(--danger); }

@media (max-width: 767px) {
  .dirA .pos-checkout-h { flex-wrap: wrap; }
  .dirA .pos-checkout-total { margin-left: 0; width: 100%; }
  .dirA .pos-tender-row,
  .dirA .pos-tender-card { flex-wrap: wrap; }
}

/* The till's icons are the whole control, not a hint beside text. */
.dirA .till.is-orders .row-action { width: 24px; height: 24px; }
.dirA .till.is-orders .row-action svg { width: 16px; height: 16px; }
.dirA .till.is-orders .row-actions { gap: var(--sp-2); }

/* The order card, the open order's header and the drugs inside it all act on a whole
   record rather than on one row of a grid, so they carry the larger button. */
.dirA .till.is-orders :is(.disp-card-acts, .disp-open-h, .drg-card) .row-action {
  width: 30px;
  height: 30px;
  border-radius: var(--A-radius-md);
}

.dirA .till.is-orders :is(.disp-card-acts, .disp-open-h, .drg-card) .row-action svg {
  width: 20px;
  height: 20px;
}

.dirA .till.is-orders :is(.disp-card-acts, .disp-open-h, .drg-card) .row-actions { gap: var(--sp-4); }

/* Room for the fullest set a card can show, so a card offering fewer leaves the gap rather
   than sliding everything before it along. */
.dirA .till.is-orders .disp-card-acts .row-actions {
  flex: none;
  min-width: 152px;
  justify-content: flex-end;
}
.dirA .till.is-orders :is(.disp-card-acts, .disp-open-h, .drg-card) .row-actions-split { margin: 5px var(--sp-6); }

/* The whole card is the target, as the hit area says it is: the button stretches over the
   amount, the tags and the grey strip. Only the actions are lifted clear of it. */
.dirA .disp-card { position: relative; }
.dirA .disp-card-hit::after { content: ""; position: absolute; inset: 0; }
.dirA .disp-card :is(.row-actions, .disp-card-acts) { position: relative; z-index: 1; }

/* Nothing in the cart, no cart column: two columns, who is here and what went out. */
.dirA .till.no-cart { grid-template-columns: 260px minmax(0, 1fr); }

/* Lets go of the picked patient, back to the latest orders. */
.dirA .till-col-x {
  flex: none;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--A-radius);
  background: transparent; color: var(--A-fg-3);
  cursor: pointer; padding: 0;
}

.dirA .till-col-x:hover { background: var(--A-surface-2); color: var(--A-fg); }

/* Whose order it is, which only the latest list has to say. */
.dirA .till-order-who {
  font-weight: 600;
  color: var(--A-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* The third column: what to read about this patient, then the sale being rung up. */
.dirA .till-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  min-height: 0;
  min-width: 0;
}

/* The messages are sized by what they say, capped so a dozen of them cannot squeeze the
   cart out of sight. They do not shrink: the cart takes the rest of the column and scrolls,
   so adding an order fills the cart rather than pushing the messages into a slot. */
.dirA .till-side .till-notes { flex: 0 0 auto; max-height: 38%; }
.dirA .till-side .till-cart { flex: 1 1 0; min-height: 0; }

.dirA .till-notes .till-col-h { background: var(--warning-100); border-bottom-color: var(--warning); }
.dirA .till-notes .till-col-t { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); }
.dirA .till-notes .till-col-n { background: var(--warning); }
.dirA .till-notes .till-note:last-child { margin-bottom: 0; }

/* Finishing the sale: over the foot of the till rather than below it, so the columns
   keep their full height and the bar floats in front of them. */
.dirA .till-bar {
  position: absolute;
  left: 50%;
  bottom: var(--sp-16);
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100% - var(--sp-24));
  padding: var(--sp-10) var(--sp-20);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  box-shadow: 0 8px 28px rgb(16 24 40 / 18%);
}

.dirA .till-bar-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-16);
}

/* The one button the till is for, so it is found without being looked for. */
.dirA .till-bar-go {
  height: 44px;
  padding: 0 var(--sp-24);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 650;
}

/* Beside it rather than under it: the same shape, without the weight. */
.dirA .till-bar .btn:not(.till-bar-go) {
  height: 36px;
  padding: 0 var(--sp-16);
  border-radius: 999px;
}

.dirA .till-bar-who { color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .till-bar-who b { color: var(--A-fg-2); font-weight: 600; }

.dirA .till-bar-total { display: inline-flex; align-items: baseline; gap: var(--sp-8); }
.dirA .till-bar-total i { font-style: normal; color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .till-bar-total strong { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.dirA .till-bar-warn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 0 var(--sp-8);
  color: var(--danger);
  font-size: var(--text-meta);
}

/* ---------- Who the payment link goes to (pos/PaymentLinkRecipients) ---------- */

.dirA .plr-wait { display: grid; gap: var(--sp-8); }

/* What the link is for, stated once at the top so the address is chosen with it in view. */
.dirA .plr-sum {
  display: flex; align-items: baseline; gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--A-radius-md);
  background: var(--A-tint);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}
.dirA .plr-sum strong {
  margin-left: auto;
  color: var(--A-fg);
  font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dirA .plr-sum em { font-style: normal; }

.dirA .plr-test {
  display: flex; align-items: flex-start; gap: var(--sp-8);
  margin: var(--sp-10) 0 0;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--warning);
  border-radius: var(--A-radius);
  background: var(--warning-100);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  line-height: 1.45;
}
.dirA .plr-test svg { flex: none; margin-top: 2px; color: var(--warning); }
.dirA .plr-test b { word-break: break-all; }

.dirA .plr-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: var(--sp-16);
}
.dirA .plr-title { font-size: var(--text-meta); font-weight: 600; color: var(--A-fg-2); }

/* Says what is still needed, then what has been done. */
.dirA .plr-count { font-size: var(--text-meta); color: var(--A-fg-4); }
.dirA .plr-count.is-on { color: var(--A-accent); font-weight: 600; }

.dirA .plr-list { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: grid; gap: var(--sp-6); }

/* The whole card is the hit area: a 16px box is a poor target for a quick send. */
.dirA .plr-row {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.dirA .plr-row:hover { border-color: var(--A-rule-strong); box-shadow: 0 2px 8px rgb(16 24 40 / 7%); }
.dirA .plr-row.is-on { border-color: var(--A-accent); background: var(--A-tint); }

/* The native box drives it and keeps the keyboard; the ring is what is seen. */
.dirA .plr-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.dirA .plr-tick {
  flex: none;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--A-rule-strong);
  border-radius: 999px;
  color: transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.dirA .plr-row.is-on .plr-tick {
  border-color: var(--A-accent);
  background: var(--A-accent);
  color: #fff;
}
.dirA .plr-row input:focus-visible ~ .plr-tick {
  outline: 2px solid var(--A-accent);
  outline-offset: 2px;
}

.dirA .plr-addr {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--A-fg);
}

/* A row that was just added is pointed out, so it is clear where it landed. */
@keyframes plr-landed {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.dirA .plr-row.is-new { animation: plr-landed .22s ease-out; }

.dirA .plr-none {
  display: flex; align-items: center; gap: var(--sp-10);
  margin: var(--sp-8) 0 0;
  padding: var(--sp-14) var(--sp-12);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}
.dirA .plr-none svg { flex: none; color: var(--A-fg-4); }

.dirA .plr-add-label { display: block; margin-top: var(--sp-16); }

/* One control, not a field beside a button: the glyph, the box and Add share a border. */
.dirA .plr-add {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding: 4px 4px 4px var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.dirA .plr-add:focus-within { border-color: var(--A-accent); box-shadow: 0 0 0 3px var(--A-tint); }
.dirA .plr-add.is-wrong { border-color: var(--danger); }
.dirA .plr-add > svg { flex: none; color: var(--A-fg-4); }
.dirA .plr-add input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  padding: 6px 0;
  color: var(--A-fg); font: inherit;
}
.dirA .plr-add .btn { flex: none; }

.dirA .plr-note { margin: var(--sp-6) 0 0; color: var(--A-fg-4); font-size: var(--text-meta); }
.dirA .plr-note.is-wrong { color: var(--danger); }

/* The drug count: a number in a ring, not a sentence repeating "drugs" down the list. */
.dirA .disp-card-n {
  flex: none;
  min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--A-rule-strong);
  border-radius: 999px;
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A badge carrying a glyph sets it against the words rather than beside a dot. */
.dirA .badge.has-icon { display: inline-flex; align-items: center; gap: 5px; }
.dirA .badge.has-icon svg { flex: none; opacity: .85; }
/* The glyph alone carries the meaning, so it is drawn larger and the chip closes in. */
.dirA .badge.has-icon.is-bare { padding: 3px 6px; }
.dirA .badge.has-icon.is-bare svg { width: 17px; height: 17px; opacity: 1; }

/* The drugs inside an order carry the same actions, so they carry the same ink. */
.dirA .drg-card .row-action:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Above the card's click overlay, so hovering it names the delivery method. */
.dirA .disp-ship { position: relative; z-index: 1; display: inline-flex; cursor: pointer; }

/* The open order's patient over its prescriber, so the name is read first and alone. */
.dirA .disp-open-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dirA .disp-open-who .till-col-t { line-height: 1.25; }
.dirA .disp-open-by {
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A link without the arrow: the patient above it already carries one, and two in a corner
   of four words was more punctuation than name. */
.dirA .disp-open-by a { color: inherit; text-decoration: none; }
.dirA .disp-open-by a:hover { color: var(--A-accent); text-decoration: underline; }

/* Its own target, above the card's click overlay. The pencil waits for the cursor. */
.dirA .disp-card-no { position: relative; z-index: 1; }
.dirA .disp-card-no svg { opacity: 0; transition: opacity .12s ease; }
.dirA .disp-card-no:hover svg { opacity: .7; }

/* ---- the status, welded to the one move allowed from it ---- */

/* Above the card's click overlay: pressing the move must not also open the drugs. */
/* The one thing on the card worth filling in, so it is the only filled thing on it. */
.dirA .disp-ready {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: 36px;
  margin-right: var(--sp-10);
  /* Tighter on the icon side, where the glyph sits in its own well. */
  padding: 0 var(--sp-16) 0 5px;
  border: 0;
  border-radius: 999px;
  /* Barely a shade deep -- just enough for the surface to catch light at the top. */
  background: linear-gradient(180deg, #3A8F5E 0%, var(--success) 100%);
  color: #fff;
  font: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  /* Elevation in the button's own colour rather than grey: it belongs to the button. */
  box-shadow: 0 1px 2px rgb(46 125 79 / 24%), 0 2px 10px -2px rgb(46 125 79 / 30%);
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dirA .disp-ready:hover {
  background: linear-gradient(180deg, var(--success) 0%, #256A43 100%);
  box-shadow: 0 2px 4px rgb(46 125 79 / 26%), 0 8px 18px -4px rgb(46 125 79 / 38%);
  transform: translateY(-1px);
}
/* Pressed, it goes back down and the shadow closes up under it. */
.dirA .disp-ready:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgb(46 125 79 / 30%);
}
.dirA .disp-ready:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 2px; }

/* The glyph in a well of its own, so the icon and the words are two things, not one blur. */
.dirA .disp-ready .disp-ready-ico {
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: 18px; height: 18px;
  padding: 4px;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dirA .disp-ready .disp-ready-ico svg {
  width: 18px; height: 18px;
  transition: opacity .15s ease;
}

/* The lid turns on its own left corner, so it hinges off the box rather than sliding. */
.dirA .disp-ready .ico-box-lid {
  transform-box: view-box;
  transform-origin: 3.4px 8.3px;
}

.dirA .disp-ready:hover .ico-box-lid { animation: box-lid 1.4s ease-in-out infinite; }

@keyframes box-lid {
  0%, 10%   { transform: none; }
  38%       { transform: translateY(-2.6px) rotate(-13deg); }
  62%       { transform: translateY(-2.6px) rotate(-13deg); }
  88%, 100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dirA .disp-ready:hover .ico-box-lid { animation: none; }
}

/* ---------- Notes, beside the status it annotates ---------- */

.dirA .disp-notes {
  /* It sits inside the card's hit area, so it has to be lifted clear of the overlay that
     makes the whole card open the order. */
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 2px var(--sp-8);
  border: 1px solid var(--warning-100);
  border-radius: 999px;
  background: var(--warning-100);
  color: #8A6508;
  font: inherit;
  font-size: var(--text-meta);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.dirA .disp-notes:hover { border-color: #E2C37F; }
.dirA .disp-notes svg { flex: none; opacity: .85; }

.dirA .stp { position: relative; z-index: 2; display: inline-flex; align-items: stretch; }

.dirA .stp > .badge { border-radius: 3px 0 0 3px; padding-right: var(--sp-6); }

/* Its own segment of the same pill, in the colour of the step it leads to. */
.dirA .stp-adv {
  flex: none;
  width: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--A-surface);
  border-radius: 0 3px 3px 0;
  background: var(--success-100);
  color: var(--success);
  cursor: pointer;
}

.dirA .stp-adv:hover { background: var(--success); color: #fff; }
.dirA .stp-adv:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 1px; }

/* Emailing the receipt the till has just printed. */
.dirA .pos-email { display: flex; flex-direction: column; gap: var(--sp-8); }
.dirA .pos-email-pick { display: flex; align-items: center; gap: var(--sp-8); cursor: pointer; }
.dirA .pos-email-pick input { accent-color: var(--A-accent); }
.dirA .pos-email-pick input:disabled + span { color: var(--A-fg-4); }

.dirA .pos-email-field {
  padding: var(--sp-6) var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
}

.dirA .pos-email-subject {
  display: flex; gap: var(--sp-8);
  margin: 0;
  color: var(--A-fg-2);
  font-size: var(--text-meta);
}
.dirA .pos-email-subject i { font-style: normal; color: var(--A-fg-3); }

/* Three short lists side by side while nobody is picked: oldest debt, newest, and what is
   about to fall due. They stack on a narrow screen. */
.dirA .brief-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-16);
  align-items: start;
}

.dirA .brief-row-d.is-soon { color: var(--A-fg-3); }

/* The out-of-date warning raised before a refill goes through. */
.dirA .rx-lapsed p { margin: 0 0 var(--sp-10); }
.dirA .rx-lapsed ul { margin: 0 0 var(--sp-10); padding-left: var(--sp-16); }
.dirA .rx-lapsed li { margin-bottom: var(--sp-4); }
.dirA .rx-lapsed li i { color: var(--A-fg-3); font-style: normal; }
.dirA .rx-lapsed-how { color: var(--A-fg-3); font-size: var(--text-meta); }

/* Says why the open patient is sitting above a list they are not part of. */
.dirA .till-pinned {
  margin: 2px 0 var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--A-rule);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  text-align: center;
}

/* What the prescription page is working on, beside its title. */
.dirA .rx-page-what {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-6);
  margin-left: var(--sp-10);
  padding: 2px var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: 3px;
  background: var(--A-surface-2);
  font-size: var(--text-meta);
  font-weight: 500;
  vertical-align: middle;
}

.dirA .rx-page-what i {
  font-style: normal;
  color: var(--A-fg-3);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
}

/* The patient's own column, hidden the way the side panel is. */
.crx-chart-grid.is-rail-hidden > #patient-rail-root { display: none; }

/* ---- the Rx profile, one card per prescription ---- */

.dirA .rxp {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .rxp-body {
  padding: var(--sp-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The tab pane is already a bounded scroll box: each wrapper passes that height down, so
   the cards are the only thing that scrolls. */
/* The tab History covers keeps its .active class, so this is shut out while it shows. */
body.crx-patient-page .crx-patient-setup:not(.is-history) > .tab-content:has(> #QuickAccess.active) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.crx-patient-page .crx-patient-setup:not(.is-history) :is(
  #QuickAccess,
  #QuickAccess > div,
  #patient-rxprofile-root,
  #patient-rxprofile-root > .dirA,
  #patient-rxprofile-root .rx-profile,
  #patient-rxprofile-root .rxp
) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body.crx-patient-page .crx-patient-setup:not(.is-history) .rxp-body { flex: 1; min-height: 0; }

/* Stacked, nothing is boxed, so the list runs its full length with the page. */
@media (max-width: 900px) {
  body.crx-patient-page .rxp-body { overflow: visible; }
}

.dirA .rxp-card {
  margin: var(--sp-6) 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .rxp-card:hover { border-color: var(--A-rule-strong); }
.dirA .rxp-card.is-on { border-color: var(--A-accent); box-shadow: inset 3px 0 0 var(--A-accent); }

/* The card opens the prescription: the link covers it, and every control on the card is
   lifted over the link so its own click still lands. */
.dirA .rxp-main { position: relative; }

.dirA .rxp-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--A-radius-sm);
}

.dirA .rxp-open:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 2px; }
.dirA .rxp-card:hover .rxp-open { cursor: pointer; }

.dirA .rxp-main .rxp-tick,
.dirA .rxp-main .rxp-drug a,
.dirA .rxp-main .rxp-by a,
.dirA .rxp-main .till-fact a,
.dirA .rxp-main .row-actions,
.dirA .rxp-main .disp-notes,
.dirA .rxp-main .rxp-more { position: relative; z-index: 2; }

.dirA .rxp-head { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; }
.dirA .rxp-tick { flex: none; width: 16px; height: 16px; accent-color: var(--A-accent); }

.dirA .rxp-drug {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--A-fg);
}
.dirA .rxp-drug a { color: inherit; text-decoration: none; }
.dirA .rxp-drug a:hover { color: var(--A-accent); text-decoration: underline; }

/* Centred on the header's own line, whatever height the row takes. */
.dirA .rxp-head .row-actions { flex: none; margin-left: auto; align-self: center; }

/* The badge for how it went out sits with the numbers, so it reads at their size. */
.dirA .rx-fill-facts .badge { flex: none; }
.dirA .rxp .row-action { width: 26px; height: 26px; }
.dirA .rxp .row-action svg { width: 16px; height: 16px; }
/* One ink, as on the dispensing queue. data-grid.css loads later and colours archive,
   unarchive, void and delete, so those are named too. */
.dirA .rxp .row-action,
.dirA .rxp .row-action:is(.is-archive, .is-unarchive, .is-void, .is-delete, .is-partial) { color: var(--A-fg-2); }

/* Ending a prescription is the one that still warns before it is pressed. */
.dirA .rxp .row-action:is(.is-void, .is-delete):hover { color: var(--danger); }

.dirA .rxp .row-action:not(.is-void):not(.is-delete):hover {
  color: var(--A-accent);
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Line 1 names the script and says where it stands; line 2 is what the drug is and
   who wrote it; line 3 the numbers. */
.dirA .rxp-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-6);
  padding-left: 26px;
  min-width: 0;
}
.dirA .rxp-by { color: var(--A-fg-2); font-size: var(--fs-13); min-width: 0; }
.dirA .rxp-by i { font-style: normal; text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--fs-11); color: var(--A-fg-3, var(--A-fg-2)); margin-right: var(--sp-4); }
.dirA .rxp-by a { color: inherit; }

.dirA .rxp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  margin-top: var(--sp-6);
  padding-left: 26px;
}
.dirA .rxp-facts a { color: inherit; }

/* The way in on the left, everything it can do on the right. */
.dirA .rxp-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  padding-left: 26px;
}

.dirA .rxp-foot .row-actions { margin-left: auto; }

.dirA .rxp-plan { margin: 0 0 var(--sp-8); }

.dirA .rxp-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--A-fg-3);
  font-size: var(--text-meta);
  cursor: pointer;
}
.dirA .rxp-more:hover { color: var(--A-accent); }
.dirA .rxp-more svg { transition: transform .14s ease; }
.dirA .rxp-more.is-open svg { transform: rotate(90deg); }

.dirA .rxp-fills { margin: var(--sp-8) 0 0 26px; }

/* Only while something is ticked. */
.dirA .rxp-bulk {
  display: flex;
  align-items: center;
  /* Four actions can be offered at once, and the profile pane is not wide. */
  flex-wrap: wrap;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-tint);
  font-size: var(--text-meta);
  font-weight: 600;
}
.dirA .rxp-bulk > span { margin-right: auto; }


/* The rail's buttons are one stack: the two anchors centre themselves inline, and the
   scan button is a <button> with the class 'btn', which that rule never reached. */
.dirA .pt-summary .btn { justify-content: center; width: 100%; }

/* The Rx Profile opens on its filters. #editor is a dead placeholder from the Kendo page
   and was holding a line's worth of space between them and the tabs. */
.crx-patient-setup #editor:empty { display: none; }
.crx-patient-setup #patient-rxprofile-root > .dirA > .rx-profile > .crx-filter-bar:first-child {
  margin-top: 0;
}

/* The island is the whole tab, so the pane adds nothing above its first filter bar. */
.crx-patient-setup .tab-content > .tab-pane#QuickAccess { padding-top: 0; }
.crx-patient-setup #patient-rxprofile-root > .dirA { margin-top: 0; }


/* ---------- Duplicate patient records ---------- */

.dirA .dup-find {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 320px;
  height: 30px;
  padding: 0 var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg-3);
}

.dirA .dup-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--A-fg);
}

.dirA .dup-bar-end { margin-left: auto; display: inline-flex; gap: var(--sp-8); }

.dirA .dup-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-16);
  padding: var(--sp-8) var(--sp-2);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .dup-counts b { color: var(--A-fg); font-variant-numeric: tabular-nums; }
.dirA .dup-counts-filter { margin-left: auto; }

/* Finding a pair by hand: a second way in, so it is set apart from the list it feeds. */
.dirA .dup-manual {
  margin-bottom: var(--sp-12);
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .dup-manual > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); }
.dirA .dup-manual > header > span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .dup-manual-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}

.dirA .dup-picked { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-8); }

.dirA .dup-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 2px var(--sp-4) 2px var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  font-size: var(--text-meta);
}

.dirA .dup-chip button {
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--A-fg-3);
  cursor: pointer;
}

.dirA .dup-chip button:hover { color: var(--danger); background: var(--danger-100); }

.dirA .dup-list { display: flex; flex-direction: column; gap: var(--sp-8); }

.dirA .dup-card {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .dup-card:hover { border-color: var(--A-rule-strong); }
.dirA .dup-card-main { flex: 1; min-width: 0; }

.dirA .dup-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-10);
}

.dirA .dup-card-n { font-size: var(--text-body); font-weight: 600; color: var(--A-fg); }

.dirA .dup-members { margin: var(--sp-6) 0 0; padding: 0; list-style: none; }

.dirA .dup-members li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .dup-members .mono { color: var(--A-fg-3); }
.dirA .dup-empty { color: var(--A-fg-4); font-style: italic; }

.dirA .dup-flag {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  margin: var(--sp-6) 0 0;
  font-size: var(--text-meta);
  color: var(--danger);
}

.dirA .dup-card-acts { flex: none; display: inline-flex; align-items: center; gap: var(--sp-6); }

.dirA .dup-note { margin: 0 0 var(--sp-12); font-size: var(--text-body); color: var(--A-fg-2); }
.dirA .dup-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.dirA .dup-field > span { font-size: var(--text-label); color: var(--A-fg-2); }

/* The three lists this page holds, above whichever one is showing. */
.dirA .dup-views { display: flex; margin-bottom: var(--sp-12); }

.dirA .dup-bulk {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

.dirA .dup-bulk > span { margin-right: auto; }
.dirA .dup-pick { flex: none; display: flex; align-items: center; }
.dirA .dup-pick input { width: 16px; height: 16px; accent-color: var(--A-accent); }
.dirA .dup-id { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .dup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  margin-top: var(--sp-6);
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* ---------- Approvals: a list of claims waiting on somebody ---------- */

.dirA .apr {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

.dirA .apr-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-8); }

.dirA .apr-card {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: var(--sp-6) 0;
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .apr-card:hover { border-color: var(--A-rule-strong); }
.dirA .apr-card-main { flex: 1; min-width: 0; }
.dirA .apr-card-acts { flex: none; }

.dirA .apr-card-top,
.dirA .apr-card-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
}

.dirA .apr-card-who { margin-top: var(--sp-4); }
.dirA .apr-card-n { font-size: var(--text-body); font-weight: 600; color: var(--A-fg); }

/* What was typed when the write-off was asked for. */
.dirA .apr-note {
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-10);
  border-left: 2px solid var(--A-rule);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .apr-lines { margin: var(--sp-8) 0 0; padding: 0; list-style: none; }

.dirA .apr-lines > li {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--A-rule-2);
}

.dirA .apr-line-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.dirA .apr-line-top .mono { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .apr-line-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-12);
  margin-top: var(--sp-4);
}

/* What acts on the ticked claims, in the list's own header. */
.dirA .apr-acts { display: inline-flex; align-items: center; gap: var(--sp-6); }
.dirA .apr-card.is-on { border-color: var(--A-accent); background: var(--A-tint); }

/* Claims go out together only when they share a patient and a claim id, so once one is
   ticked the rest of the list says so by going quiet. */
.dirA .apr-card.is-barred { opacity: .45; }

.dirA .apr-picked {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
  background: var(--A-tint);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

.dirA .apr-picked button {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--A-accent);
  font: inherit;
  cursor: pointer;
}

.dirA .apr-picked button:hover { text-decoration: underline; }

/* The amount filter is one question in two controls: how to compare, and to what. */
.dirA .pay-amount { display: inline-flex; align-items: center; gap: var(--sp-6); }
.dirA .pay-amount .input { width: 120px; }

/* Money on a payment nobody has allocated yet: the reason to open it. */
.dirA .is-owed { color: var(--red-700); font-weight: 600; }

/* A charge nobody has settled, so the row says so without being read column by column. */
.dirA .is-owed-row > td:first-child { box-shadow: inset 2px 0 0 var(--warning); }

/* Money going back out. */
.dirA .is-refund { color: var(--danger); font-weight: 600; }

/* ---------- Today's takings: the day's money, above the sales that make it up ---------- */

.dirA .tk-band-wait { height: 46px; margin-bottom: var(--sp-10); border-radius: var(--A-radius-md); }

/* The day on one line; the breakdown earns its place by staying on it. */
.dirA .tk-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6) var(--sp-16);
  margin-bottom: var(--sp-10);
  padding: var(--sp-8) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .tk-sum { display: inline-flex; align-items: baseline; gap: var(--sp-6); }
.dirA .tk-sum > i {
  font-style: normal;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--A-fg-3);
}
.dirA .tk-sum > b { font-size: var(--text-title); font-variant-numeric: tabular-nums; }

.dirA .tk-count { color: var(--A-fg-3); font-size: var(--text-meta); }

/* To the right of the total: a way into the list, not a chart. */
.dirA .tk-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-6);
  margin-left: auto;
  padding: 3px var(--sp-8);
  border: 1px solid var(--A-rule);
  border-radius: 999px;
  background: var(--A-surface);
  color: inherit;
  font: inherit;
  font-size: var(--text-meta);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
/* Only the first is pushed over; the rest follow it. */
.dirA .tk-chip ~ .tk-chip { margin-left: 0; }

.dirA .tk-chip:hover { border-color: var(--A-rule-strong); }
.dirA .tk-chip.is-on { border-color: var(--A-accent); background: var(--A-tint); }

.dirA .tk-chip svg { align-self: center; color: var(--A-fg-3); }
.dirA .tk-chip > span { color: var(--A-fg-2); }
.dirA .tk-chip > span > i {
  margin-left: var(--sp-4);
  font-style: normal;
  letter-spacing: var(--tracking-caps);
  color: var(--A-fg-3);
}
/* One figure per currency the method took. */
.dirA .tk-chip > b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dirA .tk-chip > b + b::before {
  content: "·";
  margin-right: var(--sp-6);
  font-weight: 400;
  color: var(--A-fg-4);
}
/* The one the Currency filter is showing, when it is set. */
.dirA .tk-chip > b.is-on { color: var(--A-accent); }

/* How many payments made it up -- a quiet count, not a second amount. */
.dirA .tk-chip > em {
  font-style: normal;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--A-surface-2);
  color: var(--A-fg-3);
}

/* ---- the grid's own cells ---- */

.dirA .tk-time { font-variant-numeric: tabular-nums; }

/* The tail is what tells two invoices apart, so the head is what gets clipped. */
.dirA .tk-inv {
  display: block;
  direction: rtl;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--A-fg-2);
}

/* ---- what one sale was settled with ---- */

.dirA .tk-detail { padding: var(--sp-12) var(--sp-4); }

.dirA .tk-detail-rx {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-6);
  margin: 0 0 var(--sp-10);
}
.dirA .tk-detail-rx i {
  font-style: normal;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--A-fg-3);
}
.dirA .tk-detail-rx b {
  padding: 1px var(--sp-6);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
}

.dirA .tk-tenders {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-8);
}

/* Each payment is its own card: a split is several things that happened, not one list. */
.dirA .tk-tender {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  /* Stretched to the tallest card, so centring keeps a payment with no reference level. */
  align-content: center;
  gap: var(--sp-4) var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-rule-strong);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}
.dirA .tk-tender.is-back { border-left-color: var(--danger); background: var(--danger-100); }

.dirA .tk-tender-ico {
  grid-row: span 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--A-surface-2);
  color: var(--A-fg-2);
}

.dirA .tk-tender-head { display: inline-flex; align-items: baseline; gap: var(--sp-6); min-width: 0; }
.dirA .tk-tender-head b { font-weight: 600; }
.dirA .tk-tender-head i {
  font-style: normal;
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-caps);
  color: var(--A-fg-3);
}

.dirA .tk-tender-sum {
  display: inline-flex; align-items: baseline; gap: var(--sp-4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dirA .tk-tender-sum i { font-style: normal; font-size: var(--text-meta); font-weight: 500; color: var(--A-fg-3); }
.dirA .tk-tender.is-back .tk-tender-sum { color: var(--danger); }

/* The facts run under the money, across the two columns the icon does not hold. */
.dirA .tk-tender-facts {
  grid-column: 2 / -1;
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12);
  min-width: 0;
}
.dirA .tk-tender-facts:empty { display: none; }
.dirA .tk-tender-facts .till-fact > b { word-break: break-all; }

/* A badge in the card sits on its own line when there is one. */
.dirA .tk-tender > .badge { grid-column: 2 / -1; justify-self: start; }

/* ---------- Scanning a delivery ---------- */

/* The decoders draw the camera into this element by id, so it only sets the box. */
.dirA .qr-view {
  width: 100%;
  min-height: 240px;
  margin-bottom: var(--sp-10);
  border-radius: var(--A-radius-md);
  background: var(--ink);
  overflow: hidden;
}

.dirA .qr-view.is-done { display: none; }
/* The decoders inject their own <video>; it fills the box rather than setting its height. */
.dirA .qr-view { position: relative; aspect-ratio: 1 / 1; }
.dirA .qr-view video, .dirA .qr-view canvas {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.dirA .qr-tap { width: 100%; justify-content: center; margin-bottom: var(--sp-10); }

.dirA .qr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.dirA .qr-camera { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--text-meta); }
.dirA .qr-camera select { height: 30px; border: 1px solid var(--A-rule); border-radius: var(--A-radius); }

/* A file input is not something anyone wants to look at, so the label is the button. */
.dirA .qr-upload { position: relative; overflow: hidden; cursor: pointer; }
.dirA .qr-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dirA .qr-error {
  margin: var(--sp-10) 0 0;
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--A-radius);
  background: var(--danger-100);
  color: var(--danger);
  font-size: var(--text-body);
}

.dirA .qr-found dl { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin: var(--sp-10) 0 0; }
.dirA .qr-found dl > div { display: flex; gap: var(--sp-10); }
.dirA .qr-found dt { flex: none; width: 96px; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .qr-found dd { margin: 0; font-weight: 600; color: var(--A-fg); }

/* ---------- The float, counted morning and night ---------- */

/* Records left, counting right. Fills the frame, so the panels scroll rather than the page. */
.dirA .dayp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: stretch;
  gap: var(--sp-14);
  flex: 1 1 auto;
  min-height: 0;
}
.dirA .dayp.no-count { grid-template-columns: minmax(0, 1fr); }

/* Only as tall as the counting needs; it scrolls itself if the window is shorter. */
.dirA .dayp > .flt {
  align-self: start;
  max-height: 100%;
  overflow: auto;
}

@media (max-width: 1100px) {
  /* Stacked: the counter first, and one scroller rather than two small ones. */
  .dirA .dayp {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    overflow: auto;
  }
  .dirA .dayp > .flt { order: -1; max-height: none; overflow: visible; }
  .dirA .dayp > .dayl { max-height: none; }
  .dirA .dayl-list { overflow: visible; }
}

/* ---- the run of past counts ---- */

.dirA .dayl {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .dayl-h {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-12);
  border-bottom: 1px solid var(--A-rule);
}
.dirA .dayl-h .field-search { flex: 1 1 auto; min-width: 0; max-width: 340px; }
.dirA .dayl-acts { display: inline-flex; align-items: center; gap: var(--sp-8); margin-left: auto; }

/* The only part that scrolls; the search and pager stay put. */
.dirA .dayl-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--sp-8);
  padding: var(--sp-12);
}

.dirA .dayl-h,
.dirA .dayl-foot { flex: none; }

.dirA .dayl-foot {
  padding: var(--sp-8) var(--sp-12);
  border-top: 1px solid var(--A-rule);
}

/* ---- one past count ---- */

.dirA .dayc {
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--success);
  border-radius: var(--A-radius);
  background: var(--A-surface);
}
/* The edge and the badge mark a day that did not balance; a tint hurt the figures. */
.dirA .dayc.is-off { border-left-color: var(--warning); }

.dirA .dayc-h {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.dirA .dayc-day { font-weight: 600; }
.dirA .dayc-by { margin-left: auto; color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .dayc-acts { display: inline-flex; gap: 2px; flex: none; }
.dirA .dayc-by + .dayc-acts { margin-left: 0; }
.dirA .dayc-acts:first-child { margin-left: auto; }

/* ---- correcting a recorded count ---- */

.dirA .fle-was {
  display: flex; align-items: baseline; gap: var(--sp-10);
  padding: var(--sp-8) var(--sp-10);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  color: var(--A-fg-3);
  font-size: var(--text-meta);
}
.dirA .fle-was b { font-size: var(--text-body); font-variant-numeric: tabular-nums; }
.dirA .fle-was b:first-of-type { margin-left: auto; }

.dirA .fle-pair { margin-top: var(--sp-14); }
.dirA .fle-pair-h {
  display: block; margin-bottom: var(--sp-6);
  font-size: var(--text-meta); font-weight: 600; color: var(--A-fg-2);
}
.dirA .fle-field {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-bottom: var(--sp-6);
}
.dirA .fle-field > span {
  width: 36px; flex: none;
  font-size: var(--text-meta); font-weight: 700;
  letter-spacing: var(--tracking-caps); color: var(--A-fg-3);
}
.dirA .fle-field .input { flex: 1 1 auto; text-align: right; }

.dirA .fle-warn {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  margin: var(--sp-12) 0 0;
  padding: var(--sp-8) var(--sp-10);
  border: 1px solid var(--warning);
  border-radius: var(--A-radius);
  background: var(--warning-100);
  font-size: var(--text-meta); line-height: 1.45;
}
.dirA .fle-warn svg { flex: none; margin-top: 2px; color: var(--warning); }

.dirA .fle-note { display: block; margin-top: var(--sp-14); }
.dirA .fle-note > span {
  display: block; margin-bottom: var(--sp-4);
  font-size: var(--text-meta); color: var(--A-fg-2);
}
.dirA .fle-note textarea { width: 100%; }

/* The shape a count is read in. */
.dirA .dayc-t { width: 100%; border-collapse: collapse; }
.dirA .dayc-t th,
.dirA .dayc-t td { padding: 3px var(--sp-8); text-align: right; white-space: nowrap; }
.dirA .dayc-t thead th {
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--A-fg-3);
}
.dirA .dayc-t tbody th {
  text-align: left;
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--A-fg-3);
}
.dirA .dayc-t tbody td { font-variant-numeric: tabular-nums; }
.dirA .dayc-t tbody tr + tr th,
.dirA .dayc-t tbody tr + tr td { border-top: 1px solid var(--A-rule); }

.dirA .dayc-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-8);
  border-top: 1px solid var(--A-rule);
  color: var(--A-fg-2);
  font-size: var(--text-meta);
  line-height: 1.45;
}
.dirA .dayc-note svg { flex: none; margin-top: 2px; color: var(--A-fg-3); }

.dirA .flt {
  padding: var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
}

.dirA .flt-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.dirA .flt-t { font-size: var(--text-title); font-weight: 600; }

.dirA .flt-drawers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  margin-top: var(--sp-12);
}
/* Only once the counter has the page to itself do the drawers fit side by side. */
@media (max-width: 1100px) {
  .dirA .flt-drawers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.dirA .flt-card {
  padding: var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .flt-card h3 { margin: 0 0 var(--sp-10); font-size: var(--text-body); font-weight: 600; }

.dirA .flt-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-bottom: var(--sp-8);
}

.dirA .flt-field > span { font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .flt-field output { font-weight: 600; font-variant-numeric: tabular-nums; }
.dirA .flt-field .input { width: 130px; text-align: right; }

/* A drawer that does not match what was left in it. */
.dirA .flt-field output.is-off { color: var(--danger); }

.dirA .flt-note { display: block; margin-top: var(--sp-12); }
.dirA .flt-note > span { display: block; margin-bottom: var(--sp-4); font-size: var(--text-meta); color: var(--danger); }
.dirA .flt-note textarea { width: 100%; }
.dirA .flt-actions { display: flex; justify-content: flex-end; margin-top: var(--sp-12); }

/* A line that is a result rather than something typed. */
.dirA .flt-field.is-sum { padding-top: var(--sp-6); border-top: 1px solid var(--A-rule); }
.dirA .flt-field.is-sum > span { color: var(--A-fg-2); font-weight: 600; }

.dirA .flt-warn {
  margin: var(--sp-6) 0 0;
  font-size: var(--text-meta);
  color: var(--danger);
}

/* ---------- Loading a sheet ---------- */

.dirA .mig-upload {
  margin-bottom: var(--sp-14);
  padding: var(--sp-14);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
}

.dirA .mig-pick { display: flex; flex-wrap: wrap; gap: var(--sp-8); }

/* A file input is not something anyone wants to look at, so the label is the button. */
.dirA .mig-pick label.btn { position: relative; overflow: hidden; cursor: pointer; }
.dirA .mig-pick label.btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dirA .mig-hint { margin: var(--sp-10) 0 0; font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .mig {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-14);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  overflow: hidden;
}

/* A sheet has more columns than a screen, so the rows scroll sideways on their own. */
.dirA .mig-scroll { overflow-x: auto; }
.dirA .mig-table { width: 100%; margin: 0; font-size: var(--text-meta); }
.dirA .mig-table th, .dirA .mig-table td { white-space: nowrap; padding: var(--sp-6) var(--sp-8); }
.dirA .mig-table thead th { background: var(--A-surface-2); text-align: left; }
.dirA .mig-table tbody tr + tr { border-top: 1px solid var(--A-rule-2); }

.dirA .mig-acts-h,
.dirA .mig-table td:first-child { width: 112px; min-width: 112px; }

.dirA .mig-acts { display: flex; gap: var(--sp-2); }
.dirA .mig-acts .row-action { flex: none; }
.dirA .mig-empty { padding: var(--sp-20); text-align: center; color: var(--A-fg-3); }

.dirA .mig-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-10);
}

.dirA .mig-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.dirA .mig-field > span { font-size: var(--text-meta); color: var(--A-fg-2); }

/* ---------- Scanning or uploading a document ---------- */

/* Empty, this is one invitation. With a page on it there is a second question, so the
   dialog becomes two halves rather than one column running off its own bottom edge. */

.dirA .rx-scan { display: grid; gap: var(--sp-16); }

.dirA .rx-scan.has-pages {
  grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-20);
}

.dirA .rx-scan-hint { margin: 0 0 var(--sp-12); font-size: var(--text-body); color: var(--A-fg-2); }

/* A quiet heading for each half, with room on the right for a word about it. */
.dirA .rx-scan-sub {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-8);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--A-fg-2);
}

.dirA .rx-scan-sub > span { font-weight: 400; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-scan-doc .rx-scan-sub { margin-top: var(--sp-14); }

/* The sheet is the hero: it is shaped like the thing being handed over, and it is the only
   place in this dialog that raises its voice. Everything around it stays flat. */

.dirA .rx-scan-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-20);
  padding: var(--sp-24) var(--sp-28);
  border: 1px dashed var(--A-rule-strong);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
  cursor: pointer;
}

.dirA .rx-scan-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.dirA .rx-scan-drop-t { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dirA .rx-scan-drop-t b { font-size: var(--text-title); font-weight: 600; color: var(--A-fg); }
.dirA .rx-scan-drop-t > span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .rx-scan-sheet {
  flex: none;
  width: 48px;
  height: 62px;
  fill: none;
  stroke-linecap: round;
  transition: transform .18s var(--ease-out);
}

.dirA .rx-scan-sheet-edge { stroke: var(--A-rule-strong); stroke-width: 1.5; fill: var(--A-surface); }
.dirA .rx-scan-sheet-head { stroke: var(--A-fg-3); stroke-width: 2; }
.dirA .rx-scan-sheet-rule { stroke: var(--A-rule-strong); stroke-width: 1; }
.dirA .rx-scan-sheet-body { stroke: var(--A-rule-strong); stroke-width: 2; }

.dirA .rx-scan-drop:hover { border-color: var(--A-fg-3); }
.dirA .rx-scan-drop:focus-within { outline: 2px solid var(--A-accent); outline-offset: 2px; }

/* The one piece of motion in here, and it answers something the person is doing: the sheet
   lifts to meet the file on its way down. */
.dirA .rx-scan-drop.is-over {
  border-style: solid;
  border-color: var(--A-accent);
  background: var(--A-tint);
}

.dirA .rx-scan-drop.is-over .rx-scan-sheet { transform: translateY(-4px); }
.dirA .rx-scan-drop.is-over .rx-scan-sheet-edge { stroke: var(--A-accent); }
.dirA .rx-scan-drop.is-over .rx-scan-sheet-head,
.dirA .rx-scan-drop.is-over .rx-scan-sheet-body { stroke: var(--A-accent); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .dirA .rx-scan-sheet { transition: none; }
  .dirA .rx-scan-drop.is-over .rx-scan-sheet { transform: none; }
}

/* Adding a second page is a smaller errand than starting, so the sheet gives up the room it
   was holding to the pages it produced. */
.dirA .rx-scan.has-pages .rx-scan-drop { gap: var(--sp-12); padding: var(--sp-12) var(--sp-14); }
.dirA .rx-scan.has-pages .rx-scan-sheet { width: 30px; height: 39px; }
.dirA .rx-scan.has-pages .rx-scan-drop-t b { font-size: var(--text-body); }

/* A page is on: taking another is a smaller errand than starting. */
.dirA .rx-scan.has-pages .rx-scan-shot { gap: var(--sp-12); padding: var(--sp-12) var(--sp-14); }
.dirA .rx-scan.has-pages .rx-scan-shot-t b { font-size: var(--text-body); }

/* Counter mode: the script is handed over the counter, so photographing it is the way in
   and a file is the exception. This is the one thing in the dialog wearing the accent. */
.dirA .rx-scan-shot {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  padding: var(--sp-20) var(--sp-24);
  border: 1px solid var(--navy-100);
  border-radius: var(--A-radius-md);
  background: var(--A-tint);
  color: var(--A-accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s var(--ease-out), border-color .14s var(--ease-out);
}

.dirA .rx-scan-shot:hover { background: var(--navy-100); border-color: var(--navy-300); }
.dirA .rx-scan-shot:focus-visible { outline: 2px solid var(--A-accent); outline-offset: 2px; }
.dirA .rx-scan-shot svg { flex: none; }

.dirA .rx-scan-shot-t { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.dirA .rx-scan-shot-t b { font-size: var(--text-title); font-weight: 600; }
.dirA .rx-scan-shot-t > span { font-size: var(--text-meta); color: var(--A-fg-3); }

/* The exception, said in one line. */
.dirA .rx-scan-file {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  margin: var(--sp-12) 0 0;
  font-size: var(--text-meta);
  color: var(--A-fg-3);
}

/* A button that is really the file input, so choosing and dropping are the same control. */
.dirA .rx-scan-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  height: 28px;
  padding: 0 var(--sp-12);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface);
  color: var(--A-fg);
  font-size: var(--text-label);
  font-weight: 500;
  cursor: pointer;
}

.dirA .rx-scan-pick:hover { background: var(--A-surface-2); }
.dirA .rx-scan-pick:focus-within { outline: 2px solid var(--A-accent); outline-offset: 2px; }
.dirA .rx-scan-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* A file dragged over the dialog: the whole half is the target, so the whole half answers. */
.dirA .rx-scan-doc {
  border-radius: var(--A-radius-md);
  transition: box-shadow .14s var(--ease-out), background .14s var(--ease-out);
}

.dirA .rx-scan-doc.is-over {
  box-shadow: 0 0 0 2px var(--A-accent);
  background: var(--A-tint);
}

.dirA .rx-scan-doc.is-over > :not(.rx-scan-catch) { pointer-events: none; }

.dirA .rx-scan-catch {
  margin: var(--sp-10) 0 0;
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--A-accent);
}

@media (prefers-reduced-motion: reduce) {
  .dirA .rx-scan-shot,
  .dirA .rx-scan-doc { transition: none; }
}

/* The pages gathered so far, in the order they will be filed. */
.dirA .rx-scan-pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Enough of them and the strip scrolls instead of growing the dialog. */
.dirA .rx-scan.has-pages .rx-scan-pages { max-height: 268px; overflow: auto; }

.dirA .rx-scan-pages > li {
  position: relative;
  width: 92px;
  height: 116px;
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius);
  background: var(--A-surface-2);
  overflow: hidden;
}

.dirA .rx-scan-pages img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dirA .rx-scan-pdf { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--A-fg-3); }

.dirA .rx-scan-page-n {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  padding: 0 var(--sp-6);
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  font-size: var(--text-micro);
}

.dirA .rx-scan-pages button {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: inline-flex;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 60%);
  color: #fff;
  cursor: pointer;
}

/* The second half: the decision, and the fields that belong to whichever was chosen. */
.dirA .rx-scan-what { min-width: 0; }
.dirA .rx-scan-actions { display: grid; gap: var(--sp-8); }

/* Set in from the choice above, so the fields read as part of it rather than as a third
   thing to fill in on the way past. */
.dirA .rx-scan-fields:not(:empty) {
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--A-rule);
}

.dirA .rx-scan-actions label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--sp-8);
  padding: var(--sp-10);
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  cursor: pointer;
}

.dirA .rx-scan-actions label:has(input:checked) { border-color: var(--A-accent); background: var(--A-tint); }
.dirA .rx-scan-actions input { grid-row: span 2; align-self: center; }
.dirA .rx-scan-actions b { font-size: var(--text-body); }
.dirA .rx-scan-actions span { font-size: var(--text-meta); color: var(--A-fg-3); }

.dirA .rx-scan-field { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-10); }
.dirA .rx-scan-field:last-child { margin-bottom: 0; }
.dirA .rx-scan-field > span { font-size: var(--text-label); color: var(--A-fg-2); }
/* The boxes carry a fixed width for the page; in a column of a dialog they take it. */
.dirA .rx-scan-field .combo { width: 100% !important; }

/* One column on a narrow screen: the two halves cannot both have one. */
@media (max-width: 760px) {
  .dirA .rx-scan.has-pages { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .dirA .rx-scan.has-pages .rx-scan-pages { max-height: none; }
}

.dirA .rx-scan-busy { padding: var(--sp-32) var(--sp-16); text-align: center; }
.dirA .rx-scan-busy h3 { margin: 0 0 var(--sp-6); font-size: var(--text-title); }
.dirA .rx-scan-busy p { margin: 0; font-size: var(--text-body); color: var(--A-fg-3); }

.dirA .rx-scan-result { display: flex; flex-direction: column; gap: var(--sp-10); align-items: flex-start; }
.dirA .rx-scan-message { margin: 0; font-size: var(--text-body); }

.dirA .rx-scan-facts { display: grid; gap: var(--sp-6); margin: 0; width: 100%; }
.dirA .rx-scan-facts > div { display: flex; gap: var(--sp-10); }
.dirA .rx-scan-facts dt { flex: none; width: 96px; font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-scan-facts dd { margin: 0; font-weight: 600; }

.dirA .rx-scan-warnings, .dirA .rx-scan-extras { margin: 0; padding-left: var(--sp-16); font-size: var(--text-meta); }
.dirA .rx-scan-warnings { color: var(--warning); }
.dirA .rx-scan-extras { color: var(--A-fg-2); }

.dirA .rx-scan-looks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-10); }
.dirA .rx-cam-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-8); font-size: var(--text-meta); color: var(--A-fg-3); }
.dirA .rx-cam-tools select { height: 30px; max-width: 280px; border: 1px solid var(--A-rule); border-radius: var(--A-radius); }
.dirA .rx-cam-tools #rxScanCamCount { margin-left: auto; }

/* The camera and crop the scan script draws into. Its own rules are scoped to the Razor
   modal, so the React dialog carries the same shapes in the app's colours. */
.dirA .rx-cam-stage {
  position: relative;
  height: 58vh;
  min-height: 260px;
  border-radius: var(--A-radius-md);
  background: var(--ink);
  overflow: hidden;
}

.dirA .rx-cam-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Once the camera's shape is known the stage takes it, so there are no black bars. */
.dirA .rx-cam-stage.rx-cam-fit {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--rx-ratio);
  width: min(100%, calc(72vh * var(--rx-ratio)));
  margin: 0 auto;
}

.dirA .rx-cam-guide {
  position: absolute;
  inset: 6%;
  border: 2px dashed rgb(255 255 255 / 55%);
  border-radius: var(--A-radius);
  pointer-events: none;
}

.dirA .rx-cam-message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-20);
  background: rgb(0 0 0 / 65%);
  color: #fff;
  text-align: center;
}

.dirA .rx-cam-shutter {
  position: absolute;
  left: 50%;
  bottom: var(--sp-14);
  transform: translateX(-50%);
  width: 66px;
  height: 66px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--A-accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
  cursor: pointer;
}

.dirA .rx-cam-shutter:hover { background: var(--navy-700); }
.dirA .rx-cam-shutter:disabled { opacity: .4; }

.dirA .rx-cam-switch {
  position: absolute;
  top: var(--sp-10);
  right: var(--sp-10);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-12);
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--A-accent);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  box-shadow: 0 1px 6px rgb(0 0 0 / 35%);
  cursor: pointer;
}

.dirA .rx-crop-stage { position: relative; margin: 0 auto; touch-action: none; user-select: none; }
.dirA .rx-crop-stage canvas { display: block; border-radius: var(--A-radius); }
.dirA .rx-crop-stage svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.dirA .rx-crop-stage polygon { fill: rgb(27 58 88 / 4%); stroke: var(--A-accent); stroke-width: 2; }

.dirA .rx-crop-handle {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid var(--A-accent);
  border-radius: 50%;
  background: rgb(255 255 255 / 85%);
  cursor: grab;
  touch-action: none;
}

.dirA .rx-crop-handle:active { cursor: grabbing; transform: scale(1.15); }

.dirA .rx-preview-stage {
  padding: var(--sp-8);
  border-radius: var(--A-radius-md);
  background: var(--A-surface-2);
  text-align: center;
}

.dirA .rx-preview-stage canvas {
  max-width: 100%;
  max-height: 52vh;
  background: #fff;
  box-shadow: 0 1px 6px rgb(0 0 0 / 25%);
}

/* ---------- Small screens: the page scrolls instead of squashing ----------
   On a desktop the window never scrolls and each panel scrolls in its own column. Below a
   tablet's width the panels stack and the window carries the scroll instead. */

@media (max-width: 900px) {
  html:has(> body.crx-island-page),
  body.crx-island-page { overflow: auto; }

  body.crx-island-page .container.body-content,
  body.crx-island-page #rightContentPanel { height: auto; overflow: visible; }

  body.crx-island-page [data-crx-island],
  body.crx-island-page [data-crx-island] > .dirA,
  body.crx-island-page [data-crx-island] > .dirA > .main { height: auto; min-height: 100%; }

  .dirA .page-body,
  body.crx-island-page .dirA .page-body:not(.is-scroll) {
    display: block;
    overflow: visible;
    min-height: 0;
  }

  /* One column, in the markup's order. `!important` because the page sets its tracks
     through a dozen state classes, every one of them more specific than this. */
  .dirA .rx-form {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto;
    min-height: 0;
  }

  /* The script stacks under the form rather than beside it. It keeps a readable height:
     a PDF in a 200px box is a picture of a prescription, not one you can check against. */
  .dirA .rx-form.has-script .rx-script-col { min-height: 70vh; }

  /* Panels measured against the page have nothing to measure against now, so they take
     the height of what is in them. */
  .dirA .rx-side,
  .dirA .rx-pick,
  .dirA .rx-form-main,
  .dirA .crx-steps,
  .dirA .rx-preview { height: auto; min-height: 0; }

  /* A scroll box inside a column was there to keep the column's height; with the page
     scrolling again it only hides its own content behind a second scrollbar. */
  .dirA .rx-pick-list,
  .dirA .crx-step-body { overflow: visible; max-height: none; }
}

/* ---------- Small screens: the till, which the POS and the board both lay out ---------- */

@media (max-width: 900px) {
  /* A page that already flows keeps the window's scroll, not one of its own: two nested
     scrollbars on a phone means the inner one is never the one under your thumb. */
  body.crx-island-page .dirA .page-body.is-scroll { overflow: visible; }

  /* Patients, then the order, then the cart -- the order the markup already has. */
  .dirA .till {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto;
    min-height: 0;
  }

  /* Each column is a section of the page now, as tall as it needs to be. Its list keeps a
     scroll of its own: two hundred orders would otherwise be the whole page before the
     cart below them. */
  .dirA .till-col-body { flex: none; max-height: 60vh; }

  .dirA .till-side { min-height: 0; }
  .dirA .till-side .till-notes { max-height: none; }
  .dirA .till-side .till-cart { flex: none; }

  /* The bar floated over the foot of a page that could not scroll. Now that the page can,
     the foot is a long way down, so it holds its place in front of the viewport instead. */
  .dirA .till-bar {
    position: fixed;
    bottom: var(--sp-12);
    max-width: calc(100vw - var(--sp-24));
  }

  /* Room under the last column, so it does not end behind that bar. */
  .dirA .till:has(.till-bar) { padding-bottom: 76px; }
  .dirA .till:has(.till-bar) .till-col-body { padding-bottom: var(--sp-8); }
}

/* ---- Delivery board: a card is an order ----------------------------------- */

/* The tick sits beside the card's own hit area, so selecting is not opening. */
.dirA .del-card { display: flex; align-items: flex-start; gap: var(--sp-8); }
.dirA .del-card .disp-card-hit { flex: 1; min-width: 0; }
/* The whole column is the tick's, so a click beside the box still selects. */
.dirA .del-card-tick {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6) 0 var(--sp-12);
  margin: 0;
  cursor: pointer;
}

/* Lifted above .disp-card-hit::after, which stretches over the whole card. */
.dirA .del-card .del-card-tick { position: relative; z-index: 1; }

.dirA .del-card-tick input { width: 16px; height: 16px; cursor: pointer; }
.dirA .del-card-tick:has(input:disabled) { cursor: not-allowed; }
.dirA .del-card-tick input:disabled { cursor: not-allowed; opacity: .35; }

.dirA .del-card.is-picked { border-color: var(--A-accent); background: var(--A-tint); }

/* An order that cannot go out yet is still readable, just not up for selection. */
.dirA .del-card.del-held .disp-card-hit { opacity: .78; }

.dirA .del-card-n { font-size: var(--text-meta); color: var(--A-fg-3); }

/* Its own slot, centred on the card, so printing is never opening. */
.dirA .del-card-acts {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding-right: var(--sp-8);
}

/* The one action a card has, so it is sized to be hit rather than squinted at. */
.dirA .del-card-acts .icon-btn { width: 34px; height: 34px; }
.dirA .del-card-acts .icon-btn svg { width: 22px; height: 22px; }

/* Both tags on the first line, so the two that decide whether it goes read together. */
.dirA .del-card .disp-card-top > .disp-tags { display: inline-flex; gap: var(--sp-6); }
.dirA .del-card-at b { font-weight: 500; }
.dirA .del-card-why {
  display: flex; gap: var(--sp-6); align-items: center;
  margin-top: var(--sp-6); color: var(--A-fg-3); font-size: var(--text-meta);
}

/* ---- the open bag ---- */

.dirA .del-open-h .till-col-t { font-weight: 600; }
.dirA .del-open-h .disp-tags { display: inline-flex; gap: var(--sp-6); }
.dirA .del-open-h .till-col-end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-4); }

/* One size and one centre: .till-cart-x carries its own padding and sat off-axis. */
.dirA .del-open-h .till-col-end :is(.icon-btn, .till-cart-x) {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.dirA .del-open-h .till-col-end :is(.icon-btn, .till-cart-x) svg { width: 20px; height: 20px; }

.dirA .del-open-body { padding: var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }

/* Where the driver is going: the one thing this panel exists to answer. */
.dirA .del-dest {
  border: 1px solid var(--A-rule);
  border-left: 3px solid var(--A-accent);
  border-radius: var(--A-radius-md);
  background: linear-gradient(180deg, var(--A-tint), var(--A-surface) 60%);
  padding: var(--sp-14) var(--sp-16);
}

.dirA .del-dest-at {
  display: flex; gap: var(--sp-8); align-items: flex-start; margin: 0;
  font-size: var(--text-title); font-weight: 600; color: var(--A-fg); line-height: 1.35;
}
.dirA .del-dest-at svg { flex: none; margin-top: 2px; color: var(--A-accent); }

.dirA .del-dest-facts {
  list-style: none; margin: var(--sp-14) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
}
.dirA .del-dest-facts li {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-10);
  border: 1px solid var(--A-rule); border-radius: 999px;
  background: var(--A-surface);
}
.dirA .del-dest-facts svg { color: var(--A-fg-3); }
.dirA .del-dest-facts span { display: inline-flex; align-items: baseline; gap: var(--sp-6); }
.dirA .del-dest-facts i {
  font-style: normal; font-size: var(--text-micro); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--A-fg-3);
}
.dirA .del-dest-facts b { font-size: var(--text-body); font-weight: 600; color: var(--A-fg); }

.dirA .del-dest-note {
  display: flex; gap: var(--sp-8); align-items: flex-start;
  margin: var(--sp-12) 0 0; padding: var(--sp-10) var(--sp-12);
  border-radius: var(--A-radius); background: var(--warning-100);
  font-size: var(--text-meta); color: var(--A-fg);
}
.dirA .del-dest-note svg { flex: none; margin-top: 2px; color: var(--warning); }

/* ---- what is in the bag ---- */

.dirA .del-drugs-h {
  display: flex; align-items: center; gap: var(--sp-8);
  margin: 0; font-size: var(--text-label); font-weight: 600; color: var(--A-fg-2);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}

.dirA .del-drugs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }

.dirA .del-drug {
  border: 1px solid var(--A-rule);
  border-radius: var(--A-radius-md);
  background: var(--A-surface);
  padding: var(--sp-12) var(--sp-14);
  transition: border-color .12s var(--ease-out), box-shadow .12s var(--ease-out);
}
.dirA .del-drug:hover { border-color: var(--A-rule-strong); box-shadow: var(--shadow-1); }

.dirA .del-drug-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.dirA .del-drug-name { font-size: var(--text-body); font-weight: 600; color: var(--A-fg); }

/* The drug and its counts on one line, the counts kept to the right edge. */
.dirA .del-drug-mid {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-6) var(--sp-16); margin-top: var(--sp-8);
}
.dirA .del-drug-mid .del-drug-name { flex: 1 1 auto; min-width: 0; }

.dirA .del-drug-facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-16); margin-left: auto;
}

.dirA .del-drug-sig {
  margin: var(--sp-10) 0 0; padding: var(--sp-8) var(--sp-10);
  border-radius: var(--A-radius); background: var(--A-surface-2);
  font-size: var(--text-meta); color: var(--A-fg-2);
}
.dirA .del-drug-sig i {
  font-style: normal; font-size: var(--text-micro); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--A-fg-3); margin-right: var(--sp-6);
}

/* ---- sending them out ---- */

.dirA .del-ask-list { display: flex; flex-direction: column; gap: 4px; margin-top: var(--sp-8); }
.dirA .del-ask-list span { font-size: var(--text-body); }

.dirA .del-outcomes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.dirA .del-outcomes li { display: grid; grid-template-columns: auto auto 1fr; gap: var(--sp-8); align-items: baseline; }
.dirA .del-outcomes li > span { color: var(--A-fg-3); font-size: var(--text-meta); }
.dirA .del-outcomes li.is-sent > svg { color: var(--success); }
.dirA .del-outcomes li.is-held > svg { color: var(--warning); }

/* The same busy ring .row-action gets in data-grid.css. */
.dirA .icon-btn.is-working { position: relative; }
.dirA .icon-btn.is-working svg { animation: none; opacity: 0.4; }

.dirA .icon-btn.is-working::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1.5px solid var(--A-rule-2);
  border-top-color: currentColor;
  animation: msi-spin 0.7s linear infinite;
  pointer-events: none;
}
.dirA .row-action.is-working,
.dirA .icon-btn.is-working { cursor: progress; }