/* ═══════════════════════════════════════════════════════
   QUILLWRIGHT OS — retro window-manager shell
   New file, additive only. Does not modify quillwright.css.
   Everything here is scoped under #qw-desktop / .qw-window /
   .qw-taskbar so it cannot collide with existing selectors.
   ═══════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────
   DESKTOP — fixed to the viewport, independent of body's
   own layout, so nothing here depends on body's flex/height.
   z-index kept low; it establishes its own stacking context,
   so everything inside (windows, taskbar, boot screen) stacks
   entirely among itself and never fights the app's existing
   modals/toast/export-overlay (z-index 9998-10000), which stay
   above this whole layer automatically.
   ─────────────────────────────────────────────────────── */
/* Design tokens (--w-*, --font-os) now live globally in
   qw-retro-skin.css so the dark-mode toggle reskins the whole
   app, not just the windows. This block only lays the desktop out. */
#qw-desktop{
  position:fixed; inset:0; z-index:1; overflow:hidden; user-select:none;
  font-family:var(--font-os);
  background-color:var(--w-desktop-base);
  background-image:
    repeating-linear-gradient(45deg, var(--w-desktop-hatch) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-45deg, var(--w-desktop-hatch) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, var(--w-desktop-1), var(--w-desktop-2) 120%);
}

.qw-bevel-out{ box-shadow:inset -1px -1px 0 var(--w-dark-shadow), inset 1px 1px 0 var(--w-light), inset -2px -2px 0 var(--w-shadow), inset 2px 2px 0 var(--w-light-inner); background:var(--w-face); }
.qw-bevel-in{ box-shadow:inset 1px 1px 0 var(--w-dark-shadow), inset -1px -1px 0 var(--w-light), inset 2px 2px 0 var(--w-shadow), inset -2px -2px 0 var(--w-light-inner); background:var(--w-face); }
#qw-desktop [tabindex]:focus-visible{ outline:2px solid #1084d0; outline-offset:1px; }

/* ───────────────────────────────────────────────────────
   DESKTOP ICONS
   ─────────────────────────────────────────────────────── */
