/* GIV-192 action notice. Without script the notice stays in the page flow at the
   top of the content; action-notice.js marks the region live and lifts it into
   an overlay. Colours are the existing status tokens.

   GIV-218 moves that overlay to the right edge, vertically centred. An action
   now leaves the reader on the page they started it from, so the notice must
   not sit over the content they are reading, and centring it horizontally did
   exactly that. The right edge is clear of the sidebar, which is the shell's
   only fixed element on the left, and it is above the content rather than
   beside the sidebar's flyout. A narrow viewport has no room for a column at
   the side, so there the notice returns to full width at the bottom, clear of
   the rail and of the browser's own bottom chrome. */
.action-notices:not(.is-live):not(:has(.action-notice)){display:none}
.action-notices,.action-notice-stack{display:grid;gap:10px}
.action-notices.is-live{position:fixed;top:50%;right:24px;left:auto;transform:translateY(-50%);z-index:40;width:min(420px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow-y:auto;pointer-events:none}
@media(max-width:900px){.action-notices.is-live{top:auto;right:16px;left:16px;bottom:16px;width:auto;transform:none;max-height:60vh}}
.action-notice{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-left:4px solid var(--info);border-radius:var(--r-card);box-shadow:var(--shadow-lift);overflow-wrap:anywhere}
.action-notice-success{border-left-color:var(--success)}
.action-notice-pending{border-left-color:var(--info)}
.action-notice-failure{border-left-color:var(--error)}
.action-notice-unknown{border-left-color:var(--warning)}
.action-notice-body{flex:1;min-width:0;display:grid;gap:4px}
.action-notice-title{font:700 15px/1.3 var(--font-display)}
.native-content .action-notice p{margin:0;font-size:14px}
.action-notice-reason{color:var(--muted)}
.action-notice-link{font-size:14px;justify-self:start}
.action-notice-dismiss{flex:none;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;width:32px;height:32px;border-radius:var(--r-input);cursor:pointer}
.action-notice-dismiss:hover{background:var(--subtle);color:var(--ink)}
.action-notice-dismiss:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.action-notices.is-live .action-notice{animation:action-notice-in .18s ease-out}}
@keyframes action-notice-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}