/* WinOops controls: buttons, inputs, tabs, menus, progress */
.btn {
  min-width: 75px; height: 23px; padding: 0 10px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff 0%, #f1ecd7 80%, #dad3b4 100%);
  box-shadow: none; position: relative;
}
.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--amber); }
.btn:active:not(:disabled) { background: var(--cream-300); box-shadow: inset 1px 1px 0 var(--line); }
.btn.default { box-shadow: inset 0 0 0 2px var(--cobalt-300); }
.btn.default:hover { box-shadow: inset 0 0 0 2px var(--amber); }
.btn:disabled { color: var(--text-disabled); border-color: var(--cream-300); background: var(--cream-100); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.input, .select, .textarea {
  border: 1px solid var(--cobalt-800); background: var(--field); padding: 2px 3px; height: 21px; outline: none;
  -webkit-user-select: text; user-select: text;
}
.textarea { height: auto; }
.select { appearance: none; padding-right: 18px; background:
  linear-gradient(#dbe5fc, #aebfe8) right 1px center / 15px 17px no-repeat, #fff; }
.chk { vertical-align: middle; margin: 0 4px 0 0; accent-color: #21a121; }

.group { border: 1px solid var(--cream-300); border-radius: 3px; padding: 8px 10px 8px; margin: 8px 0 6px; position: relative; }
.group > .legend { position: absolute; top: -8px; left: 8px; background: var(--surface); padding: 0 3px; color: var(--cobalt-700); }

.tabs { display: flex; flex-wrap: wrap; padding-left: 2px; position: relative; z-index: 1; }
.tab { padding: 3px 8px 2px; border: 1px solid var(--line); border-bottom: none; border-radius: 3px 3px 0 0;
  background: var(--cream-200); margin-right: -1px; margin-top: 2px; position: relative; }
.tab.active { background: var(--cream-50); margin-top: 0; padding-top: 5px; margin-bottom: -1px; border-top: 2px solid var(--amber); z-index: 2; }
.tabpage { border: 1px solid var(--line); background: var(--cream-50); padding: 10px; position: relative; top: -1px; }

.progress { height: 16px; border: 1px solid var(--silver-700); border-radius: 3px; background: #fff; padding: 1px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--green-500) 0 6px, transparent 6px 8px); }

/* menus (classic XP flat white menus) */
.menubar { display: flex; background: var(--surface); padding: 1px 2px; border-bottom: 1px solid #fff; flex: none; }
.menubar > .mb { padding: 2px 6px; }
.menubar > .mb.open, .menubar > .mb:hover { background: var(--select); color: var(--select-text); }
.menu {
  position: fixed; z-index: 99990; background: var(--cream-50); border: 1px solid var(--line); padding: 2px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .35); min-width: 150px;
}
.menu .mi { display: flex; align-items: center; padding: 3px 24px 3px 26px; white-space: nowrap; position: relative; }
.menu .mi:hover:not(.dis), .menu .mi.hot { background: var(--select); color: var(--select-text); }
.menu .mi.dis { color: var(--text-disabled); }
.menu .mi .k { margin-left: auto; padding-left: 28px; }
.menu .mi.sub::after { content: "\25B6"; position: absolute; right: 6px; font-size: 8px; }
.menu .mi.chk::before { content: "\2022"; position: absolute; left: 10px; }
.menu .mi.bold { font-weight: bold; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 2px; }
.menu .mi .ico { position: absolute; left: 4px; }

.tabview { display: flex; flex-direction: column; min-height: 0; }
button.tab { font: inherit; color: inherit; }
button.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; z-index: 3; }
.tabpage:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }