/* styles/sections/product-shot-parts.css
 * Parts the transcribed product shots share. .shot-crop: text clipped to the frame's height under a
 * white fade, as the frames draw it (a gradient rectangle from white 0 to white 100% over the last
 * lines). The fade's top, height and width are the frame's, per crop and per breakpoint; a fade
 * narrower than its column leaves the line ends at full strength, as the W frames do.
 * .shot-icon: lucide icons exported from the frames, drawn as masks so they take currentcolor. The
 * chevrons and file-text are the Pencil exports Home already ships (assets/figures/home/); archive,
 * copy and gavel are in assets/figures/revisiting-decisions/.
 * .shot-chip: the app's grey chip (tag, document link): chip fill, its edge drawn inside, 13px. */
@layer sections {
  .shot-crop {
    --crop-h: 48px;
    --fade-top: 22px;
    --fade-h: 26px;
    --fade-w: 100%;
    position: relative;
    height: var(--crop-h);
    overflow: hidden;
  }

  .shot-crop > p { margin: 0; }

  .shot-crop::after {
    content: "";
    position: absolute;
    top: var(--fade-top);
    left: 0;
    width: var(--fade-w);
    height: var(--fade-h);
    background: linear-gradient(transparent, var(--white));
    pointer-events: none;
  }

  /* D-041 why: 3 lines of 23 in 70 */
  .shot-crop--d041-why {
    --crop-h: 70px;
    --fade-top: 30px;
    --fade-h: 23px;
    --fade-w: 342px;
  }

  /* Chat bullets and approved text: 2 lines of 24; proposed replacement: 3 lines */
  .shot-crop--chat {
    --fade-h: 10px;
    --fade-w: 342px;
  }

  .shot-crop--chat-3 {
    --crop-h: 72px;
    --fade-top: 46px;
    --fade-h: 10px;
    --fade-w: 342px;
  }

  /* D-43 why: 2 lines of 24 */
  .shot-crop--d43-why {
    --fade-top: 20px;
    --fade-h: 12px;
    --fade-w: 342px;
  }

  /* Approval rationale: 5 lines of 22 in 112 */
  .shot-crop--rationale {
    --crop-h: 112px;
    --fade-top: 76px;
    --fade-h: 21px;
    --fade-w: 342px;
  }

  @media (min-width: 900px) {
    .shot-crop--d041-why {
      --fade-h: 40px;
      --fade-w: 600px;
    }

    .shot-crop--chat,
    .shot-crop--chat-3 {
      --fade-h: 26px;
      --fade-w: 900px;
    }

    .shot-crop--d43-why {
      --fade-h: 28px;
      --fade-w: 800px;
    }

    .shot-crop--rationale {
      --fade-h: 36px;
      --fade-w: 600px;
    }
  }

  .shot-icon {
    --icon-size: 13px;
    display: inline-block;
    flex: none;
    width: var(--icon-size);
    height: var(--icon-size);
    background: currentcolor;
    mask: var(--icon-mask) center / contain no-repeat;
  }

  .shot-icon--chevron-right { --icon-mask: url("/assets/figures/home/icon-chevron-right.svg"); }
  .shot-icon--chevron-down { --icon-mask: url("/assets/figures/home/icon-chevron-down.svg"); }
  .shot-icon--archive { --icon-mask: url("/assets/figures/revisiting-decisions/archive.svg"); }
  .shot-icon--copy { --icon-mask: url("/assets/figures/revisiting-decisions/copy.svg"); }
  .shot-icon--file-text { --icon-mask: url("/assets/figures/home/icon-file-text.svg"); }
  .shot-icon--gavel { --icon-mask: url("/assets/figures/revisiting-decisions/gavel.svg"); }

  .shot-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 100%;
    padding: 3px var(--space-8);
    border-radius: 6px;
    background: var(--shot-chip);
    outline: 1px solid var(--shot-chip-edge);
    outline-offset: -1px;
    font-size: 13px;
    line-height: round(1.2em, 1px);
    color: var(--shot-chip-ink);
  }

  .shot-chip > .shot-icon { color: var(--shot-text-2); }

  /* The status-row tag (meridian-v7) is the same chip with the frame's 4/10 padding */
  .shot-chip--tag { padding: var(--space-4) var(--space-10); }

  @media (forced-colors: active) {
    .shot-icon { background: CanvasText; }
    .shot-crop::after { display: none; }
  }
}