@font-face { font-family: "Dial System"; font-weight: 400; src: url(/fonts/system.woff2) format("woff2"); }
@font-face { font-family: "Dial System"; font-weight: 700; src: url(/fonts/system-bold.woff2) format("woff2"); }
@font-face { font-family: "Dial Sans"; font-weight: 400; src: url(/fonts/sans.woff2) format("woff2"); }
@font-face { font-family: "Dial Sans"; font-weight: 700; src: url(/fonts/sans-bold.woff2) format("woff2"); }
@font-face { font-family: "Dial Serif"; font-weight: 400; src: url(/fonts/serif.woff2) format("woff2"); }
@font-face { font-family: "Dial Serif"; font-weight: 700; src: url(/fonts/serif-bold.woff2) format("woff2"); }
@font-face { font-family: "Dial Mono"; font-weight: 400; src: url(/fonts/mono.woff2) format("woff2"); }
@font-face { font-family: "Dial Mono"; font-weight: 700; src: url(/fonts/mono-bold.woff2) format("woff2"); }
html, body { height: 100%; margin: 0; overflow: hidden; }
button, input, textarea, select, label, legend, .window, .title-bar-text { font-family: "Dial System", sans-serif; }
body { background: #008080; font-family: "Dial System", sans-serif; font-size: 11px; user-select: none; -webkit-font-smoothing: none; }
[hidden] { display: none !important; }
img { image-rendering: pixelated; }

/* ------------------------------------------------------------ the screen
   Everything on it, the desktop and the taskbar included, is a window the
   kernel describes; with no shell running it is just this teal. */
#desktop { position: absolute; inset: 0; overflow: hidden; }

/* ------------------------------------------------------------ frames */
.window.frame { position: absolute; display: flex; flex-direction: column; box-sizing: border-box; min-width: 120px; }
.window.frame.resizable { resize: both; overflow: hidden; }
.window.frame.maximized { resize: none; }
.window.frame.inactive .title-bar { background: linear-gradient(90deg, #808080, #b5b5b5); }
.window.frame .title-bar { flex: none; cursor: default; }
.window.frame.tool .title-bar { height: 14px; }
.window.frame.popup-only .title-bar { display: none; }
.window.frame.bare { padding: 0; box-shadow: none; background: none; min-width: 0; }
.window.frame.bare.thin { border: 1px solid #000; }
.window.frame.bare .client { margin: 0 !important; }
.title-bar-text { display: flex; align-items: center; gap: 3px; overflow: hidden; white-space: nowrap; }
.title-bar-text span { overflow: hidden; text-overflow: ellipsis; }
.ticon { width: 16px; height: 16px; flex: none; }
.window.frame .client { position: relative; flex: 1; overflow: hidden; margin: 0; }
.window.frame:not(.console-frame):not(.msgbox) .client { margin-top: 2px; }
.surface { position: absolute; left: 0; top: 0; outline: none; display: block; }
.childwin { position: absolute; box-sizing: border-box; overflow: hidden; }
.childwin.sunken { box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 2px; }
.childwin.sunken .surface { left: 2px; top: 2px; }
.childwin.bordered { border: 1px solid #000; }
.blocker { position: absolute; inset: 0; z-index: 50; }

/* ------------------------------------------------------------ menus */
.menubar { display: flex; flex: none; height: 18px; padding: 1px 0 0 0; }
.menubar .mtop { padding: 2px 6px; line-height: 13px; cursor: default; }
.menubar .mtop.open { box-shadow: inset 1px 1px #808080, inset -1px -1px #fff; padding: 3px 5px 1px 7px; }
.menubar .mtop.grayed { color: #808080; }
.menu-popup { position: fixed; padding: 2px; min-width: 0; }
.menu-popup .mitem { display: flex; align-items: center; height: 17px; padding: 0 2px 0 0; cursor: default; white-space: nowrap; }
.menu-popup .mitem.hot { background: #000080; color: #fff; }
.menu-popup .mitem.grayed { color: #808080; text-shadow: 1px 1px #fff; }
.menu-popup .mitem.grayed.hot { text-shadow: none; }
.menu-popup .micon { width: 16px; height: 16px; margin: 0 2px 0 3px; }
.menu-popup .mcheck { width: 17px; flex: none; height: 9px; }
.menu-popup .micon + .mcheck { width: 6px; }
.menu-popup .mitem.checked .mcheck { background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1V0z' fill='%23000'/%3E%3C/svg%3E") no-repeat 5px 1px; }
.menu-popup .mlabel { flex: 1; padding-right: 8px; }
.menu-popup .maccel { padding: 0 6px 0 14px; }
.menu-popup .marrow { width: 14px; font-size: 8px; text-align: right; padding-right: 4px; }
.menu-popup .msep { height: 0; margin: 3px 1px; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }

/* ------------------------------------------------------------ controls */
.control { position: absolute; box-sizing: border-box; margin: 0; }
button.control { min-width: 0; min-height: 0; padding: 0 4px; }
button.control.default, button.default { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf, 0 0 0 1px #000; }
.control.check { display: flex; align-items: center; }
fieldset.groupbox { padding: 0; pointer-events: none; }
fieldset.groupbox legend { pointer-events: none; }
input.control, textarea.control { font-family: "Dial System", sans-serif; font-size: 11px; height: auto; }
input.control { line-height: 14px; padding: 3px 4px; }
textarea.control.multiline { resize: none; font: 12px/14px "Dial Mono", monospace; padding: 2px 4px; white-space: pre-wrap; overflow: auto; }
textarea.control.multiline[wrap=off] { white-space: pre; }
.static { overflow: hidden; white-space: pre-wrap; line-height: 13px; }
.static.sunken-field { box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080; padding: 3px 4px; white-space: nowrap; text-overflow: ellipsis; }
.static.etched { border-top: 1px solid #808080; border-bottom: 1px solid #fff; height: 2px !important; }
.listbox { background: #fff; overflow-y: auto; overflow-x: hidden; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; padding: 2px; outline: none; }
.listbox .item { padding: 0 2px; line-height: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.listbox .item.sel { background: #000080; color: #fff; }
.listbox:not(:focus) .item.sel { background: #c0c0c0; color: #000; }
.control.disabled, .control:disabled { color: #808080; text-shadow: 1px 1px #fff; }

/* ------------------------------------------------------------ message boxes */
.msgbox { min-width: 180px; max-width: 480px; }
.msgbox .client { padding: 12px 12px 10px; }
.mb-body { display: flex; gap: 14px; align-items: flex-start; }
.mb-icon { width: 32px; height: 32px; flex: none; }
.mb-text { white-space: pre-wrap; line-height: 13px; padding-top: 2px; user-select: text; max-width: 400px; }
.mb-text:only-child { padding-left: 4px; }
.mb-buttons { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.mb-buttons button { min-width: 75px; }

.dlg-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.dlg-buttons button { min-width: 75px; }

/* ------------------------------------------------------------ consoles */
.console-frame .client { padding: 2px; }
.console { background: #000; color: #c0c0c0; font: 13px/15px "Dial Mono", monospace; padding: 2px 4px; margin: 0; overflow: hidden; white-space: pre; outline: none; box-sizing: border-box; }
.console .cursor { background: #c0c0c0; color: #000; }
.console.unfocused .cursor { background: transparent; color: #c0c0c0; outline: 1px solid #808080; }

/* ------------------------------------------------------------ boot and shutdown */
#boot { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100000; font-family: "Dial Sans", sans-serif; cursor: default; }
.boot-logo { font: bold 72px "Dial Sans", sans-serif; letter-spacing: -2px; }
.boot-logo span { color: #f5a623; }
.boot-sub { font-size: 18px; margin-top: 8px; color: #c0c0c0; font-style: italic; }
.boot-bar { margin-top: 44px; width: 240px; height: 10px; background: #000; border: 1px solid #333; overflow: hidden; }
.boot-bar div { width: 60px; height: 100%; background: linear-gradient(90deg, #000080, #1084d0, #000080); animation: slide 1.4s linear infinite; }
#boot.ready .boot-bar { visibility: hidden; }
#boot.ready #boot-status { color: #fff; animation: blink 1.2s step-end infinite; }
@keyframes slide { from { transform: translateX(-60px); } to { transform: translateX(240px); } }
@keyframes blink { 50% { opacity: 0.35; } }
#boot-status { margin-top: 18px; font: 14px "Dial Mono", monospace; color: #c0c0c0; }
#off { position: absolute; inset: 0; background: #000; color: #ffa500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; z-index: 100001; font: bold 28px/36px "Dial Mono", monospace; text-align: center; }
#off button { font: 11px "Dial System", sans-serif; }

.menu-popup .mitem.checked.hot .mcheck { filter: invert(1); }
input.control[readonly] { color: #222; }
input.control[readonly]:not(.edge) { background: #c0c0c0; }

/* ------------------------------------------------------------ standard scroll bars (WS_VSCROLL, WS_HSCROLL) */
.sbar { position: absolute; display: flex; z-index: 5; background-color: #dfdfdf; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E"); user-select: none; }
.sbar.v { flex-direction: column; }
.sbar > button { min-width: 0; min-height: 0; width: 16px; height: 16px; padding: 0; flex: none; background-repeat: no-repeat; background-position: center; }
.sbar.v .sbar-dec { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z' fill='%23000'/%3E%3C/svg%3E"); }
.sbar.v .sbar-inc { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='7' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z' fill='%23000'/%3E%3C/svg%3E"); }
.sbar.h .sbar-dec { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z' fill='%23000'/%3E%3C/svg%3E"); }
.sbar.h .sbar-inc { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='4' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z' fill='%23000'/%3E%3C/svg%3E"); }
.sbar.disabled > button { filter: opacity(0.45); }
.sbar-track { position: relative; flex: 1; }
.sbar-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
.sbar-corner { position: absolute; width: 16px; height: 16px; background: #c0c0c0; z-index: 5; }