/* --- An Action Card's Share (resource_concerns/share) ---
   Folded in from the share-control prototype (.scratch/snapshot-sending/
   issues/12): a slim band on the open problem's foot, under the problem's
   column only, its text quiet and its Share a link in the primary colour, not the card's
   tone, which follows the worst problem and would paint an amber problem's
   Share red. A hairline above it overhangs the text by half the gutter at
   each end, the band reaching out past the card's padding by that half
   and padding back in so its text keeps the column above. Won over a corner menu, tabs off
   the card's edge and the band in the verdict's colour; the form opens in
   B's dialog, beside a preview of the email, rather than in the card.

   The band is held on the card's foot by the panel's layout, which is the
   card's own and lives in action_card.css. */

.share {
  --share-pad: 1.5rem;
  margin: 1.5rem calc(-1 * var(--share-pad)) 0;

  .share-notice {
    margin-inline: var(--share-pad);
  }

  > .band {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    margin: 0 calc(-0.5 * var(--share-pad));
    padding: 0.7rem calc(1.5 * var(--share-pad));
    font-size: 0.8rem;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: var(--share-pad);
      right: var(--share-pad);
      border-top: 1px solid var(--color-border);
    }

    /* In a narrow column the lead wraps beside the link rather than
       pushing it onto a line of its own. */
    .lead {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      color: var(--color-text-muted);
    }

    .menu {
      flex: none;
      margin-left: auto;

      /* The trigger in the primary colour, and only the word underlined;
         its shape is application.css's .share-trigger. */
      > summary {
        color: var(--color-accent);
        font-weight: 700;

        span {
          text-decoration: underline;
          text-underline-offset: 0.2em;
          text-decoration-thickness: 1px;
        }
      }

      /* On the card's clipped foot, so it opens upwards. */
      .popover-menu-items {
        top: auto;
        bottom: calc(100% + 0.3rem);
        --menu-travel-y: -1;
        transform-origin: bottom right;
        min-width: 12rem;
        z-index: 25;
      }

      form {
        margin: 0;
      }
    }
  }
}

/* The notice of what was just shared and the Share trigger are drawn by
   more than one screen, so they sit in application.css's Share
   section; .share above only sets the notice's inset in the band. */