/* ============================================================
   bClaim HIG Overrides on Phoenix
   Layered after assets/css/theme.min.css. Tokens only — no literals.
   Wins the cascade via specificity (.bc-* classes) and source order.
   ============================================================ */

/* ----- Base ------------------------------------------------- */
:root {
  --phoenix-font-sans-serif: var(--bc-font-text);
  --phoenix-body-font-family: var(--bc-font-text);
}
html { font-family: var(--bc-font-text); }
body.bc-app,
body {
  font-family: var(--bc-font-text);
  font-feature-settings: var(--bc-font-features);
  color: var(--bc-text-primary);
  background: var(--bc-bg-grouped);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Phoenix bridge — Open Sans replaces Nunito Sans on shell surfaces */
.bc-app .main,
.bc-app .navbar-vertical,
.bc-app .navbar-top,
.bc-app .content,
.bc-app .card,
.bc-app .modal-content,
.bc-app .dropdown-menu,
.bc-app .table,
.bc-app .nav-link {
  font-family: var(--bc-font-text);
}

/* HIG type scale utilities */
.bc-text-large-title { font-family: var(--bc-font-display); font-size: var(--bc-text-large-title); line-height: var(--bc-leading-tight); font-weight: var(--bc-weight-bold); letter-spacing: var(--bc-tracking-tight); }
.bc-text-title-1     { font-family: var(--bc-font-display); font-size: var(--bc-text-title-1); line-height: var(--bc-leading-tight); font-weight: var(--bc-weight-bold); letter-spacing: var(--bc-tracking-tight); }
.bc-text-title-2     { font-family: var(--bc-font-display); font-size: var(--bc-text-title-2); line-height: var(--bc-leading-snug); font-weight: var(--bc-weight-semibold); }
.bc-text-title-3     { font-family: var(--bc-font-display); font-size: var(--bc-text-title-3); line-height: var(--bc-leading-snug); font-weight: var(--bc-weight-semibold); }
.bc-text-headline    { font-size: var(--bc-text-headline); line-height: var(--bc-leading-snug); font-weight: var(--bc-weight-semibold); }
.bc-text-body        { font-size: var(--bc-text-body); line-height: var(--bc-leading-normal); font-weight: var(--bc-weight-regular); }
.bc-text-callout     { font-size: var(--bc-text-callout); line-height: var(--bc-leading-normal); }
.bc-text-subhead     { font-size: var(--bc-text-subhead); line-height: var(--bc-leading-normal); }
.bc-text-footnote    { font-size: var(--bc-text-footnote); line-height: var(--bc-leading-normal); color: var(--bc-text-secondary); }
.bc-text-caption     { font-size: var(--bc-text-caption-1); line-height: var(--bc-leading-normal); color: var(--bc-text-tertiary); }
.bc-text-mono        { font-family: var(--bc-font-mono); font-size: 0.9em; }

/* Restore visible focus ring globally — Phoenix suppresses many */
.bc-app :focus-visible,
.bc-scope :focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
  border-radius: var(--bc-radius-sm);
  transition: box-shadow var(--bc-duration-fast) var(--bc-ease-standard);
}

/* ============================================================
   Buttons — HIG action hierarchy
   ============================================================ */
.bc-btn {
  --_bg: transparent;
  --_fg: var(--bc-text-primary);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  min-height: var(--bc-control-h-md);
  padding: 0 var(--bc-space-4);
  border-radius: var(--bc-radius-md);
  font-family: var(--bc-font-text);
  font-size: var(--bc-text-callout);
  font-weight: var(--bc-weight-semibold);
  letter-spacing: var(--bc-tracking-normal);
  line-height: 1;
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background var(--bc-duration-fast) var(--bc-ease-standard),
    color var(--bc-duration-fast) var(--bc-ease-standard),
    border-color var(--bc-duration-fast) var(--bc-ease-standard),
    transform var(--bc-duration-fast) var(--bc-ease-standard),
    box-shadow var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-btn:active { transform: scale(0.98); }
.bc-btn:disabled,
.bc-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.bc-btn--sm { min-height: var(--bc-control-h-sm); padding: 0 var(--bc-space-3); font-size: var(--bc-text-subhead); border-radius: var(--bc-radius-sm); }
.bc-btn--lg { min-height: var(--bc-control-h-lg); padding: 0 var(--bc-space-5); font-size: var(--bc-text-body); border-radius: var(--bc-radius-lg); }
.bc-btn--block { display: flex; width: 100%; }

.bc-btn--primary { --_bg: var(--bc-accent); --_fg: var(--bc-text-on-accent); --_bd: var(--bc-accent); }
.bc-btn--primary:hover  { --_bg: var(--bc-accent-hover); --_bd: var(--bc-accent-hover); }
.bc-btn--primary:active { --_bg: var(--bc-accent-pressed); --_bd: var(--bc-accent-pressed); }

.bc-btn--secondary { --_bg: var(--bc-bg-elevated); --_fg: var(--bc-text-primary); --_bd: var(--bc-border-field); }
.bc-btn--secondary:hover  { --_bg: var(--bc-bg-hover); }
.bc-btn--secondary:active { --_bg: var(--bc-bg-pressed); }

.bc-btn--tinted { --_bg: var(--bc-accent-tint); --_fg: var(--bc-accent); --_bd: transparent; }
.bc-btn--tinted:hover  { filter: brightness(0.96); }

.bc-btn--plain { --_bg: transparent; --_fg: var(--bc-accent); --_bd: transparent; padding-left: var(--bc-space-2); padding-right: var(--bc-space-2); }
.bc-btn--plain:hover  { background: var(--bc-bg-hover); }

.bc-btn--destructive { --_bg: var(--bc-destructive); --_fg: var(--bc-text-on-destructive); --_bd: var(--bc-destructive); }
.bc-btn--destructive:hover  { --_bg: var(--bc-destructive-hover); --_bd: var(--bc-destructive-hover); }
.bc-btn--destructive:active { --_bg: var(--bc-destructive-pressed); --_bd: var(--bc-destructive-pressed); }
.bc-btn--destructive:focus-visible { box-shadow: var(--bc-focus-ring-danger); }

.bc-btn--destructive-tinted { --_bg: var(--bc-destructive-tint); --_fg: var(--bc-destructive); --_bd: transparent; }

.bc-btn--icon { width: var(--bc-control-h-md); padding: 0; }
.bc-btn--icon.bc-btn--sm { width: var(--bc-control-h-sm); }
.bc-btn--icon.bc-btn--lg { width: var(--bc-control-h-lg); }

.bc-btn[data-loading="true"] { color: transparent !important; position: relative; }
.bc-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: bc-spin 720ms linear infinite;
  color: var(--bc-text-on-accent);
}
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Form fields — HIG: labels above, help below, inline validation
   ============================================================ */
.bc-field { display: flex; flex-direction: column; gap: var(--bc-space-2); margin-bottom: var(--bc-space-4); }
.bc-field__label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bc-space-2);
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-field__required {
  font-size: var(--bc-text-caption-1);
  font-weight: var(--bc-weight-medium);
  color: var(--bc-text-secondary);
  letter-spacing: var(--bc-tracking-wide);
  text-transform: none;
}
.bc-field__required::before { content: "Required"; }
.bc-field__optional { font-size: var(--bc-text-caption-1); color: var(--bc-text-tertiary); }
.bc-field__optional::before { content: "Optional"; }

.bc-field__help { font-size: var(--bc-text-footnote); color: var(--bc-text-secondary); line-height: var(--bc-leading-normal); }
.bc-field__error {
  display: none;
  align-items: flex-start;
  gap: var(--bc-space-2);
  font-size: var(--bc-text-footnote);
  color: var(--bc-destructive);
  font-weight: var(--bc-weight-medium);
}
.bc-field--invalid .bc-field__error { display: flex; }

.bc-input,
.bc-textarea,
.bc-select {
  font-family: var(--bc-font-text);
  font-size: var(--bc-text-body);
  color: var(--bc-text-primary);
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-border-field);
  border-radius: var(--bc-radius-md);
  padding: 0 var(--bc-space-3);
  min-height: var(--bc-control-h-md);
  width: 100%;
  transition: border-color var(--bc-duration-fast) var(--bc-ease-standard),
              box-shadow var(--bc-duration-fast) var(--bc-ease-standard),
              background var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-textarea {
  padding: var(--bc-space-3);
  min-height: calc(var(--bc-control-h-md) * 2.5);
  line-height: var(--bc-leading-normal);
  resize: vertical;
}
.bc-input:hover,
.bc-textarea:hover,
.bc-select:hover { border-color: var(--bc-separator-strong); }
.bc-input:focus,
.bc-textarea:focus,
.bc-select:focus {
  outline: none;
  border-color: var(--bc-accent);
  box-shadow: var(--bc-focus-ring);
}
.bc-input::placeholder,
.bc-textarea::placeholder { color: var(--bc-text-quaternary); }
.bc-input[disabled],
.bc-textarea[disabled],
.bc-select[disabled] {
  background: var(--bc-bg-subtle);
  color: var(--bc-text-tertiary);
  cursor: not-allowed;
}
.bc-field--invalid .bc-input,
.bc-field--invalid .bc-textarea,
.bc-field--invalid .bc-select {
  border-color: var(--bc-destructive);
}
.bc-field--invalid .bc-input:focus,
.bc-field--invalid .bc-textarea:focus,
.bc-field--invalid .bc-select:focus { box-shadow: var(--bc-focus-ring-danger); }

.bc-input--prefix-wrap { position: relative; display: flex; align-items: center; }
.bc-input--prefix-wrap .bc-input { padding-left: var(--bc-space-8); }
.bc-input__prefix {
  position: absolute; left: var(--bc-space-3);
  color: var(--bc-text-tertiary);
  font-size: var(--bc-text-subhead);
  pointer-events: none;
}

/* Native select chevron */
.bc-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--bc-space-8);
  color: var(--bc-text-primary);
}

/* Checkbox & radio */
.bc-check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  cursor: pointer;
  font-size: var(--bc-text-body);
  color: var(--bc-text-primary);
  padding: var(--bc-space-2) 0;
}
.bc-check input[type="checkbox"],
.bc-check input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--bc-border-field);
  background: var(--bc-bg-elevated);
  border-radius: var(--bc-radius-xs);
  cursor: pointer;
  display: inline-grid; place-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              border-color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-check input[type="radio"] { border-radius: 50%; }
.bc-check input:checked {
  background: var(--bc-accent);
  border-color: var(--bc-accent);
}
.bc-check input[type="checkbox"]:checked::before {
  content: "";
  width: 12px; height: 6px;
  border-left: 2px solid var(--bc-text-on-accent);
  border-bottom: 2px solid var(--bc-text-on-accent);
  transform: rotate(-45deg) translate(1px, -1px);
}
.bc-check input[type="radio"]:checked::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bc-text-on-accent);
}
.bc-check input:focus-visible { outline: none; box-shadow: var(--bc-focus-ring); }

