/*
 * .broadcast-banner — the HEY World-style note above an admin post: its public
 * link (an input-look field with an inset Copy button and a "copied" overlay)
 * and the one-time "email to subscribers" action (send now or schedule via the
 * shared day/hour picker). The card is a NEUTRAL surface on purpose, so the
 * accent link and brand-filled buttons read clearly against it.
 */
@layer components {
  .broadcast-banner {
    display: grid;
    gap: var(--u-pad);
    justify-items: center;
    margin-block: calc(var(--u-pad) * 1.5);
    /* Match .post-body's inset so the card's edges align with the body text. */
    margin-inline: clamp(0rem, 6vw, 3.5rem);
    padding: calc(var(--u-pad) * 1.25);
    background: color-mix(in oklab, var(--canvas), var(--ink) 5%);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-card);
    text-align: center;
    font-size: var(--font-size-1);
    color: var(--ink);
  }

  .broadcast-banner__lead { margin: 0; max-inline-size: 40rem; }

  .broadcast-banner__permalink {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-weight: var(--font-weight-6);
  }

  /* Input-look field: white well, URL text, Copy button segmented on the end. */
  .broadcast-banner__field {
    position: relative;
    display: flex;
    align-items: stretch;
    inline-size: min(100%, 34rem);
    overflow: hidden;
  }

  .broadcast-banner__url {
    flex: 1 1 auto;
    min-inline-size: 0;               /* let the text ellipsis inside the flex row */
    padding: calc(var(--u-pad) / 1.5);
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    text-overflow: ellipsis;
  }
  .broadcast-banner__url:focus { outline: none; }

  /* A real, filled button — brand color + white, so it never blends in. */
  .broadcast-banner__copy {
    flex: 0 0 auto;
    padding-inline: var(--u-pad);
    border: none;
    background: var(--brand-strong);
    color: #fff;
    font-weight: var(--font-weight-6);
    cursor: pointer;
  }
  .broadcast-banner__copy:hover { background: color-mix(in oklab, var(--brand-strong), black 15%); }

  /* Copied confirmation: covers the whole field, then fades away. */
  .broadcast-banner__copied {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-strong);
    color: #fff;
    font-weight: var(--font-weight-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-3);
  }
  .broadcast-banner__field.is-copied .broadcast-banner__copied { opacity: 1; }

  .broadcast-banner__stamp {
    margin: 0;
    font-weight: var(--font-weight-8);
    color: var(--ink);
  }

  /* The send button + the scheduler's clock trigger, side by side. */
  .broadcast-banner__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u-pad) / 2);
  }
}