/* styles/sections/ticket-context.css
 * A ticket as filed beside what the engineer's agent gets after /onboard (Product Teams hero
 * figure: Z0LLS, o6qFk, a9asw). Shell: .artifact-window--md--strong, two .artifact-bar heads.
 * Side by side from D, stacked on M. */
@layer sections {
  .ticket-context {
    display: flex;
    flex-direction: column;
  }

  .ticket-context__before {
    background: var(--app-soft);
  }

  .ticket-context__head {
    --artifact-bar-h: 46px;
    --artifact-bar-pad: var(--space-16);
  }

  .ticket-context__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-16);
  }

  .ticket-context__ticket {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .ticket-context__title,
  .ticket-context__desc,
  .ticket-context__label {
    margin: 0;
  }

  .ticket-context__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 21px;
    color: var(--ink-2);
  }

  .ticket-context__desc {
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-muted);
  }

  /* Rule drawn centred on the edge, as Pencil strokes it: the label sits 16 below its centre */
  .ticket-context__missing {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-top: 15px;
    border-top: 1px solid var(--rule-edge);
  }

  .ticket-context__label {
    font-size: 13px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink-muted);
  }

  .ticket-context__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink-muted);
  }

  /* The frame's 10 x 1.5 dash, a plain filled mark */
  .ticket-context__list > li {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }

  .ticket-context__list > li::before {
    content: "";
    flex: none;
    width: 10px;
    height: 1.5px;
    background: currentcolor;
  }

  .ticket-context__after {
    display: flex;
    flex-direction: column;
  }

  /* Fern command bar: one row from D; the context drops to its own line on M */
  .ticket-context__onboard {
    --artifact-bar-h: 40px;
    --artifact-bar-bg: var(--fern);
    --artifact-bar-edge: transparent;
    --artifact-bar-pad: var(--space-16);
    --artifact-bar-row-gap: var(--space-4);
    flex-wrap: wrap;
    padding-block: var(--space-14) 13px;
    line-height: round(nearest, 1.2em, 1px);
  }

  .ticket-context__cmd {
    display: inline-flex;
    align-items: center;
    gap: var(--space-10);
  }

  .ticket-context__cmd > img {
    flex: none;
  }

  .ticket-context__cmd > code {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    line-height: inherit;
    white-space: nowrap;
    color: var(--white);
  }

  .ticket-context__where {
    flex-basis: 100%;
    color: var(--white-70);
  }

  .ticket-context__rows {
    margin: 0;
    padding: var(--space-4) var(--space-16) var(--space-8);
  }

  .ticket-context__row {
    display: flex;
    gap: var(--space-20);
    padding: var(--space-12) 0 11px;
    border-bottom: 1px solid var(--line-2);
  }

  .ticket-context__row:last-child {
    padding-bottom: var(--space-12);
    border-bottom: 0;
  }

  .ticket-context__row > dt {
    flex: none;
    width: 84px;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ink-muted);
  }

  .ticket-context__row > dd {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
  }

  .ticket-context__mono {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 20px;
  }

  @media (width >= 900px) {
    .ticket-context {
      flex-direction: row;
    }

    .ticket-context__before {
      flex: none;
      width: min(420px, 32.8125%);
      border-right: 1px solid var(--rule-edge);
    }

    .ticket-context__head {
      --artifact-bar-pad: var(--space-24);
    }

    .ticket-context__body {
      padding: var(--space-24);
    }

    .ticket-context__title {
      font-size: 20px;
      line-height: 25px;
    }

    .ticket-context__after {
      flex: 1 1 0;
      min-width: 0;
    }

    .ticket-context__onboard {
      --artifact-bar-pad: var(--space-24);
      flex-wrap: nowrap;
      padding-block: 0;
    }

    .ticket-context__where {
      flex-basis: auto;
    }

    .ticket-context__rows {
      padding-inline: var(--space-24);
    }

    .ticket-context__row > dd {
      flex-direction: row;
    }
  }
}