/* Switch (toggle) */
.bc-switch {
  --_h: 28px;
  position: relative;
  width: calc(var(--_h) * 1.75);
  height: var(--_h);
  background: var(--bc-gray-4);
  border-radius: var(--bc-radius-pill);
  cursor: pointer;
  transition: background var(--bc-duration-base) var(--bc-ease-standard);
  flex-shrink: 0;
}
.bc-switch input {
  position: absolute; inset: 0;
  appearance: none; opacity: 0; cursor: pointer;
}
.bc-switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: calc(var(--_h) - 4px); height: calc(var(--_h) - 4px);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--bc-shadow-1);
  transition: transform var(--bc-duration-base) var(--bc-ease-standard);
}
.bc-switch:has(input:checked) { background: var(--bc-color-green); }
.bc-switch:has(input:checked)::after { transform: translateX(calc(var(--_h) * 0.75)); }
.bc-switch:has(input:focus-visible) { box-shadow: var(--bc-focus-ring); }

/* ============================================================
   Status pills (HIG: badges + plain-English + non-color signal)
   ============================================================ */
.bc-status {
  display: inline-flex; align-items: center; gap: var(--bc-space-2);
  padding: 4px var(--bc-space-3);
  border-radius: var(--bc-radius-pill);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  background: var(--_tint, var(--bc-bg-subtle));
  color: var(--_fg, var(--bc-text-primary));
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bc-status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.bc-status--received           { --_fg: var(--bc-status-received); --_tint: color-mix(in srgb, var(--bc-status-received) 14%, transparent); }
.bc-status--awaiting-inspection{ --_fg: var(--bc-status-awaiting-inspection); --_tint: color-mix(in srgb, var(--bc-status-awaiting-inspection) 14%, transparent); }
.bc-status--inspected          { --_fg: var(--bc-status-inspected); --_tint: color-mix(in srgb, var(--bc-status-inspected) 14%, transparent); }
.bc-status--awaiting-repair    { --_fg: var(--bc-status-awaiting-repair); --_tint: color-mix(in srgb, var(--bc-status-awaiting-repair) 14%, transparent); }
.bc-status--awaiting-pickup    { --_fg: var(--bc-status-awaiting-pickup); --_tint: color-mix(in srgb, var(--bc-status-awaiting-pickup) 14%, transparent); }
.bc-status--awaiting-delivery  { --_fg: var(--bc-status-awaiting-delivery); --_tint: color-mix(in srgb, var(--bc-status-awaiting-delivery) 14%, transparent); }
.bc-status--booked             { --_fg: var(--bc-status-booked); --_tint: color-mix(in srgb, var(--bc-status-booked) 14%, transparent); }
.bc-status--on-hold            { --_fg: var(--bc-status-on-hold); --_tint: color-mix(in srgb, var(--bc-status-on-hold) 18%, transparent); }
.bc-status--closed             { --_fg: var(--bc-status-closed); --_tint: color-mix(in srgb, var(--bc-status-closed) 18%, transparent); }

/* Payment request states (payments portal + Payments.php).
   HIG: Foundations > Color (semantic, colour never the only carrier — every
   pill also renders its plain-English word). */
.bc-status--pay-draft            { --_fg: var(--bc-text-secondary); --_tint: color-mix(in srgb, var(--bc-text-secondary) 12%, transparent); }
.bc-status--pay-pending-approval { --_fg: var(--bc-color-orange); --_tint: color-mix(in srgb, var(--bc-color-orange) 14%, transparent); }
.bc-status--pay-approved         { --_fg: var(--bc-color-teal); --_tint: color-mix(in srgb, var(--bc-color-teal) 14%, transparent); }
.bc-status--pay-sent             { --_fg: var(--bc-color-blue); --_tint: color-mix(in srgb, var(--bc-color-blue) 14%, transparent); }
.bc-status--pay-viewed           { --_fg: var(--bc-color-indigo); --_tint: color-mix(in srgb, var(--bc-color-indigo) 14%, transparent); }
.bc-status--pay-authorised       { --_fg: var(--bc-color-purple); --_tint: color-mix(in srgb, var(--bc-color-purple) 14%, transparent); }
.bc-status--pay-paid             { --_fg: var(--bc-color-green); --_tint: color-mix(in srgb, var(--bc-color-green) 14%, transparent); }
.bc-status--pay-manually-paid    { --_fg: var(--bc-color-green); --_tint: color-mix(in srgb, var(--bc-color-green) 14%, transparent); }
.bc-status--pay-cancelled        { --_fg: var(--bc-text-secondary); --_tint: color-mix(in srgb, var(--bc-text-secondary) 12%, transparent); }
.bc-status--pay-expired          { --_fg: var(--bc-text-secondary); --_tint: color-mix(in srgb, var(--bc-text-secondary) 12%, transparent); }
.bc-status--pay-failed           { --_fg: var(--bc-color-red); --_tint: color-mix(in srgb, var(--bc-color-red) 14%, transparent); }
.bc-status--pay-refunded         { --_fg: var(--bc-color-pink); --_tint: color-mix(in srgb, var(--bc-color-pink) 14%, transparent); }

/* ============================================================
   Summary header (sticky claim anchor)
   ============================================================ */
.bc-summary {
  position: sticky;
  top: 0;
  z-index: var(--bc-z-sticky);
  background: color-mix(in srgb, var(--bc-bg-elevated) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bc-separator);
  padding: var(--bc-space-4) var(--bc-space-6);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--bc-space-4);
  align-items: center;
}
.bc-summary__title { display: flex; flex-direction: column; gap: var(--bc-space-1); min-width: 0; }
.bc-summary__name { font-size: var(--bc-text-title-2); font-weight: var(--bc-weight-semibold); color: var(--bc-text-primary); margin: 0; line-height: var(--bc-leading-tight); }
.bc-summary__meta { display: flex; flex-wrap: wrap; gap: var(--bc-space-2) var(--bc-space-4); font-size: var(--bc-text-footnote); color: var(--bc-text-secondary); }
.bc-summary__meta strong { font-weight: var(--bc-weight-semibold); color: var(--bc-text-primary); }
.bc-summary__actions { display: flex; align-items: center; gap: var(--bc-space-2); }
.bc-summary__save-state {
  display: inline-flex; align-items: center; gap: var(--bc-space-2);
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
}
.bc-summary__save-state[data-state="saving"] { color: var(--bc-text-secondary); }
.bc-summary__save-state[data-state="saved"]  { color: var(--bc-success); }
.bc-summary__save-state[data-state="error"]  { color: var(--bc-destructive); }

/* ============================================================
   Sections — hairline separators, not nested cards
   ============================================================ */
.bc-page { max-width: var(--bc-content-max); margin: 0 auto; padding: var(--bc-space-6); }
.bc-section { padding: var(--bc-space-6) 0; border-top: 1px solid var(--bc-separator); }
.bc-section:first-of-type { border-top: 0; }
.bc-section__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bc-space-4); margin-bottom: var(--bc-space-4); }
.bc-section__title { font-size: var(--bc-text-title-3); font-weight: var(--bc-weight-semibold); margin: 0; color: var(--bc-text-primary); }
.bc-section__sub   { font-size: var(--bc-text-footnote); color: var(--bc-text-secondary); margin-top: var(--bc-space-1); }
.bc-section__body  { display: grid; gap: var(--bc-space-4); }
.bc-section__grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bc-space-4); }
@media (max-width: 720px) { .bc-section__grid-2 { grid-template-columns: 1fr; } }

.bc-surface {
  background: var(--bc-bg-elevated);
  border-radius: var(--bc-radius-xl);
  border: 1px solid var(--bc-separator);
  padding: var(--bc-space-6);
  box-shadow: var(--bc-shadow-1);
}

/* ============================================================
   Disclosure (HIG style — chevron + hairline, no boxed accordion)
   ============================================================ */
.bc-disclosure { border-top: 1px solid var(--bc-separator); }
.bc-disclosure:last-child { border-bottom: 1px solid var(--bc-separator); }
.bc-disclosure__summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bc-space-4);
  padding: var(--bc-space-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-disclosure__summary::-webkit-details-marker { display: none; }
.bc-disclosure__chevron {
  width: 16px; height: 16px;
  transition: transform var(--bc-duration-base) var(--bc-ease-standard);
  color: var(--bc-text-tertiary);
}
.bc-disclosure[open] .bc-disclosure__chevron { transform: rotate(90deg); }
.bc-disclosure__body { padding: 0 0 var(--bc-space-6); }
.bc-disclosure__count {
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-medium);
  color: var(--bc-text-secondary);
  padding: 2px var(--bc-space-2);
  background: var(--bc-bg-subtle);
  border-radius: var(--bc-radius-pill);
}

/* ============================================================
   Segmented control
   ============================================================ */
.bc-segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--bc-bg-subtle);
  border-radius: var(--bc-radius-md);
  border: 1px solid var(--bc-separator);
}
.bc-segmented__item {
  border: 0; background: transparent;
  padding: 0 var(--bc-space-3);
  min-height: calc(var(--bc-control-h-sm) - 4px);
  font-family: var(--bc-font-text);
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-medium);
  color: var(--bc-text-secondary);
  border-radius: calc(var(--bc-radius-md) - 2px);
  cursor: pointer;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-segmented__item[aria-pressed="true"],
.bc-segmented__item.is-active {
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  box-shadow: var(--bc-shadow-1);
}

/* ============================================================
   Stepper
   ============================================================ */
.bc-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--bc-border-field); border-radius: var(--bc-radius-md); overflow: hidden; }
.bc-stepper button { background: var(--bc-bg-elevated); border: 0; width: 32px; cursor: pointer; color: var(--bc-text-primary); font-size: var(--bc-text-headline); }
.bc-stepper button:hover { background: var(--bc-bg-hover); }
.bc-stepper input { border: 0; border-left: 1px solid var(--bc-separator); border-right: 1px solid var(--bc-separator); width: 56px; text-align: center; background: var(--bc-bg-elevated); color: var(--bc-text-primary); font: inherit; }
.bc-stepper input:focus { outline: none; box-shadow: var(--bc-focus-ring); }

/* ============================================================
   Sheet (modal) and side sheet
   ============================================================ */
.bc-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(4px);
  z-index: var(--bc-z-overlay);
  opacity: 0;
  transition: opacity var(--bc-duration-base) var(--bc-ease-standard);
}
.bc-sheet-backdrop[data-open="true"] { opacity: 1; }

.bc-sheet {
  position: fixed;
  z-index: var(--bc-z-sheet);
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  box-shadow: var(--bc-shadow-sheet);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--bc-duration-slow) var(--bc-ease-emphasized),
              opacity var(--bc-duration-base) var(--bc-ease-standard);
  opacity: 0;
}
.bc-sheet[data-open="true"] { opacity: 1; }

.bc-sheet--center {
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 24px)) scale(0.96);
  width: min(560px, calc(100vw - var(--bc-space-8)));
  max-height: calc(100vh - var(--bc-space-8));
  border-radius: var(--bc-radius-2xl);
}
.bc-sheet--center[data-open="true"] { transform: translate(-50%, -50%) scale(1); }

.bc-sheet--side {
  top: 0; right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  transform: translateX(100%);
  border-top-left-radius: var(--bc-radius-2xl);
  border-bottom-left-radius: var(--bc-radius-2xl);
}
.bc-sheet--side[data-open="true"] { transform: translateX(0); }

