/*
 * Flow Lane 1 PR-B M10/M11. Scoped to #screen-data. All color, font, spacing,
 * radius, border, and shadow values come from tokens.css.
 */

#screen-data .cap-surface {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-2) var(--spacing-0) var(--spacing-4);
}

#screen-data .cap-hero-block,
#screen-data .cap-review-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

#screen-data .cap-lockup .brand-lockup {
  pointer-events: none;
}

#screen-data .cap-eyebrow {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-label);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-letter-spacing-label);
  line-height: var(--font-line-height-tight);
  text-transform: uppercase;
}

#screen-data .cap-hero {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-letter-spacing-normal);
  line-height: var(--font-line-height-tight);
}

#screen-data .cap-hero:focus-visible,
#screen-data .cap-review-card:focus-visible,
#screen-data .cap-cta:focus-visible,
#screen-data .cap-ghost:focus-visible,
#screen-data .cap-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
}

#screen-data .cap-data {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-normal);
}

#screen-data .cap-rule {
  width: 100%;
  height: var(--stroke-border-default);
  background: var(--color-semantic-border-default);
}

#screen-data .cap-note,
#screen-data .cap-privacy,
#screen-data .cap-progress,
#screen-data .cap-reason,
#screen-data .cap-as-report {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--font-line-height-normal);
}

#screen-data .cap-note strong {
  color: var(--color-semantic-text-on-canvas);
  font-weight: var(--font-weight-bold);
}

#screen-data .cap-privacy,
#screen-data .cap-as-report {
  font-size: var(--font-size-sm);
}

#screen-data .cap-cta,
#screen-data .cap-btn,
#screen-data .cap-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-12);
  border-radius: var(--radius-protocol-icon);
  font-family: var(--font-family-body);
  cursor: pointer;
}

#screen-data .cap-cta {
  width: 100%;
  border: var(--spacing-0);
  background: var(--color-semantic-action-primary);
  color: var(--color-semantic-action-primary-on);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

#screen-data .cap-cta.quiet {
  background: var(--color-semantic-action-secondary);
  color: var(--color-semantic-action-secondary-on);
}

#screen-data .cap-ghost {
  width: 100%;
  border: var(--spacing-0);
  background: transparent;
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

#screen-data .cap-review-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--color-semantic-surface-raised);
  border: var(--stroke-border-default) solid var(--color-semantic-border-default);
  border-radius: var(--radius-protocol-icon);
  box-shadow: var(--shadow-xs);
}

#screen-data .cap-review-card.resolved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-2);
}

#screen-data .cap-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-6);
  height: var(--spacing-6);
  border-radius: var(--radius-circle);
  color: var(--color-semantic-status-on-track);
  font-weight: var(--font-weight-bold);
}

#screen-data .cap-card-name,
#screen-data .cap-marker {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-snug);
}

#screen-data .cap-card-state {
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

#screen-data .cap-readout {
  margin: var(--spacing-0);
  color: var(--color-semantic-text-on-canvas);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-line-height-snug);
}

#screen-data .cap-reason {
  padding-top: var(--spacing-2);
  border-top: var(--stroke-border-default) solid var(--color-semantic-border-subtle);
}

#screen-data .cap-reason.plain {
  padding-top: var(--spacing-0);
  border-top: var(--spacing-0);
}

#screen-data .cap-actions,
#screen-data .cap-save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-2);
}

#screen-data .cap-btn {
  width: 100%;
  border: var(--stroke-border-default) solid var(--color-semantic-border-default);
  background: var(--color-semantic-surface-raised);
  color: var(--color-semantic-text-on-canvas);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

#screen-data .cap-btn.yes,
#screen-data .cap-btn.save {
  border-color: var(--color-semantic-action-primary);
  background: var(--color-semantic-action-primary);
  color: var(--color-semantic-action-primary-on);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

#screen-data .cap-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-2);
}

#screen-data .cap-field {
  display: flex;
  min-width: var(--spacing-0);
  flex-direction: column;
  gap: var(--spacing-1);
}

#screen-data .cap-field label {
  color: var(--color-semantic-text-secondary);
}

#screen-data .cap-field input {
  min-height: var(--spacing-12);
}

#screen-data .captured-rows-disclosure {
  margin-top: var(--spacing-8);
}

#screen-data .captured-rows-disclosure > summary {
  min-height: var(--spacing-12);
  cursor: pointer;
  color: var(--color-semantic-text-on-canvas);
  font-weight: var(--font-weight-semibold);
}

#screen-data .capture-hidden {
  display: none;
}