/* =========================================================
   Nero Development — Data Products
   ========================================================= */

/* ---------- Layer heading ---------- */
.layer-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.layer-head__label {
  font-size: var(--type-label);
  letter-spacing: 1px;
  color: var(--nero-orange);
}
.layer-head__name {
  font-size: var(--type-h2-md);
  font-weight: 200;
  letter-spacing: -0.02em;
}

/* ---------- Key/value definition table ---------- */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3rem;
}
.kv-table__k {
  width: 260px;
  padding: 1.25rem 1.5rem 1.25rem 0;
  font-weight: 700;
  color: var(--nero-white);
  font-size: 0.9375rem;
  vertical-align: top;
  border-top: 1px solid var(--border-faint);
}
.kv-table__v {
  padding: 1.25rem 0;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
  vertical-align: top;
  border-top: 1px solid var(--border-faint);
}
.kv-table tr:first-child .kv-table__k,
.kv-table tr:first-child .kv-table__v {
  border-top: none;
}

/* ---------- Perception annotation cards (2x2) ---------- */
.perception-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nero-charcoal-6);
  margin-top: 3.5rem;
}
.perception-card {
  background: var(--nero-charcoal-1);
  padding: 1.75rem;
}
.perception-card__title {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--nero-white);
}
.perception-card__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* ---------- Info tile row ---------- */
.tile-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--nero-charcoal-6);
  margin-top: 1px;
}
.info-tile {
  flex: 1 1 200px;
  min-width: 200px;
  background: var(--nero-charcoal-1);
  padding: 1.5rem;
}
.info-tile__title {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--nero-white);
}
.info-tile__text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  line-height: 1.55;
}

/* ---------- Example figure ---------- */
.example-label {
  font-size: var(--type-label);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 4rem;
}
.example-figure {
  max-width: 900px;
  margin: 1.5rem auto 0;
}
.example-figure img {
  width: 100%;
  border: 1px solid var(--border-subtle);
}
.example-figure__caption {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 1rem;
  line-height: 1.6;
}

/* ---------- Code example box ---------- */
.code-example {
  background: var(--nero-charcoal-3, #202020);
  padding: 1.75rem;
  margin-top: 3rem;
}
.code-example__label {
  font-size: var(--type-label);
  letter-spacing: 1px;
  color: var(--text-secondary);
}
.code-example__body {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--nero-white);
  line-height: 1.8;
  white-space: pre-wrap;
}

/* ---------- Task card ---------- */
.task-card {
  background: var(--nero-black-1);
  padding: 2.25rem;
  margin-top: 3.5rem;
}
.task-card__label {
  font-size: var(--type-label);
  letter-spacing: 1px;
  color: var(--nero-orange);
}
.task-card__title {
  font-size: 1.1875rem;
  font-weight: 300;
  margin-top: 0.75rem;
}
.task-card__episode {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.task-segments {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--nero-charcoal-6);
  margin-top: 1.75rem;
  list-style: none;
}
.task-segment {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  background: var(--nero-charcoal-1);
  padding: 0.875rem 1.25rem;
}
.task-segment__time {
  color: var(--nero-orange);
  font-size: 0.8125rem;
  flex: none;
  width: 110px;
}
.task-segment__action {
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.task-card__meta {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--nero-white);
  line-height: 1.9;
}

/* ---------- Delivery format cards ---------- */
.format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nero-charcoal-6);
  margin-top: 3.5rem;
}
.format-card {
  background: var(--nero-charcoal-3, #202020);
  padding: 1.75rem;
}
.format-card--wide { grid-column: 1 / -1; }
.format-card__title {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nero-white);
}
.format-card__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.75rem;
  line-height: 1.6;
}