.bc-sheet__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bc-space-3);
  padding: var(--bc-space-5) var(--bc-space-6);
  border-bottom: 1px solid var(--bc-separator);
}
.bc-sheet__title { font-size: var(--bc-text-title-3); font-weight: var(--bc-weight-semibold); margin: 0; }
.bc-sheet__body  { padding: var(--bc-space-6); overflow-y: auto; flex: 1; }
.bc-sheet__footer { padding: var(--bc-space-4) var(--bc-space-6); border-top: 1px solid var(--bc-separator); display: flex; justify-content: flex-end; gap: var(--bc-space-3); background: var(--bc-bg-subtle); }
.bc-sheet__consequence {
  background: var(--bc-destructive-tint);
  border-radius: var(--bc-radius-md);
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-text-subhead);
  color: var(--bc-destructive);
  margin-top: var(--bc-space-3);
}

/* Inherits .bc-sheet--center width (560px cap); no narrower override — long
 * action labels like “Change to Awaiting Pickup” need the full dialog width. */
.bc-confirm__header {
  display: grid;
  grid-template-columns: var(--bc-control-h-lg) minmax(0, 1fr) var(--bc-control-h-md);
  gap: var(--bc-space-4);
  align-items: flex-start;
  padding: var(--bc-space-6) var(--bc-space-6) var(--bc-space-4);
}
.bc-confirm__icon {
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  border-radius: var(--bc-radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-accent);
  background: var(--bc-accent-tint);
  font-size: var(--bc-text-title-3);
}
.bc-confirm__icon--danger {
  color: var(--bc-destructive);
  background: var(--bc-destructive-tint);
}
.bc-confirm__heading {
  min-width: 0;
  display: grid;
  gap: var(--bc-space-2);
}
.bc-confirm__title {
  line-height: var(--bc-leading-snug);
}
.bc-confirm__message {
  margin: 0;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-callout);
  line-height: var(--bc-leading-normal);
  overflow-wrap: anywhere;
}
.bc-confirm__close {
  color: var(--bc-text-tertiary);
}
.bc-confirm__body {
  padding: 0 var(--bc-space-6) var(--bc-space-5);
}
.bc-confirm__consequence {
  margin-top: 0;
  display: grid;
  grid-template-columns: var(--bc-space-5) minmax(0, 1fr);
  gap: var(--bc-space-3);
  align-items: flex-start;
  line-height: var(--bc-leading-normal);
}
.bc-confirm__consequence[hidden] {
  display: none;
}
.bc-confirm__consequence i {
  margin-top: var(--bc-space-1);
}
.bc-confirm__footer {
  padding: var(--bc-space-4) var(--bc-space-6) var(--bc-space-6);
  background: var(--bc-bg-elevated);
  flex-wrap: wrap;
  align-items: center;
}
.bc-confirm__footer .bc-btn {
  flex-shrink: 0;
}

/* Contained confirm — rises from the bottom edge of a host sheet (passed as
   `container` to bclaim.confirm) instead of appearing centre-screen, so the
   rep keeps sight of the thing they are confirming (e.g. the SMS draft).
   HIG: Patterns › Modality (prefer the least disruptive presentation). */
.bc-sheet-backdrop--contained {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.bc-confirm-sheet--contained {
  position: absolute;
  left: var(--bc-space-3);
  right: var(--bc-space-3);
  bottom: var(--bc-space-3);
  width: auto;
  max-height: calc(100% - var(--bc-space-6));
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-3);
  transform: translateY(calc(100% + var(--bc-space-4)));
}
.bc-confirm-sheet--contained[data-open="true"] { transform: translateY(0); }

@media (max-width: 30rem) {
  .bc-confirm__header {
    grid-template-columns: var(--bc-control-h-md) minmax(0, 1fr) var(--bc-control-h-sm);
    gap: var(--bc-space-3);
    padding: var(--bc-space-5) var(--bc-space-5) var(--bc-space-3);
  }
  .bc-confirm__icon {
    width: var(--bc-control-h-md);
    height: var(--bc-control-h-md);
    border-radius: var(--bc-radius-lg);
  }
  .bc-confirm__body {
    padding: 0 var(--bc-space-5) var(--bc-space-4);
  }
  .bc-confirm__footer {
    flex-direction: column-reverse;
    padding: var(--bc-space-4) var(--bc-space-5) var(--bc-space-5);
  }
  .bc-confirm__footer .bc-btn {
    width: 100%;
  }
}

/* ============================================================
   What's New sheet
   HIG: Patterns > Onboarding; Components > Sheets; Foundations > Layout
   ============================================================ */
.bc-whatsnew[hidden] { display: none; }

/* Full-viewport layer above Phoenix sidebar (1020) and top nav (1030) */
#bc-whatsnew {
  position: fixed;
  inset: 0;
  z-index: var(--bc-z-welcome);
  font-family: var(--bc-font-text);
  font-feature-settings: var(--bc-font-features);
  color: var(--bc-text-primary);
  pointer-events: none;
}
#bc-whatsnew:not([hidden]) {
  pointer-events: auto;
}
#bc-whatsnew .bc-sheet-backdrop {
  z-index: 0;
}
#bc-whatsnew .bc-whatsnew-sheet {
  z-index: 1;
}

.bc-whatsnew-sheet {
  width: min(calc(var(--bc-space-10) * 11), calc(100vw - var(--bc-space-6)));
  max-height: calc(100vh - var(--bc-space-6));
  display: flex;
  flex-direction: column;
}

.bc-whatsnew__header {
  align-items: flex-start;
  padding-bottom: var(--bc-space-4);
}
.bc-whatsnew__heading {
  min-width: 0;
  display: grid;
  gap: var(--bc-space-1);
}
.bc-whatsnew__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bc-accent);
}
.bc-whatsnew__title {
  font-size: var(--bc-text-title-2);
  line-height: var(--bc-leading-snug);
}
.bc-whatsnew__subtitle {
  margin: 0;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-callout);
}
.bc-whatsnew__subtitle--lead {
  color: var(--bc-text-primary);
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
}
.bc-whatsnew__intro {
  margin: var(--bc-space-2) 0 0;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
}
.bc-whatsnew__close {
  color: var(--bc-text-tertiary);
  flex: 0 0 auto;
}

.bc-whatsnew__body {
  padding-top: var(--bc-space-2);
  padding-bottom: var(--bc-space-4);
}
.bc-whatsnew__section {
  margin-top: var(--bc-space-5);
  padding-top: var(--bc-space-4);
  border-top: 1px solid var(--bc-separator);
}
.bc-whatsnew__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.bc-whatsnew__section-title {
  margin: 0 0 var(--bc-space-3);
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-whatsnew__subsection-title {
  margin: var(--bc-space-4) 0 var(--bc-space-2);
  font-size: var(--bc-text-callout);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-whatsnew__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bc-space-4);
}
.bc-whatsnew__bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  min-width: 0;
}
.bc-whatsnew__bullet-dot {
  flex: 0 0 var(--bc-space-2);
  width: var(--bc-space-2);
  height: var(--bc-space-2);
  margin-top: 0.45em;
  border-radius: var(--bc-radius-pill);
  background: var(--bc-accent);
}
.bc-whatsnew__bullet-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--bc-space-1);
}
.bc-whatsnew__bullet-title {
  display: block;
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-snug);
  color: var(--bc-text-primary);
  font-weight: var(--bc-weight-semibold);
}
.bc-whatsnew__bullet-desc {
  margin: 0;
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
}
.bc-whatsnew__section--genie {
  margin-top: var(--bc-space-6);
  padding: var(--bc-space-4);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  background: var(--bc-bg-subtle);
}
.bc-whatsnew__genie-head {
  display: grid;
  grid-template-columns: var(--bc-control-h-lg) minmax(0, 1fr);
  gap: var(--bc-space-4);
  align-items: flex-start;
}
.bc-whatsnew__genie-icon {
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  border-radius: var(--bc-radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-accent);
  background: var(--bc-accent-tint);
  font-size: var(--bc-text-title-3);
}
.bc-whatsnew__genie-copy { min-width: 0; }
.bc-whatsnew__section-title--genie { margin-bottom: var(--bc-space-2); }
.bc-whatsnew__genie-intro {
  margin: 0;
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
}
.bc-whatsnew__genie-block:first-of-type .bc-whatsnew__subsection-title {
  margin-top: var(--bc-space-4);
}
.bc-whatsnew__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bc-space-2);
}
.bc-whatsnew__item {
  display: grid;
  grid-template-columns: var(--bc-control-h-lg) minmax(0, 1fr);
  gap: var(--bc-space-4);
  align-items: flex-start;
  padding: var(--bc-space-3);
  border-radius: var(--bc-radius-lg);
  transition: background-color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-whatsnew__item:hover { background: var(--bc-bg-hover); }

.bc-whatsnew__icon {
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  border-radius: var(--bc-radius-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bc-text-title-3);
}
.bc-whatsnew__icon--accent  { color: var(--bc-accent);      background: var(--bc-accent-tint); }
.bc-whatsnew__icon--success { color: var(--bc-success);     background: var(--bc-success-tint); }
.bc-whatsnew__icon--warning { color: var(--bc-warning);     background: var(--bc-warning-tint); }
.bc-whatsnew__icon--info    { color: var(--bc-info);        background: var(--bc-info-tint); }

.bc-whatsnew__copy { min-width: 0; display: grid; gap: var(--bc-space-1); }
.bc-whatsnew__item-title {
  margin: 0;
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-whatsnew__item-desc {
  margin: 0;
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
}

.bc-whatsnew__fixes {
  margin-top: var(--bc-space-5);
  border-top: 1px solid var(--bc-separator);
  padding-top: var(--bc-space-4);
}
.bc-whatsnew__fixes > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-whatsnew__fixes > summary::-webkit-details-marker { display: none; }
.bc-whatsnew__fixes > summary i { color: var(--bc-text-tertiary); }
.bc-whatsnew__fixes-list {
  margin: var(--bc-space-3) 0 0;
  padding-left: var(--bc-space-5);
  display: grid;
  gap: var(--bc-space-2);
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
}

.bc-whatsnew__footer {
  justify-content: space-between;
  align-items: center;
}
.bc-whatsnew__release {
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-tertiary);
}

@media (max-width: 30rem) {
  .bc-whatsnew__item {
    grid-template-columns: var(--bc-control-h-md) minmax(0, 1fr);
    gap: var(--bc-space-3);
  }
  .bc-whatsnew__icon {
    width: var(--bc-control-h-md);
    height: var(--bc-control-h-md);
    border-radius: var(--bc-radius-lg);
    font-size: var(--bc-text-body);
  }
  .bc-whatsnew__footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--bc-space-3);
  }
  .bc-whatsnew__footer .bc-btn { width: 100%; }
  .bc-whatsnew__release { text-align: center; }
}

/* ============================================================
   Toasts
   ============================================================ */
