/* styles/sections/terminal-key.css
 * Infrastructure (W6q0QR, D8E9k, w9fwI), on the inverse-textured surface: a numbered terminal
 * session (dInqR) beside a key of three items and a case note. Markers 1 to 3 sit in place of
 * the line numbers on L03, L05 and L07 (Deco annotation-marker sm). The frames draw line numbers
 * at white 30% (2.7:1); they are set at --white-50 (4.6:1 on the window, 4.5:1 on a lit row). */
@layer sections {
  .infra-section {
    padding-block: var(--space-56) 72px;
  }

  .infra-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .infra {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .infra__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    margin: 0;
  }

  .term__lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: var(--space-24) var(--space-16) 28px 0;
  }

  .term__line {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-20);
    min-height: 29px;
    padding-block: 3px;
  }

  .term__line--lit {
    background: var(--white-4);
  }

  .term__no {
    display: flex;
    justify-content: flex-end;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    color: var(--white-50);
  }

  .term__no--mint {
    color: var(--mint-ink);
  }

  .term__code {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 23px;
    white-space: pre-wrap;
    color: var(--paper-90);
  }

  .term__line--cmd .term__code {
    font-weight: 500;
    color: var(--paper);
  }

  .term__line--tool .term__code {
    color: var(--mint-ink);
  }

  .term__line--dim .term__code {
    color: var(--white-55);
  }

  .infra__items {
    margin: 0;
    padding: 0;
  }

  .infra__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-14);
    padding-block: var(--space-16);
    box-shadow: inset 0 1px 0 var(--white-20);
  }

  .infra__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
  }

  .infra__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
  }

  .infra__body {
    font-size: 14px;
    line-height: 21px;
    color: var(--white-70);
  }

  .infra__case {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-top: var(--space-12);
    padding: var(--space-4) 0 var(--space-4) 18px;
    box-shadow: inset 2px 0 0 var(--mint-ink);
  }

  .infra__case-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 13px;
    letter-spacing: 1px;
    color: var(--white-70);
  }

  .infra__case-body {
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: var(--white-90);
  }

  /* D (N2O03): the 760 figure beside the key, 56 apart. Narrower than the two fit, the key
     wraps under the figure. */
  @media (width >= 900px) {
    .infra-section {
      padding-block: var(--space-96) 120px;
    }

    .infra-section__inner {
      gap: var(--space-40);
    }

    .infra {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: var(--space-32) var(--space-56);
    }

    .infra__figure {
      flex: 0 1 760px;
      min-width: 0;
    }

    .infra__key {
      flex: 1 1 380px;
    }

    .term__lines {
      padding-right: var(--space-24);
    }
  }

  @media (width >= 1680px) {
    .infra-section {
      padding-block: 115px 144px;
    }
  }
}

/* The window: Artifact window --dark --md on the frame's deeper fill, edge white 15% */
@layer artifacts {
  .artifact-window.term {
    --window-edge: var(--white-15);
    background: var(--fern-deep);
  }
}