/* styles/sections/shot-parts.css
 * Parts the Product Teams frames (dVXs6, E7Gtl, sOE8q) repeat across their product shots: the
 * decision chip, the window shadow, the light window head and the figure caption. The shells
 * are the shared .artifact-window, .artifact-bar and .figure-caption; these set their custom
 * properties to the frame values. */
@layer sections {
  /* Pencil sets Spline Sans at a whole-pixel "normal" pitch, round(1.2em): 14px on 17, 13 on 16.
     Each element computes its own pitch here (inherited from a container it would be the
     container's px); bare inline spans and code keep their parent's. Zero specificity, so any
     explicit line height wins. */
  :where(.quote-hero__attribution, .quote-hero__figure, .loop-figure, .desk-log__figures, .exhibit__figure, .proof-bars__evidence, .tool-map__map) :where(:not(span, code), span[class]) {
    line-height: round(nearest, 1.2em, 1px);
  }

  /* Decision chip: D-187 on app fern soft; an open question on app amber */
  .d-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 3px var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--app-fern-soft);
    color: var(--fern-app);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: round(nearest, 1.2em, 1px);
    white-space: nowrap;
  }

  .d-chip--open {
    background: var(--app-amber-soft);
    color: var(--app-amber-ink);
  }

  /* Small Brief discs (zF01m 20px, ejsls 18px): the 24px mark overflows the disc, as drawn */
  .shot-avatar--overflow > svg {
    flex: none;
    max-width: none;
    margin: calc((var(--brief-avatar-size) - var(--brief-avatar-mark)) / 2);
  }

  /* Window: the frames' shadow (0 1 2 ink 6%, 0 12 32 ink 7%) */
  .shot-window {
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
      0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent);
  }

  /* Light head: app panel fill, 20 side padding, 13px title and muted context */
  .shot-head {
    --artifact-bar-bg: var(--app-panel);
    --artifact-bar-pad: var(--space-20);
    line-height: round(nearest, 1.2em, 1px);
  }

  .shot-head > img {
    flex: none;
  }

  .shot-head__title {
    font-weight: 600;
    color: var(--ink);
  }

  .shot-head__sub {
    color: var(--ink-muted);
  }

  /* Caption: 12px mono label on an 18px line, 13px line beside it (below it on M) */
  .shot-caption {
    --figure-caption-lh: round(nearest, 1.2em, 1px);
    --figure-caption-lh-d: round(nearest, 1.2em, 1px);
    --figure-caption-label-size: 12px;
    --figure-caption-label-lh: 18px;
    --figure-caption-label-lh-d: 18px;
    --figure-caption-label-ls: 0.2px;
  }

  @media (width < 900px) {
    /* The hero caption keeps label and line side by side on M (o6qFk) */
    .shot-caption--row {
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: var(--space-4);
    }
  }
}