/*
 * TokenPilot semantic panel and card components.
 *
 * This component layer is intentionally not loaded globally yet.
 * It depends on static/css/tokens.css from the token foundation PR and
 * will be enabled later through a controlled single-page cascade pilot.
 *
 * The larger PR #1 panels layer is split into smaller follow-up PRs.
 * This first foundation covers generic panels/cards, active coin surfaces,
 * utility dock panels and watchlist coin card base surfaces.
 */

.panel,
.card,
.auth-panel,
.auth-card,
.users-fold-panel,
.user-create-panel,
.signup-request-panel,
.user-limit-panel,
.signup-exchange-card,
.trade-sizing-audit-card,
.explain-card,
.dashboard-card,
.system-health,
.hidden-config-panel,
.dock-section{
  color:var(--text-primary);
  border-color:var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--shadow-panel);
}

.explain-card,
.info-card,
.helper-card,
.callout-card{
  --support-card-border:var(--border-subtle);
  --support-card-surface:var(--surface-card);
  --support-card-shadow:var(--shadow-panel);
  color:var(--text-primary);
  border-color:var(--support-card-border);
  background:var(--support-card-surface);
  box-shadow:var(--support-card-shadow);
}

.panel.muted,
.card.muted,
.explain-card.muted,
.info-card.muted,
.helper-card.muted,
.callout-card.muted,
.hidden-field,
.hidden-toggle,
.profile-push-status,
.active-coin-float,
.active-coin-metrics span{
  color:var(--text-secondary);
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.explain-card.muted,
.info-card.muted,
.helper-card.muted,
.callout-card.muted{
  --support-card-surface:var(--surface-card-muted);
}

.explain-card.good,
.info-card.good,
.helper-card.good,
.callout-card.good{
  --support-card-border:var(--state-success-ring);
  --support-card-surface:var(--state-success-soft);
}

.explain-card.warn,
.info-card.warn,
.helper-card.warn,
.callout-card.warn{
  --support-card-border:var(--state-warning-ring);
  --support-card-surface:var(--state-warning-soft);
}

.explain-card.bad,
.info-card.bad,
.helper-card.bad,
.callout-card.bad{
  --support-card-border:var(--state-danger-ring);
  --support-card-surface:var(--state-danger-soft);
}

.active-coin-float{
  --active-coin-title-text:var(--text-primary);
  --active-coin-caption-text:var(--text-secondary);
  border-color:var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--shadow-panel);
}

.active-coin-copy strong,
.active-coin-metrics strong{
  color:var(--text-primary);
}

.active-coin-copy span,
.active-coin-metrics small{
  color:var(--text-secondary);
}

.active-coin-metrics span{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.panel strong,
.card strong,
.explain-card strong,
.info-card strong,
.helper-card strong,
.callout-card strong,
.dashboard-card strong,
.system-health-title,
.dock-copy-head strong{
  color:var(--text-primary);
}

.panel small,
.card small,
.explain-card span,
.info-card span,
.helper-card span,
.callout-card span,
.dashboard-card span,
.system-health-sub,
.dock-copy small,
.profile-metric span,
.trading-stat-label{
  color:var(--text-secondary);
}

.trade-sizing-audit-card.ok,
.system-health.good{
  border-color:var(--state-success-ring);
  background:var(--state-success-soft);
}

.trade-sizing-audit-card.warn,
.system-health.warn{
  border-color:var(--state-warning-ring);
  background:var(--state-warning-soft);
}

.trade-sizing-audit-card.bad,
.system-health.bad,
.system-health.error{
  border-color:var(--state-danger-ring);
  background:var(--state-danger-soft);
}

/* Utility dock decorative token layer. */

.bottom-actions.utility-dock{
  border-color:var(--border-subtle);
  background:var(--surface-card);
  box-shadow:var(--shadow-panel);
}

.dock-section{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.dock-section[open]{
  border-color:var(--border-strong);
  background:var(--surface-card);
}

.dock-section.live-ai-dock,
.dock-section.cron-dock,
.dock-section.push-dock,
.dock-section.hidden-dock,
.dock-section.review-log-dock,
.dock-section.log-dock{
  background:
    linear-gradient(118deg, var(--surface-card), var(--surface-card-muted)),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent-primary-soft) 42%, transparent) 0 1px, transparent 1px 22px);
}