.bc-toast-region {
  position: fixed;
  bottom: var(--bc-space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--bc-z-toast);
  display: flex; flex-direction: column-reverse; gap: var(--bc-space-2);
  pointer-events: none;
}
.bc-toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: var(--bc-space-3);
  background: var(--bc-text-primary);
  color: var(--bc-bg-elevated);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-radius: var(--bc-radius-pill);
  box-shadow: var(--bc-shadow-3);
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-medium);
  min-width: 240px; max-width: 480px;
  animation: bc-toast-in var(--bc-duration-slow) var(--bc-ease-emphasized);
}
.bc-toast[data-leaving="true"] { animation: bc-toast-out var(--bc-duration-base) var(--bc-ease-standard) forwards; }
.bc-toast--success { background: var(--bc-color-green); color: #fff; }
.bc-toast--error   { background: var(--bc-destructive); color: #fff; }
.bc-toast__action {
  appearance: none; border: 0; background: transparent;
  color: inherit; opacity: 0.85;
  font-weight: var(--bc-weight-semibold);
  cursor: pointer; padding: 4px var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
  margin-left: var(--bc-space-2);
}
.bc-toast__action:hover { opacity: 1; background: rgba(255,255,255,0.12); }
@keyframes bc-toast-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes bc-toast-out {
  to { transform: translateY(10px); opacity: 0; }
}

/* ============================================================
   Inbox notifications (actionable transient alerts)
   HIG · Patterns · Feedback
   ============================================================ */
.bc-notification-region {
  position: fixed;
  top: calc(var(--bc-sticky-header-h) + var(--bc-space-3));
  right: var(--bc-space-4);
  z-index: var(--bc-z-toast);
  width: min(22.5rem, calc(100vw - var(--bc-space-8)));
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2);
  pointer-events: none;
}
.bc-notification {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  padding: var(--bc-space-4);
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-3);
  animation: bc-notification-in var(--bc-duration-slow) var(--bc-ease-emphasized);
}
.bc-notification[data-leaving="true"] {
  animation: bc-notification-out var(--bc-duration-base) var(--bc-ease-standard) forwards;
}
.bc-notification__icon {
  flex-shrink: 0;
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bc-accent-tint);
  color: var(--bc-accent);
  border-radius: var(--bc-radius-md);
  font-size: var(--bc-text-title-3);
}
.bc-notification__body {
  flex: 1;
  min-width: 0;
}
.bc-notification__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
  margin-bottom: var(--bc-space-1);
}
.bc-notification__title {
  margin: 0;
  font-size: var(--bc-text-headline);
  font-weight: var(--bc-weight-semibold);
  letter-spacing: var(--bc-tracking-tight);
  line-height: var(--bc-leading-snug);
}
.bc-notification__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bc-control-h-sm);
  height: var(--bc-control-h-sm);
  padding: 0 var(--bc-space-2);
  font-size: var(--bc-text-caption-1);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-on-accent);
  background: var(--bc-accent);
  border-radius: var(--bc-radius-pill);
}
.bc-notification__message {
  margin: 0;
  font-size: var(--bc-text-footnote);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
}
.bc-notification__action {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  margin-top: var(--bc-space-3);
  padding: 0;
  font: inherit;
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-accent);
  cursor: pointer;
  border-radius: var(--bc-radius-sm);
}
.bc-notification__action:hover { color: var(--bc-accent-hover); }
.bc-notification__action:focus-visible { box-shadow: var(--bc-focus-ring); outline: none; }
.bc-notification__action i { font-size: var(--bc-text-caption-1); }
.bc-notification__close {
  flex-shrink: 0;
  margin: calc(var(--bc-space-1) * -1) calc(var(--bc-space-1) * -1) 0 0;
}
@keyframes bc-notification-in {
  from { transform: translateX(calc(100% + var(--bc-space-4))); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes bc-notification-out {
  to { transform: translateX(calc(100% + var(--bc-space-4))); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-notification,
  .bc-notification[data-leaving="true"] {
    animation-duration: 1ms;
  }
}

/* ============================================================
   Skeleton loaders
   ============================================================ */
.bc-skeleton {
  background: linear-gradient(90deg, var(--bc-bg-subtle) 0%, var(--bc-bg-hover) 50%, var(--bc-bg-subtle) 100%);
  background-size: 200% 100%;
  animation: bc-skeleton 1.6s linear infinite;
  border-radius: var(--bc-radius-md);
  color: transparent;
  display: inline-block;
}
.bc-skeleton--line { height: 12px; width: 100%; }
.bc-skeleton--title { height: 22px; width: 60%; }
.bc-skeleton--block { height: 80px; width: 100%; }
@keyframes bc-skeleton {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ============================================================
   Banners (page-level — permission-denied, locked-by-user)
   ============================================================ */
.bc-banner {
  display: flex; gap: var(--bc-space-3);
  padding: var(--bc-space-4) var(--bc-space-5);
  border-radius: var(--bc-radius-lg);
  font-size: var(--bc-text-subhead);
  line-height: var(--bc-leading-normal);
  margin-bottom: var(--bc-space-5);
  border: 1px solid transparent;
}
.bc-banner__icon { flex-shrink: 0; width: 20px; height: 20px; }
.bc-banner__title { font-weight: var(--bc-weight-semibold); margin: 0 0 var(--bc-space-1); font-size: var(--bc-text-headline); }
.bc-banner--info    { background: var(--bc-info-tint); color: var(--bc-text-primary); }
.bc-banner--success { background: var(--bc-success-tint); color: var(--bc-text-primary); }
.bc-banner--warning { background: var(--bc-warning-tint); color: var(--bc-text-primary); }
.bc-banner--danger  { background: var(--bc-destructive-tint); color: var(--bc-text-primary); border-color: color-mix(in srgb, var(--bc-destructive) 30%, transparent); }
.bc-banner--locked  { background: var(--bc-warning-tint); color: var(--bc-text-primary); }
.bc-banner__body { flex: 1; min-width: 0; }
.bc-banner__message { margin: 0; color: var(--bc-text-secondary); }

/* Service banners — full-width fixed stack above Phoenix top navbar
   HIG: Patterns › Feedback */
.bc-service-banner-stack {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--bc-z-service-banner, 1080);
  display: flex;
  flex-direction: column;
  max-height: 40vh;
  overflow-y: auto;
  background: var(--bc-bg-base);
  border-bottom: 1px solid var(--bc-separator);
}
.bc-service-banner-stack .bc-banner {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: var(--bc-control-h-lg);
  padding: var(--bc-space-2) calc(var(--bc-control-h-lg) + var(--bc-space-5));
  margin-bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.bc-service-banner-stack .bc-banner__icon {
  position: absolute;
  left: var(--bc-space-5);
  width: var(--bc-space-4);
  height: var(--bc-space-4);
}
.bc-service-banner-stack .bc-banner__body {
  flex: 0 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--bc-space-2);
  max-width: 100%;
  text-align: center;
}
.bc-service-banner-stack .bc-banner__title {
  margin: 0;
  font-size: var(--bc-text-subhead);
  white-space: nowrap;
}
.bc-service-banner-stack .bc-banner__message {
  overflow: hidden;
  color: var(--bc-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-service-banner-stack .bc-banner__link {
  flex-shrink: 0;
  color: var(--bc-accent);
  font-weight: var(--bc-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.bc-service-banner-stack .bc-banner__link:hover {
  text-decoration: underline;
}
.bc-service-banner-stack .bc-banner__link:focus-visible {
  border-radius: var(--bc-radius-xs);
  box-shadow: var(--bc-focus-ring);
  outline: none;
}
.bc-service-banner-stack .bc-banner:not(:last-child) {
  border-bottom: 1px solid var(--bc-separator);
}
.bc-service-banner-stack .bc-banner.is-dismissing {
  opacity: 0;
  transition: opacity var(--bc-duration-base) var(--bc-ease-standard);
}
/* Push the fixed shell below the banner stack without changing navbar height. */
body.bc-has-service-banner .navbar-top.fixed-top {
  top: var(--bc-banner-stack-h, 0px) !important;
}
body.bc-has-service-banner .navbar-vertical {
  top: calc(var(--phoenix-navbar-top-height) + var(--bc-banner-stack-h, 0px));
}
body.bc-has-service-banner .content {
  padding-top: calc(var(--phoenix-navbar-top-height) + var(--bc-banner-stack-h, 0px) + var(--bc-space-7));
}
@media (prefers-reduced-motion: no-preference) {
  body.bc-has-service-banner .navbar-top.fixed-top,
  body.bc-has-service-banner .navbar-vertical,
  body.bc-has-service-banner .content {
    transition:
      top var(--bc-duration-base) var(--bc-ease-standard),
      padding-top var(--bc-duration-base) var(--bc-ease-standard);
  }
}
.bc-banner__dismiss {
  position: absolute;
  right: var(--bc-space-2);
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bc-control-h-lg);
  min-height: var(--bc-control-h-lg);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: var(--bc-radius-sm);
}
.bc-banner__dismiss:hover { background: var(--bc-bg-hover); }
.bc-banner__dismiss:focus-visible { box-shadow: var(--bc-focus-ring); }

/* Service banner rich text editor */
.bc-rich-editor.ql-container.ql-snow {
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-border-field);
  border-top: 0;
  border-radius: var(--bc-radius-lg);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  overflow: hidden;
}
.bc-rich-editor__toolbar.ql-toolbar.ql-snow {
  background: var(--bc-bg-subtle);
  border: 1px solid var(--bc-border-field);
  border-bottom: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
  font-family: var(--bc-font-text);
}
.bc-rich-editor.ql-container.ql-snow {
  min-height: calc(var(--bc-space-10) * 2);
  font-family: var(--bc-font-text);
  font-size: var(--bc-text-body);
}
.bc-rich-editor.ql-container.ql-snow .ql-editor {
  color: var(--bc-text-primary);
  line-height: var(--bc-leading-normal);
}
.bc-rich-editor.ql-container.ql-snow .ql-editor.ql-blank::before {
  color: var(--bc-text-tertiary);
  font-style: normal;
}
.bc-rich-editor.ql-container.ql-snow img,
.bc-rich-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--bc-space-4) 0;
  border-radius: var(--bc-radius-lg);
}
.bc-rich-editor__status {
  min-height: var(--bc-space-5);
  margin-top: var(--bc-space-1);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-caption);
}
.bc-rich-content {
  max-width: 72ch;
}
.bc-rich-content > *:first-child { margin-top: 0; }
.bc-rich-content > *:last-child { margin-bottom: 0; }
.bc-rich-content h2,
.bc-rich-content h3 {
  margin: var(--bc-space-5) 0 var(--bc-space-2);
  color: var(--bc-text-primary);
  font-weight: var(--bc-weight-semibold);
}
.bc-rich-content h2 { font-size: var(--bc-text-title-2); }
.bc-rich-content h3 { font-size: var(--bc-text-title-3); }
.bc-rich-content p,
.bc-rich-content ul,
.bc-rich-content ol,
.bc-rich-content blockquote {
  margin-bottom: var(--bc-space-4);
}
.bc-rich-content blockquote {
  padding-left: var(--bc-space-4);
  border-left: var(--bc-space-1) solid var(--bc-separator-strong);
  color: var(--bc-text-secondary);
}
.bc-rich-content a {
  color: var(--bc-accent);
  font-weight: var(--bc-weight-semibold);
}
.bc-rich-content a:focus-visible {
  border-radius: var(--bc-radius-xs);
  box-shadow: var(--bc-focus-ring);
  outline: none;
}

/* ============================================================
   Keyboard shortcut overlay
   ============================================================ */
.bc-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 0 6px; height: 22px;
  background: var(--bc-bg-subtle);
  border: 1px solid var(--bc-separator);
  border-bottom-width: 2px;
  border-radius: var(--bc-radius-sm);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-text-caption-1);
  color: var(--bc-text-primary);
}
.bc-shortcut-list { display: grid; grid-template-columns: 1fr auto; gap: var(--bc-space-3) var(--bc-space-5); }
.bc-shortcut-list dt { color: var(--bc-text-secondary); }
.bc-shortcut-list dd { margin: 0; }

