/* Shared material for the visual upgrade of scenes 04–10 (21/10): the same language as 01's night world and 02's "real screen".
   Use these classes inside a scene; each scene keeps its own layout in assets/css/up-<scene>.css.
   Colours: blue = data and its threads (#2F6BE0 / #7FB0FF), amber = what goes missing, is done by hand or still needs checking
   (#F0A63A / #FFC46B), navy night (#070C18 … #25365A). Interface text: Inter; data: JetBrains Mono. Text ≥ 20 px on the stage. */
:root{--nq-blue:#2F6BE0;--nq-blue-l:#7FB0FF;--nq-amber:#F0A63A;--nq-amber-l:#FFC46B;--nq-ink:#18212F;--nq-ink2:#3E4C62;--nq-rule:#D3DAE5;--nq-mono:"JetBrains Mono",ui-monospace,monospace}

/* a desktop: the wallpaper of 02, a soft light from the upper left, a dark bezel line */
.nq-desk{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(1200px 760px at 22% 18%,rgba(120,150,210,.16),rgba(120,150,210,0) 70%),
  radial-gradient(1400px 900px at 80% 90%,rgba(70,96,160,.14),rgba(70,96,160,0) 70%),
  linear-gradient(160deg,#25365A 0,#1A2846 45%,#131E36 100%)}
.nq-desk::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 75% at 50% 48%,rgba(4,10,30,0) 55%,rgba(4,10,30,.5) 100%)}
/* the light on the glass (late afternoon → evening): put it last in the scene */
.nq-glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,196,128,.10) 0,rgba(255,196,128,.04) 26%,rgba(255,196,128,0) 44%),linear-gradient(118deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.03) 64%,rgba(255,255,255,0) 70%)}

/* a window: neutral title bar (three grey dots), 1 px rules, three-layer shadow (contact, key, ambient) */
.nq-win{position:absolute;box-sizing:border-box;border-radius:12px;background:#F5F7FA;color:var(--nq-ink);font-size:22px;line-height:1.35;overflow:hidden;
  box-shadow:0 0 0 1px rgba(20,32,56,.55),0 2px 3px rgba(0,0,0,.35),0 18px 34px -12px rgba(0,0,0,.6),0 44px 70px -30px rgba(0,0,0,.5)}
.nq-win>.nq-tb{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:linear-gradient(#ECEFF4,#E1E6ED);border-bottom:1px solid #C6CEDA}
.nq-win>.nq-tb>i{width:12px;height:12px;border-radius:50%;background:#B9C2CF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.nq-win>.nq-tb>b{margin-left:10px;font-size:21px;font-weight:600;color:#253042;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nq-win>.nq-bd{padding:18px 24px}
.nq-win .nq-mono{font-family:var(--nq-mono)}
/* the dark variant (an app in night mode, or a panel on the night world) */
.nq-win.dark{background:#0F1A33;color:#E6EDF8;box-shadow:0 0 0 1px rgba(127,176,255,.28),0 2px 3px rgba(0,0,0,.45),0 18px 34px -12px rgba(0,0,0,.7),0 44px 70px -30px rgba(0,0,0,.6)}
.nq-win.dark>.nq-tb{background:linear-gradient(#1B2A4C,#15223F);border-bottom:1px solid rgba(127,176,255,.22)}
.nq-win.dark>.nq-tb>b{color:#DCE6F7}.nq-win.dark>.nq-tb>i{background:#4A5B7D}
/* a window out of focus: a dark veil (opacity animates, never a filter) */
.nq-veil{position:absolute;inset:0;background:#0B1324;opacity:0;pointer-events:none}

/* pills and notes */
.nq-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 12px 5px;border-radius:999px;font-size:21px;font-weight:700;white-space:nowrap;color:#fff;background:var(--nq-blue);box-shadow:0 0 0 3px rgba(47,107,224,.25),0 6px 14px -6px rgba(0,0,0,.6)}
.nq-pill.amb{color:#2A1800;background:var(--nq-amber-l);box-shadow:0 0 0 3px rgba(240,166,58,.28),0 6px 14px -6px rgba(0,0,0,.6)}
.nq-amb{padding:12px 16px 14px;border-radius:12px;background:rgba(20,14,6,.92);box-shadow:inset 0 0 0 2px rgba(240,166,58,.7),0 12px 26px -10px rgba(0,0,0,.8);color:#FFD9A0}
.nq-amb b{display:block;font-size:24px;font-weight:700;color:#FFD9A0}.nq-amb span{display:block;font-size:21px;color:#F1E4CF}

/* threads (SVG paths): a soft under-stroke and a bright line; draw them with pathLength="1" and stroke-dashoffset */
.nq-th{fill:none;stroke-linecap:round}
.nq-th.u{stroke:rgba(90,143,246,.28);stroke-width:12}.nq-th.l{stroke:var(--nq-blue-l);stroke-width:3.5}
.nq-th.amb.u{stroke:rgba(240,166,58,.26)}.nq-th.amb.l{stroke:var(--nq-amber-l)}
.nq-dot{border-radius:50%;background:#AFCBFF;box-shadow:0 0 0 4px rgba(90,143,246,.35),0 0 22px rgba(127,176,255,.9)}
.nq-dot.amb{background:#FFD9A0;box-shadow:0 0 0 4px rgba(240,166,58,.35),0 0 22px rgba(240,166,58,.85)}
/* a physical object on the stage gets a contact shadow under it */
.nq-contact{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}