/* Hallmark · product-preview family · genre: modern-minimal · theme: Cobalt
 * purpose: conceptual feature diagrams; no browser or device chrome
 * pre-emit critique: P5 H4 E5 S5 R5 V4
 */

.product-preview {
  min-width: 0;
  width: 100%;
  min-height: var(--benefit-visual-height-mobile);
  display: grid;
  gap: var(--space-sm);
  align-content: center;
  padding: var(--space-md);
  border: 0;
  border-radius: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  box-shadow: none;
  font-family: var(--font-body);
  overflow: clip;
}

.product-preview * {
  box-sizing: border-box;
  min-width: 0;
}

.preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block-end: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.preview-heading strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.preview-heading span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.preview-chip {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  color: var(--color-accent);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.preview-chip::before {
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--radius-round);
  background: var(--color-accent);
  content: "";
}

.preview-agenda {
  grid-template-rows: auto minmax(0, 1fr);
}

.preview-agenda-grid {
  display: grid;
  grid-template-columns: minmax(0, .34fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, minmax(var(--space-lg), 1fr));
  gap: var(--rule-thin);
  border: var(--rule-thin) solid var(--color-rule);
  background: var(--color-rule);
}

.preview-agenda-grid > span {
  display: flex;
  align-items: center;
  padding: var(--space-2xs);
  color: var(--color-muted);
  background: var(--color-paper);
  font-size: var(--text-micro);
}

.preview-agenda-grid .preview-person {
  justify-content: center;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  font-weight: 700;
  text-align: center;
}

.preview-booking {
  display: grid !important;
  align-content: center;
  gap: var(--space-3xs);
  margin: var(--space-3xs);
  border-inline-start: var(--rule-medium) solid var(--color-accent);
  border-radius: var(--radius-small);
  color: var(--color-ink-2) !important;
  background: var(--color-accent-soft) !important;
}

.preview-booking.is-success {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-soft) !important;
}

.preview-booking b {
  font-size: var(--text-xs);
  line-height: 1.15;
}

.preview-booking small {
  color: var(--color-muted);
  font-size: var(--text-micro);
}

.preview-mobile {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.preview-mobile-summary {
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.preview-mobile-summary span {
  font-size: var(--text-xs);
}

.preview-mobile-summary strong {
  max-width: 8ch;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}

.preview-mobile-list,
.preview-client-list,
.preview-ledger {
  display: grid;
  gap: var(--space-2xs);
}

.preview-list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
}

.preview-list-row > span:first-child {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.preview-list-row b {
  display: block;
  font-size: var(--text-xs);
}

.preview-list-row small {
  display: block;
  margin-block-start: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-micro);
}

.preview-list-row > span:last-child {
  width: var(--space-xs);
  height: var(--space-xs);
  border: var(--rule-medium) solid var(--color-success);
  border-radius: var(--radius-round);
}

.preview-analytics {
  grid-template-columns: minmax(0, 1fr);
}

.preview-metrics {
  display: grid;
  gap: var(--space-xs);
}

.preview-metric {
  display: grid;
  gap: var(--space-xs);
  align-content: space-between;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
}

.preview-metric span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.preview-metric b {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.preview-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2xs);
  min-height: var(--benefit-visual-height-mobile);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-stage);
}

.preview-chart span {
  min-height: var(--space-lg);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  background: var(--color-accent-muted);
}

.preview-chart span:nth-child(1) { height: 34%; }
.preview-chart span:nth-child(2) { height: 58%; }
.preview-chart span:nth-child(3) { height: 46%; }
.preview-chart span:nth-child(4) { height: 72%; }
.preview-chart span:nth-child(5) { height: 64%; }
.preview-chart span:nth-child(6) { height: 88%; background: var(--color-accent); }
.preview-chart span:nth-child(7) { height: 76%; }

.preview-clients {
  grid-template-columns: minmax(0, 1fr);
}

.preview-client-card {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-card);
  background: var(--color-graphite);
  color: var(--color-accent-ink);
}

.preview-client-avatar {
  width: var(--space-2xl);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
}

.preview-client-card strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.preview-client-card small {
  color: var(--color-dark-muted);
  font-size: var(--text-xs);
}

.preview-payments {
  grid-template-rows: auto minmax(0, 1fr);
}

.preview-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-xs);
}

.preview-flow-step:nth-child(2)::after {
  content: none;
}

.preview-flow-step {
  position: relative;
  min-height: var(--space-3xl);
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.preview-flow-step:not(:last-child)::after {
  position: absolute;
  inset-inline-end: calc(var(--space-sm) * -1);
  color: var(--color-accent);
  content: "→";
}

.preview-flow-step.is-current {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.preview-resource {
  grid-template-rows: auto minmax(0, 1fr);
}

.preview-resource-grid {
  display: grid;
  grid-template-columns: minmax(0, .6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.preview-resource-grid span {
  min-height: var(--space-xl);
  display: flex;
  align-items: center;
  padding: var(--space-2xs);
  border-radius: var(--radius-small);
  color: var(--color-muted);
  background: var(--color-paper-2);
  font-size: var(--text-micro);
}

.preview-resource-grid .preview-resource-label {
  color: var(--color-ink-2);
  background: transparent;
  font-weight: 700;
}

.preview-resource-grid .is-booked {
  border-inline-start: var(--rule-medium) solid var(--color-accent);
  color: var(--color-ink-2);
  background: var(--color-accent-soft);
}

.preview-resource-grid .is-ready {
  border-inline-start: var(--rule-medium) solid var(--color-success);
  color: var(--color-ink-2);
  background: var(--color-success-soft);
}

@media (min-width: 30rem) {
  .preview-mobile {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  }

  .preview-analytics {
    grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  }

  .preview-clients {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .preview-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .preview-flow-step:nth-child(2)::after {
    content: "→";
  }

}

@media (min-width: 40rem) {
  .product-preview {
    min-height: var(--benefit-visual-height);
    padding: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-preview * {
    scroll-behavior: auto;
  }
}