.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-height);
  padding-inline: var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.button svg { width: 1.1rem; height: 1.1rem; }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.48; }
.button-primary { background: var(--color-brand-700); color: var(--color-accent-ink); }
.button-secondary { border-color: var(--color-line-strong); background: var(--color-surface); color: var(--color-brand-800); }
.button-quiet { background: transparent; color: var(--color-brand-800); }
.button-small { min-height: 2.25rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); }

.card {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.card-pad { padding: var(--space-lg); }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-block-end: 1px solid var(--color-line);
}

.card-head h2,
.card-head h3 { font-size: var(--text-md); }
.card-head p { margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); }
.card-head > svg { width: 1.5rem; height: 1.5rem; flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: fit-content;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-neutral { background: var(--color-surface-hover); color: var(--color-ink-soft); }
.badge-demo { background: var(--color-brand-100); color: var(--color-brand-800); }

.field {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.field label,
.field legend { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--control-height);
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
}

.field textarea { min-height: 6rem; padding-block: var(--space-sm); resize: vertical; }
.field select { font-size: var(--text-sm); }
.field input::placeholder,
.field textarea::placeholder { color: var(--color-muted); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--color-brand-700); outline-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field [aria-busy="true"] { background: var(--color-gold-50); }
.field [data-state="success"] { border-color: var(--color-success); }
.field small { min-height: 1lh; color: var(--color-muted); font-size: var(--text-xs); }

.segmented { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.segment {
  min-height: 2.5rem;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.segment[aria-pressed="true"] { border-color: var(--color-brand-700); background: var(--color-brand-50); color: var(--color-brand-800); }

.summary-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  overflow: clip;
  background: var(--color-surface);
}

.summary-copy { display: grid; align-content: center; gap: var(--space-lg); padding: var(--space-2xl); }
.summary-copy h1 { max-width: 24ch; font-size: var(--text-display); }
.summary-copy p { max-width: 58ch; color: var(--color-muted); }

.summary-art { position: relative; min-height: 21rem; background: var(--color-brand-50); }
.summary-art img {
  position: absolute;
  inset: 1.5rem 1rem 0 auto;
  width: min(90%, 23rem);
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--color-line);
  background: var(--color-surface);
}

.metric { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); }
.metric + .metric { border-inline-start: 1px solid var(--color-line); }
.metric strong { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.metric span { color: var(--color-muted); font-size: var(--text-xs); }

.summary-grid,
.channels-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
  gap: var(--space-lg);
}

.activity-list,
.campaign-list,
.roadmap-list { display: grid; margin: 0; padding: 0; list-style: none; }

.activity-item,
.campaign-row,
.roadmap-item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); }

.activity-item + .activity-item,
.campaign-row + .campaign-row,
.roadmap-item + .roadmap-item { border-block-start: 1px solid var(--color-line); }

.activity-icon,
.channel-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  place-items: center;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-brand-800);
}

.activity-icon svg,
.channel-icon svg { width: 1.2rem; height: 1.2rem; }
.activity-item div,
.campaign-row div { min-width: 0; flex: 1; }
.activity-item p,
.campaign-row p { font-size: var(--text-sm); }
.activity-item span,
.campaign-row span { color: var(--color-muted); font-size: var(--text-xs); }

.next-action { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-gold-50); color: var(--color-ink); }
.next-action p { color: var(--color-ink-soft); }
.next-action .button { width: fit-content; border: 1px solid var(--color-gold-300); background: var(--color-surface); color: var(--color-brand-800); }

.empty-state {
  display: grid;
  place-items: center;
  gap: var(--space-sm);
  min-height: 18rem;
  padding: var(--space-xl);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { background: var(--color-brand-800); }
  .button-secondary:hover,
  .button-quiet:hover,
  .segment:hover,
  .icon-button:hover { background: var(--color-surface-hover); }
  .primary-nav a:hover { background: var(--color-brand-800); color: var(--color-on-dark); }
}