/*
 * Toasts, the copy dialog and the sign-in placeholder.
 *
 * These rules used to be injected into a <style> element at runtime. That is
 * an inline stylesheet, and the account, admin, affiliate, code and transcript
 * pages all serve style-src 'self' without 'unsafe-inline' — so on exactly the
 * pages where a toast reports the result of cancelling a subscription or
 * unlocking a device, the policy discarded the stylesheet and the toast
 * rendered as unstyled text with no background.
 *
 * As a file it is subject to style-src 'self', which it satisfies. Loosening
 * the policy on those pages would have been the other way to fix it, and the
 * wrong one.
 */

/*
 * A short viewport scrolls the bounded stack from its first card. Cards never
 * shrink or clip their controls; native focus scrolling keeps each dismissal
 * target reachable. The offsets respect the safe area on phones with an inset.
 */
.lt-toast-stack{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:12000;display:flex;flex-direction:column;gap:8px;width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;pointer-events:auto;scroll-padding:4px}
      .lt-toast{flex-shrink:0}
      /* Set while a native/top-layer dialog or the .lt-dialog-open lifecycle
         owns the screen, and while the stack would cover the control that
         actually holds focus. The expiry clock is stopped in the same step, so
         nothing is timed out behind something a person cannot see past. */
      .lt-toast-stack[data-blocked],.lt-toast-stack[data-obstructed]{visibility:hidden}
      .lt-toast{pointer-events:auto;box-sizing:border-box;display:grid;grid-template-columns:22px minmax(0,1fr) 44px;align-items:start;gap:10px;padding:12px 10px 12px 14px;border-radius:12px;background:var(--surface-floating);color:var(--text);border:1px solid var(--line-strong);box-shadow:none;font:500 13px/1.5 var(--font);opacity:1;transform:translateY(0);transition:opacity var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out);animation:lt-toast-in var(--motion-fast) var(--ease-out)}
      .lt-toast[data-severity="error"]{border-color:var(--danger)}.lt-toast[data-severity="warning"]{border-color:var(--warn)}.lt-toast[data-severity="success"]{border-color:var(--ok)}.lt-toast[data-severity="info"]{border-color:var(--accent)}
      /* Decorative only: the words carry the meaning, and the announcement is
         owned by .lt-announcer rather than by anything inside the card. */
      .lt-toast-glyph{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font:700 12px/1 var(--font)}
      .lt-toast[data-severity="error"] .lt-toast-glyph{background:var(--danger-soft);color:var(--danger-text)}.lt-toast[data-severity="warning"] .lt-toast-glyph{background:var(--warn-soft);color:var(--warn)}.lt-toast[data-severity="success"] .lt-toast-glyph{background:var(--ok-soft);color:var(--ok)}
      .lt-toast-copy{min-width:0;overflow-wrap:anywhere;white-space:normal}.lt-toast-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font:20px/1 system-ui;cursor:pointer}.lt-toast-close:hover{background:var(--surface-hover);color:var(--text)}.lt-toast-close:focus-visible{background:var(--surface-hover);color:var(--text);outline:2px solid var(--focus-ring);outline-offset:1px}
      /* The single announcement owner. Off screen, never focusable, never
         moved into: the visible cards stay ordinary content. */
      .lt-announcer{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
      .lt-copy-dialog{width:min(520px,calc(100vw - 32px));border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px;background:var(--surface-raised);color:var(--text);font-family:var(--font)}.lt-copy-dialog::backdrop{background:rgba(0,0,0,.82)}.lt-copy-dialog h2{margin:0 0 8px;font-size:19px}.lt-copy-dialog p{margin:0 0 16px;color:var(--text-muted);font-size:13px}.lt-copy-dialog input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface-sunken);color:var(--text);font:13px/1.4 ui-monospace,monospace}.lt-copy-actions{display:flex;justify-content:flex-end;margin-top:16px}.lt-copy-actions button{padding:10px 16px;border-radius:9px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-bright);font-weight:700;cursor:pointer}
      html.lt-auth-loading #loginBtn,html.lt-auth-loading #mobileLoginBtn{visibility:hidden}
      @keyframes lt-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
      @media(max-width:600px){.lt-toast-stack{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));width:auto}}
      @media(prefers-reduced-motion:reduce){.lt-toast{animation:none;transition:none}}