/* CryptoGroupBuy UI type scale. AutoTrade Hub's existing Arial stack remains the
   reference. The proportions favour a clear, spacious reading hierarchy. This sheet
   is loaded after the feature sheets and changes presentation only. */
:root {
  --cgb-font: Arial, Helvetica, sans-serif;
  --cgb-page-size: 32px;
  --cgb-section-size: 24px;
  --cgb-card-size: 19px;
  --cgb-text-size: 16px;
  --cgb-description-size: 14px;
  --cgb-menu-size: 15px;
  --cgb-button-size: 15px;
  --cgb-badge-size: 12px;
  --cgb-kpi-size: 30px;
  --cgb-action-height: 40px;
  --cgb-action-radius: 10px;
}

/* The three application surfaces also cover public pages, native dialogs and popups. */
#app, #modal-root, #toast-root, dialog {
  font-family: var(--cgb-font);
  font-size: var(--cgb-text-size);
}
#app :is(h1, h2, h3, h4),
#modal-root :is(h1, h2, h3, h4),
dialog :is(h1, h2, h3, h4) {
  font-family: inherit;
  overflow-wrap: break-word;
}
#app h1, #modal-root h1, dialog h1 {
  font-size: var(--cgb-page-size);
  line-height: 1.16;
}
#app h2, #modal-root h2, dialog h2 {
  font-size: var(--cgb-section-size);
  line-height: 1.25;
}
#app :is(h3, h4), #modal-root :is(h3, h4), dialog :is(h3, h4) {
  font-size: var(--cgb-card-size);
  line-height: 1.35;
}
#app :is(p, li, dt, dd, label, input, select, textarea, td, th),
#modal-root :is(p, li, dt, dd, label, input, select, textarea, td, th),
dialog :is(p, li, dt, dd, label, input, select, textarea, td, th) {
  font-size: var(--cgb-text-size);
}
#app small, #modal-root small, dialog small {
  font-size: var(--cgb-description-size);
}

/* Card names that use h2, strong or span rather than h3. */
#app :is(.signal-symbol h2, .panel h2, .content-block h2,
  .library-card h2, .account-card h2, .member-product h2,
  .cx-card h2, .cx-card h3, .cx-digital-card h3,
  .cgbx-pass-choice h4, .cgb-order-card-head h2,
  .membership-plan h3, .cgb-hub-card-copy strong,
  .community-card-copy strong, .our-social-card-copy strong),
#modal-root :is(.hub-modal-card h3, .jh-card h3) {
  font-size: var(--cgb-card-size);
}
#app :is(.stat strong, .metric-value, .stat-value) {
  font-size: var(--cgb-kpi-size);
  line-height: 1.15;
}

/* Descriptions, supporting copy and compact status labels. */
#app :is(.page-head p, .hub-heading p, .cgb-hub-heading p,
  .community-hub-hero p, .member-hero p, .membership-hero p,
  .info-hero p, .welcome-hero-copy p, .signal-explorer-hero p,
  .club-hero p, .completion-hero p, .jh-hero p,
  .community-card-copy>span:not(.community-card-status),
  .cgb-hub-panel-head p, .hub-section-title p,
  .hub-bot p, .cx-card p, .info-card p, .library-card p,
  .member-product p, .cgbx-pass-choice p, .membership-description),
#modal-root :is(.hub-modal-header p, .modal-head p),
dialog :is(.cgbx-crypto-warning, .cgbx-crypto-dialog-head p) {
  font-size: var(--cgb-description-size);
  line-height: 1.5;
}
#app :is(.eyebrow, .hub-eyebrow, .hub-kicker, .cgb-hub-eyebrow,
  .cgb-hub-panel-kicker, .direction, .status, .hub-status,
  .global-plan-badge, .unread-badge, .community-card-status,
  .cgb-hub-terminal-badge, .club-section-label,
  .membership-plan-badge, .membership-current, .affiliate-status,
  .affiliate-code-pills span, .content-kicker, .content-tags span,
  .cgb-order-status, .club-eyebrow, .cx-digital-kicker,
  .cx-digital-status, .ov4-eyebrow, .ov4-status,
  .community-drawer-kicker, .ai-badge, .info-kicker,
  .info-badge, .status-rail span, .timeline-status,
  .access-plan-badge, .billing-current-badge,
  .billing-selected-badge, .member-access, .member-badge,
  .member-included, .market-pill span, .signal-explorer-room-status,
  .signal-explorer-room-tags span, .ct-status),
#modal-root :is(.hub-status, .hub-tags span, .content-tags span),
dialog :is(.hub-status, .hub-tags span, .content-tags span) {
  font-size: var(--cgb-badge-size);
}
#app .membership-eyebrow { font-size: var(--cgb-badge-size) !important; }

/* Blue action component: the existing solid cyan and blue outline colors stay in
   their feature sheets. Width is inherited from each card/grid. */
