/* vaporos-sections.css — the worlds drawn by vaporos-sections.js.
 * Shared furniture (world, pointer, keycaps, annotations, panels) is in
 * vaporos-tour.css; everything here is section-specific, at desktop pixels.
 */

/* ===================================================== notifications (swaync)
 * 520 px toasts with a 48 px icon, a 440 px control centre, all 6 px from the
 * edges, urgency on the rim rather than the fill.
 */
.n-desk{position:absolute;inset:0}
.n-tabs{padding:0;overflow:hidden}
.n-tab{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;color:var(--slot);white-space:nowrap}
.n-tab em{font-style:normal;color:color-mix(in srgb,var(--slot) 75%,#1e1e2e)}
.n-tab.active{background:var(--slot);color:#1e1e2e}
.n-tab.active em{color:color-mix(in srgb,#1e1e2e 75%,var(--slot))}
.n-tab .glow{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--slot) 30%,var(--slot) 70%,transparent);opacity:0}
.n-tab.att .glow{opacity:.8}
.n-bell{color:#7f849c;font-size:15px}
.n-bell.unread{color:#fab387}
.n-bell.dnd{color:#6c7086}

.n-stack{position:absolute;right:6px;top:46px;width:520px;display:flex;flex-direction:column;gap:6px}
.n-card{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:12px;border-radius:10px;
  background:linear-gradient(#cdd6f41a 0,#11111b14 42%,#11111b2e 100%),#1e1e2ed9;
  box-shadow:inset 0 1px 0 #cdd6f429,inset 0 0 0 1px #cdd6f40f;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.n-card.critical{box-shadow:inset 0 1px 0 #cdd6f429,inset 0 0 0 1px rgba(243,139,168,.55)}
.n-card.low{box-shadow:inset 0 1px 0 #cdd6f429,inset 0 0 0 1px rgba(166,227,161,.30)}
.n-card.wide{width:416px}
.n-ico{width:48px;height:48px;border-radius:8px;display:grid;place-items:center;font-size:24px;color:var(--ic,#74c7ec);background:color-mix(in srgb,var(--ic,#74c7ec) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic,#74c7ec) 30%,transparent)}
.n-ico .thumb{display:block;width:100%;height:100%;border-radius:8px;background:
  linear-gradient(120deg,#cba6f766,#74c7ec55 45%,#11111b 46%),
  repeating-linear-gradient(0deg,#cdd6f414 0 3px,transparent 3px 6px)}
.n-txt{min-width:0}
.n-txt p{margin:0}
.n-app{display:flex;justify-content:space-between;font-size:12px;color:#a6adc8}
.n-sum{font-weight:700;font-size:14px;color:#cdd6f4;margin-top:2px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-body{font-size:13px;color:#bac2de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-body em{font-style:normal;color:#fab387}
.n-prog{display:block;height:5px;margin-top:8px;border-radius:3px;background:#cdd6f41f;overflow:hidden}
.n-prog i{display:block;height:100%;background:#74c7ec}
.n-reply{display:flex;align-items:center;margin-top:8px;padding:5px 10px;border-radius:8px;background:#11111b8c;box-shadow:inset 0 0 0 1px #cdd6f41f;color:#6c7086;font-size:12px}
.n-reply i{display:inline-block;width:1.5px;height:13px;margin-left:2px;background:#cdd6f4}
.n-acts{display:flex;gap:6px;margin-top:9px !important;flex-wrap:wrap}
.n-acts span{padding:5px 10px;border-radius:8px;background:#cdd6f414;box-shadow:inset 0 0 0 1px #cdd6f41a;font-size:12px;color:#bac2de}

.n-cc{position:absolute;right:6px;top:46px;bottom:6px;width:440px;padding:12px;border-radius:12px;
  background:linear-gradient(#cdd6f414 0,#11111b1a 42%,#11111b33 100%),#1e1e2ee6;
  box-shadow:inset 0 0 0 1px #cdd6f41f,0 24px 60px #00000080;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  height:max-content;max-height:calc(100% - 52px);
  transform:translateX(calc(100% + 12px));opacity:0}
.n-cc.open{transform:none;opacity:1}
.n-cc-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px;font-size:15px;color:#cdd6f4}
.n-cc-head .btn{padding:5px 10px;border-radius:8px;font-size:12px;color:#bac2de;background:#cdd6f414;box-shadow:inset 0 0 0 1px #cdd6f41a}
.n-dnd{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:10px;background:#11111b66;box-shadow:inset 0 0 0 1px #cdd6f414;font-size:13px;color:#bac2de}
.n-dnd .sw{position:relative;width:34px;height:17px;border-radius:9px;background:#cdd6f429}
.n-dnd .sw i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#a6adc8}
.n-dnd .sw.on{background:#f38ba8}
.n-dnd .sw.on i{left:19px;background:#1e1e2e}
.n-cc-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.n-cc-list:empty{margin:0}

@media(prefers-reduced-motion:no-preference){
  .n-cc{transition:transform .18s cubic-bezier(.2,.8,.25,1),opacity .18s}
  .n-prog i{transition:width .45s ease}
  .n-dnd .sw,.n-dnd .sw i{transition:background-color .16s,left .16s}
  .n-tab{transition:background-color .2s,color .2s}
  .n-tab.att .glow{animation:n-glow 2.6s ease-in-out infinite}
}
@keyframes n-glow{0%,100%{opacity:.12}50%{opacity:1}}

/* ======================================================= session (hypr-session) */
.s-desk{position:absolute;left:10px;right:10px;top:50px;bottom:10px}
.s-win{opacity:1}
.s-win.gone{opacity:0;transform:scale(.97)}
.s-win.marked{border-color:#f5c2e7;box-shadow:0 0 0 3px #f5c2e733,0 12px 34px #0000008a}
.s-world.s-dark .t-wall{filter:brightness(.35) saturate(.4)}
.t-panel .s-tl{display:flex;align-items:flex-end;gap:6px;height:30px;margin:4px 8px 10px}
.t-panel .s-tl i{display:block;width:22px;height:var(--h,20px);border-radius:3px;background:#45475a}
.t-panel .s-tl i.ok{background:#a6e3a1}
.t-panel .s-tl i.pick{background:#a6e3a1;box-shadow:0 0 0 2px #f5c2e7}
.t-panel .s-tl i.thin{background:#f38ba8}
.t-panel .s-tl i.gap{width:2px;height:30px;background:#cdd6f42e}

/* ================================================================== theme */
.th-swatches{position:absolute;left:150px;top:96px;width:1620px;display:grid;gap:10px}
.th-swatches .row{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.th-swatches .row.accents{grid-template-columns:repeat(12,1fr)}
.th-swatches span{display:grid;gap:6px;padding:10px;border-radius:10px;background:#11111b8c;box-shadow:inset 0 0 0 1px #cdd6f414;font-size:13px;color:#bac2de}
.th-swatches i{display:block;height:44px;border-radius:7px;background:var(--c);box-shadow:inset 0 1px 0 #ffffff33}
.th-swatches em{font-style:normal;font-size:11px;color:#6c7086}
.th-stage{position:absolute;left:150px;top:300px;width:1620px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.th-app{border-radius:12px;overflow:hidden;background:#1e1e2ef2;box-shadow:inset 0 0 0 1px #cdd6f41f,0 14px 40px #0007}
.th-app header{height:34px;display:flex;align-items:center;padding:0 14px;background:#181825;color:#bac2de;font-size:14px}
.th-app .body{display:flex;gap:12px;padding:14px;height:120px}
.th-app .side{width:130px;border-radius:8px;background:#11111b99;box-shadow:inset 0 0 0 1px #cdd6f414}
.th-app .rows{flex:1;border-radius:8px;background:#11111b66;box-shadow:inset 0 0 0 1px #cdd6f40f;
  background-image:repeating-linear-gradient(180deg,#cdd6f414 0 8px,transparent 8px 22px);background-clip:padding-box}
.th-app footer{display:flex;justify-content:flex-end;gap:8px;padding:0 14px 14px}
.th-app .btn{padding:6px 14px;border-radius:8px;background:#cdd6f414;box-shadow:inset 0 0 0 1px #cdd6f41f;font-size:13px;color:#bac2de}
.th-app .btn.go{background:#89b4fa;color:#1e1e2e}
.th-app.qt .btn.go{background:#94e2d5}
.th-app pre{margin:0;padding:14px;font:13px/1.8 "VaporBar",monospace;color:#cdd6f4}
.th-app pre .p{color:#89b4fa}.th-app pre .g{color:#a6e3a1}.th-app pre .y{color:#f9e2af}
.th-app .bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding:14px}
.th-app .bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:var(--c)}
.th-glass{position:absolute;left:640px;top:726px;width:640px;height:200px;border-radius:14px;
  background:#1e1e2e6b;box-shadow:inset 0 0 0 1px #cdd6f41f,0 24px 60px #0008;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);display:grid;place-items:center}
.th-glass .pane{display:flex;gap:12px}
/* stock: no palette, no glass */
.th-stock .th-app{background:#dedede;box-shadow:inset 0 0 0 1px #00000026,0 14px 40px #0004;color:#222}
.th-stock .th-app header{background:#c8c8c8;color:#333}
.th-stock .th-app .side,.th-stock .th-app .rows{background:#efefef;box-shadow:inset 0 0 0 1px #0000001f}
.th-stock .th-app .btn{background:#e6e6e6;box-shadow:inset 0 0 0 1px #00000026;color:#333}
.th-stock .th-app .btn.go{background:#3b82f6;color:#fff}
.th-stock .th-app pre{background:#101010;color:#dcdcdc}
.th-stock .th-app pre .p,.th-stock .th-app pre .g,.th-stock .th-app pre .y{color:#dcdcdc}
.th-stock .th-app .bars i{background:#8a8a8a}
.th-noblur .th-glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1e1e2eb3}
.th-noblur .t-pill{-webkit-backdrop-filter:none;backdrop-filter:none;background:#1e1e2ee6}

/* ================================================================ install */
.in-term pre{margin:0;padding:18px 20px;font:16px/1.8 "VaporBar",monospace;color:#cdd6f4;white-space:pre-wrap}
.in-term .p{color:#89b4fa}
.in-term .g{color:#a6e3a1}
.in-term .d{color:#6c7086}
.in-term .c{color:#cba6f7}
.in-term .ok{color:#a6e3a1}
.in-term .y{color:#f9e2af}

/* ================================================================= export */
.ex-tree,.ex-gate{position:absolute;padding:16px 18px;border-radius:14px;background:#11111bd9;box-shadow:inset 0 0 0 1px #cdd6f41f,0 20px 50px #0008;font:14px/1.6 "VaporBar",monospace;color:#a6adc8}
.ex-tree h5,.ex-gate h5{margin:0 0 12px;font:700 14px "VaporBar",monospace;color:#cdd6f4}
.ex-row{display:flex;justify-content:space-between;gap:16px;padding:6px 10px;border-radius:8px;margin-bottom:3px}
.ex-row .tag{font-size:12px;color:#6c7086;white-space:nowrap}
.ex-row.in{background:#a6e3a114;color:#cdd6f4}
.ex-row.in .tag{color:#a6e3a1}
.ex-row.out{background:#f38ba80f;color:#7f849c}
.ex-row.out .path{text-decoration:line-through}
.ex-row.out .tag{color:#f38ba8}
.ex-row.wait{opacity:.35}
.ex-step{padding:7px 10px;border-radius:8px;margin-bottom:4px;color:#6c7086}
.ex-step.on{background:#cdd6f414;color:#cdd6f4}
.ex-verdict{margin-top:12px;padding:12px;border-radius:10px;font-size:13px;line-height:1.6}
.ex-verdict.fail{background:#f38ba81f;box-shadow:inset 0 0 0 1px #f38ba866;color:#f5e0dc}
.ex-verdict.ok{background:#a6e3a11a;box-shadow:inset 0 0 0 1px #a6e3a155;color:#cdd6f4}

@media(prefers-reduced-motion:no-preference){
  .s-win{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.25,1),border-color .3s,box-shadow .3s}
  .s-world.s-dark .t-wall,.th-app,.th-app .btn,.th-glass,.th-app pre,.th-app .bars i{transition:background-color .5s,color .5s,box-shadow .5s,filter .6s,backdrop-filter .5s}
  .ex-row,.ex-step,.ex-verdict{transition:background-color .3s,color .3s,opacity .3s}
}