/**
 * ViaTone Pulse — Premium Page Enhancements (Phase 2)
 * Career Dashboard + Reports + Analytics visual upgrade.
 * Uses Phase 0 tokens; does not redefine primitives.
 */

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard — Career Workspace
   ═══════════════════════════════════════════════════════════════════════ */

.a4u-pulse-hero {
  margin-bottom: var(--pulse-space-7);
  padding-bottom: var(--pulse-space-6);
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-pulse-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--pulse-text) 60%, var(--pulse-primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.a4u-pulse-hero__sub {
  color: var(--pulse-text-muted);
  font-size: var(--pulse-text-body);
  margin: var(--pulse-space-3) 0 0;
  max-width: 38rem;
  line-height: var(--pulse-leading-body);
}

.a4u-pulse-hero__meta {
  margin-top: var(--pulse-space-5);
  gap: var(--pulse-space-3) var(--pulse-space-6);
}

.a4u-pulse-hero__meta dt {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.a4u-pulse-hero__meta dd {
  font-size: var(--pulse-text-body-sm);
  font-weight: 650;
  margin-top: 2px;
}

/* Quick actions — premium pill buttons */
.a4u-pulse-qa__menu .a4u-btn {
  border-radius: var(--pulse-radius-full);
}

/* Widgets — premium card treatment */
.a4u-pulse-widget {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-5);
  box-shadow: var(--pulse-shadow-sm);
  transition:
    transform var(--pulse-motion-base) var(--pulse-ease),
    border-color var(--pulse-motion-base) var(--pulse-ease),
    box-shadow var(--pulse-motion-base) var(--pulse-ease);
}

.a4u-pulse-widget--link:hover,
.a4u-pulse-widget:hover {
  transform: translateY(-2px);
  border-color: var(--pulse-border-strong);
  box-shadow: var(--pulse-shadow-md);
}

.a4u-pulse-widget__head {
  margin-bottom: var(--pulse-space-4);
}

.a4u-pulse-widget__head h2 {
  font-size: var(--pulse-text-body);
  font-weight: 700;
  letter-spacing: var(--pulse-tracking-tight);
}

.a4u-pulse-widget__icon {
  color: var(--pulse-primary);
  font-size: 14px;
}

/* Grid spacing */
.a4u-pulse-row {
  gap: var(--pulse-space-4);
  margin-bottom: var(--pulse-space-5);
}

/* Briefing card */
.a4u-pulse-briefing {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-5) var(--pulse-space-6);
  margin-bottom: var(--pulse-space-6);
  box-shadow: var(--pulse-shadow-sm);
}

.a4u-pulse-briefing__head h2 {
  font-size: var(--pulse-text-title-sm);
  font-weight: 700;
  letter-spacing: var(--pulse-tracking-tight);
}

.a4u-pulse-briefing__grid li {
  border-radius: var(--pulse-radius-md);
  background: var(--pulse-bg);
  border: 1px solid var(--pulse-border);
  padding: var(--pulse-space-4);
}

.a4u-pulse-briefing__grid strong {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: var(--pulse-tracking-tight);
  color: var(--pulse-text);
}

.a4u-pulse-briefing__grid span {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
}

/* Control Center — premium cards */
.a4u-cc-grid {
  gap: var(--pulse-space-4);
  margin-bottom: var(--pulse-space-5);
}

.a4u-cc-grid .a4u-card,
.a4u-cc-grid .a4u-pulse-widget {
  border-radius: var(--pulse-radius-lg);
}

