/* AI Cloud component plugin: Alerts & Runtime Enhancements */
/* Nice Alerts styling RETIRED FROM THIS COMPONENT IN v1.12.490 — moved to foundation.
   MPNotify moved to app/assets/mp-core.js, which every page loads; its stylesheet had to follow it
   into a layer that cannot be switched off, or the one dialog the platform is guaranteed to have
   would have been the one it could not be relied on to render. What stays here is genuinely
   thematic: the tooltip takeover and the migration banner. */
/* =========================================================
   Global Tooltip takeover v1.1.3
   Safari-like floating label bubble
   ========================================================= */
.mp-tip{
    position:fixed;
    left:-9999px;
    top:-9999px;
    z-index:2147483600;
    max-width:min(264px, calc(100vw - 28px));
    padding:0;
    border:0;
    background:transparent;
    color:var(--mp-ink-tip);
    font-family:inherit;
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-bold,700);
    line-height:var(--mp-lh-normal,1.4);
    letter-spacing:var(--mp-ls-normal,0);
    text-align:center;
    pointer-events:none;
    opacity:0;
    transform:translateY(5px) scale(.985);
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.22,.9,.28,1);
    word-break:normal;
    overflow:visible;
}
.mp-tip.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
}
/* The bubble + tail are ONE fused SVG outline (see component.js shapePath),
   recomputed from the label's measured size each show so the Safari nib stays
   true to shape at any width and grows out of the bubble edge as a single
   continuous path. The label is a plain text layer on top. */
.mp-tip-shape{
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    overflow:visible;
    pointer-events:none;
}
.mp-tip-label{
    position:relative;
    z-index:2;
    display:block;
    min-height:30px;
    padding:6px 13px 7px;
    color:var(--mp-ink-tip);
    white-space:normal;
    box-sizing:border-box;
}

@media (max-width: 560px){
    .mp-tip{
        font-size:var(--mp-fs-sm,12px);
    }
    .mp-tip-label{
        min-height:30px;
        padding:6px 13px 7px;
    }
}

@media (prefers-reduced-motion: reduce){
    .mp-tip{ transition:none; transform:none; }
    .mp-tip.is-visible{ transform:none; }
}

/* The tooltip bubble is an SVG built in component.js, whose gradient stops and stroke are
   set as PRESENTATION ATTRIBUTES (stop-color="rgb(43,51,66)" etc). Those cannot follow a
   scheme -- but any CSS rule outranks a presentation attribute, so the paint is reclaimed
   here without touching the JS. Dark values are the exact attributes the script writes. */
#mp-tip-grad stop:nth-child(1){stop-color:var(--mp-tip-hi);}
#mp-tip-grad stop:nth-child(2){stop-color:var(--mp-tip-lo);}
.mp-tip-shape path{stroke:var(--mp-tip-stroke);}

/* ── Migration convergence banner ──────────────────────────────────────────
   Platform-wide notice that the database is not converged with the code. Two
   states, deliberately distinct: --pending is actionable now and reads as a
   warning; --held is waiting on a human decision and reads as information,
   because nothing is broken while it waits. Tokens only, no literals. */
.mp-migration-banner{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.7rem .95rem;margin:0 0 1rem;border:1px solid var(--mp-border);
  border-radius:var(--radius);background:var(--mp-surface-2,var(--mp-surface));
  font-size:.86rem;line-height:1.45;}
.mp-migration-banner__title{font-weight:600;letter-spacing:.01em;flex:0 0 auto;}
.mp-migration-banner__body{flex:1 1 18rem;min-width:0;color:var(--mp-text-muted);}
.mp-migration-banner__action{flex:0 0 auto;font-weight:600;text-decoration:none;
  padding:.32rem .7rem;border-radius:var(--radius);border:1px solid var(--mp-border);
  color:inherit;}
.mp-migration-banner__action:hover{border-color:currentColor;}
.mp-migration-banner--pending{border-color:var(--mp-warn-border,var(--mp-border));
  background:var(--mp-warn-bg,var(--mp-surface-2,var(--mp-surface)));}
.mp-migration-banner--pending .mp-migration-banner__title{color:var(--mp-warn-fg,inherit);}
.mp-migration-banner--held{border-style:dashed;}
@media (max-width:600px){
  .mp-migration-banner{flex-direction:column;align-items:flex-start;gap:.45rem;}
  .mp-migration-banner__action{align-self:stretch;text-align:center;}
}
