/* ══════════════════════════════════════════════════════════════════════════
   Notices (§2.5).

   All three WooCommerce classes render as the same strip on --rtv-ground-sunk
   with a 3px left bar and a drawn mark. No coloured background fill: a green
   success box and a red error box are two more field tones, and INV-1 allows
   exactly one field plus its two named exceptions.

   Notices render IN the document, at the top of the content column. Never a
   toast — a toast can be missed, and the one thing a failed add-to-cart may
   not be is missable.
   ══════════════════════════════════════════════════════════════════════ */

@layer components {
  .rtv-notice {
    --rtv-notice-bar: var(--rtv-line);

    display: grid;
    grid-template-columns: var(--s-5) 1fr;
    gap: var(--s-3);
    align-items: start;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-1);
    /* The 3px bar is the type signal; the mark and the words are the other
       two, so colour is never carrying the meaning alone. */
    border-inline-start: 3px solid var(--rtv-notice-bar);
    background-color: var(--rtv-ground-sunk);
    color: var(--rtv-ink);
    font-family: var(--rtv-font-system);
    font-size: var(--t-14);
    font-weight: 500;
    line-height: var(--lh-prose);
  }

  .rtv-notice + .rtv-notice {
    margin-block-start: var(--s-2);
  }

  .rtv-notice__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optically aligns the mark with the first line of text rather than the
       top of the padding box. */
    min-block-size: calc(var(--t-14) * var(--lh-prose));
    color: var(--rtv-notice-bar);
  }

  .rtv-notice__mark .rtv-mark {
    --rtv-mark-size: 18px;
  }

  .rtv-notice--success { --rtv-notice-bar: var(--rtv-green-action); }
  .rtv-notice--info    { --rtv-notice-bar: var(--rtv-line); }
  .rtv-notice--error   { --rtv-notice-bar: var(--rtv-alert); }

  /* The info mark inherits --rtv-line, which is a 3.62:1 non-text value. It
     is a redundant cue next to the words, never the only one. */

  .rtv-notice__body > :first-child { margin-block-start: 0; }
  .rtv-notice__body > :last-child  { margin-block-end: 0; }

  .rtv-notice__list {
    margin: 0;
    padding-inline-start: var(--s-4);
  }

  .rtv-notice__list li + li {
    margin-block-start: var(--s-2);
  }

  /* An inline link inside a notice is a link, never a second button competing
     with the page's primary action. --rtv-link-on-sunk is the darker green:
     --rtv-green-action measures only 4.25:1 on the sunk field and fails AA. */
  .rtv-notice a {
    color: var(--rtv-link-on-sunk);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* Error notices take programmatic focus after a failed submit, so the ring
     must be real even though the element is not otherwise interactive. */
  .rtv-notice:focus-visible {
    outline: 3px solid var(--rtv-ink);
    outline-offset: 2px;
  }
}