/**
 * Harvest — Messages / toasts (C9).
 *
 * Styles Magento core `.message` banners (success/error/notice/warning emitted
 * by the framework after cart/checkout/account actions) AND the theme's own
 * transient `.hrv-toast` stack. State colours map to the shared --hrv-success/
 * error/warning tokens so a "success" always reads the same across the theme.
 */

/* ---------- Inline banner (core .message + .hrv-message) ---------- */
/* THE PAGE GUTTER WAS APPLYING TWICE. Two nested visible elements carry this class -
   `div.page.messages` and a `div.messages` inside it - so `padding-inline` landed on both, on
   top of the 24px `.page-main` already provides. On T23 that made the error banner 352px wide
   against a 480px card: 128px narrower at 1440, 64px at 375, i.e. 27% - measured, with the
   nested override injected and removed as a control (352 -> 416 -> 352).

   Register #42 recorded this symptom on Login and blamed "core chrome shared by every route,
   not touched by any selector". That diagnosis was FALSE: `styles-m.css` contributes nothing to
   `.messages`, and the only source of horizontal padding is this rule. It was patchable all
   along, and it was registered instead. */
.messages .messages {
  padding-inline: 0;
  max-width: none;
}

/* AND THE OUTER HALF, WHICH WAS DECLARED AS A RESIDUE AND IS NOT ONE. `.page.messages` is a
   DIRECT CHILD of `main.page-main`, which already supplies the page gutter - so this is the same
   duplicate one level up. S4 measured the fix across eleven distinct routes at two viewports: it gains
   exactly 64px at 1440 and 32px at 375 on every one, aligns the banner with `.page-main`'s content
   box on every one, and on the T23 route aligns it EXACTLY with the card (480@480, 327@24). Control
   held on every route.
   Calling the outer gutter inherent framed as unavoidable something the measurement says is one
   line away, which is the same shape as register #42's original false diagnosis.
   IT DOES NOT REACH THE AUTHENTICATION-POPUP BANNER. That element sits at
   `#authenticationPopup > .block-authentication > .block.block-customer-login > .messages`, is NOT
   a child of `.page-main`, and so the selector above never matches it: it computes
   `padding-inline: 32px`.

   THIS PARAGRAPH HAS NOW BEEN WRONG TWICE, IN OPPOSITE DIRECTIONS, AND THE SECOND VERSION COMMITTED
   THE EXACT SIN IT WAS WRITTEN TO CORRECT. Version one claimed the fix swept the popup up and cited
   996-in-1060 as proof. Version two said it did NOT sweep it up and cited THE SAME 996-in-1060 as
   proof of that. S8 measured the element: on all twelve routes as shipped it is 0x0 with an empty
   `getClientRects()`, hidden by `.block-authentication`. 996-in-1060 is a reading of NEITHER state -
   it appears only on `/customer/account/login/` with an ancestor forced visible, and even then it
   varies with the column (route A forced open is 416 in 480).
   So: the defect is real, the diagnosis is right, and both quantities were invented. What is
   measured is that the padding computes, that the element does not render until the popup opens,
   and that when forced open it inherits the double gutter.

   Left unfixed rather than papered over - it is invisible until the popup opens, which is the
   honest reason, not a route count. Recorded on register #42.

   FOUR MORE SURVIVORS WERE LISTED HERE WITH FIGURES AND ARE NOW MARKED UNCONFIRMED: on `/checkout/`
   `div.checkout-container > .messages`, `.payment-method-content > .messages` and
   `.payment-option-content > .messages`; and one on the success page. S8 could not reach any of
   them - `/checkout/` 302s to the cart on an empty basket, and `.payment-option-content` is a
   collapsed accordion that is `display:none` by default, i.e. structurally at risk of the identical
   zero-box error this paragraph just made twice.
   VERIFIED SINCE: `/checkout/onepage/success/` was unreachable when this was written (empty quote),
   so the outcome was stated as expected. S7 then placed a REAL GUEST ORDER to reach it and measured
   `padding-inline: 0`, `max-width: 720px`, content box x=360 w=720 - the banner goes 656 -> 720, into
   alignment with its own column, exactly as predicted. */
.page-main > .messages {
  padding-inline: 0;
}

.messages { max-width: var(--hrv-container); margin-inline: auto; padding-inline: var(--hrv-page-pad); }
.message,
.hrv-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  margin: 10px 0;
  font-size: 13.5px;
  border: 1px solid;
  border-radius: var(--hrv-radius-md);
}
.message > *:first-child::before { margin: 0 8px 0 0; }

.message.success,
.hrv-message--success {
  border-color: var(--hrv-success);
  color: var(--hrv-success);
  background: color-mix(in oklab, var(--hrv-success) 8%, var(--hrv-surface));
}
.message.error,
.hrv-message--error {
  border-color: var(--hrv-error);
  color: var(--hrv-error);
  background: color-mix(in oklab, var(--hrv-error) 8%, var(--hrv-surface));
}
.message.warning,
.hrv-message--warning {
  border-color: var(--hrv-warning);
  color: var(--hrv-warning);
  background: color-mix(in oklab, var(--hrv-warning) 8%, var(--hrv-surface));
}
.message.notice,
.message.info,
.hrv-message--info {
  border-color: var(--hrv-accent);
  color: var(--hrv-accent);
  background: var(--hrv-accent-tint);
}
.message a,
.hrv-message a { color: inherit; text-decoration: underline; }

/* ---------- Toast stack (theme-authored, transient) ---------- */
.hrv-toast-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
}
.hrv-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border-strong);
  border-left: 3px solid var(--hrv-text);
  border-radius: var(--hrv-radius-md);
  font-size: 13px;
  box-shadow: var(--hrv-shadow-card);
}
.hrv-toast--success { border-left-color: var(--hrv-success); }
.hrv-toast--error { border-left-color: var(--hrv-error); }
.hrv-toast--warning { border-left-color: var(--hrv-warning); }
.hrv-toast-body { flex: 1; color: var(--hrv-text); }
.hrv-toast-close {
  background: none;
  border: none;
  color: var(--hrv-text-subtle);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

@media (max-width: 767px) {
  .message,
  .hrv-message { flex-wrap: wrap; }
  .hrv-toast-stack { left: 16px; right: 16px; top: 16px; max-width: none; }
}