/* -----------------------------------------------------------------------------
   The desk computer (step 3b): an unbranded late-90s desktop drawn in plain CSS.
   Grey bevels, blue title bars, own pixel icons. Coordinates are the CRT's 1024×768.
   -------------------------------------------------------------------------- */
#desk{background-color:#008080;background-size:100% 100%;image-rendering:pixelated}
#desk .icons{z-index:1}
/* a fixed cell per icon, like the old shell: every row starts at the same height in every column */
#desk .icons{display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,86px);grid-auto-columns:92px;gap:2px;align-content:start}
#desk .icon{height:86px;justify-content:flex-start;overflow:hidden}
#desk .icon span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.05}
#desk .icon.sel span,#desk .icon:focus span{-webkit-line-clamp:unset;position:relative;z-index:2}
#desk .icon.sel,#desk .icon:focus{overflow:visible;z-index:3}
#crtwrap.phone #desk .icons{grid-auto-flow:row;grid-template-rows:none;grid-auto-rows:86px;grid-template-columns:repeat(auto-fill,84px);grid-auto-columns:auto}
#desk .icon{background:none;font:inherit;color:#fff}

/* windows */
.win.app{min-width:300px}
.win.min{display:none}
.win.max{left:0!important;top:0!important;width:100%!important;height:calc(100% - 38px)!important}
.win .menubar{display:flex;gap:2px;padding:2px 2px 3px;font-size:14px}
.win .menubar button{padding:1px 7px}
.win .menubar button:hover,.win .menubar button:focus-visible{background:#000080;color:#fff;outline:none}
.win .toolbar{display:flex;gap:4px;align-items:center;padding:3px 2px 5px;border-top:1px solid #fff;box-shadow:0 -1px #808080;flex-wrap:wrap}
.win .toolbar .btn98{min-height:24px;padding:1px 8px;font-size:14px}
.win .toolbar .btn98:disabled{color:#808080;text-shadow:1px 1px #fff;cursor:default}
.win .toolbar .sep{width:2px;align-self:stretch;margin:0 3px;box-shadow:inset 1px 0 #808080,inset -1px 0 #fff}
.win .addr{display:flex;align-items:center;gap:6px;padding:0 2px 5px;font-size:14px}
.win .addr .field{flex:1;background:#fff;padding:2px 6px;min-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a,inset -2px -2px #dfdfdf;font-family:var(--pixel)}
.sunken{background:#fff;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a,inset -2px -2px #dfdfdf}
.win .content{flex:1;min-height:0;display:flex;gap:3px}
.win .pane{overflow:auto;min-height:0}
.win .status{display:flex;gap:3px;margin-top:3px;font-size:13px}
.win .status span{flex:1;padding:1px 6px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .status span:last-child{flex:0 0 auto;min-width:120px}

/* explorer */
.xp .tree{width:200px;flex:none;padding:4px 2px;font-size:14px}
.xp .tree ul{list-style:none;margin:0;padding-left:14px}
.xp .tree>ul{padding-left:2px}
.xp .tree button{display:flex;align-items:center;gap:4px;padding:1px 3px;white-space:nowrap;text-align:left}
.xp .tree button img{width:16px;height:16px;image-rendering:pixelated}
.xp .tree button.cur{background:#000080;color:#fff}
.xp .tree .tw{display:inline-block;width:11px;font-family:var(--mono);font-size:11px;color:#404040}
.xp .main{flex:1;padding:6px}
.xp .grid{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 4px}
.xp .item{width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px;text-align:center;font-size:13px;line-height:1.15;
  color:#000;border:1px dotted transparent}
.xp .item img{width:32px;height:32px;image-rendering:pixelated}
.xp .item .fname{word-break:normal;overflow-wrap:normal;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.xp .item.sel .fname,.xp .item:focus .fname{-webkit-line-clamp:unset;display:block}
.xp .item.sel span{background:#000080;color:#fff}
.xp .item:focus{outline:none;border-color:#000}
.xp .empty{padding:20px;color:#404040;font-size:14px}
table.det{border-collapse:collapse;width:100%;font-size:13px}
table.det th{position:sticky;top:0;background:#c0c0c0;font-weight:400;text-align:left;padding:0;white-space:nowrap}
table.det th button{width:100%;text-align:left;padding:2px 6px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080}
table.det th button[aria-sort]::after{content:" ▲";font-size:9px}
table.det th button[aria-sort=descending]::after{content:" ▼"}
table.det td{padding:1px 6px;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
table.det tr.row{cursor:default}
table.det tr.row td:first-child{display:flex;align-items:center;gap:5px}
table.det tr.row img{width:16px;height:16px;image-rendering:pixelated}
table.det tr.row.sel td{background:#000080;color:#fff}
table.det tr.row:focus{outline:1px dotted #000;outline-offset:-1px}

/* documents, notepad, wordpad, spreadsheet */
.paperwin{background:#fff;color:#000;padding:18px 22px;font:15px/1.5 "Source Serif 4",Georgia,serif;user-select:text;-webkit-user-select:text}
.paperwin h2{font:600 19px/1.3 "Source Serif 4",Georgia,serif;margin:0 0 8px}
.paperwin .lab{font:12px var(--mono);color:#555;text-transform:uppercase;letter-spacing:.06em;margin-top:10px}
.paperwin .tr{color:#555;font-style:italic}
.paperwin a{color:#00e;overflow-wrap:anywhere}
.paperwin .tags{display:flex;gap:6px;margin-top:10px}
.paperwin .tags span{font:12px var(--mono);border:1px solid #000080;color:#000080;padding:0 5px}
.paperwin .ph{color:#9b5b00}
.notepad{background:#fff;color:#000;padding:6px 8px;font:15px/1.35 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;margin:0}
.wordpad .ruler{height:18px;margin:0 2px 3px;background:repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 12px) bottom/100% 4px no-repeat,#fff;
  box-shadow:inset 1px 1px #808080}
.wordpad .page{background:#808080;padding:12px;flex:1;overflow:auto}
.wordpad .sheet{background:#fff;max-width:640px;margin:0 auto;padding:30px 36px;color:#000;font:14px/1.5 "Source Serif 4",Georgia,serif;user-select:text;-webkit-user-select:text}
.wordpad .sheet h1{font:600 22px "Source Serif 4",Georgia,serif;margin:0}
.wordpad .sheet h3{font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:16px 0 4px;border-bottom:1px solid #999}
.wordpad .sheet p{margin:0 0 6px}
.xls{border-collapse:collapse;font:13px var(--mono);background:#fff;color:#000}
.xls th{background:#c0c0c0;font-weight:400;padding:1px 6px;box-shadow:inset -1px -1px #808080,inset 1px 1px #fff;text-align:center}
.xls td{border:1px solid #c6c6c6;padding:1px 6px;white-space:nowrap}
.xls tr:nth-child(2) td{font-weight:600}
.xls .cellref{display:flex;gap:4px;align-items:center;padding:0 2px 4px;font-size:13px}
.xls .cellref .field{background:#fff;padding:1px 6px;min-width:60px;box-shadow:inset 1px 1px #808080}

/* mail + address book + browser + CD + progress */
.mail .hdr{display:grid;grid-template-columns:70px 1fr;gap:4px 6px;align-items:center;font-size:14px;padding:4px 2px 6px}
.mail input,.mail textarea,.find input{font:14px var(--mono);border:0;padding:3px 6px;width:100%;background:#fff;color:#000;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff,inset 2px 2px #0a0a0a,inset -2px -2px #dfdfdf}
.mail input[readonly]{background:#e8e8e8}
.mail textarea{flex:1;resize:none;min-height:180px}
.vcard{display:grid;grid-template-columns:96px 1fr;gap:4px 10px;font-size:14px;line-height:1.35}
.vcard dt{color:#404040}
.vcard dd{margin:0;user-select:text;-webkit-user-select:text}
.browser .page{flex:1;overflow:auto;background:#fff;color:#000;padding:22px 28px;font:15px/1.5 "Source Serif 4",Georgia,serif}
.browser .page h1{font:600 22px "Source Serif 4",Georgia,serif;margin:0 0 4px}
.browser .page ul{padding-left:20px}
.browser .page a{color:#00e}
.browser .page .off{color:#777}
.dropdown{position:absolute;z-index:5000;background:#c0c0c0;padding:2px;min-width:200px;font-size:14px;
  box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff,2px 2px 0 rgba(0,0,0,.35)}
.dropdown button,.dropdown a{display:flex;align-items:center;gap:8px;width:100%;padding:3px 18px 3px 8px;text-align:left;color:#000;text-decoration:none;white-space:nowrap}
.dropdown button:hover,.dropdown button:focus,.dropdown a:hover,.dropdown a:focus{background:#000080;color:#fff;outline:none}
.dropdown button:disabled{color:#808080;background:none}
.dropdown img{width:16px;height:16px;image-rendering:pixelated}
.dropdown hr{border:0;border-top:1px solid #808080;border-bottom:1px solid #fff;margin:3px 2px}
.dropdown .sub::after{content:"▸";margin-left:auto;padding-left:14px}
.cd .lcd{background:#0b1a0b;color:#5cff6a;font:20px var(--bios);padding:6px 10px;margin-bottom:6px;box-shadow:inset 1px 1px #000}
.cd ol{margin:0;padding:0;list-style:none;font-size:14px}
.cd li{display:flex;gap:8px;align-items:center;padding:2px 4px}
.cd li a{color:#00e}
.cd li .off{color:#606060}
.progress{height:20px;margin:10px 0 4px;padding:2px;display:flex;gap:2px;overflow:hidden;
  box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.progress i{width:12px;flex:none;background:#000080}
.win .body .msg{white-space:pre-line}

/* start menu */
#startmenu{left:2px;bottom:38px;min-width:0;display:flex;padding:3px}
#startmenu .band{width:22px;background:linear-gradient(0deg,#000080,#1084d0)}
#startmenu .items{display:flex;flex-direction:column;min-width:200px}
#startmenu .items button{padding:6px 18px 6px 6px;font-size:15px}
#startmenu .items img{width:26px;height:26px}
.ctx{min-width:170px}

/* properties / display dialog */
.tabs98{display:flex;gap:0;margin-bottom:-2px;position:relative;z-index:1}
.tabs98 button{padding:3px 12px;background:#c0c0c0;box-shadow:inset 1px 1px #fff,inset -1px 0 #0a0a0a,inset -2px 0 #808080;margin-top:3px}
.tabs98 button[aria-selected=true]{margin-top:0;padding-bottom:5px}
.tabpanel{padding:10px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080}
.monitorprev{width:180px;height:150px;margin:0 auto 10px;padding:12px 12px 26px;border-radius:6px 6px 2px 2px;background:#c8c2b0;
  box-shadow:inset -2px -2px #807a68,inset 2px 2px #ece6d4}
.monitorprev div{width:100%;height:100%;background:#008080 center/100% 100% no-repeat;image-rendering:pixelated;box-shadow:inset 1px 1px #000}
.listbox{height:110px;overflow:auto;font-size:14px}
.listbox button{display:block;width:100%;text-align:left;padding:1px 6px}
.listbox button[aria-selected=true]{background:#000080;color:#fff}
.props{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;font-size:14px;align-items:start}
.props dd{margin:0;overflow-wrap:anywhere}
.props hr{grid-column:1/-1;width:100%;border:0;border-top:1px solid #808080;border-bottom:1px solid #fff}

/* badge card inside a window */
.badgewin .body{display:grid;place-items:center;background:#808080}
.badgewin .cardbig{--cw:250px;animation:none}
.badgewin .cardbig .hint2{color:#fff;bottom:-28px;font:13px var(--pixel)}
.badgewin .cardbig .back{font-size:12.5px}

/* screensaver + shut down */
#saver{position:absolute;inset:0;z-index:800;background:#000;display:none;cursor:none}
#saver.show{display:block}
#saver canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
#shutdown{position:absolute;inset:0;z-index:950;background:#000;color:#ff9a1a;display:none;place-items:center;font:34px var(--bios);text-align:center}
#shutdown.show{display:grid}

/* phone: one window at a time, full screen */
#crtwrap.phone .win.app{left:0!important;right:0;top:0!important;width:100%!important;height:calc(100% - 38px)!important;max-height:none}
#crtwrap.phone .win.app:not(.topwin){display:none}
#crtwrap.phone .xp .tree{display:none}
#crtwrap.phone .tasks .btn98{width:auto;max-width:130px}
#crtwrap.phone #startmenu{max-height:calc(100% - 44px);overflow:auto}
#crtwrap.phone .win .title .tb.mx{display:none}