/* ============================================================
   WINDOW CHROME
   ============================================================ */
.window{
  background:var(--window);color:var(--ink);
  border-radius:0 0 12px 12px;
  box-shadow:var(--shadow);
}
.titlebar{
  flex:0 0 52px;height:52px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--title);color:var(--title-ink);
  border-radius:8px 8px 0 0;
  font:400 20px/1 var(--mono);letter-spacing:.01em;
  -webkit-user-select:none;user-select:none;touch-action:none;
}
.titlebar.orange{background:var(--accent);color:#fff}
.titlebar .close{
  border:0;background:none;color:inherit;padding:0 0 0 18px;
  font:400 20px/1 var(--mono);cursor:pointer;transition:transform .15s ease;
}
.titlebar .close:hover{transform:scale(1.12)}
.titlebar .close:active{transform:scale(.9)}
.window-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  border:2px solid var(--line);border-top:0;border-radius:0 0 12px 12px;
  background:var(--window);padding:38px 48px 46px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.window-body::-webkit-scrollbar{width:7px}
.window-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
html.dark .titlebar{box-shadow:inset 0 0 0 2px var(--title-ink)}
html.dark .titlebar.orange{box-shadow:inset 0 0 0 2px var(--title-ink)}

/* sub-windows */
.sub-window{
  position:fixed;left:50%;top:max(clamp(220px,27vh,260px),calc(var(--home-top) + 64px));transform:translateX(-50%);
  width:min(var(--w),92vw);height:min(var(--h),calc(100dvh - 238px));
  display:flex;flex-direction:column;z-index:20;
  opacity:0;visibility:hidden;pointer-events:none;scale:.975;
  transition:opacity .18s ease,scale .18s ease,visibility 0s linear .18s;
}
.sub-window.is-open{opacity:1;visibility:visible;pointer-events:auto;scale:1;transition:opacity .18s ease,scale .18s ease,visibility 0s}
.sub-window .titlebar{cursor:grab}
.sub-window .titlebar:active{cursor:grabbing}




/* shared primitives — changing these intentionally affects every module that uses them */
.icon{transition:transform .18s ease}
.desk-icon:hover .icon{transform:scale(1.06)}
.desk-icon span{
  font:700 clamp(12px,1.1vw,16px)/1.2 var(--mono);letter-spacing:.01em;
  color:var(--ink);white-space:nowrap;
}
.icon{
  width:clamp(52px,4.75vw,68px);height:clamp(52px,4.75vw,68px);
  fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(2px 3px 0 rgba(66,66,66,.12));
  overflow:visible;
}
html.dark .icon{filter:drop-shadow(2px 3px 0 rgba(255,255,255,.1))}
.orange-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.orange-link:hover{text-decoration-thickness:2px}
.button{
  display:inline-block;padding:12px 28px;border:0;border-radius:8px;
  background:var(--accent);color:#fff;text-decoration:none;text-align:center;
  font:600 16px/1.4 var(--sans);cursor:pointer;
  box-shadow:0 3px 0 rgba(0,0,0,.12);
  transition:transform .15s ease,filter .15s ease;
}
.button:hover{transform:translateY(-1px);filter:brightness(1.03)}
.button:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.12)}