/* Privacy and focus (assets/js/sim/aware.js): Screen You Look At, Over-the-Shoulder Alert, leaving the desk.
   Values from Source/FocusPlaneController.swift, FocusPlane/*.swift, IntruderGuard.swift, GuardAlerts.swift, IslandFX.swift. */
[data-sim="aware"] > .cv { background: radial-gradient(120% 90% at 50% 20%, #1c2130 0%, #0d1018 60%, #08090d 100%); }
[data-sim="aware"] .aw-desk { position: absolute; left: 0; right: 0; top: 640px; height: 130px; background: linear-gradient(180deg, #1a1d25, #101217); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

/* displays: a 1512 × 982 pt screen drawn inside each, scaled */
[data-sim="aware"] .aw-mon { position: absolute; border-radius: 16px; background: #050506; box-shadow: 0 0 0 1.5px #2b2e35, 0 30px 60px rgba(0,0,0,.55); padding: 9px; }
[data-sim="aware"] .aw-mon.mbp { left: 50px; top: 168px; width: 718px; height: 473px; border-radius: 18px; }
[data-sim="aware"] .aw-mon.ext { left: 790px; top: 190px; width: 680px; height: 400px; padding: 8px; }
[data-sim="aware"] .aw-mon.ext::after { content: ""; position: absolute; left: 50%; top: 100%; width: 110px; height: 52px; margin-left: -55px; background: linear-gradient(90deg, #2a2d34, #3b3f48, #2a2d34); clip-path: polygon(30% 0, 70% 0, 82% 100%, 18% 100%); }
[data-sim="aware"] .aw-scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 9px; }
[data-sim="aware"] .aw-in { position: absolute; left: 0; top: 0; width: 1512px; height: 982px; transform-origin: 0 0; background: url('/assets/img/wallpaper.jpg') center / cover; }
[data-sim="aware"] .ext .aw-in { height: 850px; background-image: url('/assets/img/dock-sky.jpg'); }

/* windows on the desktops */
[data-sim="aware"] .aw-win { position: absolute; border-radius: 22px; overflow: hidden; background: #1e1f24; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.5); }
[data-sim="aware"] .aw-win .tb { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 26px; background: #2a2b31; font: 600 26px/1 var(--ui); color: rgba(255,255,255,.85); }
[data-sim="aware"] .aw-win .tb i { width: 22px; height: 22px; border-radius: 50%; background: #ff5f57; } [data-sim="aware"] .aw-win .tb i:nth-child(2) { background: #febc2e; } [data-sim="aware"] .aw-win .tb i:nth-child(3) { background: #28c840; margin-right: 18px; }
[data-sim="aware"] .aw-doc { padding: 44px 60px; font: 400 30px/1.55 var(--ui); color: rgba(255,255,255,.82); }
[data-sim="aware"] .aw-doc h5 { margin: 0 0 18px; font: 700 52px/1.1 var(--ui); color: #fff; }
[data-sim="aware"] .aw-doc .ln { height: 16px; border-radius: 8px; background: rgba(255,255,255,.14); margin: 22px 0; }
[data-sim="aware"] .aw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px; }
[data-sim="aware"] .aw-grid i { aspect-ratio: 4 / 3; border-radius: 8px; background: center / cover; }

/* menu bar + island (the same piece is drawn in the display and, larger, in the lens) */
[data-sim="aware"] .aw-top { position: absolute; left: 0; top: 0; width: 1512px; height: 160px; }
[data-sim="aware"] .aw-mb { position: absolute; left: 0; right: 0; top: 0; height: 37px; padding: 0 14px 0 20px; display: flex; align-items: center; justify-content: space-between; font: 500 13.5px/1 var(--ui); color: rgba(255,255,255,.92); background: rgba(10,14,30,.22); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }
[data-sim="aware"] .aw-mb .l, [data-sim="aware"] .aw-mb .r { display: flex; align-items: center; gap: 18px; }
[data-sim="aware"] .aw-mb img { height: 15px; display: block; }
[data-sim="aware"] .aw-mb .mk { position: relative; width: 16px; height: 16px; display: grid; place-items: center; }
[data-sim="aware"] .aw-mb .mk .alert { position: absolute; left: -5px; top: -1px; width: 26px; height: 18px; background: url('/assets/ui/sym-eye-trianglebadge-exclamationmark-fill.png') center / contain no-repeat; opacity: 0; }
[data-sim="aware"] .aw-mb .mk .alert::after { content: ""; position: absolute; right: 0; bottom: 0; width: 50%; height: 62%; background: #ff453a; -webkit-mask: url('/assets/ui/sym-eye-trianglebadge-exclamationmark-fill.png') right bottom / 200% auto no-repeat; mask: url('/assets/ui/sym-eye-trianglebadge-exclamationmark-fill.png') right bottom / 200% auto no-repeat; }
[data-sim="aware"] .aw-mb .mk.on svg { opacity: 0; } [data-sim="aware"] .aw-mb .mk.on .alert { opacity: 1; }
[data-sim="aware"] .aw-isl { position: absolute; top: 0; left: 50%; width: 270px; height: 37px; transform: translateX(-50%); transition: height .5s cubic-bezier(.3,1.25,.4,1), opacity .15s; }
[data-sim="aware"] .aw-isl .shape { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; background: #000; border-radius: 0 0 14px 14px; transition: border-radius .4s; }
[data-sim="aware"] .aw-isl .shape::before, [data-sim="aware"] .aw-isl .shape::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, #000 8px); }
[data-sim="aware"] .aw-isl .shape::before { left: -8px; } [data-sim="aware"] .aw-isl .shape::after { right: -8px; transform: scaleX(-1); }
[data-sim="aware"] .aw-isl .closed { position: absolute; left: 0; right: 0; top: 0; height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px 0 16px; }
[data-sim="aware"] .aw-isl .art { width: 22px; height: 22px; border-radius: 6px; background: url('/assets/img/cover1.jpg') center / cover; }
[data-sim="aware"] .aw-isl .eq { display: flex; align-items: center; gap: 2px; height: 16px; }
[data-sim="aware"] .aw-isl .eq i { width: 3px; height: 30%; border-radius: 2px; background: #ffb35c; animation: aw-eq 1.1s ease-in-out infinite; }
[data-sim="aware"] .aw-isl .eq i:nth-child(2) { animation-delay: .18s; } [data-sim="aware"] .aw-isl .eq i:nth-child(3) { animation-delay: .36s; } [data-sim="aware"] .aw-isl .eq i:nth-child(4) { animation-delay: .54s; }
@keyframes aw-eq { 0%,100% { height: 28%; } 50% { height: 100%; } }
[data-sim="aware"] .aw-isl.strip { height: 87px; }
[data-sim="aware"] .aw-isl.strip .shape { border-radius: 0 0 22px 22px; }
[data-sim="aware"] .aw-isl .st { position: absolute; left: 0; right: 0; top: 37px; height: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity .2s; }
[data-sim="aware"] .aw-isl.strip .st { opacity: 1; transition-delay: .15s; }
[data-sim="aware"] .aw-isl .st i { width: 20px; height: 14px; background: #5aa2ff; -webkit-mask: url('/assets/ui/sym-eye.png') center / contain no-repeat; mask: url('/assets/ui/sym-eye.png') center / contain no-repeat; }
[data-sim="aware"] .aw-isl.strip .st i { animation: aw-bounce .5s .2s cubic-bezier(.3,1.6,.5,1); }
@keyframes aw-bounce { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } }
[data-sim="aware"] .aw-isl .st b { font: 600 12px/1 var(--ui); color: #fff; }
[data-sim="aware"] .aw-isl.hidden { opacity: 0; }
[data-sim="aware"] .aw-fx { position: absolute; left: 306px; top: 0; width: 900px; height: 160px; pointer-events: none; }

/* the lens over the notch */
[data-sim="aware"] .aw-lens { position: absolute; left: 106px; top: 16px; width: 606px; height: 124px; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.5); background: #000; }
[data-sim="aware"] .aw-lens .aw-lin { position: absolute; left: 0; top: 0; width: 1512px; height: 160px; transform-origin: 0 0; background: url('/assets/img/wallpaper.jpg') center top / 1512px 982px; transition: transform .6s cubic-bezier(.3,1,.3,1); }
[data-sim="aware"] .aw-lens-tag { position: absolute; left: 726px; top: 26px; font: 500 15px/1.35 var(--ui); color: rgba(255,255,255,.55); max-width: 300px; }
[data-sim="aware"] .aw-lens-tag b { display: block; font-weight: 600; color: rgba(255,255,255,.85); font-size: 16px; }
[data-sim="aware"] .aw-pin { position: absolute; left: 404px; top: 140px; width: 1.5px; height: 30px; background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0)); }

/* veils (ScreenVeil): blurred copy + black wash; leaving the desk takes them to black */
[data-sim="aware"] .aw-blur, [data-sim="aware"] .aw-wash, [data-sim="aware"] .aw-black { position: absolute; inset: 0; pointer-events: none; }
[data-sim="aware"] .aw-blur { -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px); opacity: 0; }
[data-sim="aware"] .mbp .aw-blur { -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.3), #000 70%); mask-image: linear-gradient(to left, rgba(0,0,0,.3), #000 70%); }
[data-sim="aware"] .ext .aw-blur { -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.3), #000 70%); mask-image: linear-gradient(to right, rgba(0,0,0,.3), #000 70%); }
[data-sim="aware"] .aw-wash, [data-sim="aware"] .aw-black { background: #000; opacity: 0; }
/* edge glow (EdgeGlowView) */
[data-sim="aware"] .aw-edge { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 40px 12px rgba(255,92,87,.9), inset 0 0 18px 4px rgba(255,158,64,.6), inset 0 0 0 2.5px rgba(255,115,102,.85); }
[data-sim="aware"] .aw-edge.on { animation: aw-breath 2.5s ease-in-out; }
@keyframes aw-breath { 0% { opacity: 0; } 22% { opacity: 1; } 48% { opacity: 1; } 60% { opacity: 0; } 72% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } }
/* privacy curtain (PrivacyCurtainView) */
[data-sim="aware"] .aw-cur { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(60px) saturate(1.4); backdrop-filter: blur(60px) saturate(1.4); }
[data-sim="aware"] .aw-cur.on { opacity: 1; transition-duration: .25s; pointer-events: auto; cursor: pointer; }
[data-sim="aware"] .aw-cur i { width: 64px; height: 52px; background: rgba(255,255,255,.9); -webkit-mask: url('/assets/ui/sym-eye-slash-fill.png') center / contain no-repeat; mask: url('/assets/ui/sym-eye-slash-fill.png') center / contain no-repeat; }
[data-sim="aware"] .aw-cur b { font: 600 22px/1 var(--ui); color: #fff; }
[data-sim="aware"] .aw-cur span { font: 400 13px/1.4 var(--ui); color: rgba(255,255,255,.72); max-width: 380px; }
[data-sim="aware"] .ext .aw-cur { transform: scale(1); }

/* people, seen from behind */
[data-sim="aware"] .aw-ppl { position: absolute; left: 0; top: 0; width: 1512px; height: 770px; overflow: hidden; pointer-events: none; }
[data-sim="aware"] .aw-me { position: absolute; left: 556px; top: 572px; width: 400px; height: 200px; transition: transform .9s cubic-bezier(.5,0,.3,1), opacity .9s; }
[data-sim="aware"] .aw-me.gone { transform: translate(-560px, 60px); opacity: 0; }
[data-sim="aware"] .aw-other { position: absolute; left: 1000px; top: 470px; width: 470px; height: 300px; transform: translateY(260px); transition: transform .7s cubic-bezier(.3,1,.3,1); }
[data-sim="aware"] .aw-other.on { transform: none; }
[data-sim="aware"] .aw-chip { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 14px; background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); font: 600 14px/1 var(--ui); color: rgba(255,255,255,.88); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-sim="aware"] .aw-chip i { width: 22px; height: 15px; background: #fff; -webkit-mask: url('/assets/ui/sym-airpods-pro.png') center / contain no-repeat; mask: url('/assets/ui/sym-airpods-pro.png') center / contain no-repeat; }
[data-sim="aware"] .aw-count { position: absolute; left: 50%; top: 640px; transform: translateX(-50%); padding: 7px 14px; border-radius: 16px; background: rgba(0,0,0,.6); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14); font: 600 15px/1.2 var(--ui); color: #fff; white-space: nowrap; opacity: 0; transition: opacity .3s; text-align: center; }
[data-sim="aware"] .aw-count small { display: block; font-weight: 400; font-size: 12px; color: rgba(255,255,255,.6); }
[data-sim="aware"] .aw-count.on { opacity: 1; }

/* controls: three Settings cards */
[data-sim="aware"] .aw-ctl { position: absolute; left: 0; top: 780px; width: 1512px; height: 200px; display: flex; gap: 16px; padding: 0 24px 20px; font: 500 14px/1.3 var(--ui); color: rgba(255,255,255,.9); }
[data-sim="aware"] .aw-sc { flex: 1; border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .8px rgba(255,255,255,.09); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-sim="aware"] .aw-sc h4 { margin: 0; display: flex; align-items: center; gap: 8px; font: 600 16px/1 var(--ui); }
[data-sim="aware"] .aw-sc h4 i { width: 19px; height: 15px; background: rgba(255,255,255,.85); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-sim="aware"] .aw-note { font: 400 12.5px/1.35 var(--ui); color: rgba(255,255,255,.5); }
[data-sim="aware"] .aw-stat { font: 400 12.5px/1.3 var(--ui); color: rgba(255,255,255,.62); margin-top: auto; }
[data-sim="aware"] .aw-tg { display: flex; align-items: flex-start; gap: 9px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 500 14px/1.3 var(--ui); color: rgba(255,255,255,.9); }
[data-sim="aware"] .aw-tg b { width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; flex: none; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.25); display: grid; place-items: center; }
[data-sim="aware"] .aw-tg.on b { background: var(--accent); box-shadow: none; }
[data-sim="aware"] .aw-tg.on b::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
[data-sim="aware"] .aw-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
[data-sim="aware"] .aw-styles button { display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 2px 0; cursor: pointer; font: 500 13px/1.2 var(--ui); color: rgba(255,255,255,.7); text-align: left; }
[data-sim="aware"] .aw-styles button::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
[data-sim="aware"] .aw-styles button.on { color: #fff; }
[data-sim="aware"] .aw-styles button.on::before { box-shadow: inset 0 0 0 4px var(--accent); background: #fff; }
[data-sim="aware"] .aw-row { display: flex; align-items: center; gap: 8px; margin-top: auto; }
[data-sim="aware"] .aw-btn { border: 0; cursor: pointer; padding: 8px 13px; border-radius: 11px; font: 500 13px/1 var(--ui); color: rgba(255,255,255,.92); white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.25); }
[data-sim="aware"] .aw-btn:active { transform: scale(.98); }
[data-sim="aware"] .aw-btn.flash { animation: aw-flash .5s ease; }
@keyframes aw-flash { 40% { transform: scale(.95); filter: brightness(1.5); } }
[data-sim="aware"] .aw-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 14px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.08); }
[data-sim="aware"] .aw-seg span { padding: 5px 9px; border-radius: 12px; font: 500 12px/1 var(--ui); color: rgba(255,255,255,.55); }
[data-sim="aware"] .aw-seg span.on { color: #fff; font-weight: 600; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.09)); }
[data-sim="aware"] .try { bottom: auto; top: 150px; }
[data-sim="aware"] .aw-hit { position: absolute; left: 0; top: 0; width: 1512px; height: 770px; cursor: ew-resize; touch-action: pan-y; }
[data-sim="aware"] .aw-stage { position: absolute; left: 0; top: 0; width: 1512px; height: 770px; transform-origin: 0 0; }

/* ---------- phones (aware.js switches to a 760 × 1190 canvas under 700 px): the scene scaled to the width,
   the three cards stacked under it in large type ---------- */
[data-sim="aware"] .cv.phone .aw-stage { transform: scale(.50265); }
[data-sim="aware"] .cv.phone .aw-lens-tag { display: none; }
[data-sim="aware"] .cv.phone .aw-ctl { top: 400px; width: 760px; height: auto; flex-direction: column; gap: 14px; padding: 0 16px 16px; font-size: 24px; }
[data-sim="aware"] .cv.phone .aw-sc { flex: none !important; padding: 20px 22px; gap: 14px; border-radius: 22px; }
[data-sim="aware"] .cv.phone .aw-sc h4 { font-size: 27px; gap: 12px; }
[data-sim="aware"] .cv.phone .aw-sc h4 i { width: 30px; height: 24px; }
[data-sim="aware"] .cv.phone .aw-tg { font-size: 24px; gap: 12px; }
[data-sim="aware"] .cv.phone .aw-tg b { width: 26px; height: 26px; border-radius: 7px; }
[data-sim="aware"] .cv.phone .aw-tg.on b::after { width: 13px; height: 7px; border-width: 3px; }
[data-sim="aware"] .cv.phone .aw-note, [data-sim="aware"] .cv.phone .aw-stat { font-size: 22px; }
[data-sim="aware"] .cv.phone .aw-styles { gap: 10px 14px; }
[data-sim="aware"] .cv.phone .aw-styles button { font-size: 23px; gap: 10px; }
[data-sim="aware"] .cv.phone .aw-styles button::before { width: 20px; height: 20px; }
[data-sim="aware"] .cv.phone .aw-styles button.on::before { box-shadow: inset 0 0 0 6px var(--accent); }
[data-sim="aware"] .cv.phone .aw-btn { font-size: 23px; padding: 13px 20px; border-radius: 15px; }
[data-sim="aware"] .cv.phone .aw-seg span { font-size: 21px; padding: 8px 13px; border-radius: 16px; }
[data-sim="aware"] .cv.phone .aw-seg { border-radius: 18px; }
[data-sim="aware"] .cv.phone .aw-row { flex-wrap: wrap; gap: 12px; }
[data-sim="aware"] .cv.phone .aw-count { top: 300px; font-size: 22px; padding: 10px 18px; border-radius: 20px; }
[data-sim="aware"] .cv.phone .aw-count small { font-size: 19px; }
[data-sim="aware"] .cv.phone .try { top: 20px; font-size: 24px; padding: 11px 20px; border-radius: 26px; }