/* ===== ca_meds_profile_sheet_html (HTML form, scoped) =====
   The docked meds profile panel. Every rule comes from the form's old <style>
   block; unscoping this file reproduces that block line for line, so nothing
   is added and nothing is dropped.

   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPE IS THE FORM ROOT, .ca-meds-sheet. This panel is never portalled: the
   section shell slots it once into .ca-meds-sheet-slot and it stays there, so
   the root travels with every element the rules name. :where() adds zero
   specificity, so each scoped selector weighs exactly what the bare selector
   it replaces did and no tie changes hands.

   .ca-meds-sheet ITSELF STAYS A BARE ROOT RULE, with every declaration
   verbatim, and the guide's screen-root rewrite does NOT apply to it. This is
   not a screen inside the shared drawer layout's scroller: it is a flex child
   of .ca-page sized by the shell's `.ca-meds-sheet-slot { flex: 0 0 0;
   height: 100vh }` / `.ca-page.ca-meds-open .ca-meds-sheet-slot { flex-basis:
   var(--ca-meds-dock-width) }` pair, and it owns its own body scroller
   (.ca-meds-body). Strip `height: 100vh`, `overflow: hidden` or
   `display: flex` and the dock either collapses or double-scrolls.

   NOTHING HERE IS DOUBLED, because nothing here names a shared class. Every
   selector is a .ca-meds-* name this form owns, with one deliberate exception:
   `.ca-meds-bulk .ca-sq-bulk-classify` reaches a class the QUEUE owns. It
   keeps its (0,2,0) weight under the :where() wrapper, so it still beats the
   queue's own single-class rule wherever that lands, and it stays in this
   asset because the element only exists inside this panel's bulk pair.

   NO DESIGNER GATE. Nothing in this form is hidden until JavaScript runs: the
   root's own `hidden` / `aria-hidden` attributes moved OUT of the template and
   into caMedsInit precisely so the canvas has a visible panel to select and
   drag. No rule below hides anything.

   Both @keyframes idents are already per-form prefixed (ca-meds-spin,
   ca-meds-shimmer) and keep their names and their one `animation` reference
   each. No url(), no @font-face, no html rule and no :root block in this form.
   .themed-scrollbar stays the dependency's and is not declared here. */