/* Score ring */
.a4u-pulse-score__n {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--pulse-text) 40%, var(--pulse-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.a4u-pulse-score__label {
  font-weight: 700;
  color: var(--pulse-text-secondary);
  margin-top: var(--pulse-space-2);
}

/* Timeline premium */
.a4u-pulse-tl__item {
  padding: var(--pulse-space-3) 0;
  border-color: var(--pulse-border);
}

.a4u-pulse-tl__item--running {
  background: var(--pulse-primary-soft);
  border-radius: var(--pulse-radius-sm);
}

/* Notifications */
.a4u-pulse-note {
  border-radius: var(--pulse-radius-md);
  border: 1px solid var(--pulse-border);
  background: var(--pulse-bg);
  padding: var(--pulse-space-4);
  margin-bottom: var(--pulse-space-3);
}

/* AI Recommendation placeholder */
.a4u-pulse-rec {
  padding: var(--pulse-space-3) 0;
  border-color: var(--pulse-border);
}

.a4u-pulse-rec__icon {
  background: var(--pulse-primary-soft);
  color: var(--pulse-primary);
  border: 1px solid color-mix(in srgb, var(--pulse-primary) 20%, transparent);
  border-radius: var(--pulse-radius-sm);
}

/* Community widget */
.a4u-cx-widget {
  border-radius: var(--pulse-radius-lg) !important;
  padding: var(--pulse-space-5) !important;
}

.a4u-cx-activity-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--pulse-space-3);
  margin: var(--pulse-space-4) 0;
}

.a4u-cx-activity-bar a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pulse-space-3);
  border-radius: var(--pulse-radius-sm);
  background: var(--pulse-bg);
  border: 1px solid var(--pulse-border);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--pulse-motion-fast) var(--pulse-ease-out);
}

.a4u-cx-activity-bar a:hover {
  border-color: var(--pulse-border-strong);
  text-decoration: none;
}

.a4u-cx-activity-bar strong {
  font-size: var(--pulse-text-title-sm);
  font-weight: 750;
}

.a4u-cx-activity-bar span {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
}

/* Footer */
.a4u-pulse-foot {
  padding: var(--pulse-space-9) var(--pulse-space-4);
  color: var(--pulse-text-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════
   Reports — Presentation Quality
   ═══════════════════════════════════════════════════════════════════════ */

.a4u-reports-overview {
  margin-bottom: var(--pulse-space-6);
}

.a4u-reports-overview .a4u-session-metrics {
  gap: var(--pulse-space-3);
}

.a4u-reports-overview .a4u-metric {
  border-radius: var(--pulse-radius-md);
  padding: var(--pulse-space-4) var(--pulse-space-5);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  box-shadow: var(--pulse-shadow-sm);
}

.a4u-reports-overview .a4u-metric__value {
  font-size: var(--pulse-text-title);
  font-weight: 750;
  letter-spacing: var(--pulse-tracking-tight);
}

.a4u-reports-overview .a4u-metric__label {
  color: var(--pulse-text-muted);
  font-size: var(--pulse-text-meta);
  margin-top: var(--pulse-space-2);
}

/* Filters card */
.a4u-report-filters {
  border-radius: var(--pulse-radius-lg) !important;
  padding: var(--pulse-space-5) !important;
  margin-bottom: var(--pulse-space-5);
}

.a4u-report-filters__form {
  gap: var(--pulse-space-3) var(--pulse-space-4);
}

.a4u-field input,
.a4u-field select {
  border-radius: var(--pulse-radius-sm);
  border: 1px solid var(--pulse-border);
  background: var(--pulse-input-bg);
  color: var(--pulse-text);
  padding: var(--pulse-space-2) var(--pulse-space-3);
  font-size: var(--pulse-text-body-sm);
}

.a4u-field input:focus,
.a4u-field select:focus {
  border-color: var(--pulse-primary);
  box-shadow: var(--pulse-focus);
  outline: none;
}

.a4u-field__label {
  color: var(--pulse-text-muted);
  font-size: var(--pulse-text-meta);
  font-weight: 650;
}

/* Report tabs */
.a4u-report-tabs {
  margin: var(--pulse-space-4) 0 var(--pulse-space-5);
  gap: var(--pulse-space-2);
}

.a4u-report-tabs__btn {
  font-size: var(--pulse-text-body-sm);
  border-radius: var(--pulse-radius-full);
  border: 1px solid var(--pulse-border);
  padding: var(--pulse-space-2) var(--pulse-space-4);
  color: var(--pulse-text-muted);
  transition: all var(--pulse-motion-fast) var(--pulse-ease-out);
}

.a4u-report-tabs__btn:hover {
  border-color: var(--pulse-border-strong);
  color: var(--pulse-text);
}

.a4u-report-tabs__btn--active {
  color: var(--pulse-primary);
  border-color: var(--pulse-primary);
  background: var(--pulse-primary-soft);
}

/* Report cards — presentation quality */
.a4u-report-card {
  padding: var(--pulse-space-4) 0;
  border-color: var(--pulse-border);
  gap: var(--pulse-space-4);
}

.a4u-report-card__art {
  border-radius: var(--pulse-radius-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pulse-primary) 20%, var(--pulse-surface-hover)),
    var(--pulse-surface-hover));
}