.dock-section.live-ai-dock::before,
.dock-section.cron-dock::before,
.dock-section.push-dock::before,
.dock-section.hidden-dock::before,
.dock-section.review-log-dock::before,
.dock-section.log-dock::before{
  background:linear-gradient(180deg, var(--accent-info), var(--accent-primary-soft), var(--state-success));
}

.dock-summary::after{
  border-right-color:var(--text-secondary);
  border-bottom-color:var(--text-secondary);
}

.dock-icon,
.icon-command span[aria-hidden="true"]{
  color:var(--text-primary);
  background:
    radial-gradient(circle at 29% 30%, color-mix(in srgb, var(--text-primary) 38%, transparent) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 72% 31%, color-mix(in srgb, var(--text-primary) 30%, transparent) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--text-primary) 26%, transparent) 0 1.4px, transparent 1.9px),
    linear-gradient(29deg, transparent 42%, color-mix(in srgb, var(--text-primary) 18%, transparent) 43% 47%, transparent 48%),
    linear-gradient(149deg, transparent 42%, color-mix(in srgb, var(--text-primary) 14%, transparent) 43% 47%, transparent 48%),
    linear-gradient(135deg, var(--accent-primary-soft), var(--accent-info-soft));
  box-shadow:var(--shadow-control, var(--shadow-panel));
}

.dock-icon{
  border-color:var(--border-subtle);
}

.dock-copy strong,
.hidden-config-head strong{
  color:var(--text-primary);
}

.icon-command{
  border-color:var(--border-subtle);
  background:linear-gradient(180deg, var(--surface-card), var(--surface-card-muted));
  color:var(--text-primary);
  box-shadow:var(--shadow-control, var(--shadow-panel));
}

.icon-command:hover{
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--surface-card-muted), var(--surface-card));
  box-shadow:var(--shadow-floating);
}

.icon-command:hover span[aria-hidden="true"]{
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--accent-primary) 32%, transparent));
}

.hidden-config-explainer{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.hidden-config-explainer strong{
  color:var(--text-primary);
}

.hidden-config-explainer p,
.hidden-config-explainer ul,
.hidden-config-explainer li,
.hidden-config-head span,
.dock-log-block pre{
  color:var(--text-secondary);
}

.dock-log-block{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
}

.cron-preset-tile{
  border-color:var(--border-subtle);
  background:linear-gradient(180deg, var(--accent-info-soft), var(--surface-card-muted));
}

.cron-preset-btn.active{
  color:var(--text-inverse);
  border-color:var(--accent-info-ring, var(--accent-primary-ring));
  background:linear-gradient(180deg, var(--accent-info), var(--accent-primary));
  box-shadow:var(--shadow-cron-preset-active, 0 0 0 1px var(--accent-info-soft) inset);
}

/* Setup overview decorative token layer. */

.setup-overview-box{
  border-color:var(--state-success-ring);
  background:linear-gradient(180deg, var(--state-success-soft), var(--surface-card-muted));
}

.setup-overview-item{
  border-color:var(--border-subtle);
  background:var(--surface-card-muted);
  color:var(--text-primary);
}

.setup-overview-item:hover{
  border-color:var(--state-success-ring);
  background:var(--surface-card);
}

.setup-overview-item.short-setup{
  border-color:var(--state-danger-ring);
  background:linear-gradient(180deg, var(--state-danger-soft), var(--surface-card-muted));
}

.setup-overview-item.short-setup:hover{
  border-color:var(--state-danger-ring);
  background:linear-gradient(180deg, var(--state-danger-soft), var(--surface-card));
}

/* Watchlist coin card decorative token layer. */

.coin-card{
  border-color:var(--border-subtle);
  background:linear-gradient(180deg, var(--surface-card), var(--surface-card-muted));
  box-shadow:var(--shadow-panel);
}

.coin-card::before{
  background:linear-gradient(180deg, var(--accent-primary), var(--accent-info));
}

.coin-card:hover{
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--accent-primary-soft), var(--surface-card-muted));
  box-shadow:var(--shadow-floating);
}

.coin-card.active{
  border-color:var(--accent-primary-ring);
  background:linear-gradient(180deg, var(--accent-primary-soft), var(--surface-card));
  box-shadow:var(--shadow-coin-card-active, 0 0 0 1px var(--accent-primary-soft) inset, var(--shadow-floating));
}

.asset-logo{
  color:var(--text-secondary);
  border-color:var(--accent-primary-ring);
  background:var(--surface-card-muted);
  box-shadow:var(--shadow-control, var(--shadow-panel));
}

.asset-logo-fallback,
.coin-right strong{
  color:var(--text-primary);
}