/* alert.css: the one alert (CF-DS 3.1, DR-35, DS Q5 A). One flex row: icon, message, action, close. Every colour, line and tint reads a component token
   declared once (--alert-<tone>-fg/-bg/-line in tokens.css) through the three locals --fg --bg --ln, so a later accent layer changes nothing here.
   The close stays light: a 20 circle, 12 glyph, --text-2, a tone wash on hover, a hit area of 32. */
.alert{--fg:var(--alert-info-fg);--bg:var(--alert-info-bg);--ln:var(--alert-info-line);
  box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--alert-gap);min-width:0;min-height:44px;margin:0 0 var(--alert-stack);
  padding:var(--alert-pad-y) var(--alert-pad-r) var(--alert-pad-y) var(--alert-pad-l);overflow:hidden;
  border:1px solid var(--ln);border-radius:var(--alert-r);background:var(--bg);color:color-mix(in oklab,var(--fg) var(--alert-text-mix),var(--text));
  font:400 var(--alert-fs)/var(--alert-lh) var(--font);text-align:left;transition:opacity var(--dur-3) var(--ease),height var(--dur-3) var(--ease),margin var(--dur-3) var(--ease),padding var(--dur-3) var(--ease),border-width var(--dur-3) var(--ease)}
.alert[data-tone=warning]{--fg:var(--alert-warning-fg);--bg:var(--alert-warning-bg);--ln:var(--alert-warning-line)}
.alert[data-tone=success]{--fg:var(--alert-success-fg);--bg:var(--alert-success-bg);--ln:var(--alert-success-line)}
.alert[data-tone=error]{--fg:var(--alert-error-fg);--bg:var(--alert-error-bg);--ln:var(--alert-error-line)}
/* ACCENT-1 (DR-100): reserved, empty. A later accent sets --fg, --bg and --ln here; no markup emits data-accent yet. */
.alert[data-accent]{}
.alert[hidden]{display:none}
.alert:last-child{margin-bottom:0}
.alert > .i{flex:none;width:var(--alert-icon);height:var(--alert-icon);margin-top:calc((var(--alert-lh) - var(--alert-icon)) / 2);color:var(--fg)}
.alert .al-msg{flex:1 1 auto;min-width:0;margin:0;overflow-wrap:anywhere;text-wrap:pretty}
.alert .al-title{margin-right:var(--alert-title-gap);color:var(--fg);font-weight:600}
.alert .al-act{position:relative;flex:none;display:inline-flex;align-items:center;gap:2px;height:var(--alert-lh);padding:0;border:0;background:none;color:var(--text);font:600 var(--alert-fs)/var(--alert-lh) var(--font);text-decoration:none;cursor:pointer;transition:color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
/* FX-8b (UI-COVER-22): the action reads as one: 600 like the title, a hit area past its text, and a chevron when it opens another view (action.go) */
.alert .al-act::after{content:"";position:absolute;inset:-8px -6px}
.alert .al-act .i{width:var(--icon-md);height:var(--icon-md);margin-right:-4px;transition:translate var(--dur-2) var(--ease)}
@media (hover:hover) and (pointer:fine){.alert .al-act:hover{color:var(--fg)}.alert .al-go:hover .i{translate:2px 0}}
.alert .al-act:active{scale:var(--m-press)}
.alert .al-act:disabled{color:var(--text-3);cursor:default}
.alert .al-act:focus-visible,.alert .al-x:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.alert .al-act:focus-visible{border-radius:var(--r-1)}
.alert .al-x{position:relative;flex:none;display:grid;place-items:center;width:var(--alert-close);height:var(--alert-close);margin:calc((var(--alert-lh) - var(--alert-close)) / 2) 0 0;padding:0;border:0;border-radius:50%;background:none;color:var(--text-2);cursor:pointer;
  transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),scale var(--dur-1) var(--ease)}
.alert .al-x::after{content:"";position:absolute;inset:-6px}
.alert .al-x .i{width:var(--alert-close-icon);height:var(--alert-close-icon)}
@media (hover:hover) and (pointer:fine){.alert .al-x:hover{color:var(--text);background:color-mix(in oklab,var(--fg) 16%,transparent)}}
.alert .al-x:active{scale:var(--m-press)}
.alert.al-out{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.alert{transition:opacity var(--dur-2) linear}.alert .al-act:active,.alert .al-x:active{scale:1}.alert .al-go:hover .i{translate:none}}