.a4u-report-card__title {
  font-size: var(--pulse-text-body);
  font-weight: 650;
  letter-spacing: var(--pulse-tracking-tight);
}

.a4u-report-card__badges {
  gap: var(--pulse-space-2);
  margin: var(--pulse-space-2) 0;
}

.a4u-report-card__links {
  gap: var(--pulse-space-3);
  margin-top: var(--pulse-space-3);
}

.a4u-export-actions {
  gap: var(--pulse-space-2);
  margin-top: var(--pulse-space-3);
}

/* Share button premium */
.a4u-share-actions .a4u-btn {
  border-radius: var(--pulse-radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════
   Analytics — Calm, Premium, Actionable
   ═══════════════════════════════════════════════════════════════════════ */

.a4u-an-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pulse-space-3);
  padding: var(--pulse-space-4);
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  margin-bottom: var(--pulse-space-5);
}

.a4u-an-filters__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
}

.a4u-an-filters .a4u-input,
.a4u-an-filters select {
  border-radius: var(--pulse-radius-sm);
  border: 1px solid var(--pulse-border);
  background: var(--pulse-input-bg);
  color: var(--pulse-text);
  padding: var(--pulse-space-2) var(--pulse-space-3);
  font: inherit;
  font-size: var(--pulse-text-body-sm);
}

.a4u-an-filters .a4u-input:focus,
.a4u-an-filters select:focus {
  border-color: var(--pulse-primary);
  box-shadow: var(--pulse-focus);
  outline: none;
}

/* Analytics metric cards */
.a4u-an-card {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-md);
  padding: var(--pulse-space-4) var(--pulse-space-5);
  box-shadow: var(--pulse-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--pulse-space-1);
}

.a4u-an-card--primary {
  background: var(--pulse-primary-soft);
  border-color: color-mix(in srgb, var(--pulse-primary) 20%, transparent);
}

.a4u-an-card__label {
  font-size: var(--pulse-text-meta);
  font-weight: 650;
  color: var(--pulse-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.a4u-an-card__value {
  font-size: var(--pulse-text-title);
  font-weight: 750;
  letter-spacing: var(--pulse-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.a4u-an-card__sub {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
}

.a4u-an-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--pulse-text-meta);
  font-weight: 650;
  padding: 2px var(--pulse-space-2);
  border-radius: var(--pulse-radius-full);
}

.a4u-an-trend--up {
  color: var(--pulse-success);
  background: var(--pulse-success-soft);
}

.a4u-an-trend--down {
  color: var(--pulse-danger);
  background: var(--pulse-danger-soft);
}

.a4u-an-trend--flat {
  color: var(--pulse-text-muted);
  background: var(--pulse-surface-hover);
}

.a4u-an-trend--muted {
  color: var(--pulse-text-subtle);
}

/* Analytics grid */
.a4u-an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--pulse-space-3);
  margin-bottom: var(--pulse-space-6);
}

.a4u-an-grid--primary {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Charts */
.a4u-an-chart-wrap {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-5);
  margin-bottom: var(--pulse-space-5);
  box-shadow: var(--pulse-shadow-sm);
}