/* ============================================================
   Tables (refine Phoenix/DataTables look)
   ============================================================ */
/* Horizontal scroll for tables inside overflow-clipped panels (HIG: Layout — never clip content). */
.bc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bc-table { width: 100%; border-collapse: collapse; font-size: var(--bc-text-subhead); }
.bc-table-scroll .bc-table { min-width: max-content; }
.bc-table thead th {
  text-align: left;
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  letter-spacing: var(--bc-tracking-wide);
  text-transform: uppercase;
  color: var(--bc-text-secondary);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-separator);
  background: var(--bc-bg-subtle);
}
.bc-table tbody td {
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-separator);
  color: var(--bc-text-primary);
}
.bc-table tbody tr:hover td { background: var(--bc-bg-hover); }
.bc-table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   Tooltip (for disabled-explanation)
   ============================================================ */
.bc-tooltip {
  position: absolute;
  z-index: var(--bc-z-tooltip);
  background: var(--bc-text-primary);
  color: var(--bc-bg-elevated);
  padding: var(--bc-space-2) var(--bc-space-3);
  border-radius: var(--bc-radius-sm);
  font-size: var(--bc-text-caption-1);
  font-weight: var(--bc-weight-medium);
  max-width: 240px;
  box-shadow: var(--bc-shadow-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-tooltip[data-open="true"] { opacity: 1; }

/* ============================================================
   Phoenix component refinements — light overrides, opt-in via .bc-app
   ============================================================ */
.bc-app .btn { font-family: var(--bc-font-text); border-radius: var(--bc-radius-md); font-weight: var(--bc-weight-semibold); }
.bc-app .form-control,
.bc-app .form-select {
  font-family: var(--bc-font-text);
  border-radius: var(--bc-radius-md);
  border-color: var(--bc-border-field);
  color: var(--bc-text-primary);
  background-color: var(--bc-bg-elevated);
}
.bc-app .form-control:focus,
.bc-app .form-select:focus {
  border-color: var(--bc-accent);
  box-shadow: var(--bc-focus-ring);
}
.bc-app .card { border-radius: var(--bc-radius-xl); border-color: var(--bc-separator); }
.bc-app .modal-content { border-radius: var(--bc-radius-2xl); border: 0; box-shadow: var(--bc-shadow-sheet); }
.bc-app hr { border-color: var(--bc-separator); opacity: 1; }

/* Visually-hidden helper */
.bc-vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   App shell — Apple HIG refinement of the Phoenix chrome
   Refines (never replaces) the vertical sidebar + top navbar so
   the claim data leads and the chrome recedes (Deference).
   HIG: Foundations › Layout; Components › Sidebars.
   ============================================================ */

/* Page canvas — quiet grouped background lets surfaces float */
.bc-app .content { background: var(--bc-bg-grouped); }

/* ----- Vertical sidebar ----- */
/* HIG: Components › Sidebars — chrome recedes; labels stay readable. */
.bc-app {
  --phoenix-navbar-vertical-width: 18rem;
}
/* Phoenix hardcodes the expanded sidebar width and the content offset to
   15.875rem at ≥lg instead of reading its own width variable, which left rows
   too narrow for label + count badge. Apply the variable for real (expanded
   desktop only — collapsed rail keeps Phoenix's 4rem rules). */
@media (min-width: 992px) {
  html:not(.navbar-vertical-collapsed) .bc-app .navbar-vertical.navbar-expand-lg {
    width: var(--phoenix-navbar-vertical-width);
  }
  /* Matches Phoenix's own content-offset selector so specificity wins without !important. */
  html:not(.navbar-vertical-collapsed) .bc-app .navbar-vertical.navbar-expand-lg ~ .navbar-top ~ .content {
    margin-left: var(--phoenix-navbar-vertical-width);
  }
}
.bc-app .navbar-vertical {
  background: var(--bc-bg-elevated);
  border-right: 1px solid var(--bc-separator);
}
.bc-app .navbar-vertical .navbar-vertical-content {
  padding-top: var(--bc-space-2);
  padding-bottom: var(--bc-space-2);
}

/* Section labels — uppercase footnote with readable contrast */
.bc-app .navbar-vertical .bc-nav-section:first-child .navbar-vertical-label {
  margin-top: var(--bc-space-2);
}
.bc-app .navbar-vertical .navbar-vertical-label {
  font-family: var(--bc-font-text);
  font-size: var(--bc-text-caption);
  font-weight: var(--bc-weight-semibold);
  letter-spacing: var(--bc-tracking-wide);
  text-transform: uppercase;
  color: var(--bc-text-secondary);
  padding: 0 var(--bc-space-3);
  margin-top: var(--bc-space-5);
  margin-bottom: var(--bc-space-2);
}
.bc-app .navbar-vertical .navbar-vertical-line { display: none; }

/* Nav rows — rounded hit areas, calm default, accent on active */
.bc-app .navbar-vertical .nav-item-wrapper { padding: 0 var(--bc-space-2); }
.bc-app .navbar-vertical .nav-link {
  display: block;
  border-radius: var(--bc-radius-md);
  padding: var(--bc-space-2) var(--bc-space-3) !important;
  margin-bottom: 1px;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-medium);
  line-height: 1.35;
  white-space: normal;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .navbar-vertical .nav-link:hover {
  background: var(--bc-bg-hover);
  color: var(--bc-text-primary);
}
.bc-app .navbar-vertical .nav-link.active,
.bc-app .navbar-vertical .nav-link[aria-current="page"] {
  background: var(--bc-accent-tint);
  color: var(--bc-accent);
}
.bc-app .navbar-vertical .nav-link .nav-link-text {
  color: inherit;
  padding-top: 0;
}
.bc-app .navbar-vertical .nav-link-icon {
  color: var(--bc-text-tertiary);
  width: var(--bc-space-5);
  min-width: var(--bc-space-5) !important;
  margin-right: var(--bc-space-3) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-regular);
  flex-shrink: 0;
}
.bc-app .navbar-vertical .nav-link:hover .nav-link-icon,
.bc-app .navbar-vertical .nav-link.active .nav-link-icon { color: inherit; }

/* Status queue — label left, count badge right */
.bc-app .navbar-vertical .bc-nav-section--status .nav-link {
  padding-top: var(--bc-space-1) !important;
  padding-bottom: var(--bc-space-1) !important;
}
.bc-app .navbar-vertical .bc-nav-link--status .nav-link-text {
  flex: 1;
  min-width: 0;
}
/* Icon + label + count rows: the label group must be allowed to shrink,
   otherwise a long label pushes the count badge past the sidebar edge
   where it gets clipped. Long labels ellipsize instead of overflowing. */
.bc-app .navbar-vertical .nav-link > .d-flex > .d-flex {
  flex: 1;
  min-width: 0;
}
.bc-app .navbar-vertical .nav-link > .d-flex > .d-flex .nav-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-app .navbar-vertical .bc-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bc-space-6);
  padding: var(--bc-space-1) var(--bc-space-2);
  border-radius: var(--bc-radius-pill);
  font-size: var(--bc-text-caption);
  font-weight: var(--bc-weight-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--bc-bg-subtle);
  color: var(--bc-text-secondary);
  flex-shrink: 0;
  line-height: 1;
}
.bc-app .navbar-vertical .bc-nav-count--open {
  background: color-mix(in srgb, var(--bc-accent) 12%, transparent);
  color: var(--bc-accent);
}
.bc-app .navbar-vertical .bc-nav-count--received {
  background: color-mix(in srgb, var(--bc-status-received) 14%, transparent);
  color: var(--bc-status-received);
}
.bc-app .navbar-vertical .bc-nav-count--awaiting-inspection {
  background: color-mix(in srgb, var(--bc-status-awaiting-inspection) 14%, transparent);
  color: var(--bc-status-awaiting-inspection);
}
.bc-app .navbar-vertical .bc-nav-count--inspected {
  background: color-mix(in srgb, var(--bc-status-inspected) 14%, transparent);
  color: var(--bc-status-inspected);
}
.bc-app .navbar-vertical .bc-nav-count--awaiting-pickup {
  background: color-mix(in srgb, var(--bc-status-awaiting-pickup) 14%, transparent);
  color: var(--bc-status-awaiting-pickup);
}
.bc-app .navbar-vertical .bc-nav-count--awaiting-repair {
  background: color-mix(in srgb, var(--bc-status-awaiting-repair) 14%, transparent);
  color: var(--bc-status-awaiting-repair);
}
.bc-app .navbar-vertical .bc-nav-count--awaiting-delivery {
  background: color-mix(in srgb, var(--bc-status-awaiting-delivery) 14%, transparent);
  color: var(--bc-status-awaiting-delivery);
}
.bc-app .navbar-vertical .bc-nav-count--booked {
  background: color-mix(in srgb, var(--bc-status-booked) 14%, transparent);
  color: var(--bc-status-booked);
}
.bc-app .navbar-vertical .bc-nav-count--on-hold {
  background: color-mix(in srgb, var(--bc-status-on-hold) 18%, transparent);
  color: color-mix(in srgb, var(--bc-status-on-hold) 72%, var(--bc-text-primary));
}
.bc-app .navbar-vertical .bc-nav-count--closed {
  background: color-mix(in srgb, var(--bc-status-closed) 18%, transparent);
  color: var(--bc-status-closed);
}
.bc-app .navbar-vertical .bc-nav-count--danger {
  background: var(--bc-destructive-tint);
  color: var(--bc-destructive);
}
/* "New" — unseen customer activity (new images, customer replies). Teal keeps
   it distinct from red (waiting on us) and amber (ageing follow-up). */
.bc-app .navbar-vertical .bc-nav-count--new {
  background: color-mix(in srgb, var(--bc-color-teal) 18%, transparent);
  color: var(--bc-color-teal);
}
.bc-app .navbar-vertical .nav-link:hover .bc-nav-count,
.bc-app .navbar-vertical .nav-link.active .bc-nav-count {
  color: inherit;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* Collapsed rail — center everything (icons, status count badges, toggle).
   Status rows have no icon, only a count badge; Phoenix hides the text label on
   collapse, which left the badge floating and clipped. Centering all rows keeps
   the rail tidy and prevents any clipping. */
.navbar-vertical-collapsed .bc-app .navbar-vertical .nav-link {
  padding-left: var(--bc-space-1) !important;
  padding-right: var(--bc-space-1) !important;
}
.navbar-vertical-collapsed .bc-app .navbar-vertical .nav-link > .d-flex {
  justify-content: center !important;
  gap: 0 !important;
}
.navbar-vertical-collapsed .bc-app .navbar-vertical .nav-link-icon {
  margin-right: 0 !important;
}
.navbar-vertical-collapsed .bc-app .navbar-vertical .bc-nav-link--status .bc-nav-count {
  min-width: 0;
  padding: var(--bc-space-1) var(--bc-space-2);
}
/* Rows that have an icon (e.g. Ageing requests) keep the icon as the collapsed
   indicator; hide their count badge so it doesn't share the row with the icon. */
.navbar-vertical-collapsed .bc-app .navbar-vertical .nav-link:not(.bc-nav-link--status) .bc-nav-count {
  display: none;
}
/* Rows that have an icon AND a count pill (Ageing requests, Inbox unread)
   can't fit both in the 4rem rail — the icon stays, the pill hides.
   !important because the Inbox badge's visibility is toggled via inline style.
   The counts remain available in the expanded sidebar. */
.navbar-vertical-collapsed .bc-app .navbar-vertical .nav-link:not(.bc-nav-link--status) .bc-nav-count {
  display: none !important;
}
.navbar-vertical-collapsed .bc-app .navbar-vertical .navbar-vertical-footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center;
}
.navbar-vertical-collapsed .bc-app .navbar-vertical .navbar-vertical-toggle {
  justify-content: center !important;
}