.ca-meds-sheet {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--px-bg-card);
  color: var(--px-text-primary);
  font-family: var(--px-font);
}
:where(.ca-meds-sheet) .ca-meds-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-space-sm, 8px);
  flex-shrink: 0;
  padding: 10px var(--px-space-md, 16px) 10px var(--px-space-lg, 24px);
  border-bottom: 1px solid var(--px-border);
}
:where(.ca-meds-sheet) .ca-meds-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--px-text-primary);
  font-size: 1rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-actions {
  display: flex;
  align-items: center;
  gap: var(--px-space-xs, 4px);
  flex-shrink: 0;
}
:where(.ca-meds-sheet) .ca-meds-refresh {
  padding: 5px 8px;
  border: 0;
  border-radius: var(--px-radius-sm);
  background: none;
  color: var(--px-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
:where(.ca-meds-sheet) .ca-meds-refresh:hover {
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
}
:where(.ca-meds-sheet) .ca-meds-refresh.spin { animation: ca-meds-spin 450ms linear; }
@keyframes ca-meds-spin { to { transform: rotate(360deg); } }
:where(.ca-meds-sheet) .ca-meds-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--px-border-strong, var(--px-border));
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
  color: var(--px-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
:where(.ca-meds-sheet) .ca-meds-close:hover {
  border-color: var(--px-danger-border, var(--px-danger));
  background: var(--px-danger-bg, rgba(220, 38, 38, .10));
  color: var(--px-danger-text, var(--px-danger));
}
:where(.ca-meds-sheet) .ca-meds-subheader {
  flex-shrink: 0;
  border-bottom: 1px solid var(--px-border-subtle, var(--px-border));
}
:where(.ca-meds-sheet) .ca-meds-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 5px var(--px-space-lg, 24px);
  color: var(--px-text-secondary);
  font-size: 11.5px;
}
:where(.ca-meds-sheet) .ca-meds-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px var(--px-space-lg, 24px) 32px;
}
:where(.ca-meds-sheet) .ca-meds-count,
:where(.ca-meds-sheet) .ca-meds-src {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-count {
  padding: 0 6px;
  border: 1px solid var(--px-border-strong, var(--px-border));
  background: var(--px-bg-elevated);
  color: var(--px-text-secondary);
  font-family: var(--px-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
}
:where(.ca-meds-sheet) .ca-meds-src {
  margin-left: 4px;
  padding: 0 5px;
  border: 1px solid var(--px-border-strong, var(--px-border));
  background: transparent;
  color: var(--px-text-muted);
  font-size: 10px;
  font-weight: 700;
}
:where(.ca-meds-sheet) .ca-meds-match {
  border-style: dashed;
  color: var(--px-text-secondary);
  font-weight: 600;
}
:where(.ca-meds-sheet) .ca-meds-date {
  flex: 0 0 auto;
  color: var(--px-text-secondary);
  font-family: var(--px-mono, monospace);
  font-size: 10.5px;
  line-height: 1.35;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-date b {
  color: var(--px-text-primary);
  font-size: 11px;
}
:where(.ca-meds-sheet) .ca-meds-no-date {
  color: var(--px-text-muted);
  font-style: italic;
}
:where(.ca-meds-sheet) .ca-meds-drug {
  min-width: 0;
  color: var(--px-text-primary);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
:where(.ca-meds-sheet) .ca-meds-instr {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--px-text-muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
:where(.ca-meds-sheet) .ca-meds-sec-h {
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--px-border);
  color: var(--px-text-secondary);
  font-family: var(--px-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
:where(.ca-meds-sheet) .ca-meds-sec-h:first-child { margin-top: 0; }
:where(.ca-meds-sheet) .ca-meds-sec-h small {
  margin-left: 6px;
  color: var(--px-text-muted);
  font-family: var(--px-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
:where(.ca-meds-sheet) .ca-meds-flat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 9px;
  border: 1px solid var(--px-border-subtle, var(--px-border));
  border-left: 3px solid transparent;
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
}
:where(.ca-meds-sheet) .ca-meds-flat.hl-strong {
  border-color: var(--px-danger);
  border-left-color: var(--px-danger);
  background: var(--px-danger-wash, rgba(220, 38, 38, .12));
}
:where(.ca-meds-sheet) .ca-meds-flat.hl-subtle {
  border-color: var(--px-warning-edge, var(--px-warning));
  border-left-color: var(--px-warning);
  background: var(--px-warning-subtle, rgba(217, 119, 6, .08));
}
:where(.ca-meds-sheet) .ca-meds-rail {
  position: relative;
  padding-left: 52px;
}
:where(.ca-meds-sheet) .ca-meds-axis {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 38px;
  width: 2px;
  background: var(--px-border);
}
:where(.ca-meds-sheet) .ca-meds-item {
  position: relative;
  margin-bottom: 5px;
}
:where(.ca-meds-sheet) .ca-meds-when {
  position: absolute;
  top: 4px;
  left: -55px;
  width: 32px;
  color: var(--px-text-secondary);
  font-family: var(--px-mono, monospace);
  font-size: 10.5px;
  font-weight: 700;
  text-align: right;
}
:where(.ca-meds-sheet) .ca-meds-dot {
  position: absolute;
  top: 6px;
  left: -20px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--px-bg-card);
  border-radius: 50%;
  background: var(--px-border-strong, var(--px-border));
  box-shadow: 0 0 0 1px var(--px-border-strong, var(--px-border));
}
:where(.ca-meds-sheet) .ca-meds-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid var(--px-border-subtle, var(--px-border));
  border-radius: var(--px-radius-sm);
  background: var(--px-bg-card);
}
:where(.ca-meds-sheet) .ca-meds-item.hl-strong .ca-meds-card {
  border-color: var(--px-danger);
  background: var(--px-danger-wash, rgba(220, 38, 38, .12));
}
:where(.ca-meds-sheet) .ca-meds-item.hl-strong .ca-meds-dot {
  background: var(--px-danger);
  box-shadow: 0 0 0 1px var(--px-danger);
}
:where(.ca-meds-sheet) .ca-meds-item.hl-subtle .ca-meds-card {
  border-color: var(--px-warning-edge, var(--px-warning));
  background: var(--px-warning-subtle, rgba(217, 119, 6, .08));
}
:where(.ca-meds-sheet) .ca-meds-item.hl-subtle .ca-meds-dot {
  background: var(--px-warning);
  box-shadow: 0 0 0 1px var(--px-warning);
}
:where(.ca-meds-sheet) .ca-meds-warning,
:where(.ca-meds-sheet) .ca-meds-note {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
:where(.ca-meds-sheet) .ca-meds-warning { color: var(--px-danger-text, #7f1d1d); }
:where(.ca-meds-sheet) .ca-meds-note { color: var(--px-warning-text, #78350f); }
:where(.ca-meds-sheet) .ca-meds-stop .ca-meds-card {
  border-color: var(--px-border-strong, var(--px-border));
  border-style: dashed;
  background: var(--px-bg-elevated);
}
:where(.ca-meds-sheet) .ca-meds-stop .ca-meds-drug {
  color: var(--px-text-muted);
  font-weight: 600;
  text-decoration: line-through;
}
:where(.ca-meds-sheet) .ca-meds-stop-dot {
  border-color: var(--px-bg-card);
  background: var(--px-bg-card);
  box-shadow: 0 0 0 1.5px var(--px-text-muted);
}
:where(.ca-meds-sheet) .ca-meds-stop-dot::before,
:where(.ca-meds-sheet) .ca-meds-stop-dot::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 1px;
  width: 8px;
  height: 1.5px;
  background: var(--px-text-muted);
}
:where(.ca-meds-sheet) .ca-meds-stop-dot::before { transform: rotate(45deg); }
:where(.ca-meds-sheet) .ca-meds-stop-dot::after { transform: rotate(-45deg); }
:where(.ca-meds-sheet) .ca-meds-stopped-tag {
  border-color: var(--px-warning-border, var(--px-warning));
  background: var(--px-warning-subtle, rgba(217, 119, 6, .08));
  color: var(--px-warning-text, #78350f);
  text-decoration: none;
}
:where(.ca-meds-sheet) .ca-meds-thread { position: relative; }
:where(.ca-meds-sheet) .ca-meds-thread::before {
  content: '';
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: -16px;
  width: 2px;
  background: var(--px-border-strong, var(--px-border));
}
:where(.ca-meds-sheet) .ca-meds-thread.th-strong::before {
  background: var(--px-danger);
  opacity: .65;
}
:where(.ca-meds-sheet) .ca-meds-thread.th-subtle::before {
  background: var(--px-warning);
  opacity: .65;
}
:where(.ca-meds-sheet) .ca-meds-screen {
  margin: 0 0 10px;
}
:where(.ca-meds-sheet) .ca-meds-screen .ca-meds-card {
  display: block;
  border-color: var(--accent, #0d9488);
  border-style: dashed;
  background: color-mix(in srgb, var(--accent, #0d9488) 5%, transparent);
}
:where(.ca-meds-sheet) .ca-meds-screen .ca-meds-dot {
  background: var(--accent, #0d9488);
  box-shadow: 0 0 0 1px var(--accent, #0d9488);
}
:where(.ca-meds-sheet) .ca-meds-anchor-h {
  margin-bottom: 4px;
  color: var(--accent, #0d9488);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.3;
}
:where(.ca-meds-sheet) .ca-meds-anchor-script {
  margin: 5px 0 2px;
  color: var(--px-text-muted);
  font-family: var(--px-mono, monospace);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
:where(.ca-meds-sheet) .ca-meds-anchor-script:first-of-type { margin-top: 0; }
:where(.ca-meds-sheet) .ca-meds-bulk { margin-bottom: 8px; }
:where(.ca-meds-sheet) .ca-meds-bulk .ca-sq-bulk-classify { flex-wrap: wrap; }
:where(.ca-meds-sheet) .ca-meds-anchor-row {
  padding: 3px 6px 3px 8px;
  border-left: 3px solid var(--px-text-muted);
}
:where(.ca-meds-sheet) .ca-meds-anchor-row + .ca-meds-anchor-row { margin-top: 5px; }
:where(.ca-meds-sheet) .ca-meds-anchor-new { border-left-color: #2563eb; }
:where(.ca-meds-sheet) .ca-meds-anchor-changed { border-left-color: #d97706; }
:where(.ca-meds-sheet) .ca-meds-anchor-same { border-left-color: #15803d; }
:where(.ca-meds-sheet) .ca-meds-anchor-status { float: right; margin-left: 6px; font-size: 9.5px; font-weight: 800; }
:where(.ca-meds-sheet) .ca-meds-anchor-new .ca-meds-anchor-status { color: #2563eb; }
:where(.ca-meds-sheet) .ca-meds-anchor-changed .ca-meds-anchor-status { color: #d97706; }
:where(.ca-meds-sheet) .ca-meds-anchor-same .ca-meds-anchor-status { color: #15803d; }
:where(.ca-meds-sheet) .ca-meds-anchor-last .ca-meds-anchor-status { color: var(--px-text-muted); }
:where(.ca-meds-sheet) .ca-meds-anchor-was { display: block; color: #d97706; font-size: 10px; }
:where(.ca-meds-sheet) .ca-meds-cls-acute, :where(.ca-meds-sheet) .ca-meds-cls-monthly {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 800;
}
:where(.ca-meds-sheet) .ca-meds-cls-acute { color: var(--px-mode-acute-strong); }
:where(.ca-meds-sheet) .ca-meds-cls-monthly { color: var(--px-mode-monthly-strong); }
:where(.ca-meds-sheet) .ca-meds-anchor-change {
  display: inline-flex;
  align-items: center;
  margin: 2px 4px 0 0;
  padding: 0 5px;
  border: 1px solid var(--px-danger);
  border-radius: 999px;
  color: var(--px-danger);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-anchor-drug {
  display: block;
  color: var(--px-text-primary);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
:where(.ca-meds-sheet) .ca-meds-anchor-instr {
  display: block;
  overflow: hidden;
  color: var(--px-text-muted);
  font-size: 10.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ca-meds-sheet) .ca-meds-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--px-border-subtle, var(--px-border));
  color: var(--px-text-muted);
  font-size: 10.5px;
  line-height: 1.35;
}
:where(.ca-meds-sheet) .ca-meds-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}
:where(.ca-meds-sheet) .ca-meds-legend .strong::before {
  border: 1px solid var(--px-danger);
  background: var(--px-danger-wash, rgba(220, 38, 38, .12));
}
:where(.ca-meds-sheet) .ca-meds-legend .subtle::before {
  border: 1px solid var(--px-warning-edge, var(--px-warning));
  background: var(--px-warning-subtle, rgba(217, 119, 6, .08));
}
:where(.ca-meds-sheet) .ca-meds-state {
  padding: 40px 0;
  color: var(--px-text-muted);
  font-size: 13px;
  text-align: center;
}
:where(.ca-meds-sheet) .ca-meds-error { color: var(--px-danger); }
:where(.ca-meds-sheet) .ca-meds-retry {
  margin-top: 10px;
  padding: 5px 14px;
  border: 1px solid var(--px-danger);
  border-radius: var(--px-radius-sm);
  background: transparent;
  color: var(--px-danger);
  font-family: var(--px-font);
  font-weight: 600;
  cursor: pointer;
}
:where(.ca-meds-sheet) .ca-meds-skel {
  height: 30px;
  margin-bottom: 6px;
  border-radius: var(--px-radius-sm);
  background: linear-gradient(90deg, var(--px-bg-elevated) 25%, var(--px-bg-deep) 37%, var(--px-bg-elevated) 63%);
  background-size: 400% 100%;
  animation: ca-meds-shimmer 1.2s infinite;
}
@keyframes ca-meds-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}