.a4u-an-chart-wrap__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pulse-space-4);
  margin-bottom: var(--pulse-space-4);
}

.a4u-an-chart-wrap__head h3 {
  font-size: var(--pulse-text-body);
  font-weight: 700;
  letter-spacing: var(--pulse-tracking-tight);
  margin: 0;
}

/* Event log */
.a4u-an-events {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-5);
  margin-bottom: var(--pulse-space-5);
}

.a4u-an-event {
  display: flex;
  align-items: flex-start;
  gap: var(--pulse-space-3);
  padding: var(--pulse-space-3) 0;
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-an-event:last-child {
  border-bottom: none;
}

.a4u-an-event__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--pulse-radius-sm);
  background: var(--pulse-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.a4u-an-event__title {
  font-size: var(--pulse-text-body-sm);
  font-weight: 600;
}

.a4u-an-event__meta {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
  margin-top: 2px;
}

/* AI Insights placeholder (non-functional) */
.pulse-ai-insight {
  display: flex;
  align-items: flex-start;
  gap: var(--pulse-space-3);
  padding: var(--pulse-space-4);
  border-radius: var(--pulse-radius-md);
  border: 1px solid color-mix(in srgb, var(--pulse-primary) 20%, var(--pulse-border));
  background: color-mix(in srgb, var(--pulse-primary-soft) 50%, var(--pulse-surface));
  margin-bottom: var(--pulse-space-3);
}

.pulse-ai-insight__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--pulse-radius-sm);
  background: var(--pulse-primary-soft);
  color: var(--pulse-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.pulse-ai-insight__body {
  flex: 1;
  min-width: 0;
}

.pulse-ai-insight__title {
  font-size: var(--pulse-text-body-sm);
  font-weight: 650;
  margin: 0 0 var(--pulse-space-1);
}

.pulse-ai-insight__text {
  font-size: var(--pulse-text-label);
  color: var(--pulse-text-muted);
  margin: 0;
  line-height: var(--pulse-leading-body);
}

.pulse-ai-insight__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pulse-primary);
  margin-top: var(--pulse-space-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   Shared page-level enhancements
   ═══════════════════════════════════════════════════════════════════════ */

/* Empty states with next-action guidance */
.a4u-empty,
.pulse-empty {
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-9) var(--pulse-space-7);
}

.a4u-empty h3,
.pulse-empty__title {
  font-size: var(--pulse-text-title-sm);
}

/* Fade-in for page sections */
.a4u-fade-in {
  animation: pulse-fade-in var(--pulse-motion-slow) var(--pulse-ease) both;
}

@keyframes pulse-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .a4u-fade-in {
    animation: none;
  }
}

/* Section dividers */
.a4u-section-header h2 {
  font-size: var(--pulse-text-title-sm);
  font-weight: 700;
  letter-spacing: var(--pulse-tracking-tight);
}

/* Hint text */
.a4u-hint {
  font-size: var(--pulse-text-meta);
  color: var(--pulse-text-muted);
  line-height: var(--pulse-leading-body);
}

/* Analytics section cards — premium */
.a4u-an-section {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-lg);
  padding: var(--pulse-space-5) var(--pulse-space-6);
  margin-bottom: var(--pulse-space-5);
  box-shadow: var(--pulse-shadow-sm);
}

.a4u-an-section:hover {
  border-color: var(--pulse-border-strong);
}

.a4u-an-section .a4u-section-header h2 {
  font-size: var(--pulse-text-title-sm);
  letter-spacing: var(--pulse-tracking-tight);
}

.a4u-an-primary {
  gap: var(--pulse-space-3);
  margin-bottom: var(--pulse-space-4);
}

.a4u-an-secondary {
  gap: var(--pulse-space-3);
  margin-bottom: var(--pulse-space-4);
}

