@layer components {
  .hero {
    align-items: end;
    border-bottom: var(--border-heavy);
    display: grid;
    background-color: #b9b9b5;
    gap: var(--space-4);
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    min-height: 12rem;
    padding: var(--space-4);
  }

  .hero h1 {
    margin-left: -0.065em;
    margin-top: var(--space-2);
  }

  .hero__brief {
    background: var(--color-panel-raised);
    border: var(--border-heavy);
    border-left: 0.25rem solid var(--color-orange);
    font-size: var(--font-size-lg);
    font-weight: 600;
    max-width: 32rem;
    padding: var(--space-3);
  }

  .metrics-grid {
    border-bottom: var(--border-heavy);
    display: grid;
    background: var(--color-black);
    gap: 1px;
    grid-template-columns: repeat(3, 1fr);
  }

  .metric-card {
    background: var(--color-panel);
    border-right: 0;
    color: var(--color-black);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    min-height: 8.5rem;
    padding: var(--space-3);
  }

  .metric-card:last-child {
    border-right: 0;
  }

  .metric-card--active {
    background: var(--color-status-active);
  }

  .metric-card--overdue {
    background: var(--color-status-overdue);
  }

  .metric-card--scheduled {
    background: var(--color-status-scheduled);
  }

  .metric-card__index {
    align-self: start;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .metric-card__label {
    align-self: end;
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: var(--letter-spacing-tight);
    text-transform: uppercase;
  }

  .metric-card__value {
    align-self: center;
    font-family: var(--font-mono);
    font-size: var(--font-size-2xl);
    font-weight: 500;
    letter-spacing: var(--letter-spacing-tight);
    grid-column: 2;
    grid-row: 1 / -1;
    line-height: var(--line-height-compact);
  }

  .work-order-grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-card {
    background: var(--color-panel);
    border: 0;
    min-height: 14rem;
    padding: var(--space-3);
    position: relative;
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .work-card::before {
    background: var(--color-status-scheduled);
    content: "";
    height: 0.25rem;
    inset: 0 0 auto;
    position: absolute;
  }

  .work-card--active::before {
    background: var(--color-status-active);
  }

  .work-card--cancelled::before {
    background: var(--color-status-cancelled);
  }

  .work-card--completed::before {
    background: var(--color-status-completed);
  }

  .work-card.is-overdue::before {
    background: var(--color-status-overdue);
  }

  .work-card:hover {
    background: var(--color-panel-raised);
  }

  .work-card h3 {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl);
    margin-block: var(--space-4) var(--space-3);
  }

  .work-card h3 a {
    text-decoration: none;
  }

  .work-card__topline {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .work-card__sequence {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
  }

  .work-card__part {
    border-block: var(--border-subtle);
    display: grid;
    gap: 0.25rem;
    padding-block: var(--space-3);
    text-decoration: none;
  }

  .work-card__part span {
    color: var(--color-blue-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
  }

  .work-card__part strong {
    font-size: var(--font-size-lg);
  }

  .work-card__data {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr 2fr;
    margin-top: var(--space-4);
  }

  .work-card__data dt,
  .part-card__data dt,
  .spec-grid dt {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
  }

  .work-card__data dd,
  .part-card__data dd {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
  }

  .part-card {
    align-items: center;
    border-bottom: var(--border-subtle);
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 4rem minmax(0, 1fr) minmax(16rem, 0.7fr);
    min-height: 5.5rem;
    padding: var(--space-3);
    transition: background var(--transition-fast);
  }

  .part-card:last-child {
    border-bottom: 0;
  }

  .part-card:hover {
    background: var(--color-panel-raised);
  }

  .part-card__index {
    color: var(--color-blue-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
  }

  .part-card__identity h2 {
    font-family: var(--font-mono);
    font-size: var(--font-size-lg);
  }

  .part-card__identity h2 a {
    text-decoration: none;
  }

  .part-card__identity p {
    color: var(--color-muted);
    margin-top: 0.5rem;
  }

  .part-card__data {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-panel {
    background: var(--color-panel);
    border-bottom: var(--border-heavy);
    display: grid;
    border-inline: var(--border-heavy);
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .detail-panel__marker {
    align-items: center;
    background: var(--color-orange);
    color: var(--color-black);
    display: flex;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 700;
    justify-content: center;
    letter-spacing: var(--letter-spacing-wide);
    writing-mode: vertical-rl;
  }

  .spec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .spec-grid > div {
    border-right: var(--border-subtle);
    min-height: 7.5rem;
    padding: var(--space-3);
  }

  .spec-grid > div:last-child {
    border-right: 0;
  }

  .spec-grid dd {
    font-size: var(--font-size-lg);
    font-weight: 650;
  }

  .spec-grid dd a {
    color: var(--color-blue-text);
  }

  .spec-grid dd small {
    color: var(--color-muted);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 400;
    margin-top: 0.5rem;
    text-transform: uppercase;
  }

  .spec-grid__feature {
    background: var(--color-blue);
    color: var(--color-black);
  }

  .spec-grid__feature dt,
  .spec-grid__feature dd small {
    color: rgb(5 5 5 / 65%);
  }

  .order-overview {
    background: var(--color-panel);
    border-bottom: var(--border-heavy);
    display: grid;
    grid-template-columns: 2fr 1fr;
  }

  .spec-grid--order {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-grid--order > div:nth-child(2) {
    border-right: 0;
  }

  .spec-grid--order > div:nth-child(-n + 2) {
    border-bottom: var(--border-subtle);
  }

  .order-notes {
    background: var(--color-blue-deep);
    border-left: var(--border-heavy);
    padding: var(--space-3);
  }

  .order-notes__label {
    color: var(--color-blue-text);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }

  .order-notes p {
    font-size: var(--font-size-lg);
    font-weight: 550;
    margin-top: var(--space-3);
  }

  @media (max-width: 48rem) {
    .hero {
      align-items: start;
      grid-template-columns: 1fr;
      min-height: 12rem;
    }

    .metrics-grid {
      grid-template-columns: 1fr;
    }

    .metric-card {
      border-bottom: var(--border-heavy);
      border-right: 0;
      min-height: 6rem;
    }

    .metric-card:last-child {
      border-bottom: 0;
    }

    .order-overview,
    .work-order-grid {
      grid-template-columns: 1fr;
    }

    .order-notes {
      border-left: 0;
      border-top: var(--border-heavy);
      min-height: 12rem;
    }

    .part-card {
      grid-template-columns: 2rem 1fr;
    }

    .part-card__data {
      grid-column: 2;
    }

    .detail-panel {
      grid-template-columns: 3rem 1fr;
    }

    .spec-grid {
      grid-template-columns: 1fr;
    }

    .spec-grid > div,
    .spec-grid--order > div:nth-child(2) {
      border-bottom: var(--border-subtle);
      border-right: 0;
      min-height: 8rem;
    }
  }
}