/* ===========================================================
   window.css — window chrome, title bars, menus, MDI
   =========================================================== */

/* Windows 3.1 bevels are TWO-TONE: white on top/left, #808080 on
   bottom/right. The four-tone treatment (white + light grey outside,
   dark grey + black inside) is Windows 95 and must not appear here. */
.win3-raised{
  border-top:1px solid var(--w-btn-hilight);
  border-left:1px solid var(--w-btn-hilight);
  border-right:1px solid var(--w-btn-shadow);
  border-bottom:1px solid var(--w-btn-shadow);
  box-shadow:none;
}
.win3-sunken{
  border-top:1px solid var(--w-btn-shadow);
  border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight);
  border-bottom:1px solid var(--w-btn-hilight);
  box-shadow:none;
}

.w311-window{
  position:absolute;
  min-width:180px; min-height:110px;
  background:var(--w-btn-face);
  /* The sizing frame. Windows 3.1 reported SM_CXFRAME = 4 for a resizable
     window: a 1px black outline plus a 3px grey band you could grab to
     resize. The title bar sits INSIDE that band rather than running to the
     window edge. A 2px frame is the Windows 95 metric and reads a
     generation too new. */
  border:1px solid var(--w-frame);
  padding:3px;
  /* No drop shadow. Windows 3.1 windows sat flat on the desktop — the
     soft outer shadow is a much later idea and is the single strongest
     tell that something is not really 3.1. */
  box-shadow:
    inset 1px 1px 0 var(--w-btn-hilight),
    inset -1px -1px 0 var(--w-btn-shadow);
  display:flex; flex-direction:column;
  font-family:"W311Sans",sans-serif;
}
.w311-window.maximized{
  border-radius:0;
}

.w311-titlebar{
  height:19px; flex:0 0 19px;
  display:flex; align-items:center;
  background:var(--w-inactive-title);
  color:var(--w-inactive-text);
  padding:1px 2px;
  gap:3px;
  cursor:default;
}
.w311-window.active .w311-titlebar{
  background:linear-gradient(to right, var(--w-active-title), var(--w-active-title2));
  color:var(--w-active-text);
}

