/* ===========================================================
   controls.css — buttons, inputs, scrollbars, dialogs, listboxes
   =========================================================== */

button, .w311-btn{
  font-family:"W311Sans",sans-serif; font-size:13px;
  background:var(--w-btn-face); color:var(--w-btn-text);
  /* A 3.1 push button: a 1px BLACK frame, then a two-tone bevel inside it
     (white top/left, #808080 bottom/right) on the grey face. Windows 95's
     four-tone bevel is what makes a button look a generation too new. */
  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:3px 10px;
  cursor:default;
}
button:active, .w311-btn:active, button.pressed{
  /* pressed: the bevel goes away entirely and the face darkens at the
     top/left, so the label appears to sink by a pixel. */
  border:1px solid var(--w-frame);
  box-shadow:inset 1px 1px 0 var(--w-btn-shadow);
  padding:4px 9px 2px 11px;
}
button:focus{ outline:1px dotted #000; outline-offset:-4px; }
button:disabled{ color:var(--w-btn-shadow); text-shadow:1px 1px 0 var(--w-btn-hilight); }

.btn-default{ border:2px solid #000; padding:2px 9px; }
.btn-default::before{ content:none; }

input[type=text], input[type=number], input[type=password], textarea, select{
  font-family:"W311Sans",sans-serif; font-size:13px;
  background:var(--w-window-bg); color:var(--w-window-text);
  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);
  padding:2px 3px;
}
/* display:block matters. A textarea is inline-level by default, so it sits
   on a text baseline and leaves ~3px of descender space beneath it. Inside
   a full-height window body that 3px is enough to overflow the body and
   give the window a SECOND scrollbar alongside the textarea's own. */
textarea{ resize:none; display:block; box-sizing:border-box; }

.w311-listbox{
  background:var(--w-window-bg); color:var(--w-window-text);
  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);
  overflow:auto;
}
.w311-listbox .item{ padding:1px 4px; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.w311-listbox .item.sel{ background:var(--w-selected-bg); color:var(--w-selected-text); }

.w311-groupbox{
  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);
  position:relative; padding:10px 8px 8px;
  margin-top:6px;
}
.w311-groupbox > legend, .w311-groupbox > .legend{
  position:absolute; top:-8px; left:8px; background:var(--w-btn-face);
  padding:0 4px; font-size:12px;
}

.w311-radio, .w311-check{ display:flex; align-items:center; gap:5px; padding:2px 0; }

/* ---- scrollbars ----
   Windows 3.1 metrics: SM_CXVSCROLL / SM_CYHSCROLL were 16px at VGA, the
   arrow buttons were square 16x16 with a SOLID BLACK TRIANGLE, the thumb
   carried the same raised bevel as a push button, and the track behind it
   was a 50% dither of white against the button-face grey — not a flat
   fill. Nothing here is a rounded modern scrollbar. */
::-webkit-scrollbar{ width:16px; height:16px; background:var(--w-scrollbar); }

::-webkit-scrollbar-track{
  background-color:var(--w-scrollbar);
  /* the checkerboard dither, 1px squares of white on grey */
  background-image:
    linear-gradient(45deg, var(--w-btn-hilight) 25%, transparent 25% 75%, var(--w-btn-hilight) 75%),
    linear-gradient(45deg, var(--w-btn-hilight) 25%, transparent 25% 75%, var(--w-btn-hilight) 75%);
  background-size:2px 2px;
  background-position:0 0, 1px 1px;
  border:none;
}

/* The 3.1 bevel is TWO-TONE: white on top/left, mid grey (#808080) on
   bottom/right, on the plain grey face. No black outline and no second
   inner bevel — that four-tone treatment (white / light grey / dark grey /
   black) is Windows 95, and it is what makes a 3.1 scrollbar look wrong. */
::-webkit-scrollbar-thumb{
  background-color:var(--w-btn-face);
  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;
  border-radius:0;
}
::-webkit-scrollbar-thumb:vertical{ min-height:18px; }
::-webkit-scrollbar-thumb:horizontal{ min-width:18px; }

