/* ---- windows ---- */
  /* window layer: own stacking context BELOW menubar(100)/drop(120)/dock(90 stays above) —
     window z-indexes grow unbounded on focus but can never escape this layer */
  #winlayer{position:absolute;inset:0;z-index:50;pointer-events:none}
  #winlayer>.win{pointer-events:auto}
  .win{position:absolute;min-width:340px;min-height:200px;display:flex;flex-direction:column;
    background:var(--chrome);border:1px solid rgba(255,255,255,.09);border-radius:12px;
    box-shadow:var(--shadow);overflow:hidden;opacity:0;transform:scale(.97);
    animation:winIn .16s ease forwards}
  @keyframes winIn{to{opacity:1;transform:scale(1)}}
  .win.min{display:none}
  .win.focused{border-color:rgba(255,255,255,.16)}
  .win:not(.focused) .titlebar{filter:saturate(.5) brightness(.85)}
  .titlebar{flex:none;height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;
    background:linear-gradient(var(--chrome-2),var(--chrome));cursor:grab;
    border-bottom:1px solid rgba(0,0,0,.35)}
  .titlebar.grab{cursor:grabbing}
  .lights{display:flex;gap:8px}
  .light{width:12px;height:12px;border-radius:50%;position:relative;display:grid;place-items:center;
    cursor:pointer;transition:filter .12s,transform .12s}
  .light span{font-size:9px;opacity:0;color:rgba(0,0,0,.6);font-weight:700;line-height:1}
  .lights:hover .light span{opacity:1}
  .lights:hover .light{filter:brightness(1.18)}
  .light:active{filter:brightness(.75);transform:scale(.9)}
  /* smooth maximize/restore — class added only for the toggle so dragging stays instant */
  .win.maxing{transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
  body.reduce-motion .win{transition:none!important}
  .l-close{background:var(--red)} .l-min{background:var(--yellow)} .l-max{background:var(--green)}
  .wtitle{font-size:13px;font-weight:600;color:var(--ink-dim);margin:0 auto;padding-right:52px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70%}
  .wbody{flex:1;min-height:0;display:flex;overflow:hidden}
  .resize{position:absolute;width:16px;height:16px;right:0;bottom:0;cursor:nwse-resize;z-index:5}
  .resize::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;
    border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);opacity:.6}

  /* ---- focus reads as depth ----
     Every property here is a shadow. box-shadow — inset or not — is painted, never measured: it
     changes no box, no border, no padding, so a graded page inside .wbody lands on exactly the
     pixels it landed on before. Nothing below may become a border or an outline for that reason.
     Specificity: .win.focused / .win:not(.focused) are both two classes and beat the plain .win
     box-shadow above without !important. */
  .win.focused{box-shadow:0 26px 64px -14px rgba(0,0,0,.7),0 8px 20px -8px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06)}
  .win:not(.focused){box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
  /* The 1px light along the top of the bar is what makes a focused window look lit from above.
     Unfocused keeps a trace of it so the bar does not read as broken, just unlit. */
  .titlebar{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  .win.focused .titlebar{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}