/* Mission 2 incident story styles (scenes-m2-incident.js: access-list, wrong-recipient, compromise).
   Scope every rule with the scene class (.qs-access-list, .qs-wrong-recipient, .qs-compromise). */

/* access-list (Q3): an "In progress" status flips to "Project closed"; the external row lights up afterwards. */
.qs-access-list .qs-members { position: relative; perspective: 520px; perspective-origin: 62px 12px; }
.qs-access-list .st-prog { position: absolute; left: 0; top: 0; display: inline-flex; gap: 7px; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #e9effd; color: #2c4a93; font-weight: 700; white-space: nowrap; }
.qs-access-list .st-prog > i:first-child { width: 7px; height: 7px; border-radius: 50%; background: #3b6fe0; box-shadow: 0 0 0 3px #3b6fe02e; }
.qs-access-list .st-track { display: block; width: 36px; height: 4px; border-radius: 2px; background: #2c4a9326; overflow: hidden; }
.qs-access-list .st-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b8cf0, #2c4a93); }
.qs-access-list .qs-closed { position: relative; overflow: hidden; }
.qs-access-list .st-gloss { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, #ffffffd9 50%, transparent 68%); }
/* The external row is plain (a white cover under its content) until the project has closed. */
.qs-access-list .qs-member.ext { position: relative; z-index: 0; }
.qs-access-list .st-plain { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; }

/* wrong-recipient (Q4): the compose state (title, typed recipient, suggestion list, Cc, Send, paper plane) lies over
   the Sent view and leaves before the realisation; the To token is neutral (a cover) until then. */
.qs-wrong-recipient .qs-bar span, .qs-wrong-recipient .qs-mail, .qs-wrong-recipient .qs-to, .qs-wrong-recipient .qs-to .wrong { position: relative; }
.qs-wrong-recipient .st-ttl { font-style: normal; }
.qs-wrong-recipient .st-ttl-new { position: absolute; left: 21px; top: 0; bottom: 0; display: flex; align-items: center; font-style: normal; white-space: nowrap; }
.qs-wrong-recipient .st-typed { position: absolute; left: 72px; top: 6px; padding: 2px 6px; color: #1f232e; }
.qs-wrong-recipient .st-tok { position: absolute; inset: 0; padding: 2px 6px; border-radius: inherit; background: #eef1f6; color: #1f232e; font-style: normal; white-space: nowrap; }
.qs-wrong-recipient .st-cc { position: absolute; left: 0; top: 6px; color: #8b95a1; font-style: normal; }
.qs-wrong-recipient .st-send { position: absolute; right: 0; bottom: -4px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px 0 12px; border-radius: 8px; background: linear-gradient(135deg, #ec3c84, #b4234f); color: #fff; font-weight: 700; box-shadow: 0 8px 16px -8px #b4234f; }
.qs-wrong-recipient .st-send svg { width: 14px; height: 14px; }
.qs-wrong-recipient .st-ac { position: absolute; z-index: 3; left: 66px; top: 31px; width: 272px; }
.qs-wrong-recipient .st-ac-in { display: grid; gap: 2px; padding: 4px; border-radius: 11px; background: #fff; box-shadow: 0 18px 34px -14px #1f232e80, 0 0 0 1px #1f232e17; transform-origin: 50% 0; }
.qs-wrong-recipient .st-ac-item { position: relative; z-index: 0; display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; }
.qs-wrong-recipient .st-ac-hl { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fbe9f0; }
.qs-wrong-recipient .st-ac-item > b { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #9aa3b2, #5f6878); color: #fff; font-size: .6rem; }
.qs-wrong-recipient .st-ac-item.in > b { background: linear-gradient(135deg, #fcb434, #ec6c24); }
.qs-wrong-recipient .st-ac-item > span { display: grid; line-height: 1.25; }
.qs-wrong-recipient .st-ac-item small { color: #6a7380; font-size: .66rem; }
.qs-wrong-recipient .st-plane { position: absolute; z-index: 5; left: 346px; top: 178px; width: 34px; height: 34px; filter: drop-shadow(0 6px 8px #0000004d); }
.qs-wrong-recipient .st-plane svg { display: block; width: 100%; height: 100%; }
/* The trail starts at the plane's centre (363, 195) and rises 240 px to the right (FLY in the scene). */
.qs-wrong-recipient .st-trail { position: absolute; z-index: 4; left: 363px; top: -45px; width: 250px; height: 240px; overflow: visible; fill: none; stroke: #ffffffd9; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .5 7; filter: drop-shadow(0 0 2px #b4234f); }

/* compromise (Q5): the night pill (permanent), the "Mail forwarding · Off" placeholder in the rule's slot, the alarm
   ring on the new sign-in and the letters leaving through the forwarding rule. */
.qs-compromise .qs-l.qs-night { gap: 7px; background: linear-gradient(135deg, #26346fd9, #3b2457d9); color: #eef0ff; box-shadow: inset 0 0 0 1px #ffffff2e, 0 18px 30px -16px #000c; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.qs-compromise .qs-moon { width: 16px; height: 16px; fill: #ffd98a; filter: drop-shadow(0 0 5px #ffd98acc); }
.qs-compromise .qs-activity { position: relative; }
.qs-compromise .qs-activity > .bad { position: relative; }
.qs-compromise .st-alarm { position: absolute; inset: -3px; border-radius: 12px; box-shadow: 0 0 0 2px #e5484d, 0 0 16px 3px #e5484d73; pointer-events: none; }
.qs-compromise .st-fwd { position: absolute; left: 0; right: 0; top: 114px; height: 32px; display: grid; grid-template-columns: 18px auto 1fr; gap: 8px; align-items: center; padding: 0 10px; border-radius: 10px; background: #f6f7f9; color: #8b95a1; font-style: normal; }
.qs-compromise .st-fwd .icon { color: #a3acb8; }
.qs-compromise .st-fwd b { color: #6a7380; }
.qs-compromise .st-letter { position: absolute; z-index: 5; left: 290px; top: 170px; width: 26px; height: 19px; filter: drop-shadow(0 4px 6px #00000066); }
.qs-compromise .st-letter svg { display: block; width: 100%; height: 100%; }