/* Turn every button off, then switch on only the four real ones. Left to
   itself WebKit renders a second pair at the far end of each bar, which
   Windows never did. */
/* WebKit will happily render a decrement AND an increment button at BOTH
   ends of the track (four arrows per bar). Windows 3.1 had exactly one:
   up at the top, down at the bottom. The :start / :end qualifiers pin each
   arrow to the correct end, and :single-button rejects the paired variant. */
::-webkit-scrollbar-button{ display:none; }
::-webkit-scrollbar-button:vertical:decrement:start,
::-webkit-scrollbar-button:vertical:increment:end,
::-webkit-scrollbar-button:horizontal:decrement:start,
::-webkit-scrollbar-button:horizontal:increment:end{
  display:block;
  width:16px; height:16px;
  background-color:var(--w-btn-face);
  background-repeat:no-repeat;
  background-position:center center;
  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;
}
/* solid black triangles, 7px base x 4px rise — as drawn by USER.EXE */
::-webkit-scrollbar-button:vertical:decrement:start{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3.5 0 7 4H0z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:increment:end{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3.5 4 0 0h7z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:decrement:start{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 3.5 4 0v7z' fill='%23000'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:increment:end{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M4 3.5 0 7V0z' fill='%23000'/%3E%3C/svg%3E");
}
/* pressed: the bevel inverts and the glyph shifts down-right by a pixel */
::-webkit-scrollbar-button:vertical:decrement:start:active,
::-webkit-scrollbar-button:vertical:increment:end:active,
::-webkit-scrollbar-button:horizontal:decrement:start:active,
::-webkit-scrollbar-button:horizontal:increment:end:active{
  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;
  background-position:calc(50% + 1px) calc(50% + 1px);
}

::-webkit-scrollbar-corner{ background:var(--w-btn-face); }

/* Firefox has no per-part scrollbar styling, so it gets a flat grey
   fallback. This MUST stay behind the @supports guard: in Chrome, setting
   the standard `scrollbar-color` property disables ::-webkit-scrollbar
   styling completely, which silently throws away everything above —
   arrows, thumb bevel and all. */
@supports not selector(::-webkit-scrollbar){
  *{ scrollbar-color:var(--w-btn-face) var(--w-scrollbar); }
}

/* ---- dialogs (modal-ish) ---- */
.w311-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.0); z-index:5000;
}
.w311-dialog{
  position:absolute; z-index:5001; background:var(--w-btn-face);
  /* A dialog used WS_DLGFRAME: SM_CXDLGFRAME = 3, so a 1px black outline
     plus a 3px raised band, same visual weight as a window's sizing frame
     but without the grab area, since a dialog could not be resized. */
  border:1px solid var(--w-frame);
  padding:3px;
  /* flat on the desktop, like every other 3.1 window */
  box-shadow:inset 1px 1px 0 var(--w-btn-hilight), inset -1px -1px 0 var(--w-btn-shadow);
  min-width:260px;
}
.w311-dialog .w311-titlebar{ cursor:default; }
.w311-dialog .content{ padding:12px; }
/* A 3.1 message box centred its buttons along the bottom. Right-aligning
   them is the Windows 95 convention. (Dialogs that stack OK/Cancel/Help
   down the right-hand side, like the Workgroups logon or File Open, use
   .cdlg-btns instead — that column layout is already correct.) */
.w311-dialog .buttons{ display:flex; gap:8px; justify-content:center; padding:0 12px 12px; }
.w311-dialog .buttons button{ min-width:72px; }

/* generic pixel icon block used before real svg icon loads */
.pixel-icon{ image-rendering:pixelated; }

/* A dialog is always the active window, so its caption bar is always the
   active colour. The window rule is scoped to .w311-window.active, which a
   bare .w311-dialog never matches. */
.w311-dialog > .w311-titlebar{
  background:var(--w-active-title);
  color:var(--w-active-text);
}