/* Mysomero Tutor — UI Phase 2 (v72.38.1): toasts + confirm sheet.
   Off-switch: define( 'MSM_DISABLE_UI2', true ); in wp-config.php */
.msm-u2-toasts, .msm-u2-scrim {
    --u2-bg:#ffffff; --u2-text:#1f1b2e; --u2-sub:#4a4458; --u2-line:#e6dff3; --u2-shadow:0 10px 32px rgba(20,12,40,.22);
    --u2-error:#dc2626; --u2-warn:#b45309; --u2-info:#1a6fe8; --u2-success:#15803d;
    font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-u2-toasts[data-theme="dark"], .msm-u2-scrim[data-theme="dark"] {
    --u2-bg:#1f1b14; --u2-text:#f4f0e8; --u2-sub:#c9c2b4; --u2-line:#38322a; --u2-shadow:0 10px 32px rgba(0,0,0,.6);
    --u2-error:#f87171; --u2-warn:#fbbf24; --u2-info:#60a5fa; --u2-success:#4ade80;
}

/* Toasts */
.msm-u2-toasts {
    position: fixed; z-index: 2147483646; left: 0; right: 0;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 0 12px; pointer-events: none;
}
.msm-u2-toast {
    pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
    width: 100%; max-width: 420px; box-sizing: border-box;
    background: var(--u2-bg); color: var(--u2-text);
    border: 1px solid var(--u2-line); border-radius: 14px;
    padding: 12px 8px 12px 14px; box-shadow: var(--u2-shadow);
    font-size: 15px; line-height: 1.4; cursor: pointer;
    opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease;
}
.msm-u2-toast.msm-u2-in { opacity: 1; transform: none; }
.msm-u2-ico { flex: none; display: flex; margin-top: 1px; }
.msm-u2-toast--error   .msm-u2-ico { color: var(--u2-error); }
.msm-u2-toast--warn    .msm-u2-ico { color: var(--u2-warn); }
.msm-u2-toast--info    .msm-u2-ico { color: var(--u2-info); }
.msm-u2-toast--success .msm-u2-ico { color: var(--u2-success); }
.msm-u2-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.msm-u2-toast-x {
    flex: none; width: 32px; height: 32px; margin: -6px 0 -6px 0; border: 0; background: none;
    color: var(--u2-sub); font-size: 22px; line-height: 1; cursor: pointer; border-radius: 8px;
}

/* Confirm sheet */
.msm-u2-scrim {
    position: fixed; inset: 0; z-index: 2147483600;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(20, 14, 34, 0); transition: background .2s ease;
    overscroll-behavior: contain; touch-action: none;
}
.msm-u2-scrim.msm-u2-in { background: rgba(20, 14, 34, .55); }
.msm-u2-sheet {
    width: 100%; max-width: 480px; box-sizing: border-box;
    background: var(--u2-bg); color: var(--u2-text);
    border-radius: 24px 24px 0 0; box-shadow: var(--u2-shadow);
    padding: 10px 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
    transform: translateY(100%); transition: transform .22s ease;
}
.msm-u2-scrim.msm-u2-in .msm-u2-sheet { transform: none; }
.msm-u2-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--u2-line); margin: 0 auto 14px; }
.msm-u2-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.msm-u2-msg { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--u2-sub); }
.msm-u2-actions { display: flex; flex-direction: column; gap: 10px; }
.msm-u2-btn {
    min-height: 52px; border-radius: 14px; border: 1px solid transparent; cursor: pointer;
    font: 600 16px 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.msm-u2-ok { background: #1a6fe8; color: #fff; }
.msm-u2-danger .msm-u2-ok { background: #dc2626; }
.msm-u2-cancel { background: transparent; color: var(--u2-text); border-color: var(--u2-line); }
.msm-u2-btn:focus-visible { outline: 2px solid var(--u2-info); outline-offset: 2px; }

/* Busy overlay (exam / paper marking) */
.msm-u2-busy { align-items: center; z-index: 2147483640; touch-action: none; cursor: progress; }
.msm-u2-busy.msm-u2-in { background: rgba(20, 14, 34, .72); }
.msm-u2-busy-card {
    background: var(--u2-bg); color: var(--u2-text); border-radius: 20px; box-shadow: var(--u2-shadow);
    padding: 28px 26px; margin: 0 24px; max-width: 340px; text-align: center;
}
.msm-u2-spin {
    width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
    border: 4px solid var(--u2-line); border-top-color: var(--u2-info);
    animation: msm-u2-rot .9s linear infinite;
}
.msm-u2-busy-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.msm-u2-busy-sub { font-size: 14px; color: var(--u2-sub); line-height: 1.45; }
@keyframes msm-u2-rot { to { transform: rotate(360deg); } }

@media (min-width: 600px) {
    .msm-u2-scrim { align-items: center; }
    .msm-u2-sheet { max-width: 420px; border-radius: 20px; padding-bottom: 22px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
    .msm-u2-scrim.msm-u2-in .msm-u2-sheet { transform: none; opacity: 1; }
    .msm-u2-handle { display: none; }
    .msm-u2-actions { flex-direction: row-reverse; }
    .msm-u2-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .msm-u2-spin { animation-duration: 2.5s; }
    .msm-u2-toast, .msm-u2-scrim, .msm-u2-sheet { transition: none; }
}

/* v72.39.3: the title is an <h2> and the message a <p> appended to <body> — the site theme's
   heading/paragraph fonts were beating inheritance. Set the brand font explicitly on every text node. */
.msm-u2-scrim .msm-u2-title, .msm-u2-scrim .msm-u2-msg,
.msm-u2-scrim .msm-u2-busy-title, .msm-u2-scrim .msm-u2-busy-sub,
.msm-u2-toasts .msm-u2-toast, .msm-u2-toasts .msm-u2-toast-msg {
    font-family: 'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
}