/**
 * Homepage V4 component presentation.
 *
 * Component meaning remains in semantic server output. This layer uses only
 * the frozen V3 token foundation and adds no runtime or media dependency.
 */

.sbx-v4-component {
  display: grid;
  gap: var(--sbx-space-stack-xl);
  min-width: var(--sbx-space-0);
  padding: var(--sbx-component-card-padding);
  border: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
  border-left: var(--sbx-border-width-relationship) solid var(--sbx-color-border-brand);
  border-radius: var(--sbx-radius-xl);
  background: var(--sbx-color-surface-default);
  box-shadow: var(--sbx-elevation-low);
  transition: transform var(--sbx-motion-duration-fast), box-shadow var(--sbx-motion-duration-fast);
}

.sbx-v4-component__header,
.sbx-v4-component__layer,
.sbx-v4-component__header h3,
.sbx-v4-component__header h4,
.sbx-v4-component__header p,
.sbx-v4-component__layer h4,
.sbx-v4-component__layer p,
.sbx-v4-component__next,
.sbx-v4-limitation p,
.sbx-v4-human-boundary p,
.sbx-v4-decision-node__recommendation p,
.sbx-v4-decision-node__recommendation h4,
.sbx-v4-decision-node__considerations p,
.sbx-v4-memory-field__future p,
.sbx-v4-memory-field__future h4 {
  margin: var(--sbx-space-0);
}

.sbx-v4-component__header {
  display: grid;
  gap: var(--sbx-space-stack-sm);
}

.sbx-v4-component__kind,
.sbx-v4-component__type,
.sbx-v4-evidence-lens__label {
  color: var(--sbx-color-text-brand);
  font-size: var(--sbx-type-label-size);
  font-weight: 700;
  line-height: var(--sbx-type-label-line);
  letter-spacing: var(--sbx-type-tracking-label);
  text-transform: uppercase;
}

.sbx-v4-component__header h3 {
  max-width: var(--sbx-type-measure-heading);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-3-size);
  line-height: var(--sbx-type-heading-3-line);
  letter-spacing: var(--sbx-type-tracking-heading);
  overflow-wrap: anywhere;
}

.sbx-v4-component__lead {
  max-width: var(--sbx-type-measure-body);
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-lead-size);
  line-height: var(--sbx-type-body-lead-line);
}

.sbx-v4-component__layer {
  display: grid;
  gap: var(--sbx-space-stack-md);
  padding-top: var(--sbx-space-stack-lg);
  border-top: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
}

.sbx-v4-component__layer h4 {
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-4-size);
  line-height: var(--sbx-type-heading-4-line);
}

.sbx-v4-component__layer p {
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-fields {
  display: grid;
  gap: var(--sbx-space-grid);
  margin: var(--sbx-space-0);
}

.sbx-v4-fields > div {
  display: grid;
  gap: var(--sbx-space-stack-xs);
  min-width: var(--sbx-space-0);
}

.sbx-v4-fields dt {
  color: var(--sbx-color-text-tertiary);
  font-size: var(--sbx-type-label-size);
  font-weight: 700;
  line-height: var(--sbx-type-label-line);
  letter-spacing: var(--sbx-type-tracking-label);
  text-transform: uppercase;
}

.sbx-v4-fields dd {
  margin: var(--sbx-space-0);
  color: var(--sbx-color-text-primary);
  line-height: var(--sbx-type-body-line);
  overflow-wrap: anywhere;
}

.sbx-v4-state {
  display: grid;
  gap: var(--sbx-space-stack-xs);
  padding: var(--sbx-space-stack-md);
  border: var(--sbx-border-width-default) solid var(--sbx-color-border-brand);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-color-background-brand-subtle);
}

.sbx-v4-state__line,
.sbx-v4-state__meaning {
  margin: var(--sbx-space-0);
}

