/* ===== bagging_check_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html.

   SCOPED ON .bc-dashboard, the form's own adopted root. Every rule is wrapped
   :where(.bc-dashboard), which contributes zero specificity and so cannot
   change which rule wins. Three shapes stay as they are, because they already
   name the root and wrapping would drop a class they need: the bare
   .bc-dashboard root rule, .bc-dashboard[data-theme="dark"], and
   [data-theme="dark"] .bc-dashboard. A rule whose subject is a DESCENDANT and
   whose prelude leads with the theme attribute is written
   [data-theme="dark"] :where(.bc-dashboard) .x - the attribute sits on <html>,
   an ancestor of the root, so the scope cannot go in front of it.

   THE ROOT RULE HAS NO height: 100% AND NO overflow-y: auto. .bc-dashboard is
   the flex item of main's definite-height content scroller: height: 100% would
   pin it to the port and overflow-y: auto would move the scrollbar off the
   layout and onto the dashboard. It is a default flex item sized by its
   content. No flex: 1 0 auto either: it would stretch
   background: var(--px-bg-deep) down the page whenever the content is short.
   position: relative, isolation: isolate and z-index: 0 stay: pxShowLoading
   positions #bc-loading against .bc-dashboard, and the stacking context is
   what holds that overlay under the dependency's modals.

   .themed-scrollbar stays on the root element and is NOT declared here: it is
   the dependency's class, injected at runtime. The scrollbar the operator sees
   belongs to main's mount div, which carries the same class.

   THE FOUR px-btn COMPOUNDS. The dependency appends its theme to <head> at
   startup, AFTER every head link, so a rule in this file that TIES with one of
   its .px-* rules loses on order. Four rules are written as selector lists
   whose second arm names .px-btn as well, so they win on specificity instead:
     .bc-btn-acute / .bc-btn-monthly  border: 2px solid  vs .px-btn border: none
     .bc-btn-sibling                  border: 1px solid  vs .px-btn border: none
     .bc-counter-btn                  border: none       vs .px-btn-outline
                                      border: 1px solid, and border-radius: 50%
                                      vs .px-btn var(--px-radius-sm)
     .bc-counter-btn:disabled         opacity: .4        vs .px-btn:disabled .5
   Audited and NOT compounded, because no declaration flips: .bc-btn-mode and
   .bc-btn-confirm conflict with .px-btn only on font-size, padding and
   border-radius, and all three are re-set at (0,2,0) by the touch rules at the
   foot of this file and by theme.css's .px-btn.px-btn-touch, with identical
   values, on every element in this form. The @media .bc-btn-mode override
   loses to .px-btn.px-btn-touch too. No other .px-* name is declared in this
   file.

   D8 and D12 cover the two places where theme.css's [anvil-slot] reset does
   not reach; both are commented where they sit.

   DESIGNER GATE ON .bc-live, which __init__ adds to the form root while the
   form is still DETACHED, so every gated hide applies from before the first
   paint. Four blocks are hidden until the JavaScript reveals them:
   .bc-scan-section and .bc-items-section, which hold the scan_slot and
   items_slot dropzones, plus .bc-dropdown-section and .bc-action-buttons. A
   dropzone inside a box the template ships hidden measures 0 by 0 on the
   canvas and staff have nothing to drop into, so the first two are gated; the
   other two are gated with them so the canvas shows this screen as one piece.
   Every reveal is heavier than its gated hide: showControls writes an inline
   display on three of them and .bc-items-section.visible is (0,2,0) against
   the gate's (0,1,0). px-spoke-app 6c7c4fd is the shape. The class never comes
   off: it is on this form's own root, which is discarded with the screen, and
   removing it in the teardown would reveal all four blocks for the rest of the
   navigation. */