#app :is(.btn, .info-button, .membership-button, .cgb-action,
  .at-guide-action, .auth-button, .hub-bot-actions button,
  .hub-bot-footer button, .hub-footlinks button,
  .hub-modal-actions button, .hub-api-card button,
  .hub-state-banner button, .hub-empty button,
  .jh-popup-actions button, .jh-open, .jh-full,
  .club-history-button,
  .membership-wallet-actions a,
  .terminal-dialog-actions button:not(.terminal-close),
  .terminal-dialog-actions a),
#modal-root :is(.btn, .hub-modal-actions button, .hub-api-card button,
  .jh-popup-actions button),
dialog :is(.btn, .membership-button, .cgb-action) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--cgb-action-height);
  height: auto;
  max-width: 100%;
  border-radius: var(--cgb-action-radius);
  padding: 0 12px;
  font-family: var(--cgb-font);
  font-size: var(--cgb-button-size);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}

/* The full Journal dialog is portaled to body, outside #app and #modal-root. */
.jh-popup { font-family: var(--cgb-font); font-size: var(--cgb-text-size); }
.jh-popup-head h2 { font-size: var(--cgb-section-size); line-height: 1.25; }
.jh-popup-actions button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cgb-action-height);
  height: auto;
  max-width: 100%;
  border-radius: var(--cgb-action-radius);
  padding: 0 12px;
  font-family: var(--cgb-font);
  font-size: var(--cgb-button-size);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
.jh-popup .jh-tabs button { min-height: var(--cgb-action-height); font-family: var(--cgb-font); font-size: var(--cgb-button-size); font-weight: 800; }
.jh-popup .jh-popup-tools :is(label, input, select),
.jh-popup .jh-table, .jh-popup .jh-paging { font-size: var(--cgb-text-size); }
.jh-popup .jh-live-note { font-size: var(--cgb-description-size); }

/* Icon buttons, card navigation, tabs, trading controls and the login submit
   retain the hit area required by their function. */
#app .login-panel .btn { min-height: 44px; height: 44px; }
#app .cgb-auth .auth-button { min-height: 44px; }
/* Preset chips and the cart close control keep their original tap targets. */
#app .cx-presets .btn[data-cgbx-preset] { min-height: 44px; height: 44px; border-radius: 11px; font-size: 14px; }
#app .cx-section-head .btn[data-cart-close] { min-height: 44px; height: 44px; border-radius: 11px; font-size: 12px; }
#app .membership-actions .membership-button {
  height: var(--cgb-action-height);
  min-height: var(--cgb-action-height);
  align-self: center;
}
#app .affiliate-simulator-line .sim-remove { align-self: end; }
#app :is(.top-actions .icon-btn, .top-actions .user-btn,
  .cgb-hub-panel-actions button, .ct-terminal button, .ct-terminal .btn,
  .mobile-nav button, .community-card, .cgb-hub-card) { font-size: inherit; }
#app .cx-hub .cx-tabs button { font-size: var(--cgb-button-size); }
#app .mobile-nav button[data-mobile] { font-size: var(--cgb-menu-size); }
#app .mobile-nav button[data-mobile]>span { font-size: var(--cgb-menu-size); }
#app .mobile-nav button[data-mobile="menu"]>span { font-size: var(--cgb-menu-size); }
#app .mobile-nav button>span:not(.mobile-nav-icon) {
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.1;
}
#app .category-label { font-size: var(--cgb-menu-size); }
#app .channel { font-size: var(--cgb-menu-size); }

@media (max-width: 560px) {
  :root { --cgb-action-height: 44px; }
  #app, #modal-root, dialog { font-size: var(--cgb-text-size); }
  #app :is(h1, .page-head h1), #modal-root h1, dialog h1 {
    font-size: var(--cgb-page-size);
  }
  #app :is(.card-actions, .hub-bot-actions, .modal-actions,
    .head-actions, .signals-view-actions) { min-width: 0; }
  #app :is(.btn, .info-button, .membership-button, .cgb-action),
  #modal-root .btn, dialog .btn { min-width: 0; overflow-wrap: anywhere; }
  #app .cgbx-partner-page .affiliate-simulator-line {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #app .cgbx-partner-page .affiliate-simulator-line :is(label, input, select) {
    min-width: 0;
    max-width: 100%;
  }
}

/* The authenticated header contains a role, the AutoTrade shortcut and account
   controls. Keep every control reachable at the narrowest supported viewport. */
@media (max-width: 350px) {
  #app .mobile-nav button[data-mobile],
  #app .mobile-nav button[data-mobile]>span,
  #app .mobile-nav button[data-mobile="menu"]>span { font-size: 12px; }
  #app .top-actions {
    gap: 3px;
    min-width: 0;
    padding-right: 4px;
  }
  #app .global-plan-badge {
    display: block;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #app .autotrade-quick-wrap,
  #app #autotrade-quick-trigger {
    min-width: 0;
    width: 80px;
    max-width: 80px;
  }
  #app #autotrade-quick-trigger { padding-left: 7px; padding-right: 7px; }
}