
/* Retargeted onto the control system. Three of these five drifted:
     --xwui-ink was #0A0A0A, ink is #111111
     --xwui-green was #0E9F6E, a green in no register; green is #15803d
     --xwui-navy was already ink but named for a colour the system dropped
   Names kept so nothing that references them has to change. */
:root{--xwui-ink:var(--xw-ink,#111111);--xwui-navy:var(--xw-ink,#111111);
      --xwui-line:var(--xw-line,#e5e7eb);--xwui-danger:var(--xw-red,#dc2626);
      --xwui-green:var(--xw-green,#15803d)}
/* ---- Toasts ---- */
#xwui-toasts{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 78px);transform:translateX(-50%);z-index:1300;display:flex;flex-direction:column;gap:10px;width:calc(100% - 28px);max-width:420px;pointer-events:none}
@media(min-width:768px){#xwui-toasts{bottom:calc(env(safe-area-inset-bottom) + 24px)}}
.xwui-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--xwui-line);border-radius:14px;box-shadow:0 14px 34px -14px rgba(11,25,48,.30);padding:11px 12px 11px 14px;color:var(--xwui-navy);font-size:14px;font-weight:500}
.xwui-toast .xwui-ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.xwui-toast.ok .xwui-ic{background:rgba(14,159,110,.12);color:var(--xwui-green)}
.xwui-toast.err .xwui-ic{background:rgba(220,38,38,.12);color:var(--xwui-danger)}
.xwui-toast.info .xwui-ic{background:rgba(11,25,48,.08);color:var(--xwui-navy)}
.xwui-toast .xwui-msg{flex:1;min-width:0;line-height:1.35}
.xwui-toast .xwui-undo{flex-shrink:0;background:var(--xwui-navy);color:#fff;border:none;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s}
@media (hover: hover) { .xwui-toast .xwui-undo:hover { background:var(--xw-ink,#111111) } }
.xwui-toast .xwui-x{flex-shrink:0;background:none;border:none;color:var(--xw-text-mute,#9ca3af);cursor:pointer;padding:4px;border-radius:8px;line-height:0;transition:color .15s,background .15s}
@media (hover: hover) { .xwui-toast .xwui-x:hover { color:var(--xwui-navy);background:var(--xw-line-soft,#f3f4f6) } }
/* ---- Modal (confirm / success) ---- */
.xwui-ov{position:fixed;inset:0;z-index:1290;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,15,25,.55)}
.xwui-ov.open,.xwui-ov.closing{display:flex}
@media(max-width:639px){.xwui-ov{align-items:flex-end;padding:0}}
.xwui-card{position:relative;background:#fff;border-radius:20px;width:100%;max-width:420px;box-shadow:0 30px 70px -20px rgba(11,25,48,.45);overflow:hidden}
@media(max-width:639px){.xwui-card{border-radius:22px 22px 0 0;max-width:none}}
.xwui-handle{display:none}
@media(max-width:639px){.xwui-handle{display:flex;justify-content:center;padding-top:9px}.xwui-handle span{width:40px;height:5px;border-radius:999px;background:var(--xw-line,#e5e7eb)}}
.xwui-body{padding:22px 22px 20px}
.xwui-ico-lg{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.xwui-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;color:var(--xwui-navy);letter-spacing:-.01em;line-height:1.25}
.xwui-text{font-size:14px;color:var(--xw-text-soft,#6b7280);line-height:1.6;margin-top:6px}
.xwui-actions{display:flex;gap:10px;margin-top:20px}
/* md geometry (38c): 8px radius, 12px 18px, 600 12.5px. It was a 12px radius at
   700/14px, which is a card's radius and a heading's weight on a button. */
.xwui-btn{flex:1;border:1px solid transparent;border-radius:8px;padding:12px 18px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit}
.xwui-btn.primary{background:var(--xwui-ink);border-color:var(--xwui-ink);color:#fff}
@media (hover: hover) { .xwui-btn.primary:hover { background:var(--xw-ink,#111111) } }
/* OUTLINED, not filled. Rule 3: a filled red button is earned only after a typed
   confirmation, and this dialog asks for a single tap. */
.xwui-btn.danger{background:#fff;border-color:var(--xw-red-border,#fecaca);color:var(--xw-red-dark,#b91c1c)}
@media (hover: hover) { .xwui-btn.danger:hover { background:var(--xw-red-tint,#fef2f2) } }
.xwui-btn.ghost{background:#fff;color:var(--xw-ink,#111111);border:1px solid var(--xwui-line)}
@media (hover: hover) { .xwui-btn.ghost:hover { border-color:var(--xwui-navy) } }
.xwui-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:9px;border:none;background:var(--xw-line-soft,#f3f4f6);color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;z-index:2}
@media (hover: hover) { .xwui-close:hover { background:var(--xw-line,#e5e7eb);color:var(--xwui-navy) } }
/* Focus ring in the system's commit hue, not the retired navy. */
.xwui-btn:focus-visible,.xwui-close:focus-visible,.xwui-undo:focus-visible{outline:2px solid var(--xw-violet,#7c3aed);outline-offset:2px}
/* Touch: taps land immediately, and a held finger starts nothing — no callout
   menu, no selection sweep. (The :hover skins above are gated on hover:hover.) */
.xwui-btn,.xwui-close,.xwui-undo,.xwui-x{touch-action:manipulation}
@media(hover:none){.xwui-btn,.xwui-close,.xwui-undo,.xwui-x,.xwui-toast{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}
.xwui-card{overscroll-behavior:contain}
/* ---- Animations (only when motion is allowed) ---- */
@media(prefers-reduced-motion:no-preference){
  @keyframes xwuiOvIn{from{opacity:0}to{opacity:1}}
  @keyframes xwuiOvOut{to{opacity:0}}
  @keyframes xwuiPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes xwuiPopOut{to{opacity:0;transform:translateY(8px) scale(.97)}}
  @keyframes xwuiSheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
  @keyframes xwuiSheetOut{to{transform:translateY(100%)}}
  @keyframes xwuiToastIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes xwuiToastOut{to{opacity:0;transform:translateY(10px)}}
  @keyframes xwuiPuff{0%{transform:scale(.4);opacity:0}55%{opacity:1}100%{transform:scale(1);opacity:1}}
  .xwui-ov.open{animation:xwuiOvIn .2s ease-out}
  .xwui-ov.open .xwui-card{animation:xwuiPop .34s cubic-bezier(.16,1,.3,1)}
  .xwui-ov.closing{animation:xwuiOvOut .2s ease-in forwards}
  .xwui-ov.closing .xwui-card{animation:xwuiPopOut .2s ease-in forwards}
  @media(max-width:639px){
    .xwui-ov.open .xwui-card{animation:xwuiSheetIn .4s cubic-bezier(.16,1,.3,1)}
    .xwui-ov.closing .xwui-card{animation:xwuiSheetOut .28s cubic-bezier(.4,0,1,1) forwards}
  }
  .xwui-toast{animation:xwuiToastIn .32s cubic-bezier(.16,1,.3,1)}
  .xwui-toast.out{animation:xwuiToastOut .22s ease-in forwards}
  .xwui-ico-lg.pop{animation:xwuiPuff .5s cubic-bezier(.16,1,.3,1)}
}