.bc-dashboard {
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-subtle: rgba(59, 130, 246, 0.12);
  --px-loading-accent: #3b82f6;
  --bc-monthly-bg: #fff9c4;
  --bc-acute-bg: #c8e6c9;
  /* Solid hues come from theme.css --px-badge-* (single source
     of truth shared with pack-deliveries badges). Pales stay
     local since they encode alpha. */
  --bc-tray: var(--px-badge-tray);
  --bc-tray-pale: rgba(169, 148, 212, 0.25);
  --bc-cd: var(--px-badge-cd);
  --bc-cd-pale: rgba(237, 144, 144, 0.25);
  --bc-supplement: var(--px-badge-supplement);
  --bc-supplement-pale: rgba(16, 185, 129, 0.25);
  --bc-fridge: var(--px-badge-fridge);
  --bc-fridge-pale: rgba(125, 180, 227, 0.25);
  --bc-main: #ffffff;

  font-family: var(--px-font);
  color: var(--px-text-primary);
  background: var(--px-bg-deep);
  position: relative;
  isolation: isolate;
  z-index: 0;
}

[data-theme="dark"] .bc-dashboard,
.bc-dashboard[data-theme="dark"] {
  --accent: #60a5fa;
  --accent-hover: #3b82f6;
  --accent-subtle: rgba(96, 165, 250, 0.15);
  --bc-monthly-bg: #3a3520;
  --bc-acute-bg: #1a3328;
}