.w311-ctlbox{
  width:16px; height:14px; flex:0 0 16px;
  background:var(--w-btn-face);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--w-frame);
  box-shadow:inset 1px 1px 0 var(--w-btn-hilight), inset -1px -1px 0 var(--w-btn-shadow);
}
.w311-ctlbox .bar{ width:8px; height:2px; background:#000; }

.w311-titletext{
  /* Windows 3.1 centred the caption in the title bar; left-aligned text
     beside the system box is the Windows 95 convention. Centred within the
     space between the boxes rather than the full bar, which sits it a few
     pixels left of dead centre — invisible at these window sizes, and it
     keeps the element as the flex spacer that pushes the buttons right. */
  flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-weight:bold; font-size:13px; padding-left:2px;
  text-align:center;
}

.w311-titlebtn{
  width:16px; height:14px; flex:0 0 16px;
  background:var(--w-btn-face);
  border:1px solid var(--w-frame);
  box-shadow:inset 1px 1px 0 var(--w-btn-hilight), inset -1px -1px 0 var(--w-btn-shadow);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.w311-titlebtn:active{
  box-shadow:inset 1px 1px 0 var(--w-btn-shadow);
}
.w311-titlebtn svg{ width:9px; height:9px; }

.w311-menubar{
  flex:0 0 18px; background:var(--w-menu); color:var(--w-menu-text);
  display:flex; align-items:stretch;
  border-bottom:1px solid var(--w-btn-shadow);
  font-size:13px;
  position:relative;
  /* Must outrank .w311-body (below). MDI group windows inside the body
     climb an ever-increasing z-index as they are focused, so the body is
     given its own stacking context to trap them — otherwise they escape
     and cover this menu bar, making its dropdowns unclickable. */
  z-index:60;
}
.w311-menu-item{
  padding:2px 9px; display:flex; align-items:center; cursor:default; font-size:13px;
}
.w311-menu-item.open, .w311-menu-item:hover.hoverable{
  background:var(--w-selected-bg); color:var(--w-selected-text);
}
.w311-menu-item.disabled{ color:var(--w-btn-shadow); }

.w311-menu-dropdown{
  position:absolute; top:18px; min-width:170px;
  background:var(--w-menu); color:var(--w-menu-text);
  border:1px solid var(--w-frame);
  box-shadow:
    inset 1px 1px 0 var(--w-btn-hilight),
    inset -1px -1px 0 var(--w-btn-shadow);
  padding:2px 0;
  font-size:13px;
  z-index:1000;
}
.w311-menu-dropdown .mi{
  padding:3px 24px 3px 24px; white-space:nowrap; position:relative;
  display:flex; justify-content:space-between; gap:18px;
}
.w311-menu-dropdown .mi:hover:not(.disabled):not(.sep){
  background:var(--w-selected-bg); color:var(--w-selected-text);
}
.w311-menu-dropdown .mi.disabled{ color:var(--w-btn-shadow); }
.w311-menu-dropdown .mi.sep{ height:1px; margin:3px 2px; padding:0;
  border-top:1px solid var(--w-btn-shadow); border-bottom:1px solid var(--w-btn-hilight); }
.w311-menu-dropdown .mi .chk{ position:absolute; left:6px; }

.w311-toolbar{
  flex:0 0 26px; background:var(--w-btn-face);
  border-bottom:1px solid var(--w-btn-shadow);
  display:flex; align-items:center; gap:2px; padding:2px 3px;
}
.w311-toolbar button{
  width:24px; height:22px;
}

.w311-statusbar{
  flex:0 0 18px; background:var(--w-btn-face);
  border-top:1px solid var(--w-btn-hilight);
  display:flex; align-items:center; font-size:12px; padding:0 4px; gap:6px;
}
.w311-statusbar .seg{
  flex:1; padding:1px 4px;
  border-top:1px solid var(--w-btn-shadow);
  border-left:1px solid var(--w-btn-shadow);
  border-right:1px solid var(--w-btn-hilight);
  border-bottom:1px solid var(--w-btn-hilight);
}

.w311-body{
  /* z-index:0 deliberately creates a stacking context so that positioned
     descendants (MDI group windows, in-app overlays) are confined below the
     menu bar and toolbar no matter how high their own z-index climbs. */
  flex:1 1 auto; overflow:auto; background:var(--w-window-bg); position:relative; z-index:0;
  border-top:1px solid var(--w-btn-shadow);
  border-left:1px solid var(--w-btn-shadow);
  margin:2px 2px 2px 2px;
  border-right:1px solid var(--w-btn-hilight);
  border-bottom:1px solid var(--w-btn-hilight);
}

.w311-resize-handle{
  position:absolute; z-index:20;
}
.rh-e{ top:3px; right:-3px; bottom:3px; width:6px; cursor:ew-resize; }
.rh-w{ top:3px; left:-3px; bottom:3px; width:6px; cursor:ew-resize; }
.rh-s{ left:3px; bottom:-3px; right:3px; height:6px; cursor:ns-resize; }
.rh-n{ left:3px; top:-3px; right:3px; height:6px; cursor:ns-resize; }
.rh-se{ right:-3px; bottom:-3px; width:10px; height:10px; cursor:nwse-resize; }
.rh-sw{ left:-3px; bottom:-3px; width:10px; height:10px; cursor:nesw-resize; }
.rh-ne{ right:-3px; top:-3px; width:10px; height:10px; cursor:nesw-resize; }
.rh-nw{ left:-3px; top:-3px; width:10px; height:10px; cursor:nwse-resize; }

/* ---- MDI (Program Manager) ---- */
.mdi-client{
  flex:1; position:relative; overflow:auto;
  background:var(--w-btn-face);
}
.mdi-child{
  position:absolute; background:var(--w-btn-face);
  border:1px solid var(--w-frame);
  box-shadow:
    inset 1px 1px 0 var(--w-btn-hilight),
    inset -1px -1px 0 var(--w-btn-shadow);
  display:flex; flex-direction:column;
  min-width:140px; min-height:90px;
}
/* MDI children (the group windows inside Program Manager) used exactly
   the same caption metrics as top-level windows — SM_CYCAPTION was a
   single system-wide value. No shrinking here. */

.mdi-icon{
  width:68px; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:4px 2px; cursor:default; flex:0 0 auto;
}

/* ---- Minimised windows ----
   Minimising in Windows 3.1 produced an ICON with a caption beneath it,
   sitting directly on the desktop — never a shrunken window or a taskbar
   button. Program-group icons inside Program Manager behave the same way. */
.desktop-min-icon{
  width:80px; background:transparent; border:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 2px; cursor:default;
}
.desktop-min-icon .ico{ width:32px; height:32px; flex:0 0 32px; }
.desktop-min-icon .lbl{
  font-size:11.5px; color:#000; text-align:center; line-height:1.2;
  max-width:80px; word-wrap:break-word;
}

/* System menu popup (control box) */
.sysmenu{
  position:absolute; min-width:140px;
  background:var(--w-menu); color:var(--w-menu-text);
  border:1px solid var(--w-frame);
  box-shadow:
    inset 1px 1px 0 var(--w-btn-hilight),
    inset -1px -1px 0 var(--w-btn-shadow);
  padding:2px 0; z-index:2000; font-size:13px;
}
.sysmenu .mi{ padding:3px 22px 3px 22px; white-space:nowrap; }
.sysmenu .mi:hover{ background:var(--w-selected-bg); color:var(--w-selected-text); }
.sysmenu .mi.sep{ height:1px; margin:3px 2px; border-top:1px solid var(--w-btn-shadow); border-bottom:1px solid var(--w-btn-hilight); }


/* Minimised program-group icons along the bottom of Program Manager */
.group-min-icon{
  width:80px; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:3px 2px; cursor:default;
}
.group-min-icon .ico{ width:32px; height:32px; }
.group-min-icon .lbl{
  font-size:11.5px; color:#000; text-align:center; line-height:1.2;
  max-width:80px; word-wrap:break-word; padding:0 2px;
}
.group-min-icon.sel .lbl{ background:var(--w-selected-bg); color:var(--w-selected-text); }