.sbx-v4-state__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sbx-space-inline-sm);
  align-items: center;
  color: var(--sbx-color-text-primary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-state__marker {
  color: var(--sbx-color-text-brand);
}

.sbx-v4-state__meaning {
  color: var(--sbx-color-text-secondary);
  font-size: var(--sbx-type-body-small-size);
  line-height: var(--sbx-type-body-small-line);
}

.sbx-v4-limitation {
  margin: var(--sbx-space-0);
  padding: var(--sbx-space-stack-md);
  border-left: var(--sbx-border-width-relationship) solid var(--sbx-color-signal-warning-text);
  border-radius: var(--sbx-radius-sm);
  background: var(--sbx-evidence-limit-bg);
  color: var(--sbx-color-text-primary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-limitation--prominent {
  display: grid;
  gap: var(--sbx-space-stack-xs);
}

.sbx-v4-human-boundary {
  display: grid;
  gap: var(--sbx-space-stack-sm);
  padding: var(--sbx-space-stack-lg);
  border-top: var(--sbx-border-width-strong) solid var(--sbx-color-border-brand);
  border-bottom: var(--sbx-border-width-strong) solid var(--sbx-color-border-brand);
  background: var(--sbx-color-background-subtle);
  color: var(--sbx-color-text-primary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-human-boundary__sequence {
  color: var(--sbx-color-text-brand);
  font-weight: 700;
}

.sbx-v4-disclosure {
  border-top: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
}

.sbx-v4-disclosure summary {
  display: flex;
  align-items: center;
  min-height: var(--sbx-touch-target);
  color: var(--sbx-color-action-link);
  font-weight: 700;
  line-height: var(--sbx-type-body-line);
  cursor: pointer;
}

.sbx-v4-disclosure summary:hover {
  color: var(--sbx-color-action-link-hover);
}

.sbx-v4-disclosure__body {
  display: grid;
  gap: var(--sbx-space-stack-sm);
  padding-block: var(--sbx-space-stack-sm);
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-disclosure__body p {
  margin: var(--sbx-space-0);
}

.sbx-v4-component__next a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sbx-touch-target);
  color: var(--sbx-color-action-link);
  font-weight: 700;
  line-height: var(--sbx-type-body-line);
  text-decoration: underline;
}

.sbx-v4-component__next a:hover {
  color: var(--sbx-color-action-link-hover);
}

.sbx-v4-relationship-list {
  display: grid;
  gap: var(--sbx-space-stack-xl);
  margin: var(--sbx-space-0);
  padding: var(--sbx-space-0);
  list-style: none;
}

.sbx-v4-relationship-list > li {
  display: grid;
  gap: var(--sbx-space-stack-md);
  min-width: var(--sbx-space-0);
  padding: var(--sbx-space-stack-lg);
  border-top: var(--sbx-border-width-default) solid var(--sbx-color-border-subtle);
}

.sbx-v4-relationship-list__index,
.sbx-v4-relationship-list__statement,
.sbx-v4-relationship-list > li > p {
  margin: var(--sbx-space-0);
}

.sbx-v4-relationship-list__index {
  color: var(--sbx-color-text-brand);
  font-size: var(--sbx-type-label-size);
  font-weight: 700;
  line-height: var(--sbx-type-label-line);
  letter-spacing: var(--sbx-type-tracking-label);
}

.sbx-v4-relationship-list__statement {
  display: grid;
  gap: var(--sbx-space-stack-xs);
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-4-size);
  line-height: var(--sbx-type-heading-4-line);
}

.sbx-v4-relationship-list__type {
  color: var(--sbx-color-text-brand);
  font-size: var(--sbx-type-body-size);
  font-weight: 700;
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-evidence-lens {
  border-left-color: var(--sbx-color-signal-warning-text);
}

.sbx-v4-decision-node {
  border-left-color: var(--sbx-color-navy-700);
}

.sbx-v4-decision-node__recommendation,
.sbx-v4-decision-node__considerations {
  display: grid;
  gap: var(--sbx-space-stack-sm);
}

.sbx-v4-decision-node__recommendation {
  padding: var(--sbx-space-stack-lg);
  border-radius: var(--sbx-radius-lg);
  background: var(--sbx-color-background-brand-subtle);
}

.sbx-v4-decision-node__recommendation h4,
.sbx-v4-memory-field__future h4 {
  color: var(--sbx-color-text-primary);
  font-size: var(--sbx-type-heading-4-size);
  line-height: var(--sbx-type-heading-4-line);
}

.sbx-v4-decision-node__considerations {
  color: var(--sbx-color-text-secondary);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-memory-field {
  border-left-color: var(--sbx-color-teal-700);
  background: linear-gradient(var(--sbx-grad-angle-fade), var(--sbx-color-surface-default), var(--sbx-color-background-brand-subtle));
}

.sbx-v4-memory-field__chronology {
  display: grid;
  gap: var(--sbx-space-stack-md);
  margin: var(--sbx-space-0);
  padding-left: var(--sbx-space-stack-xl);
}

.sbx-v4-memory-field__chronology li {
  padding-left: var(--sbx-space-inline-sm);
  color: var(--sbx-color-text-secondary);
}

.sbx-v4-memory-field__chronology li::marker {
  color: var(--sbx-color-text-brand);
  font-weight: 700;
}

.sbx-v4-memory-field__chronology span {
  color: var(--sbx-color-text-primary);
  font-weight: 700;
}

.sbx-v4-memory-field__chronology p {
  margin: var(--sbx-space-stack-xs) var(--sbx-space-0) var(--sbx-space-0);
  line-height: var(--sbx-type-body-line);
}

.sbx-v4-memory-field__future {
  display: grid;
  gap: var(--sbx-space-stack-sm);
  padding: var(--sbx-space-stack-lg);
  border: var(--sbx-border-width-default) solid var(--sbx-color-border-brand);
  border-radius: var(--sbx-radius-lg);
  background: var(--sbx-color-surface-default);
}

.sbx-v4-component-error {
  margin: var(--sbx-space-0);
  padding: var(--sbx-space-stack-md);
  border: var(--sbx-border-width-default) solid var(--sbx-color-signal-danger-text);
  border-radius: var(--sbx-radius-md);
  background: var(--sbx-color-signal-danger-bg);
  color: var(--sbx-color-signal-danger-text);
  line-height: var(--sbx-type-body-line);
}

@media (min-width: 37.5rem) {
  .sbx-v4-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sbx-v4-relationship-list__statement {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  .sbx-v4-relationship-list__statement strong:last-child {
    text-align: right;
  }
}

@media (min-width: 64rem) {
  .sbx-v4-component {
    padding: var(--sbx-space-10);
  }

  .sbx-v4-fields--status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sbx-v4-component {
    transition: none;
  }
}