/* styles/sections/terminal-shot.css
 * The coding agent terminal on the Customer Feedback trace (stop 06), transcribed from the frames
 * (oF2GB, LlDUC, W6doM): a #191A19 window, a title bar with the three window lights (Pencil
 * exports), then the session in JetBrains Mono 13/1.55. The frames set the session in JetBrains
 * Mono, which the foundation does not ship; its latin subset (400, 600 and 400 italic, OFL) is
 * self-hosted from assets/fonts/ and declared here for this shot only.
 * From 440px of window the decision quote and the last line indent 46px; narrower, 20px (LlDUC). */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-regular-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-semibold-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-italic-latin.woff2") format("woff2");
}

@layer sections {
  .shot-term {
    container: shot-term / inline-size;
    width: min(100%, 876px);
    overflow: hidden;
    border-radius: 10px;
    background: var(--console-bg);
    box-shadow: var(--elevation-floating);
    font-family: "JetBrains Mono", var(--font-mono);
    font-size: 13px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--console-ink);
  }

  :where(.shot-term) p { margin: 0; }

  .shot-term__bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    height: 40px;
    padding-inline: var(--space-16);
    background: var(--console-bar);
    line-height: 17px;
    white-space: pre;
    color: var(--console-meta);
  }

  .shot-term__bar img {
    display: block;
    width: 11px;
    height: 11px;
  }

  .shot-term__body {
    --term-indent: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-24) var(--space-16) var(--space-28);
    white-space: pre-wrap;
  }

  .shot-term__cmd { font-weight: 600; }

  .shot-term__cmd--gap { margin-top: var(--space-16); }

  .shot-term__out {
    padding-left: 22px;
    color: var(--console-meta);
  }

  .shot-term__out--error { color: var(--console-error); }
  .shot-term__out--deep { padding-left: var(--term-indent); }

  .shot-term__hl {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-left: var(--term-indent);
    padding: var(--space-10) var(--space-14);
    background: var(--orange-15);
    box-shadow: inset 2px 0 0 var(--orange);
    font-style: italic;
    color: var(--console-quote);
  }

  /* Dimmed lines: the closest colours to the frames' 45% that pass AA on the window (tokens.css, --console-dim*) */
  .shot-term .is-dim { color: var(--console-dim); }
  .shot-term .shot-term__out--error.is-dim { color: var(--console-dim-error); }

  @container shot-term (width >= 440px) {
    .shot-term__body {
      --term-indent: 46px;
      padding-inline: var(--space-28);
    }
  }

  @media (forced-colors: active) {
    .shot-term { border: 1px solid CanvasText; }
    .shot-term__hl { border-left: 2px solid CanvasText; }
  }
}