/* styles/sections/shot-kit.css
 * Small parts the transcribed Brief product shots share on the Product Leadership frames
 * (EbXYO, mfzCv, Z6Dk1): the status dot, the card shell head, and the Brief Answer strip (the Brief
 * AI avatar beside a question, its answer and what backs it). The answer strip sits under the
 * launch panel (hero) and the decision timeline (Alignment Tax). Text in the shots is the app's
 * own palette (--app-*), set on whole-pixel line heights as Pencil draws them.
 * <div class="brief-answer"><span class="brief-avatar">…</span><div class="brief-answer__text">
 *   <p class="brief-answer__question">…</p><p class="brief-answer__reply">…</p>…</div></div> */
@layer sections {
  .status-dot {
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--app-line-strong);
  }

  .status-dot--blocked { background: var(--orange); }
  .status-dot--building { background: var(--app-track); }

  /* Card shell: 48 tall head with a 15/700 title over a cool rule (window edge is --line-2) */
  .shot-card {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
  }

  /* Shot text is the app's black. .artifact-window sets --ink on the window itself in the later
     artifacts layer, so the colour goes on the window's children, which then inherit it. */
  :is(.shot-card, .launch-panel, .timeline-card) > * {
    color: var(--app-ink);
  }

  .shot-card__head {
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 48px;
    margin: 0;
    padding-inline: 18px;
    box-shadow: inset 0 -1px var(--shot-rule-cool);
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
  }

  .brief-answer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
    background: var(--app-panel);
    color: var(--app-ink);
  }

  .brief-answer__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: var(--space-8);
  }

  .brief-answer__question {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
    color: var(--app-ink-2);
  }

  .brief-answer__reply {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
  }

  /* Source chips under an answer */
  .answer-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 4px 0 0;
    list-style: none;
  }

  .answer-sources > li {
    padding: 2px 8px;
    border-radius: 5px;
    background: var(--app-fern-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: var(--fern-app);
  }

  @media (width < 900px) {
    .answer-sources {
      flex-direction: column;
      align-items: flex-start;
    }
  }
}