/* Collapse control — Phoenix sizes/positions the footer natively (fixed, 4rem,
   matches sidebar width, swaps to icon-only when collapsed). We only restyle it
   and re-create the icon swap, since Unicons were removed in favour of fa-angles. */
.bc-app .navbar-vertical .navbar-vertical-footer {
  border-top: 1px solid var(--bc-separator);
  background: var(--bc-bg-elevated);
}
.bc-app .navbar-vertical .navbar-vertical-footer .bc-nav-icon-expand { display: none; }
.bc-app .navbar-vertical .navbar-vertical-footer .bc-nav-icon-collapse { display: inline; }
.navbar-vertical-collapsed .bc-app .navbar-vertical .navbar-vertical-footer .bc-nav-icon-expand { display: inline; }
.navbar-vertical-collapsed .bc-app .navbar-vertical .navbar-vertical-footer .bc-nav-icon-collapse { display: none; }
.bc-app .navbar-vertical .navbar-vertical-toggle {
  border-radius: var(--bc-radius-md);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-medium);
  padding: var(--bc-space-2) var(--bc-space-3);
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .navbar-vertical .navbar-vertical-toggle:hover {
  background: var(--bc-bg-hover);
  color: var(--bc-text-primary);
}
.bc-app .navbar-vertical .navbar-vertical-toggle:focus-visible {
  box-shadow: var(--bc-focus-ring);
  outline: none;
}

/* ----- Top navbar ----- */
.bc-app .navbar-top {
  background: color-mix(in srgb, var(--bc-bg-elevated) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bc-separator);
  box-shadow: none;
}
.bc-app .navbar-top .search-input {
  background: var(--bc-bg-grouped);
  border: 1px solid transparent;
  border-radius: var(--bc-radius-pill);
  color: var(--bc-text-primary);
}
.bc-app .navbar-top .search-input:focus {
  background: var(--bc-bg-elevated);
  border-color: var(--bc-accent);
  box-shadow: var(--bc-focus-ring);
}

/* ----- Navbar quick search (bc-quick-search) -----
   HIG: Components › Search fields; Patterns › Searching.
   Live results in a compact list; full search page for filters. */
.bc-app .bc-quick-search {
  position: relative;
}
.bc-app .bc-quick-search__menu {
  position: absolute;
  z-index: 1080;
  top: calc(100% + var(--bc-space-1));
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--bc-space-1) 0;
  list-style: none;
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-2);
  max-height: calc(var(--bc-space-10) * 4);
  overflow: auto;
}
.bc-app .bc-quick-search__menu[data-state="loading"],
.bc-app .bc-quick-search__menu[data-state="empty"] {
  padding: var(--bc-space-3) var(--bc-space-4);
}
.bc-app .bc-quick-search__status {
  margin: 0;
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
}
.bc-app .bc-quick-search__item {
  display: flex;
  align-items: flex-start;
  gap: var(--bc-space-3);
  width: 100%;
  padding: var(--bc-space-3) var(--bc-space-4);
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .bc-quick-search__item:hover,
.bc-app .bc-quick-search__item[data-active="true"] {
  background: var(--bc-bg-hover);
}
.bc-app .bc-quick-search__item:focus-visible {
  outline: none;
  box-shadow: inset var(--bc-focus-ring);
}
.bc-app .bc-quick-search__main {
  flex: 1;
  min-width: 0;
}
.bc-app .bc-quick-search__title {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  font-size: var(--bc-text-subhead);
  font-weight: 600;
  color: var(--bc-text-primary);
}
.bc-app .bc-quick-search__case {
  color: var(--bc-accent);
  font-weight: 600;
}
.bc-app .bc-quick-search__meta {
  margin-top: var(--bc-space-1);
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-app .bc-quick-search__footer {
  border-top: 1px solid var(--bc-separator);
  margin-top: var(--bc-space-1);
  padding-top: var(--bc-space-1);
}
.bc-app .bc-quick-search__more {
  display: block;
  width: 100%;
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-text-footnote);
  font-weight: 500;
  color: var(--bc-accent);
  text-decoration: none;
}
.bc-app .bc-quick-search__more:hover {
  background: var(--bc-bg-hover);
  color: var(--bc-accent);
}
.bc-app .bc-quick-search__more:focus-visible {
  outline: none;
  box-shadow: inset var(--bc-focus-ring);
}

/* ----- Top navbar — right-hand cluster (bc-topnav) -----
   HIG: Components › Toolbars; Foundations › Color.
   Quiet, evenly sized icon buttons. The unread count is a calm
   solid badge (colour + words via aria-label on the link) — the
   iOS app-badge pattern. No gradients, no looping animation. */
.bc-app .bc-topnav {
  gap: var(--bc-space-1);
}
.bc-app .bc-topnav > .nav-item {
  display: flex;
  align-items: center;
}

.bc-app .bc-topnav__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bc-control-h-md);
  height: var(--bc-control-h-md);
  border-radius: var(--bc-radius-md);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-callout);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              color var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .bc-topnav__icon-btn:hover {
  background: var(--bc-bg-hover);
  color: var(--bc-text-primary);
}
.bc-app .bc-topnav__icon-btn:active {
  background: var(--bc-bg-pressed);
}
.bc-app .bc-topnav__icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
}

/* Unread count — solid system red, white numeral, hairline ring so it
   sits cleanly on the icon. Toggled by JS between none / inline-flex. */
.bc-app .bc-topnav__unread {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(25%, -25%);
  min-width: var(--bc-space-4);
  height: var(--bc-space-4);
  padding: 0 var(--bc-space-1);
  align-items: center;
  justify-content: center;
  background: var(--bc-destructive);
  color: var(--bc-text-on-destructive);
  font-size: var(--bc-text-caption-2);
  font-weight: var(--bc-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border-radius: var(--bc-radius-pill);
  box-shadow: 0 0 0 2px var(--bc-bg-elevated);
  pointer-events: none;
}

/* Current-case chip — tinted, never competes with page content */
.bc-app .bc-topnav__case {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  height: var(--bc-control-h-sm);
  padding: 0 var(--bc-space-3);
  border-radius: var(--bc-radius-pill);
  background: var(--bc-accent-tint);
  color: var(--bc-accent);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .bc-topnav__case:hover {
  background: color-mix(in srgb, var(--bc-accent) 20%, transparent);
  color: var(--bc-accent);
}
.bc-app .bc-topnav__case:focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
}

.bc-app .bc-topnav__sep {
  width: 1px;
  height: var(--bc-space-5);
  background: var(--bc-separator);
  margin: 0 var(--bc-space-2);
}

.bc-app .bc-topnav__theme {
  display: flex;
  align-items: center;
  /* FA Kit uses webfonts, not Phoenix's i2svg wait — never hide at opacity 0. */
  opacity: 1;
}
/* Keep the visible action aligned with the applied theme when Phoenix's
   checkbox drifts from data-bc-theme (dual localStorage keys). */
:root[data-bc-theme="dark"] .bc-app .bc-topnav__theme .theme-control-toggle-dark {
  display: none !important;
}
:root[data-bc-theme="light"] .bc-app .bc-topnav__theme .theme-control-toggle-light {
  display: none !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-bc-theme="light"]) .bc-app .bc-topnav__theme .theme-control-toggle-dark {
    display: none !important;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-bc-theme="dark"]) .bc-app .bc-topnav__theme .theme-control-toggle-light {
    display: none !important;
  }
}
/* Neutralise Phoenix's tinted round label so the toggle matches its siblings */
.bc-app .bc-topnav__theme .theme-control-toggle-label {
  height: var(--bc-control-h-md);
  width: var(--bc-control-h-md);
  background-color: transparent;
  color: var(--bc-text-secondary);
  border-radius: var(--bc-radius-md);
}
.bc-app .bc-topnav__theme .theme-control-toggle-label:hover {
  background-color: var(--bc-bg-hover);
  color: var(--bc-text-primary);
}

/* Avatar shares the icon-button rhythm: a 36px square hit area with a
   32px circle centred inside, so it lines up with the envelope + theme
   toggle. Phoenix's nav-link padding (8px left / 0 right) is removed so
   spacing stays even. HIG: Components › Toolbars (consistent controls). */
.bc-app .bc-topnav__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bc-control-h-md);
  height: var(--bc-control-h-md);
  padding: 0;
  border-radius: var(--bc-radius-pill);
}
.bc-app .bc-topnav__avatar .avatar,
.bc-app .bc-topnav__avatar .avatar.avatar-l {
  flex: 0 0 auto;
  width: var(--bc-space-7);
  height: var(--bc-space-7);
  display: block;
  border-radius: var(--bc-radius-pill);
  overflow: hidden;
}
.bc-app .bc-topnav__avatar .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bc-app .bc-topnav__avatar:focus-visible {
  outline: none;
  box-shadow: var(--bc-focus-ring);
}

/* Account menu — identity card + single action, hairline-separated */
.bc-app .bc-topnav__menu {
  min-width: calc(var(--bc-space-10) * 4);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-lg);
  background: var(--bc-bg-elevated);
  box-shadow: var(--bc-shadow-3);
  overflow: hidden;
}
.bc-app .bc-topnav__menu-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--bc-space-5) var(--bc-space-4) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-separator);
}
.bc-app .bc-topnav__menu-name {
  margin: var(--bc-space-2) 0 0;
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
}
.bc-app .bc-topnav__menu-email {
  margin: 0;
  font-size: var(--bc-text-caption-1);
  color: var(--bc-text-secondary);
  overflow-wrap: anywhere;
}
.bc-app .bc-topnav__menu-sso {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  margin-top: var(--bc-space-2);
  font-size: var(--bc-text-caption-1);
  color: var(--bc-text-tertiary);
}
.bc-app .bc-topnav__menu-actions {
  padding: var(--bc-space-3) var(--bc-space-3) var(--bc-space-3);
}
.bc-app .bc-topnav__menu-actions .bc-btn {
  gap: var(--bc-space-2);
}

/* Create menu — compact action list from the + toolbar control.
   HIG: Components › Toolbars; Patterns › Menus. */
.bc-app .bc-topnav__create-menu {
  min-width: calc(var(--bc-space-10) * 2.75);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-lg);
  background: var(--bc-bg-elevated);
  box-shadow: var(--bc-shadow-3);
  overflow: hidden;
  padding: var(--bc-space-1) 0;
}
.bc-app .bc-topnav__create-item {
  display: flex;
  align-items: center;
  gap: var(--bc-space-3);
  width: 100%;
  padding: var(--bc-space-3) var(--bc-space-4);
  color: var(--bc-text-primary);
  font-size: var(--bc-text-subhead);
  font-weight: var(--bc-weight-regular);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-app .bc-topnav__create-item i {
  flex: 0 0 auto;
  width: var(--bc-space-4);
  text-align: center;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-callout);
}
.bc-app .bc-topnav__create-item:hover {
  background: var(--bc-bg-hover);
  color: var(--bc-text-primary);
}
.bc-app .bc-topnav__create-item:active {
  background: var(--bc-bg-pressed);
}
.bc-app .bc-topnav__create-item:focus-visible {
  outline: none;
  box-shadow: inset var(--bc-focus-ring);
}