:where(.bc-dashboard) .bc-content {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:where(.bc-dashboard) .bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

:where(.bc-dashboard) .bc-title-block {
  display: flex;
  flex-direction: column;
}

:where(.bc-dashboard) .bc-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* AO.10 per-computer label print mode (scan labels only) */
:where(.bc-dashboard) .bc-label-mode-toggle {
  display: flex;
  border: 1px solid var(--px-border);
  border-radius: 999px;
  overflow: hidden;
}

:where(.bc-dashboard) .bc-label-mode-btn {
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  cursor: pointer;
  border: none;
  background: var(--px-bg-card);
  color: var(--px-text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

:where(.bc-dashboard) .bc-label-mode-btn.active {
  background: var(--accent);
  color: #fff;
}


:where(.bc-dashboard) .bc-btn-mode {
  font-size: 24px;
  padding: 14px 28px;
  border-radius: var(--px-radius);
}

:where(.bc-dashboard) .bc-btn-monthly,
:where(.bc-dashboard) .px-btn.bc-btn-monthly {
  background: var(--bc-monthly-bg);
  color: #1e293b;
  border: 2px solid #fbbf24;
}

:where(.bc-dashboard) .bc-btn-monthly:hover:not(:disabled) {
  background: #fef3c7;
  border-color: #f59e0b;
}

:where(.bc-dashboard) .bc-btn-monthly.active {
  background: #fbbf24;
  border-color: #b45309;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

:where(.bc-dashboard) .bc-btn-acute,
:where(.bc-dashboard) .px-btn.bc-btn-acute {
  background: var(--bc-acute-bg);
  color: #1e293b;
  border: 2px solid #4ade80;
}

:where(.bc-dashboard) .bc-btn-acute:hover:not(:disabled) {
  background: #bbf7d0;
  border-color: #22c55e;
}

:where(.bc-dashboard) .bc-btn-acute.active {
  background: #4ade80;
  border-color: #166534;
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
}

[data-theme="dark"] :where(.bc-dashboard) .bc-btn-monthly,
[data-theme="dark"] :where(.bc-dashboard) .bc-btn-acute {
  color: #fff;
}
:where(.bc-dashboard) .bc-btn-sibling,
:where(.bc-dashboard) .px-btn.bc-btn-sibling {
  background: var(--px-bg-elevated);
  color: var(--px-text-primary);
  border: 1px solid var(--px-border);
  padding: 12px 20px;
}

:where(.bc-dashboard) .bc-btn-sibling:hover:not(:disabled) {
  border-color: var(--accent);
}

:where(.bc-dashboard) .bc-btn-sibling.bc-bag-main { background: #64748b; color: #fff; }
:where(.bc-dashboard) .bc-btn-sibling.bc-bag-fridge { background: var(--bc-fridge); color: #fff; }
:where(.bc-dashboard) .bc-btn-sibling.bc-bag-cd { background: var(--bc-cd); color: #fff; }
:where(.bc-dashboard) .bc-btn-sibling.bc-bag-tray { background: var(--bc-tray); color: #fff; }

:where(.bc-dashboard) .bc-btn-confirm {
  font-size: 20px;
  padding: 14px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
}

:where(.bc-dashboard) .bc-btn-confirm:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

:where(.bc-dashboard) .bc-mode-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 16px 0;
}

:where(.bc-dashboard) .bc-scan-section {
  /* showControls writes 'flex' over the gated hide below. THE OPEN STATE IS
     THE BASE VALUE HERE because this section holds the scan_slot dropzone. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  border: 1px solid var(--px-border);
  transition: background 0.3s ease;
}
/* DESIGNER GATE. See the header. */
:where(.bc-dashboard.bc-live) .bc-scan-section { display: none; }

:where(.bc-dashboard) .bc-scan-section.bc-search-acute {
  background: var(--bc-acute-bg);
}

:where(.bc-dashboard) .bc-scan-section.bc-search-monthly {
  background: var(--bc-monthly-bg);
}

:where(.bc-dashboard) .bc-scan-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* D8: 100%, not 500px. The slot is an <anvil-slot> ELEMENT inside this div,
     so theme.css's .px-anvil-reset [anvil-slot] max-width reset does not
     reach it, and 500px would narrow the scan box. */
  max-width: 100%;
}

:where(.bc-dashboard) .bc-scan-hint {
  font-size: 12px;
  color: var(--px-text-muted);
  font-style: italic;
}

:where(.bc-dashboard) .bc-dropdown-section {
  /* The reveal writes 'grid'. The open state is the base value and the hide
     is the gated rule below. */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px;
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  border: 1px solid var(--px-border);
  transition: background 0.3s ease;
}
/* DESIGNER GATE. See the header. */
:where(.bc-dashboard.bc-live) .bc-dropdown-section { display: none; }

:where(.bc-dashboard) .bc-dropdown-section.bc-search-acute {
  background: var(--bc-acute-bg);
}

:where(.bc-dashboard) .bc-dropdown-section.bc-search-monthly {
  background: var(--bc-monthly-bg);
}

:where(.bc-dashboard) .bc-clear-btn-wrap {
  display: flex;
  align-items: flex-end;
}

:where(.bc-dashboard) .bc-dropdown-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.bc-dashboard) .bc-dropdown-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--px-text-muted);
}

:where(.bc-dashboard) .bc-combo {
  position: relative;
}

:where(.bc-dashboard) .bc-combo-input {
  font-family: var(--px-font);
  font-size: 14px;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  background: var(--px-input-bg);
  color: var(--px-text-primary);
  width: 100%;
}

:where(.bc-dashboard) .bc-combo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

:where(.bc-dashboard) .bc-combo-input:disabled {
  opacity: 0.6;
  cursor: progress;
}

:where(.bc-dashboard) .bc-combo-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--px-text-muted);
  cursor: pointer;
  padding: 3px 6px;
  line-height: 1;
  z-index: 2;
}

:where(.bc-dashboard) .bc-combo-clear:hover {
  color: var(--px-text-primary);
}

:where(.bc-dashboard) .bc-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-radius-sm);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

:where(.bc-dashboard) .bc-combo-option,
:where(.bc-dashboard) .bc-combo-none {
  padding: 9px 12px;
  font-family: var(--px-font);
  font-size: 13px;
  color: var(--px-text-primary);
}

:where(.bc-dashboard) .bc-combo-option {
  cursor: pointer;
}

:where(.bc-dashboard) .bc-combo-option:hover,
:where(.bc-dashboard) .bc-combo-option.active {
  background: var(--px-bg-soft);
}

:where(.bc-dashboard) .bc-combo-none {
  color: var(--px-text-muted);
  font-style: italic;
}

:where(.bc-dashboard) .bc-action-buttons {
  /* The reveal writes 'flex'. The open state is the base value and the hide
     is the gated rule below. */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 12px 0;
}
/* DESIGNER GATE. See the header. */
:where(.bc-dashboard.bc-live) .bc-action-buttons { display: none; }

:where(.bc-dashboard) .bc-items-section {
  /* The open state. The hide is the gated rule below, because this section
     holds the items_slot dropzone; `.visible` is still the reveal. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--px-bg-card);
  border-radius: var(--px-radius);
  border: 1px solid var(--px-border);
  transition: background 0.3s ease;
}
/* DESIGNER GATE. See the header. */
:where(.bc-dashboard.bc-live) .bc-items-section { display: none; }

:where(.bc-dashboard) .bc-items-section.visible {
  display: flex;
}

:where(.bc-dashboard) .bc-items-section.bc-items-acute {
  background: var(--bc-acute-bg);
}

:where(.bc-dashboard) .bc-items-section.bc-items-monthly {
  background: var(--bc-monthly-bg);
}

:where(.bc-dashboard) .bc-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

:where(.bc-dashboard) .bc-cycle-date {
  font-size: 15px;
  color: var(--px-text-secondary);
}

:where(.bc-dashboard) .bc-cycle-date strong {
  color: var(--px-text-primary);
}

:where(.bc-dashboard) .bc-items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* D12: the card root is the flex item and declares flex: 1 1 700px and
   max-width: 750px itself (bc_item_card_html.css), so justify-content: center
   centres the capped card in the row. At runtime `> *` lands on the
   <anvil-dropzone>, which computes display: contents and generates no box;
   this rule is what the designer canvas reads. */
:where(.bc-dashboard) .bc-items-container > * {
  flex: 1 1 700px;
  max-width: 750px;
}

:where(.bc-dashboard) .bc-bag-counters {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 600px;
  margin: 16px auto;
}

:where(.bc-dashboard) .bc-bag-counters.visible {
  display: grid;
}

:where(.bc-dashboard) .bc-bag-counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

:where(.bc-dashboard) .bc-counter-btn,
:where(.bc-dashboard) .px-btn.bc-counter-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.bc-dashboard) .bc-counter-btn:disabled,
:where(.bc-dashboard) .px-btn.bc-counter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

:where(.bc-dashboard) .bc-counter-btn.bc-counter-main { background: var(--bc-main); color: #1e293b; border: 1px solid var(--px-border); }
:where(.bc-dashboard) .bc-counter-btn.bc-counter-fridge { background: var(--bc-fridge); color: #fff; }
:where(.bc-dashboard) .bc-counter-btn.bc-counter-cd { background: var(--bc-cd); color: #fff; }
:where(.bc-dashboard) .bc-counter-btn.bc-counter-tray { background: var(--bc-tray); color: #fff; }

:where(.bc-dashboard) .bc-counter-display {
  flex: 1;
  text-align: center;
  padding: 8px;
  border: 3px solid;
  border-radius: var(--px-radius-sm);
}

:where(.bc-dashboard) .bc-counter-display.bc-counter-main { border-color: var(--bc-main); }
:where(.bc-dashboard) .bc-counter-display.bc-counter-fridge { border-color: var(--bc-fridge); }
:where(.bc-dashboard) .bc-counter-display.bc-counter-cd { border-color: var(--bc-cd); }
:where(.bc-dashboard) .bc-counter-display.bc-counter-tray { border-color: var(--bc-tray); }

:where(.bc-dashboard) .bc-counter-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

:where(.bc-dashboard) .bc-counter-value {
  font-size: 24px;
  font-weight: 700;
}

:where(.bc-dashboard) .bc-tray-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
}

:where(.bc-dashboard) .bc-tray-display {
  text-align: center;
}

:where(.bc-dashboard) .bc-tray-label {
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}

:where(.bc-dashboard) .bc-tray-value {
  font-size: 32px;
  font-weight: 700;
}

:where(.bc-dashboard) .bc-confirm-section {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

:where(.bc-dashboard) .bc-confirm-wrap {
  position: relative;
  display: inline-flex;
}

/* Paper-MAR warning badge: sibling overlay (NOT a child of the button) so
   .px-btn:disabled {opacity:.5} can't dim it while items are still being
   selected. Hidden by default; bcSetConfirmPaperMar toggles display.
   Dark text on amber for contrast (shared .px-badge hardcodes white,
   which fails WCAG on amber). */
:where(.bc-dashboard) .bc-paper-mar-badge {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--px-warning);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
}

/* Scan-to-bag queue box (NC-9: inline in page flow, above Confirm) */
:where(.bc-dashboard) .bc-scan-queue {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--px-bg-elevated);
  border: 2px solid var(--accent);
  border-radius: var(--px-radius);
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
}

:where(.bc-dashboard) .bc-scan-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

:where(.bc-dashboard) .bc-scan-queue-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--px-text-primary);
}

:where(.bc-dashboard) .bc-scan-bag-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

:where(.bc-dashboard) .bc-scan-chip {
  font-family: var(--px-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--px-border);
  background: var(--px-bg-card);
  color: var(--px-text-primary);
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:where(.bc-dashboard) .bc-scan-chip.bc-chip-main.active { background: var(--bc-main); color: #1e293b; border: 2px solid #000; }
:where(.bc-dashboard) .bc-scan-chip.bc-chip-fridge.active { background: var(--bc-fridge); color: #fff; border: 2px solid #000; }
:where(.bc-dashboard) .bc-scan-chip.bc-chip-cd.active { background: var(--bc-cd); color: #fff; border: 2px solid #000; }
:where(.bc-dashboard) .bc-scan-chip.bc-chip-tray.active { background: var(--bc-tray); color: #fff; border: 2px solid #000; }

:where(.bc-dashboard) .bc-scan-queue-entries {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

:where(.bc-dashboard) .bc-scan-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
}

:where(.bc-dashboard) .bc-scan-entry-warn {
  border-color: var(--px-warning);
}

:where(.bc-dashboard) .bc-scan-entry-drug {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.bc-dashboard) .bc-scan-entry-qty {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

:where(.bc-dashboard) .bc-scan-entry-badge {
  background: var(--px-warning);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

:where(.bc-dashboard) .bc-scan-undo-btn,
:where(.bc-dashboard) .bc-scan-reprint-btn {
  padding: 6px 16px;
  font-size: 13px;
}

:where(.bc-dashboard) .bc-scan-reprint-btn {
  border-color: var(--px-border);
  color: var(--px-text-primary);
  background: transparent;
}

:where(.bc-dashboard) .bc-scan-reprint-btn:hover:not(:disabled) {
  border-color: var(--accent);
}

:where(.bc-dashboard) .bc-scan-queue-hint {
  font-size: 12px;
  color: var(--px-text-muted);
  font-style: italic;
}

@media (max-width: 768px) {
  :where(.bc-dashboard) .bc-content { padding: 12px; gap: 12px; }
  :where(.bc-dashboard) .bc-header { flex-direction: column; align-items: flex-start; }
  :where(.bc-dashboard) .bc-dropdown-section { grid-template-columns: 1fr; }
  :where(.bc-dashboard) .bc-mode-section { flex-direction: column; }
  :where(.bc-dashboard) .bc-btn-mode { font-size: 18px; padding: 12px 20px; }
  :where(.bc-dashboard) .bc-bag-counters { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  :where(.bc-dashboard) .bc-bag-counters { grid-template-columns: 1fr; }
}

/* Touch-size overrides — compound selector beats form-specific base classes */
:where(.bc-dashboard) .bc-btn-mode.px-btn-touch,
:where(.bc-dashboard) .bc-btn-sibling.px-btn-touch,
:where(.bc-dashboard) .bc-btn-confirm.px-btn-touch {
  padding: 24px 32px;
  min-height: 68px;
  border-radius: 9999px;
  font-size: 1.1rem;
}