/* Analytics hero */
.a4u-an-hero h1 {
  font-size: clamp(1.65rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.a4u-an-hero p {
  color: var(--pulse-text-muted);
  font-size: var(--pulse-text-body);
}

/* Chart panels */
.a4u-an-chart-panel {
  background: var(--pulse-surface);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-md);
  padding: var(--pulse-space-4);
}

.a4u-an-chart-panel h3 {
  font-size: var(--pulse-text-body-sm);
  font-weight: 700;
  margin: 0 0 var(--pulse-space-3);
}

/* Intelligence */
.a4u-an-intel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--pulse-space-4);
}

.a4u-an-intel-col h3 {
  font-size: var(--pulse-text-meta);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pulse-text-muted);
  margin: 0 0 var(--pulse-space-3);
}

.a4u-an-intel-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a4u-an-intel-col li {
  padding: var(--pulse-space-3) 0;
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-an-intel-col li:last-child {
  border-bottom: none;
}

.a4u-an-intel-col--ok h3 { color: var(--pulse-success); }
.a4u-an-intel-col--warn h3 { color: var(--pulse-warning); }
.a4u-an-intel-col--info h3 { color: var(--pulse-info); }

/* Table premium */
.a4u-an-table-wrap {
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-md);
  overflow: hidden;
}

.a4u-an-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pulse-text-body-sm);
}

.a4u-an-table th {
  font-size: var(--pulse-text-meta);
  font-weight: 650;
  color: var(--pulse-text-muted);
  text-align: left;
  padding: var(--pulse-space-3) var(--pulse-space-4);
  background: color-mix(in srgb, var(--pulse-surface-hover) 60%, transparent);
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-an-table td {
  padding: var(--pulse-space-3) var(--pulse-space-4);
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-an-table tr:last-child td {
  border-bottom: none;
}

.a4u-an-table__row:hover td {
  background: color-mix(in srgb, var(--pulse-surface-hover) 45%, transparent);
}

.a4u-an-table__row--sel td {
  background: var(--pulse-primary-soft);
}

/* Timeline */
.a4u-an-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.a4u-an-timeline__item {
  border-bottom: 1px solid var(--pulse-border);
}

.a4u-an-timeline__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--pulse-space-3);
  padding: var(--pulse-space-3) 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.a4u-an-timeline__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--pulse-radius-sm);
  background: var(--pulse-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Coming Soon / Empty States — Shared
   ═══════════════════════════════════════════════════════════════════════ */

.pulse-coming-soon {
  max-width: 480px;
  margin: var(--pulse-space-8) auto;
  text-align: center;
  padding: var(--pulse-space-8) var(--pulse-space-4);
}

.pulse-coming-soon__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pulse-primary);
  background: var(--pulse-primary-soft);
  padding: 4px 10px;
  border-radius: var(--pulse-radius-full);
  margin-bottom: var(--pulse-space-3);
}

.pulse-coming-soon__title {
  font-size: var(--pulse-text-h3);
  font-weight: 800;
  letter-spacing: var(--pulse-tracking-tight);
  margin: 0 0 var(--pulse-space-3);
}

.pulse-coming-soon__body {
  font-size: var(--pulse-text-body-sm);
  color: var(--pulse-text-muted);
  line-height: var(--pulse-leading-body);
  margin: 0;
}

.pulse-empty {
  text-align: center;
  padding: var(--pulse-space-8) var(--pulse-space-4);
  max-width: 420px;
  margin: 0 auto;
}

.pulse-empty__title {
  font-size: var(--pulse-text-body);
  font-weight: 700;
  margin: 0 0 var(--pulse-space-2);
}

.pulse-empty__body {
  font-size: var(--pulse-text-body-sm);
  color: var(--pulse-text-muted);
  margin: 0;
}

/* Mobile tweaks */
@media (max-width: 860px) {
  .a4u-an-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .a4u-an-chart-wrap,
  .a4u-an-section {
    padding: var(--pulse-space-4);
  }
}

@media (max-width: 640px) {
  .a4u-an-grid {
    grid-template-columns: 1fr;
  }
}