/* ============================================================
   Dashboard kit — Jira/Salesforce-style overview surfaces
   Reusable across overview pages. Hairline-grouped surfaces,
   one clear hierarchy, status carried in colour + words.
   HIG: Foundations › Layout, Color; Patterns › Launching.
   ============================================================ */
.bc-dash { padding: var(--bc-space-7) 0 var(--bc-space-9); }

/* Greeting / page header */
.bc-dash__header { margin-bottom: var(--bc-space-7); }
.bc-dash__title {
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-title-1);
  font-weight: var(--bc-weight-bold);
  letter-spacing: var(--bc-tracking-tight);
  color: var(--bc-text-primary);
  margin: 0 0 var(--bc-space-1);
}
.bc-dash__subtitle {
  font-size: var(--bc-text-subhead);
  color: var(--bc-text-secondary);
  margin: 0;
}

/* Section heading between bands of content */
.bc-section-head { margin: var(--bc-space-8) 0 var(--bc-space-4); }
.bc-section-head:first-child { margin-top: 0; }
.bc-section-head__title {
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-title-3);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-primary);
  margin: 0 0 var(--bc-space-1);
}
.bc-section-head__sub {
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
  margin: 0;
  max-width: var(--bc-readable-max);
}

/* Responsive auto-fit grid for tiles */
.bc-grid { display: grid; gap: var(--bc-space-4); }
.bc-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bc-grid--3   { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* KPI tile — the headline number with a clear destination */
.bc-kpi {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bc-space-3);
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  padding: var(--bc-space-5);
  text-decoration: none;
  transition: transform var(--bc-duration-base) var(--bc-ease-emphasized),
              box-shadow var(--bc-duration-base) var(--bc-ease-standard),
              border-color var(--bc-duration-base) var(--bc-ease-standard);
}
a.bc-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--bc-shadow-2);
  border-color: var(--bc-separator-strong);
}
.bc-kpi__label {
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-semibold);
  color: var(--bc-text-secondary);
  margin: 0 0 var(--bc-space-2);
}
.bc-kpi__value {
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-large-title);
  font-weight: var(--bc-weight-bold);
  line-height: var(--bc-leading-tight);
  letter-spacing: var(--bc-tracking-tight);
  color: var(--bc-text-primary);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--bc-space-2);
}
.bc-kpi__meta {
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-tertiary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--bc-space-1);
}
.bc-kpi__meta strong { color: var(--bc-text-secondary); font-weight: var(--bc-weight-semibold); }

/* Tinted icon chip — colour echoes the queue's status colour */
.bc-kpi__icon {
  flex-shrink: 0;
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bc-radius-lg);
  font-size: var(--bc-text-title-3);
}
.bc-tint-blue   { background: color-mix(in srgb, var(--bc-color-blue) 14%, transparent);   color: var(--bc-color-blue); }
.bc-tint-green  { background: color-mix(in srgb, var(--bc-color-green) 16%, transparent);  color: var(--bc-color-green); }
.bc-tint-orange { background: color-mix(in srgb, var(--bc-color-orange) 16%, transparent); color: var(--bc-color-orange); }
.bc-tint-red    { background: color-mix(in srgb, var(--bc-color-red) 14%, transparent);    color: var(--bc-color-red); }
.bc-tint-purple { background: color-mix(in srgb, var(--bc-color-purple) 16%, transparent); color: var(--bc-color-purple); }
.bc-tint-indigo { background: color-mix(in srgb, var(--bc-color-indigo) 16%, transparent); color: var(--bc-color-indigo); }
.bc-tint-teal   { background: color-mix(in srgb, var(--bc-color-teal) 16%, transparent);   color: var(--bc-color-teal); }
.bc-tint-cyan   { background: color-mix(in srgb, var(--bc-color-cyan) 16%, transparent);   color: var(--bc-color-cyan); }
.bc-tint-yellow { background: color-mix(in srgb, var(--bc-color-yellow) 22%, transparent); color: var(--bc-color-brown); }
.bc-tint-gray   { background: var(--bc-bg-grouped); color: var(--bc-text-secondary); }

/* Simple metric tile (no destination) */
.bc-metric {
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  padding: var(--bc-space-5);
}
.bc-metric__label { font-size: var(--bc-text-footnote); font-weight: var(--bc-weight-semibold); color: var(--bc-text-secondary); margin: 0 0 var(--bc-space-2); }
.bc-metric__value { font-family: var(--bc-font-display); font-size: var(--bc-text-title-1); font-weight: var(--bc-weight-bold); color: var(--bc-text-primary); font-variant-numeric: tabular-nums; line-height: var(--bc-leading-tight); margin: 0; }
.bc-metric__note  { font-size: var(--bc-text-caption-1); color: var(--bc-text-tertiary); margin: var(--bc-space-2) 0 0; }
.bc-metric--center { text-align: center; }
.bc-metric--center .bc-kpi__icon { margin: 0 auto var(--bc-space-3); }

/* Process flow — Salesforce-style path through the workflow */
.bc-flow {
  display: flex;
  flex-wrap: wrap;
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  overflow: hidden;
}
.bc-flow__step {
  flex: 1 1 12%;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bc-space-2);
  padding: var(--bc-space-5) var(--bc-space-3);
  text-decoration: none;
  border-right: 1px solid var(--bc-separator);
  transition: background var(--bc-duration-fast) var(--bc-ease-standard);
}
.bc-flow__step:last-child { border-right: 0; }
.bc-flow__step:hover { background: var(--bc-bg-hover); }
.bc-flow__count {
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-title-2);
  font-weight: var(--bc-weight-bold);
  color: var(--bc-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bc-flow__label { font-size: var(--bc-text-caption-1); font-weight: var(--bc-weight-medium); color: var(--bc-text-secondary); text-align: center; }
.bc-flow__icon { width: var(--bc-control-h-md); height: var(--bc-control-h-md); border-radius: var(--bc-radius-md); display: inline-flex; align-items: center; justify-content: center; font-size: var(--bc-text-callout); }

/* Panel — Phoenix card stack (card-header py-2 px-3 + card-body p-0 for tables). */
.bc-panel {
  background: var(--bc-bg-elevated);
  border: 1px solid var(--bc-separator);
  border-radius: var(--bc-radius-xl);
  padding: 0;
  overflow: hidden;
}
.bc-panel__head {
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-separator);
}
/* Section-start panel — replaces bc-section-head + card stack (Phoenix CRM dashboard). */
.bc-panel--section { margin-top: var(--bc-space-6); }
.bc-panel--section:first-child { margin-top: 0; }
/* Phoenix card-header row: title + count left, action right (HIG: Layout). */
.bc-panel__head.d-flex.flex-between-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-2);
}
.bc-panel__head .bc-panel__title.d-flex {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  min-width: 0;
}
.bc-panel__head .bc-btn { flex-shrink: 0; white-space: nowrap; min-height: auto; padding-block: var(--bc-space-1); }
.bc-panel__title { font-size: var(--bc-text-callout); font-weight: var(--bc-weight-semibold); color: var(--bc-text-primary); margin: 0; line-height: 1.25; }
.bc-panel__body { padding: var(--bc-space-4); }
.bc-panel__body--flush { padding: 0; }
.bc-panel__inset { padding: var(--bc-space-2) var(--bc-space-4); border-bottom: 1px solid var(--bc-separator); }
/* Alert band under panel header — flush like Phoenix card-body alert (no inset gutter). */
.bc-panel > .bc-banner,
.bc-panel__inset > .bc-banner:only-child {
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: var(--bc-space-3) var(--bc-space-4);
  gap: var(--bc-space-2);
  font-size: var(--bc-text-footnote);
}
.bc-panel__inset:has(> .bc-banner:only-child) {
  padding: 0;
  border-bottom: 0;
}
.bc-panel > .bc-banner .bc-banner__title,
.bc-panel__inset > .bc-banner:only-child .bc-banner__title {
  font-size: var(--bc-text-callout);
  margin: 0 0 var(--bc-space-1);
}
/* Compact table cells inside panels (Phoenix table-sm). */
.bc-panel .bc-table thead th,
.bc-panel .bc-table tbody td {
  padding: var(--bc-space-3) var(--bc-space-4);
}
.bc-panel .bc-table thead th {
  font-size: var(--bc-text-caption-1);
}
.bc-panel__body--flush .table-responsive { border-bottom: 0; }
.bc-panel__note {
  font-size: var(--bc-text-footnote);
  color: var(--bc-text-secondary);
  margin: var(--bc-space-4) 0 0;
  padding-top: var(--bc-space-4);
  border-top: 1px solid var(--bc-separator);
}
.bc-grid--panels { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ============================================================
   Admin uploads browser
   HIG: Layout, Search fields, File management, Privacy
   ============================================================ */
.bc-admin-card__icon {
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
}
.bc-uploads {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-5);
}
.bc-uploads__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bc-space-4);
}
.bc-uploads__title {
  margin: 0 0 var(--bc-space-1);
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-title-1);
  font-weight: var(--bc-weight-bold);
  color: var(--bc-text-primary);
}
.bc-uploads__subtitle,
.bc-uploads__count {
  margin: 0;
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-subhead);
}
.bc-uploads > .bc-banner { margin: 0; }
.bc-uploads__browser { overflow: visible; }
.bc-uploads__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bc-space-4);
}
.bc-uploads__toolbar > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-1);
}
.bc-uploads__controls {
  display: flex;
  align-items: flex-end;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
}
.bc-uploads__controls .bc-field { margin: 0; }
.bc-uploads__bucket { flex: 1; }
.bc-uploads__search { flex: 2; }
.bc-uploads__filter { flex: 1; }
.bc-uploads__path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-separator);
  color: var(--bc-text-tertiary);
  font-size: var(--bc-text-footnote);
}
.bc-uploads__path a {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  color: var(--bc-accent);
  font-weight: var(--bc-weight-medium);
}
.bc-uploads__folders {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bc-space-2);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: thin solid var(--bc-separator);
}
.bc-uploads__folders[hidden] { display: none; }
.bc-uploads__folders a {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  min-height: var(--bc-control-h-sm);
  padding: 0 var(--bc-space-3);
  border-radius: var(--bc-radius-sm);
  background: var(--bc-bg-subtle);
  color: var(--bc-text-primary);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-medium);
}
.bc-uploads__folders a:hover { background: var(--bc-bg-hover); }
.bc-uploads__browser > .bc-banner {
  margin: var(--bc-space-4);
}
.bc-uploads__table th { white-space: nowrap; }
.bc-uploads__table td { vertical-align: middle; }
.bc-uploads .dataTables_wrapper {
  display: flow-root;
  padding: var(--bc-space-4);
  color: var(--bc-text-primary);
}
.bc-uploads .dataTables_wrapper .dataTables_length,
.bc-uploads .dataTables_wrapper .dataTables_filter {
  margin-bottom: var(--bc-space-4);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-footnote);
}
.bc-uploads .dataTables_wrapper .dataTables_length select,
.bc-uploads .dataTables_wrapper .dataTables_filter input {
  min-height: var(--bc-control-h-md);
  margin-left: var(--bc-space-2);
  padding: 0 var(--bc-space-3);
  border: thin solid var(--bc-border-field);
  border-radius: var(--bc-radius-md);
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  font: inherit;
}
.bc-uploads .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--bc-accent);
  box-shadow: var(--bc-focus-ring);
}
.bc-uploads .dataTables_wrapper .dataTables_info {
  padding-top: var(--bc-space-4);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-footnote);
}
.bc-uploads .dataTables_wrapper .dataTables_paginate {
  display: flex;
  align-items: center;
  gap: var(--bc-space-1);
  padding-top: var(--bc-space-3);
}
.bc-uploads .dataTables_wrapper .dataTables_paginate .paginate_button {
  min-width: var(--bc-control-h-md);
  min-height: var(--bc-control-h-md);
  margin: 0;
  padding: 0 var(--bc-space-2);
  border: thin solid transparent;
  border-radius: var(--bc-radius-sm);
  color: var(--bc-text-primary) !important;
  background: transparent !important;
}
.bc-uploads .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: transparent;
  background: var(--bc-bg-hover) !important;
}
.bc-uploads .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border-color: transparent;
  background: var(--bc-accent-tint) !important;
  color: var(--bc-accent) !important;
}
.bc-uploads .dataTables_wrapper .dataTables_processing {
  border: thin solid var(--bc-separator);
  border-radius: var(--bc-radius-lg);
  background: var(--bc-bg-elevated);
  color: var(--bc-text-primary);
  box-shadow: var(--bc-shadow-2);
}
.bc-uploads__name {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-3);
  color: var(--bc-text-primary);
}
.bc-uploads__name-button {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.bc-uploads__name > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--bc-control-h-md);
  width: var(--bc-control-h-md);
  height: var(--bc-control-h-md);
  border-radius: var(--bc-radius-md);
  color: var(--bc-accent);
  background: var(--bc-accent-tint);
  font-size: var(--bc-text-callout);
}
.bc-uploads__name > span {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-1);
  min-width: 0;
}
.bc-uploads__name strong { font-weight: var(--bc-weight-semibold); }
.bc-uploads__name small {
  color: var(--bc-text-secondary);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-text-caption-1);
  overflow-wrap: anywhere;
}
.bc-uploads__origin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bc-space-1);
  min-width: max-content;
}
.bc-uploads__origin strong {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-2);
  font-weight: var(--bc-weight-semibold);
}
.bc-uploads__origin strong > i { color: var(--bc-text-secondary); }
.bc-uploads__origin a {
  color: var(--bc-accent);
  font-size: var(--bc-text-footnote);
  font-weight: var(--bc-weight-medium);
}
.bc-uploads__origin small {
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-caption-1);
}
.bc-uploads__undo {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  flex-wrap: wrap;
}
.bc-uploads__undo small {
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-caption-1);
}
.bc-uploads__viewer-sheet {
  width: min(90vw, calc(var(--bc-space-11) * 16));
}
.bc-uploads__viewer-sheet .bc-sheet__body {
  padding: 0;
  overflow: hidden;
}
.bc-uploads__viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.bc-uploads__viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bc-space-3);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: thin solid var(--bc-separator);
  background: var(--bc-bg-subtle);
}
.bc-uploads__viewer-toolbar > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--bc-text-secondary);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-text-caption-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-uploads__viewer-zoom { flex-shrink: 0; }
.bc-uploads__viewer-stage {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: var(--bc-space-4);
  background: var(--bc-bg-grouped);
}
.bc-uploads__viewer-stage.is-actual {
  align-items: flex-start;
  justify-content: flex-start;
}
.bc-uploads__viewer-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bc-uploads__viewer-image.is-actual {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: none;
}
.bc-uploads__viewer-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: var(--bc-bg-base);
}
.bc-uploads__viewer-empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  padding: var(--bc-space-8);
  text-align: center;
  color: var(--bc-text-secondary);
}
.bc-uploads__viewer-empty > i {
  color: var(--bc-text-tertiary);
  font-size: var(--bc-text-large-title);
}
.bc-uploads__viewer-empty h3,
.bc-uploads__viewer-empty p { margin: 0; }
.bc-uploads__viewer-empty h3 {
  color: var(--bc-text-primary);
  font-size: var(--bc-text-headline);
}
.bc-uploads__assign-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-4);
}
.bc-uploads__assign-sheet > p {
  margin: 0;
  color: var(--bc-text-secondary);
}
.bc-uploads__assign-sheet > small {
  overflow-wrap: anywhere;
  color: var(--bc-text-tertiary);
  font-family: var(--bc-font-mono);
  font-size: var(--bc-text-caption-1);
}
.bc-uploads__assign-sheet form { margin-top: var(--bc-space-2); }
.bc-uploads__assign-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--bc-space-2);
}
.bc-uploads__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--bc-space-2);
  white-space: nowrap;
}
.bc-uploads__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--bc-space-2);
  padding: var(--bc-space-10) var(--bc-space-4);
  color: var(--bc-text-secondary);
}
.bc-uploads__empty > i {
  font-size: var(--bc-text-large-title);
  color: var(--bc-text-tertiary);
}
.bc-uploads__empty h3,
.bc-uploads__empty p { margin: 0; }
.bc-uploads__empty h3 {
  color: var(--bc-text-primary);
  font-size: var(--bc-text-headline);
}
.bc-uploads__pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--bc-space-3);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-top: 1px solid var(--bc-separator);
  color: var(--bc-text-secondary);
  font-size: var(--bc-text-footnote);
}

