/* Hallmark · component: member desktop utility bar · genre: modern-minimal · theme: studied-DNA (source: user reference) · structure: compact utility row
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41) · responsive: pass (desktop 1024 / 1280 / 1440)
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 */

@media (min-width: 60.01rem) {
  body.light-theme.member-authenticated.mode-desktop .app-shell-home {
    --topbar-control-surface: var(--color-paper);
    --topbar-control-surface-hover: var(--color-paper-2);
    --topbar-control-rule: var(--color-rule);
    --topbar-control-rule-hover: var(--color-rule-strong);
    --topbar-control-ink: var(--color-ink);
    --topbar-control-muted: var(--color-muted);
    --topbar-active: var(--color-green-deep);
    --topbar-active-ink: var(--color-accent-ink);
    --topbar-danger: color-mix(in oklch, var(--color-error) 92%, var(--color-ink));
    --topbar-danger-surface: var(--color-salmon-soft);
    --topbar-success: var(--color-green-deep);
    --topbar-focus: var(--color-ink);
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-topbar__inner {
    display: grid !important;
    grid-template-columns: minmax(10rem, 1fr) auto !important;
    gap: var(--space-lg) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-topbar__title {
    min-width: 0;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-topbar__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0;
    margin-inline-start: auto;
    gap: var(--space-xs) !important;
    flex-wrap: nowrap !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-utility-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    min-width: 0;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.home-credit-card, .layout-toggle-btn, .home-action-button) {
    box-sizing: border-box !important;
    height: 2.875rem !important;
    min-height: 2.875rem !important;
    margin: 0 !important;
    border: var(--rule-thin) solid var(--topbar-control-rule) !important;
    border-radius: calc(var(--radius-button) + var(--space-2xs)) !important;
    background: var(--topbar-control-surface) !important;
    color: var(--topbar-control-ink) !important;
    box-shadow: var(--shadow-smlot-button) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    min-width: 11.75rem;
    padding: 0 var(--space-sm) !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--topbar-active) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card__icon svg {
    width: var(--space-md) !important;
    height: var(--space-md) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card__copy {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2xs);
    line-height: 1;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card__label {
    color: var(--topbar-control-muted) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-2xs) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card #member-header-credit {
    color: var(--topbar-control-ink) !important;
    font-family: var(--font-outlier) !important;
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    line-height: 1.1;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-xs) !important;
    min-width: 5.25rem !important;
    padding: 0 var(--space-sm) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap;
    transition:
      background-color var(--dur-micro) var(--ease-out),
      color var(--dur-micro) var(--ease-out),
      border-color var(--dur-micro) var(--ease-out),
      transform var(--dur-micro) var(--ease-out) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn.is-active,
  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn[aria-pressed="true"] {
    border-color: var(--topbar-active) !important;
    background: var(--topbar-active) !important;
    color: var(--topbar-active-ink) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn svg {
    width: 1.0625rem !important;
    height: 1.0625rem !important;
    flex: 0 0 auto;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.875rem !important;
    width: 2.875rem;
    padding: 0 !important;
    font-family: var(--font-body) !important;
    transition:
      background-color var(--dur-micro) var(--ease-out),
      color var(--dur-micro) var(--ease-out),
      border-color var(--dur-micro) var(--ease-out),
      transform var(--dur-micro) var(--ease-out) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-action-button svg {
    width: var(--space-md) !important;
    height: var(--space-md) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-pending-action {
    width: auto;
    min-width: auto !important;
    padding-inline: var(--space-md) !important;
    border-color: var(--topbar-active) !important;
    background: var(--topbar-active) !important;
    color: var(--topbar-active-ink) !important;
    white-space: nowrap;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-logout-button {
    border-color: var(--topbar-control-rule) !important;
    background: var(--topbar-control-surface) !important;
    color: var(--topbar-danger) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button):focus-visible,
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-preview-state="focus"] {
    outline: var(--rule-strong) solid var(--topbar-focus) !important;
    outline-offset: var(--space-3xs) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button):active,
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-preview-state="active"] {
    transform: translateY(var(--rule-thin)) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button):disabled,
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[aria-disabled="true"] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[aria-busy="true"],
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-state="loading"] {
    opacity: 0.72 !important;
    cursor: progress !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[aria-invalid="true"],
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-state="error"] {
    border-color: var(--topbar-danger) !important;
    background: var(--topbar-danger-surface) !important;
    color: var(--topbar-danger) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-state="success"] {
    border-color: var(--topbar-success) !important;
    color: var(--topbar-success) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn:not(.is-active, :disabled):hover,
    body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-action-button:not(:disabled):hover,
    body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button)[data-preview-state="hover"] {
      border-color: var(--topbar-control-rule-hover) !important;
      background: var(--topbar-control-surface-hover) !important;
      color: var(--topbar-control-ink) !important;
    }

    body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-pending-action:not(:disabled):hover {
      border-color: var(--topbar-active) !important;
      background: var(--topbar-active) !important;
      color: var(--topbar-active-ink) !important;
      transform: translateY(calc(var(--rule-thin) * -1)) !important;
    }

    body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-logout-button:not(:disabled):hover {
      border-color: var(--color-salmon-rule) !important;
      background: var(--topbar-danger-surface) !important;
      color: var(--topbar-danger) !important;
    }
  }
}

@media (min-width: 60.01rem) and (max-width: 72rem) {
  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-topbar__inner {
    gap: var(--space-sm) !important;
    padding-inline: var(--space-md) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-topbar__actions,
  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-utility-group {
    gap: var(--space-2xs) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .home-credit-card {
    min-width: 10.75rem;
    padding-inline: var(--space-sm) !important;
  }

  body.light-theme.member-authenticated.mode-desktop .app-shell-home .layout-toggle-btn {
    min-width: 4.75rem !important;
    padding-inline: var(--space-xs) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.light-theme.member-authenticated.mode-desktop .app-shell-home :is(.layout-toggle-btn, .home-action-button) {
    transition-duration: var(--dur-micro) !important;
    transform: none !important;
  }
}

/* Owner reference: unboxed balance, joined layout switch, quiet utility icons. */
@media (min-width: 60.01rem) {
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group {
    --utility-ink: #102840;
    --utility-muted: #63758c;
    --utility-rule: #e2e7ec;
    --utility-wash: #f3f4f5;
    --utility-selected: #e4faed;
    --utility-green: #087b43;
    --utility-danger: #f04452;
    gap: 10px;
  }
  html body:not(.light-theme).member-authenticated.mode-desktop .app-shell-home .home-utility-group {
    --utility-ink: #eef4fa;
    --utility-muted: #aebdd0;
    --utility-rule: #3c4855;
    --utility-wash: #252e37;
    --utility-selected: #183e2b;
    --utility-green: #85e5ad;
    --utility-danger: #ff7e88;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-credit-card {
    min-width: 180px;
    height: 48px !important;
    min-height: 48px !important;
    gap: 12px !important;
    padding: 0 10px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-credit-card .home-credit-card__icon {
    color: var(--utility-muted) !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-credit-card__icon svg {
    width: 28px !important;
    height: 28px !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-credit-card .home-credit-card__copy {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-credit-card .home-credit-card__label {
    color: var(--utility-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group #member-header-credit {
    color: var(--utility-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .layout-toggle-container {
    gap: 0 !important;
    border: 1px solid var(--utility-rule) !important;
    border-radius: 8px !important;
    background: var(--utility-wash) !important;
    overflow: hidden !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .layout-toggle-btn {
    height: 40px !important;
    min-height: 40px !important;
    min-width: 78px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--utility-ink) !important;
    font-size: 14px !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .layout-toggle-btn + .layout-toggle-btn {
    border-inline-start: 1px solid var(--utility-rule) !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .layout-toggle-btn.is-active {
    background: var(--utility-selected) !important;
    color: var(--utility-green) !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-action-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 44px !important;
    min-height: 44px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--utility-muted) !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-action-button svg {
    width: 22px !important;
    height: 22px !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-theme-toggle {
    position: relative;
    margin-inline-start: 6px !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-theme-toggle::before {
    content: "";
    position: absolute;
    inset-inline-start: -8px;
    top: 8px;
    bottom: 8px;
    border-inline-start: 1px solid var(--utility-rule);
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group .home-logout-button {
    color: var(--utility-danger) !important;
  }
  html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group :is(.layout-toggle-btn,.home-action-button):focus-visible {
    outline: 2px solid var(--utility-green) !important;
    outline-offset: -3px !important;
  }
  @media (hover: hover) {
    html body.member-authenticated.mode-desktop:is(.light-theme, :not(.light-theme)) .app-shell-home .home-utility-group :is(.layout-toggle-btn:not(.is-active),.home-action-button):not(:disabled):hover {
      background: var(--utility-wash) !important;
    }
  }
}