/* A Visitor Wall piece in a dialog (vision §E8.5; js/v3/features/visitor-piece.js). Loaded by
   /visitors and injected by the module wherever else it opens (the home AI band).
   AI images are flat: a sunken mat, no lamp pool, no shadow, never cropped. A modal from 600px up
   (image beside the details from 860px), a bottom sheet on phones. */
@layer pages {
  .piece-dialog.dialog--modal {
    inline-size: min(1080px, 100% - 2 * var(--margin));
  }
  .piece-dialog .dialog__title { font-size: var(--step-2); }
  /* AI titles are Instrument Sans 600 roman everywhere (as on the home AI band): Fraunces italic
     always means a title by Jamal. */
  .piece-dialog .ai-title { font-family: var(--font-ui); font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
  .piece-dialog .dialog__body { padding-block-start: var(--space-1); }

  .piece {
    display: grid;
    gap: var(--space-6);
  }
  @media (min-width: 860px) {
    .piece {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      align-items: start;
      gap: var(--space-7);
    }
  }

  .piece__frame {
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1;
    background: var(--sunken);
  }
  .piece__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .piece__hanging {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 1;
  }

  .piece__details {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-inline-size: 0;
  }
  /* "AI · AI-generated · Fusion style · Midnight Blues palette ●●●●" reads as one line of text and
     wraps like one, the chip staying with its words. */
  .piece__caption {
    margin: 0;
    line-height: 1.6;
  }
  .piece__caption .ai-stamp__text { margin-inline-end: var(--space-2); }
  .piece__caption .palette-dots { vertical-align: -0.05em; }
  /* Separators only between items on the same line: every item carries its dot in the gutter
     before it; the row starts one gutter early and that strip is clipped, so a line never begins
     with a dot. (The clip reaches past the other edges so focus rings are never cut.) */
  .piece__credit {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 -1.1em;
    clip-path: inset(-8px -8px -8px 1.1em);
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--ink-2);
  }
  .piece__credit > span { position: relative; margin-inline-start: 1.1em; }
  .piece__credit > span::before {
    content: "·";
    content: "·" / "";
    position: absolute;
    inset-inline-start: -1.1em;
    inline-size: 1.1em;
    text-align: center;
  }
  .piece__handle { color: var(--ink); }
  .piece__subhead {
    margin: 0 0 var(--space-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .piece__idea-text {
    margin: 0;
    font: 400 var(--step-1)/1.4 var(--font-display);
    text-wrap: pretty;
  }
  /* Older pieces have no idea field: their cleaned prompt can run to a paragraph. */
  .piece__idea-text--long {
    font-size: var(--step-0);
    line-height: 1.55;
  }
  .piece__prompt > summary { font-size: var(--step--1); min-block-size: 44px; }
  .piece__prompt-text {
    margin: 0;
    font: 400 var(--step--1)/1.6 var(--font-mono);
    color: var(--ink-2);
    overflow-wrap: anywhere;
  }
  .piece__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
  }
  .piece__minor {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    inline-size: 100%;
  }
  .piece__status {
    margin: 0;
    font-size: var(--step--1);
    color: var(--alert);
  }
  .piece__status:empty { display: none; }

  /* The palette as four dots (shared with the Visitor Wall tiles). */
  .palette-dots {
    display: inline-flex;
    gap: 4px;
    forced-color-adjust: none;
  }
  .palette-dots > span {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 18%, transparent);
  }
  .palette-dots > span:nth-child(1) { background: var(--c1); }
  .palette-dots > span:nth-child(2) { background: var(--c2); }
  .palette-dots > span:nth-child(3) { background: var(--c3); }
  .palette-dots > span:nth-child(4) { background: var(--c4); }

  /* Phones: a bottom sheet; the image runs edge to edge of the sheet's padding. */
  @media (max-width: 599.98px) {
    .piece-dialog .dialog__body { padding-inline: var(--space-4); }
    .piece-dialog .dialog__head { padding-inline-start: var(--space-4); }
    .piece { gap: var(--space-5); }
    .piece__actions > .button { flex: 1 1 100%; }
  }
  @media (forced-colors: active) {
    .piece__frame { border: 1px solid CanvasText; }
  }
}