.qw-desk-icon{ position:absolute; width:76px; display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; padding:8px 4px; border-radius:2px; z-index:5; }
.qw-desk-icon:hover, .qw-desk-icon:focus-visible{ background:rgba(255,255,255,.15); outline:none; }
.qw-desk-icon .qw-label{ color:#fff; font-size:11.5px; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,.8); line-height:1.3; }
.qw-ico-app{ width:30px; height:36px; background:#fff; border:1px solid #7a7a7a; position:relative; }
.qw-ico-app::before{ content:''; position:absolute; top:0; right:0; width:9px; height:9px; background:#e8e2cf; border-left:1px solid #7a7a7a; border-bottom:1px solid #7a7a7a; }
.qw-ico-app::after{ content:''; position:absolute; left:5px; right:5px; top:14px; height:2px; background:#c9a24a; box-shadow:0 5px 0 #c9a24a, 0 10px 0 #c9a24a; }
.qw-ico-folder{ width:34px; height:26px; background:linear-gradient(155deg,#f0d488,#c9a24a); border:1px solid #8a6a2a; border-radius:0 3px 3px 3px; position:relative; }
.qw-ico-folder::before{ content:''; position:absolute; top:-6px; left:0; width:16px; height:6px; background:#f0d488; border:1px solid #8a6a2a; border-bottom:none; border-radius:2px 2px 0 0; }
.qw-ico-card{ width:32px; height:24px; background:linear-gradient(155deg,#dfe2dd,#a9ada6); border:1px solid #6c706a; border-radius:2px; position:relative; }
.qw-ico-card::after{ content:''; position:absolute; left:5px; right:5px; top:15px; height:2px; background:#5c1f22; box-shadow:0 4px 0 #5c1f22; }
.qw-ico-card::before{ content:''; position:absolute; left:5px; top:5px; width:8px; height:8px; border-radius:50%; background:#c99a4e; }

/* small in-title-bar / taskbar icons */
.qw-wicon{ width:13px; height:13px; flex-shrink:0; position:relative; }
.qw-wicon-app{ background:#fff; border:1px solid #7a7a7a; }
.qw-wicon-app::after{ content:''; position:absolute; left:2px; right:2px; top:4px; height:1.5px; background:#c9a24a; box-shadow:0 3px 0 #c9a24a; }
.qw-wicon-folder{ background:linear-gradient(155deg,#f0d488,#c9a24a); border:1px solid #8a6a2a; }
.qw-wicon-card{ background:linear-gradient(155deg,#dfe2dd,#a9ada6); border:1px solid #6c706a; }
.qw-wicon-card::after{ content:''; position:absolute; left:2px; right:2px; top:7px; height:1.5px; background:#5c1f22; }

/* ───────────────────────────────────────────────────────
   WINDOWS
   ─────────────────────────────────────────────────────── */
.qw-window{ position:absolute; display:flex; flex-direction:column; background:var(--w-face); border:1px solid var(--w-dark-shadow);
  box-shadow:3px 3px 10px rgba(0,0,0,.45); resize:both; overflow:hidden; min-width:320px; min-height:220px;
  font-family:var(--font-os); font-size:13px; color:var(--w-text); }
/* The app's own CSS puts `transition:all .2s` on buttons/cards (e.g. .t-btn).
   Since visibility is inherited, not set directly on those descendants,
   "all" catches the inherited flip too and animates it — so on close the
   window frame (untransitioned) vanishes instantly while its buttons hang
   in place, floating over the desktop, until their transition finishes.
   Force every descendant to skip transitions while hidden so the whole
   window disappears in the same frame. */
.qw-window.qw-hidden{ visibility:hidden; pointer-events:none; }
.qw-window.qw-hidden *{ transition:none !important; }
.qw-window.qw-dialog{ resize:none; }
.qw-resize-grip{ position:absolute; right:1px; bottom:1px; width:12px; height:12px; pointer-events:none;
  background:repeating-linear-gradient(-45deg, transparent 0 2px, var(--w-shadow) 2px 3px); opacity:.7; z-index:2; }

.qw-titlebar{ font-weight:700; font-size:13px; padding:5px 5px 5px 9px; display:flex; align-items:center; gap:7px;
  letter-spacing:.2px; cursor:grab; flex-shrink:0; }
.qw-titlebar:active{ cursor:grabbing }
.qw-titlebar.qw-active{ background:linear-gradient(90deg,var(--w-title-active-1),var(--w-title-active-2)); color:var(--w-title-text); }
.qw-titlebar.qw-inactive{ background:linear-gradient(90deg,var(--w-title-inactive-1),var(--w-title-inactive-2)); color:var(--w-title-inactive-text); }
.qw-titlebar .qw-spacer{ flex:1 }
.qw-winbtn{ width:20px; height:18px; font-size:11px; line-height:18px; text-align:center; color:var(--w-text); font-weight:700; cursor:pointer; user-select:none; }
.qw-winbtn:hover{ filter:brightness(1.08) }

.qw-window-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }

/* the account window re-uses the app's own .modal-overlay/.modal markup
   unchanged — these rules only neutralise its fixed/centred-backdrop
   positioning when it's living inside our window chrome instead of
   floating over the whole page. */
.qw-window .modal-overlay{ position:static; inset:auto; background:transparent; z-index:auto; display:none; height:100%; animation:none; }
.qw-window .modal-overlay.show{ display:flex; flex-direction:column; }
.qw-window .modal{ max-width:none; width:100%; height:100%; max-height:none; border-radius:0; animation:none; box-shadow:none; margin:0; }

/* ───────────────────────────────────────────────────────
   TASKBAR
   ─────────────────────────────────────────────────────── */
.qw-taskbar{ position:absolute; left:0; right:0; bottom:0; height:34px; background:var(--w-face); display:flex; align-items:center;
  padding:2px 4px; gap:6px; box-shadow:inset 0 1px 0 var(--w-light); z-index:1000; color:var(--w-text); }
.qw-launcher-btn{ display:flex; align-items:center; gap:6px; padding:3px 12px; font-weight:700; font-size:13px; cursor:pointer; color:var(--w-text); }
.qw-launcher-logo{ width:15px; height:15px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #e6b0ac, #7a1f1f 55%, #5e1414); display:flex; align-items:center; justify-content:center; }
.qw-launcher-logo::before{ content:'Q'; font-family:var(--font-ui); font-style:italic; font-weight:700; font-size:10px; color:#f3e6d8; line-height:1; }
.qw-taskbar-sep{ width:2px; height:24px; box-shadow:inset 1px 0 0 var(--w-shadow), inset -1px 0 0 var(--w-light); margin:0 2px; flex-shrink:0; }
.qw-taskbar-app{ padding:4px 12px; font-size:12px; display:flex; align-items:center; gap:6px; max-width:190px; cursor:pointer; color:var(--w-text); }
.qw-taskbar-app.qw-hidden{ display:none }
.qw-taskbar-app span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.qw-taskbar-spacer{ flex:1 }
.qw-tray{ box-shadow:inset 1px 1px 0 var(--w-shadow), inset -1px -1px 0 var(--w-light); padding:4px 12px; font-size:11.5px;
  font-family:'Share Tech Mono',monospace; display:flex; align-items:center; gap:8px; color:var(--w-text); }

.qw-theme-toggle{ width:28px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.qw-theme-icon{ width:13px; height:13px; border-radius:50%; background:#e6c123; position:relative; }
:root.qw-dark .qw-theme-icon{ background:var(--w-light-inner); }
:root.qw-dark .qw-theme-icon::after{ content:''; position:absolute; top:-2px; left:3px; width:13px; height:13px; border-radius:50%; background:var(--w-face); }

/* ───────────────────────────────────────────────────────
   LAUNCHER MENU
   ─────────────────────────────────────────────────────── */
.qw-launcher-menu{ position:absolute; bottom:34px; left:2px; width:230px; background:var(--w-face); border:1px solid var(--w-dark-shadow);
  box-shadow:3px 3px 10px rgba(0,0,0,.45); display:none; z-index:1050; }
.qw-launcher-menu.qw-show{ display:flex }
.qw-launcher-menu-strip{ width:26px; background:linear-gradient(180deg,var(--w-title-active-1),var(--w-title-active-2)); display:flex; align-items:flex-end; padding:10px 5px; }
.qw-launcher-menu-strip span{ writing-mode:vertical-rl; transform:rotate(180deg); color:#fff; font-weight:700; font-size:13px; letter-spacing:.05em }
.qw-launcher-menu-items{ flex:1; display:flex; flex-direction:column; padding:4px; }
.qw-launcher-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; font-size:12.5px; cursor:pointer; color:var(--w-text); }
.qw-launcher-item:hover{ background:var(--w-title-active-1); color:#fff }
.qw-launcher-item .qw-ico{ width:18px; height:18px; flex-shrink:0 }

/* ───────────────────────────────────────────────────────
   TASKBAR CONTEXT MENU
   ─────────────────────────────────────────────────────── */
.qw-ctx-menu{ position:absolute; width:150px; background:var(--w-face); border:1px solid var(--w-dark-shadow); box-shadow:2px 2px 8px rgba(0,0,0,.45);
  z-index:1050; display:none; padding:2px; }
.qw-ctx-menu.qw-show{ display:block }
.qw-ctx-item{ padding:6px 12px; font-size:12.5px; cursor:pointer; color:var(--w-text); }
.qw-ctx-item:hover{ background:var(--w-title-active-1); color:#fff }
.qw-ctx-sep{ height:1px; background:var(--w-shadow); box-shadow:0 1px 0 var(--w-light); margin:3px 2px; }

/* ───────────────────────────────────────────────────────
   BOOT SCREEN
   ─────────────────────────────────────────────────────── */
#qw-bootscreen{ position:absolute; inset:0; z-index:2000; background:radial-gradient(ellipse at 50% 40%, #0a2a2a, #041414 75%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; cursor:pointer;
  transition:opacity .5s ease; }
#qw-bootscreen.qw-done{ opacity:0; pointer-events:none; }
.qw-boot-mark{ width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle at 35% 30%, #e6b0ac, #7a1f1f 55%, #5e1414); box-shadow:0 0 30px rgba(201,162,74,.25);
  display:flex; align-items:center; justify-content:center; }
.qw-boot-mark::before{ content:'Q'; font-family:var(--font-ui); font-style:italic; font-weight:700; font-size:28px; color:#f3e6d8; }
.qw-boot-word{ font-family:var(--font-ui); font-weight:800; font-size:22px; letter-spacing:.08em; color:#e8dcc0; }
.qw-boot-word span{ font-family:'Share Tech Mono',monospace; font-weight:400; font-size:12px; letter-spacing:.2em; color:#c99a4e; margin-left:8px; }
.qw-boot-bar{ width:220px; height:10px; background:#1c1a14; box-shadow:inset 1px 1px 0 #000, inset -1px -1px 0 #3a3122; border-radius:1px; overflow:hidden; }
.qw-boot-fill{ height:100%; width:0%; background:linear-gradient(90deg,#8a5a34,#c99a4e); transition:width 1.8s cubic-bezier(.3,.6,.4,1); }
.qw-boot-status{ font-family:'Share Tech Mono',monospace; font-size:11.5px; color:#a8987c; letter-spacing:.04em; height:14px; }
.qw-boot-skip{ font-family:'Share Tech Mono',monospace; font-size:10px; color:#5c5445; letter-spacing:.08em; text-transform:uppercase; position:absolute; bottom:16px; }

/* ───────────────────────────────────────────────────────
   PUBLICATIONS WINDOW — upsell state (new; the existing
   #acct-pubs-section/#my-pubs-list markup is unchanged)
   ─────────────────────────────────────────────────────── */
/* .t-btn is display:flex internally, so text-align on the parent can't
   centre it — centre the whole column with flex instead */
.qw-pubs-upsell{ padding:24px; color:var(--w-text); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:100%; text-align:center; }
.qw-pubs-upsell p{ margin:0 0 8px; font-size:13px; color:var(--w-text-dim); }
.qw-pubs-upsell button{ font-family:var(--font-os); }

/* ───────────────────────────────────────────────────────
   PHONE FALLBACK — a bezel/window frame is pure overhead
   below this width; align with quillwright.css's own 900px
   breakpoint (quillwright.css:533) rather than a new one.
   ─────────────────────────────────────────────────────── */
@media (max-width:900px){
  .qw-desk-icon{ display:none; }
  #qw-desktop .qw-window{ position:fixed !important; top:0 !important; left:0 !important; width:100% !important; height:calc(100% - 34px) !important;
    border-radius:0; resize:none !important; }
  #qw-desktop .qw-window .qw-resize-grip{ display:none; }
  #qw-desktop .qw-window:has(.qw-titlebar.qw-inactive){ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .qw-window, .qw-boot-fill, #qw-bootscreen{ transition:none !important }
}