/* ============================================================
   ui-anima-risk.css — "the risk, shown" · Problem-section vignette.
   Two mini mock windows tell one ~9s looping story: the same
   page gets the same visual reshape — in the naive AI rewrite a
   click on "Save" fires the underlying clear-list action; with
   UI-Anima the click routes to the original save. Every class,
   including state classes, is prefixed ua-risk-. Window chrome
   uses the site's warm-light tokens; the mock page INSIDE each
   window carries its own literal palette (it is "someone else's
   website").
   ============================================================ */
.ua-risk-wrap { margin: var(--space-lg, 36px) auto 0; max-width: 1000px; --ua-risk-bad: #a83a32; }
.ua-risk-cap { margin-top: 15px; text-align: center; font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .02em; line-height: 1.6; color: var(--color-muted, #6c6b61); }
.ua-risk-cap strong { color: var(--color-text, #1a1a17); font-weight: 600; }

.ua-risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.ua-risk-win { border: 1px solid var(--color-border, #e0ddd1); border-radius: var(--radius-lg, 10px); overflow: hidden; background: var(--color-bg, #f5f4ef); font-family: var(--font-sans, sans-serif); color: var(--color-text, #1a1a17); }

/* ---- titlebar ---------------------------------------------- */
.ua-risk-tb { display: flex; align-items: center; gap: 10px; padding: 7px 11px; background: var(--color-surface, #eae7dd); border-bottom: 1px solid var(--color-border, #e0ddd1); min-width: 0; }
.ua-risk-dots { display: flex; gap: 5px; flex: none; }
.ua-risk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border, #e0ddd1); }
.ua-risk-tag { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.2 var(--font-mono, monospace); letter-spacing: .03em; color: var(--color-muted, #6c6b61); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ua-risk-tag--ua { color: var(--color-text, #1a1a17); }
.ua-risk-tag--ua::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent, #d9542b); }
.ua-risk-url { flex: none; font: 400 12px/1 var(--font-mono, monospace); color: var(--color-muted, #6c6b61); opacity: .7; }

/* ---- stage ------------------------------------------------- */
.ua-risk-stage { position: relative; height: 262px; background: var(--color-bg, #f5f4ef); overflow: hidden; }
/* reset veil (cream wash while the loop rewinds) */
.ua-risk-stage::after { content: ""; position: absolute; inset: 0; z-index: 9; background: var(--color-bg, #f5f4ef); opacity: 0; transition: opacity .35s; pointer-events: none; }
.ua-risk-stage.ua-risk-veil::after { opacity: .92; }
/* instant rewind under the veil (director toggles this during reset) */
.ua-risk-stage.ua-risk-snap * { transition: none !important; }

/* ---- the mock page (original skin = plain white list app) -- */
.ua-risk-page { position: absolute; inset: 0; z-index: 2; background: #ffffff; overflow: hidden; transition: background-color .55s ease, bottom .55s ease; }
.ua-risk-stage.ua-risk-s1 .ua-risk-page { bottom: 74px; background: #f6f1e3; }
.ua-risk-page > span { position: absolute; box-sizing: border-box; }

.ua-risk-title { left: 14px; top: 14px; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: -.01em; color: #202124; transition: all .55s ease; }
.ua-risk-s1 .ua-risk-title { top: 12px; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 15.5px; letter-spacing: .05em; color: #241f14; }

/* decorative widget — the ambiguous element (amber in the bound window) */
.ua-risk-wx { right: 12px; top: 11px; font-size: 12px; line-height: 1; background: #f1f3f4; border: 1px solid #f1f3f4; color: #5f6368; border-radius: 999px; padding: 4px 9px; transition: all .55s ease; }
.ua-risk-s1 .ua-risk-wx { top: 142px; background: transparent; border: 1px solid #b3a377; color: #6d6041; border-radius: 0; font-family: Georgia, serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; }
.ua-risk-s1 .ua-risk-wx.ua-risk-inert-on { border: 1px dashed var(--ua-inert, #a87b1c); color: #8a6a14; background: rgba(168, 123, 28, .07); }
.ua-risk-inertlab { right: 12px; top: 168px; font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1; color: #8a6a14; opacity: 0; transition: opacity .4s .1s; }
.ua-risk-inertlab.ua-risk-inert-on { opacity: 1; }

/* list items */
.ua-risk-item { left: 14px; width: calc(100% - 28px); display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1; color: #3c4043; padding: 6px 2px; background: transparent; border: 1px solid transparent; border-bottom: 1px solid #edeff2; border-radius: 0; transition: all .55s ease; }
.ua-risk-item1 { top: 48px; } .ua-risk-item2 { top: 84px; } .ua-risk-item3 { top: 120px; }
.ua-risk-s1 .ua-risk-item { background: #fffdf6; border: 1px solid #ddd0a9; border-radius: 6px; padding: 6px 9px; font-family: Georgia, serif; color: #4a4130; }
.ua-risk-s1 .ua-risk-item1 { top: 44px; } .ua-risk-s1 .ua-risk-item2 { top: 78px; } .ua-risk-s1 .ua-risk-item3 { top: 112px; }
.ua-risk-ck { flex: none; width: 14px; height: 14px; border: 1px solid #b6bcc4; border-radius: 3px; font-size: 12px; line-height: 13px; text-align: center; color: #3b64c8; transition: all .55s ease; }
.ua-risk-s1 .ua-risk-ck { border-color: #b3a377; border-radius: 0; color: #8a6a14; }
.ua-risk-item.ua-risk-gone { opacity: 0; transform: translateX(7px); }
.ua-risk-item.ua-risk-keep { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #d9542b) 30%, transparent); }

/* buttons — the shuffle: bottom-left pills → top-right serif chips */
.ua-risk-save { left: 14px; top: 160px; font-size: 12.5px; line-height: 1; font-weight: 500; color: #ffffff; background: #3b64c8; border: 1px solid #3b64c8; border-radius: 999px; padding: 6px 13px; transition: all .55s ease; }
.ua-risk-clear { left: 86px; top: 160px; font-size: 12.5px; line-height: 1; font-weight: 400; color: #5f6368; background: #f1f3f4; border: 1px solid #f1f3f4; border-radius: 999px; padding: 6px 12px; transition: all .55s ease; }
.ua-risk-s1 .ua-risk-save { left: calc(100% - 76px); top: 10px; background: transparent; border: 1px solid #b3a377; color: #6d6041; border-radius: 0; font-family: Georgia, serif; font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; }
.ua-risk-s1 .ua-risk-clear { left: calc(100% - 186px); top: 10px; background: transparent; border: 1px solid #b3a377; color: #6d6041; border-radius: 0; font-family: Georgia, serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; }
.ua-risk-save.ua-risk-press { transform: scale(.93); }

/* ---- "underneath · the original page" strip ---------------- */
.ua-risk-under { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 1; box-sizing: border-box; padding: 9px 12px 0; background: var(--color-surface, #eae7dd); border-top: 1px dashed rgba(26, 26, 23, .30); opacity: 0; transform: translateY(5px); transition: opacity .5s .12s, transform .5s .12s; }
.ua-risk-stage.ua-risk-s1 .ua-risk-under { opacity: 1; transform: none; }
.ua-risk-under-h { display: block; font: 500 12px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted, #6c6b61); }
.ua-risk-ghosts { display: flex; gap: 10px; margin-top: 9px; }
.ua-risk-ghost { font: 500 12px/1 var(--font-mono, monospace); color: rgba(26, 26, 23, .62); border: 1px dashed rgba(26, 26, 23, .34); border-radius: 6px; padding: 5px 9px; background: transparent; transition: color .3s, border-color .3s, border-style .3s, background-color .3s, transform .3s; }
.ua-risk-ghost.ua-risk-hit-bad { color: #8f2f27; border: 1px solid var(--ua-risk-bad, #a83a32); background: rgba(168, 58, 50, .10); transform: scale(1.05); }
.ua-risk-ghost.ua-risk-hit-bad::after { content: " ✗"; font-weight: 700; }
.ua-risk-ghost.ua-risk-hit-ok { color: var(--accent, #d9542b); border: 1px solid color-mix(in srgb, var(--accent, #d9542b) 55%, transparent); background: var(--accent-soft, rgba(217, 84, 43, .1)); transform: scale(1.05); }
.ua-risk-ghost.ua-risk-hit-ok::after { content: " ✓"; font-weight: 700; }

/* ---- overlays: wires, toast, cursor, ripple ---------------- */
.ua-risk-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

.ua-risk-toast { position: absolute; left: 14px; top: 140px; z-index: 5; max-width: calc(100% - 126px); font: 500 12px/1.3 var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.ua-risk-toast b { font-weight: 700; }
.ua-risk-toast--bad { color: #8f2f27; border-color: rgba(168, 58, 50, .55); background: #faf0ec; }
.ua-risk-toast--ok { color: var(--accent, #d9542b); border-color: color-mix(in srgb, var(--accent, #d9542b) 50%, transparent); background: #fbf2ea; }
.ua-risk-toast.ua-risk-on { opacity: 1; transform: none; }

.ua-risk-cursor { position: absolute; left: 0; top: 0; z-index: 7; width: 17px; height: 17px; opacity: 0; pointer-events: none; will-change: transform; transition: opacity .3s, transform .95s cubic-bezier(.5, .05, .25, 1); }
.ua-risk-cursor.ua-risk-show { opacity: 1; }
.ua-risk-cursor svg { display: block; width: 100%; height: 100%; }

.ua-risk-ripple { position: absolute; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1.5px solid rgba(26, 26, 23, .55); border-radius: 50%; pointer-events: none; animation: ua-risk-pop .55s ease-out forwards; }
@keyframes ua-risk-pop { from { transform: scale(.25); opacity: .8; } to { transform: scale(1.15); opacity: 0; } }

/* ---- reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ua-risk-page, .ua-risk-title, .ua-risk-wx, .ua-risk-inertlab, .ua-risk-item, .ua-risk-ck,
  .ua-risk-save, .ua-risk-clear, .ua-risk-under, .ua-risk-ghost, .ua-risk-toast,
  .ua-risk-cursor, .ua-risk-stage::after { transition: none; }
  .ua-risk-ripple { animation: none; opacity: 0; }
}

/* ---- responsive -------------------------------------------- */
@media (max-width: 720px) {
  .ua-risk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .ua-risk-url { display: none; }
}