/* Chart container — fixed height so Chart.js can fill it */
.bc-chart { position: relative; height: var(--bc-chart-h); }

/* Empty state — calm, reassuring "nothing to do here" (HIG: Patterns › Empty states) */
.bc-empty { text-align: center; padding: var(--bc-space-10) var(--bc-space-6); display: flex; flex-direction: column; align-items: center; gap: var(--bc-space-3); }
.bc-empty__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--bc-radius-xl); background: var(--bc-bg-subtle); color: var(--bc-text-tertiary); font-size: var(--bc-text-title-2); }
.bc-empty__title { font-size: var(--bc-text-title-3); font-weight: var(--bc-weight-semibold); color: var(--bc-text-primary); margin: 0; }
.bc-empty__sub { font-size: var(--bc-text-subhead); color: var(--bc-text-secondary); margin: 0; max-width: 44ch; }

/* ============================================================
   Phoenix button bridge — map `btn-phoenix-*` to the HIG tinted
   action language so legacy markup reads as Apple without a rewrite.
   HIG: Components › Buttons (tinted = soft, recede until needed).
   ============================================================ */
.bc-app .btn-phoenix-primary,
.bc-app .btn-phoenix-secondary,
.bc-app .btn-phoenix-success,
.bc-app .btn-phoenix-danger,
.bc-app .btn-phoenix-warning,
.bc-app .btn-phoenix-info {
  border: 1px solid transparent;
  border-radius: var(--bc-radius-md);
  font-weight: var(--bc-weight-semibold);
  transition: background var(--bc-duration-fast) var(--bc-ease-standard),
              color var(--bc-duration-fast) var(--bc-ease-standard);
  box-shadow: none;
}
.bc-app .btn-phoenix-primary   { background: var(--bc-accent-tint);      color: var(--bc-accent); }
.bc-app .btn-phoenix-primary:hover,
.bc-app .btn-phoenix-primary:focus { background: color-mix(in srgb, var(--bc-accent) 22%, transparent); color: var(--bc-accent); }
.bc-app .btn-phoenix-secondary { background: var(--bc-bg-grouped);       color: var(--bc-text-primary); }
.bc-app .btn-phoenix-secondary:hover,
.bc-app .btn-phoenix-secondary:focus { background: var(--bc-bg-pressed); color: var(--bc-text-primary); }
.bc-app .btn-phoenix-success   { background: var(--bc-success-tint);     color: var(--bc-success); }
.bc-app .btn-phoenix-success:hover,
.bc-app .btn-phoenix-success:focus { background: color-mix(in srgb, var(--bc-success) 24%, transparent); color: var(--bc-success); }
.bc-app .btn-phoenix-danger    { background: var(--bc-destructive-tint); color: var(--bc-destructive); }
.bc-app .btn-phoenix-danger:hover,
.bc-app .btn-phoenix-danger:focus { background: color-mix(in srgb, var(--bc-destructive) 22%, transparent); color: var(--bc-destructive); }
.bc-app .btn-phoenix-warning   { background: var(--bc-warning-tint);     color: var(--bc-warning); }
.bc-app .btn-phoenix-warning:hover,
.bc-app .btn-phoenix-warning:focus { background: color-mix(in srgb, var(--bc-warning) 24%, transparent); color: var(--bc-warning); }
.bc-app .btn-phoenix-info      { background: var(--bc-info-tint);        color: var(--bc-info); }
.bc-app .btn-phoenix-info:hover,
.bc-app .btn-phoenix-info:focus { background: color-mix(in srgb, var(--bc-info) 24%, transparent); color: var(--bc-info); }

/* ============================================================
   Phoenix badge bridge — map `badge-phoenix-*` to tinted HIG chips.
   Status carried in colour + the word inside the badge.
   ============================================================ */
.bc-app .badge-phoenix {
  border: 1px solid transparent;
  border-radius: var(--bc-radius-pill);
  font-weight: var(--bc-weight-semibold);
  font-size: var(--bc-text-caption-1);
  letter-spacing: var(--bc-tracking-normal);
}
.bc-app .badge-phoenix-primary { background: var(--bc-accent-tint);      color: var(--bc-accent); }
.bc-app .badge-phoenix-secondary { background: var(--bc-bg-grouped);     color: var(--bc-text-secondary); }
.bc-app .badge-phoenix-success { background: var(--bc-success-tint);     color: var(--bc-success); }
.bc-app .badge-phoenix-danger  { background: var(--bc-destructive-tint); color: var(--bc-destructive); }
.bc-app .badge-phoenix-warning { background: var(--bc-warning-tint);     color: var(--bc-warning); }
.bc-app .badge-phoenix-info    { background: var(--bc-info-tint);        color: var(--bc-info); }

/* ============================================================
   Queue navigation — bc-queue-nav (Slice 2.1)
   HIG: Patterns › Navigation — "always tell the user where they are."
   Mounted in the sticky summary bar on ReviewEdit / AssignEdit.
   ============================================================ */

/* Container */
.bc-queue-nav {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  font-size: var(--bc-text-footnote);
}

/* "N of M in Source" counter */
.bc-queue-label {
  color: var(--bc-text-secondary);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18ch;
}

/* Prev / Next / Done share the bc-btn--plain base; override only position. */
.bc-queue-prev,
.bc-queue-next,
.bc-queue-done {
  flex-shrink: 0;
}

/* Disabled state follows bc-btn--plain disabled pattern. */
.bc-queue-prev:disabled,
.bc-queue-next:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Solid filled icon tile — Apple "settings icon" look (replaces decorative
   gradient chips). HIG: Foundations › Color, Icons. */
.bc-iconchip-accent {
  width: var(--bc-control-h-lg);
  height: var(--bc-control-h-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bc-radius-lg);
  background: var(--bc-accent);
  color: var(--bc-text-on-accent);
  flex-shrink: 0;
}