/* Everything the computer grew: the three colour schemes, the shared pointer, Solitaire, Display Properties,
   My Pictures, the folders people make, the right-click menu, the screensaver and the reboot.
   Loaded after xp.css, so the rules here win. */

/* ---------------------------------------------------------------- colour schemes (Display Properties > Appearance)
   Blue is what xp.css is written in, so the other two only override the parts that carry the colour. */
#screen[data-luna="olive"] .titlebar {
  background: linear-gradient(180deg, #a8b96a, #7d8f43 8%, #76883c 40%, #839a47 88%, #8aa14c 93%, #7d9340 95%, #5f7129 96%, #5f7129);
  border-color: #5f7129;
}
#screen[data-luna="olive"] .win {
  box-shadow: inset -1px -1px #4c5c1d, inset 1px 1px #7d9340, inset -2px -2px #566824, inset 2px 2px #92a858,
    inset -3px -3px #5f7129, inset 3px 3px #849a48, 2px 3px 8px rgba(0, 0, 0, .35);
}
#screen[data-luna="olive"] .win.inactive {
  box-shadow: inset -1px -1px #8d9a66, inset 1px 1px #b6c48c, inset -2px -2px #9aa773, inset 2px 2px #c6d2a2,
    inset -3px -3px #a7b483, inset 3px 3px #bcc994, 2px 3px 8px rgba(0, 0, 0, .25);
}
#screen[data-luna="olive"] .win.inactive .titlebar {
  background: linear-gradient(180deg, #d3dcb6, #bcc994 8%, #b8c58f 40%, #c3cf9e 88%, #c8d4a4 93%, #bbc892 95%, #a5b377 96%, #a5b377);
  border-color: #b6c48c; color: #f2f5e6;
}
#screen[data-luna="olive"] .tbtn:not([aria-label=Close]) { filter: hue-rotate(-138deg) saturate(.62) brightness(1.04); }
#screen[data-luna="olive"] #taskbar { background: linear-gradient(180deg, #6c7c38 0, #88994f 6%, #93a55a 12%, #7f9146 20%, #798c40 54%, #7d9044 86%, #6a7b35 95%, #55641f 98%); }
#screen[data-luna="olive"] #tray { background: linear-gradient(180deg, #5d6c2c 1%, #8fa353 8%, #9bb05f 14%, #8ea252 63%, #93a858 88%, #6d7c38 100%); border-left-color: #3f4b16; box-shadow: inset 1px 0 1px #c5d496; }
#screen[data-luna="olive"] .task { background: #7f9146; }
#screen[data-luna="olive"] .task:hover { background: #95a95c; }
#screen[data-luna="olive"] .task.on { background: #5c6c28; }
#screen[data-luna="olive"] .sm-top { background: linear-gradient(180deg, #6d7f36 0%, #76893c 33%, #869950 65%, #93a85c 100%); }
#screen[data-luna="olive"] .sm-bottom { background: linear-gradient(180deg, #8ba150 0%, #829647 40%, #6f8338 75%, #5f7129 100%); }
#screen[data-luna="olive"] .sm-cols { border-top-color: #c7b23a; }
#screen[data-luna="olive"] .sm-right { background: #e7ead2; border-left-color: #b9c498; }
#screen[data-luna="olive"] .sm-item:hover,
#screen[data-luna="olive"] .dropdown .di:hover,
#screen[data-luna="olive"] .menubar .mi:hover,
#screen[data-luna="olive"] .menubar .mi.open,
#screen[data-luna="olive"] .lrow.on,
#screen[data-luna="olive"] .pcell.sel,
#screen[data-luna="olive"] .flist .row.sel,
#screen[data-luna="olive"] #ctx .ci:hover { background: #7a8c43; }
#screen[data-luna="olive"] .icon.sel span { background: #6b7d34; }
#screen[data-luna="olive"] .tasks { background: linear-gradient(180deg, #9aad63, #7a8c43); }
#screen[data-luna="olive"] .tasks .box { background: #eef1e0; }
#screen[data-luna="olive"] .tasks .box b { background: linear-gradient(90deg, #fff 0, #dde4c4 100%); color: #44521a; }
#screen[data-luna="olive"] .tasks .box div, #screen[data-luna="olive"] .task-link { color: #44521a; }

#screen[data-luna="silver"] .titlebar {
  background: linear-gradient(180deg, #e9e9f2, #b6b6c8 8%, #a9a9bd 40%, #b9b9cb 88%, #c2c2d2 93%, #adadc1 95%, #8a8a9e 96%, #8a8a9e);
  border-color: #7e7e92;
}
#screen[data-luna="silver"] .titlebar .tt { color: #000; text-shadow: none; }
#screen[data-luna="silver"] .win.inactive .titlebar .tt { color: #8a8a9c; }
#screen[data-luna="silver"] .win {
  box-shadow: inset -1px -1px #6f6f84, inset 1px 1px #c9c9d8, inset -2px -2px #8a8a9e, inset 2px 2px #dcdce7,
    inset -3px -3px #9b9bae, inset 3px 3px #cdcddb, 2px 3px 8px rgba(0, 0, 0, .35);
}
#screen[data-luna="silver"] .win.inactive {
  box-shadow: inset -1px -1px #a3a3b4, inset 1px 1px #e2e2ea, inset -2px -2px #b4b4c4, inset 2px 2px #f0f0f5,
    inset -3px -3px #c0c0ce, inset 3px 3px #e8e8ee, 2px 3px 8px rgba(0, 0, 0, .25);
}
#screen[data-luna="silver"] .win.inactive .titlebar {
  background: linear-gradient(180deg, #f6f6fa, #d8d8e2 8%, #d2d2de 40%, #dcdce6 88%, #e2e2ea 93%, #d4d4e0 95%, #b8b8c8 96%, #b8b8c8);
  border-color: #c9c9d8; color: #f4f4f8;
}
/* Silver's buttons were light grey with dark glyphs (made from the blue ones by silver_buttons.py) */
#screen[data-luna="silver"] .tbtn[aria-label=Minimize] { background-image: url(/img/luna/minimize-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Minimize]:hover { background-image: url(/img/luna/minimize-hover-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Minimize]:not(:disabled):active { background-image: url(/img/luna/minimize-down-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Maximize] { background-image: url(/img/luna/maximize-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Maximize]:hover { background-image: url(/img/luna/maximize-hover-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Maximize]:not(:disabled):active { background-image: url(/img/luna/maximize-down-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Restore] { background-image: url(/img/luna/restore-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Restore]:hover { background-image: url(/img/luna/restore-hover-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Restore]:not(:disabled):active { background-image: url(/img/luna/restore-down-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Help] { background-image: url(/img/luna/help-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Help]:hover { background-image: url(/img/luna/help-hover-silver.png); }
#screen[data-luna="silver"] .tbtn[aria-label=Help]:not(:disabled):active { background-image: url(/img/luna/help-down-silver.png); }
#screen[data-luna="silver"] #taskbar { background: linear-gradient(180deg, #8f8fa4 0, #c3c3d2 6%, #d2d2de 12%, #b7b7c8 20%, #aeaec0 54%, #b4b4c6 86%, #9393a7 95%, #76768a 98%); }
#screen[data-luna="silver"] #tray { background: linear-gradient(180deg, #85859a 1%, #c8c8d6 8%, #d6d6e1 14%, #c0c0d0 63%, #c6c6d4 88%, #9090a4 100%); border-left-color: #5f5f73; box-shadow: inset 1px 0 1px #fff; }
#screen[data-luna="silver"] .task { background: #a6a6ba; }
#screen[data-luna="silver"] .task:hover { background: #bcbccc; }
#screen[data-luna="silver"] .task.on { background: #83839a; }
#screen[data-luna="silver"] .sm-top { background: linear-gradient(180deg, #8c8ca2 0%, #9a9ab0 40%, #adadc0 100%); }
#screen[data-luna="silver"] .sm-bottom { background: linear-gradient(180deg, #bcbccc 0%, #a6a6ba 50%, #8c8ca2 100%); }
#screen[data-luna="silver"] .sm-cols { border-top-color: #8f8fa4; }
#screen[data-luna="silver"] .sm-right { background: #e9e9f0; border-left-color: #c2c2d2; }
#screen[data-luna="silver"] .sm-item:hover,
#screen[data-luna="silver"] .dropdown .di:hover,
#screen[data-luna="silver"] .menubar .mi:hover,
#screen[data-luna="silver"] .menubar .mi.open,
#screen[data-luna="silver"] .lrow.on,
#screen[data-luna="silver"] .pcell.sel,
#screen[data-luna="silver"] .flist .row.sel,
#screen[data-luna="silver"] #ctx .ci:hover { background: #7e7e92; }
#screen[data-luna="silver"] .icon.sel span { background: #7e7e92; }
#screen[data-luna="silver"] .tasks { background: linear-gradient(180deg, #c6c6d4, #a2a2b6); }
#screen[data-luna="silver"] .tasks .box { background: #eeeef4; }
#screen[data-luna="silver"] .tasks .box b { background: linear-gradient(90deg, #fff 0, #dcdce7 100%); color: #4a4a5c; }
#screen[data-luna="silver"] .tasks .box div, #screen[data-luna="silver"] .task-link { color: #4a4a5c; }

/* The pointer scheme is shared too: someone picking the hourglass gives everyone the hourglass. */
#screen[data-cur="busy"], #screen[data-cur="busy"] * { cursor: wait !important; }
#screen[data-cur="hand"], #screen[data-cur="hand"] * { cursor: pointer !important; }
#screen[data-cur="cross"], #screen[data-cur="cross"] * { cursor: crosshair !important; }

/* A picture someone saved in Paint, used as the wallpaper. */
#wallpic {
  position: absolute; left: 0; top: 0; width: 512px; height: 482px; display: none; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* ---------------------------------------------------------------- other people's pointers */
.cur { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.cur .ptr { display: block; opacity: .95; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .35)); }
.cur .tag {
  position: absolute; left: 11px; top: 15px; max-width: 86px; padding: 1px 3px; color: #fff; font: 9px/1.25 var(--ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .3); transition: opacity .15s;
}
.cur.quiet .tag { opacity: 0; }   /* a crowd: only the pointers near yours show their names */
@media (prefers-reduced-motion: reduce) { .cur .tag { transition: none; } }

/* ---------------------------------------------------------------- renaming a folder, in place */
.icon .rename {
  width: 62px; margin: 0; padding: 0 1px; border: 1px solid #000; background: #fff; color: #000;
  font: 11px/13px var(--ui); text-align: center; outline: none;
}

/* ---------------------------------------------------------------- right-click menu */
#ctx {
  position: absolute; min-width: 126px; padding: 2px; background: #fff; border: 1px solid #aca899; display: none;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .3); z-index: 965000;
}
#ctx.open { display: block; }
#ctx .ci { padding: 3px 20px 3px 18px; white-space: nowrap; }
#ctx .ci:hover { background: var(--sel); color: #fff; }
#ctx .ci.bold { font-weight: 700; }
#ctx .ci.dim, #ctx .ci.dim:hover { color: #aca899; background: none; }
#ctx hr { border: 0; border-top: 1px solid #aca899; margin: 3px 1px; }

/* ---------------------------------------------------------------- Solitaire */
.sol { flex: 1; position: relative; margin: 3px; background: #008000; border: 1px solid; border-color: #005000 #2aa14e #2aa14e #005000; overflow: hidden; }
.sol-table { position: absolute; inset: 0; touch-action: none; }
.sol-bounce { position: absolute; left: 0; top: 0; width: 328px; height: 266px; pointer-events: none; display: none; }
.sol-bounce.on { display: block; }
.card {
  position: absolute; left: 0; top: 0; width: 38px; height: 51px; background: #fff no-repeat 0 0 / 100% 100%;
}
.card.back { background-image: url(/img/cards/back.png); }
.card.dragging { z-index: 60; filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, .4)); }
.slot {
  position: absolute; left: 0; top: 0; width: 38px; height: 51px; border: 1px solid #004000; border-radius: 2px;
  box-shadow: inset 1px 1px rgba(255, 255, 255, .12);
}
.slot.recycle { border: 0; box-shadow: none; background: url(/img/cards/redeal.png) no-repeat 0 0 / 100% 100%; }
.slot::after { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(0, 0, 0, .28); font-size: 17px; }
.slot.f0::after { content: "\2663"; }
.slot.f1::after { content: "\2666"; }
.slot.f2::after { content: "\2665"; }
.slot.f3::after { content: "\2660"; }

/* ---------------------------------------------------------------- Display Properties */
.disp { flex: 1; display: flex; flex-direction: column; padding: 4px 5px 5px; min-height: 0; }
.tabs { display: flex; gap: 2px; padding-left: 2px; }
.tab {
  padding: 2px 7px 3px; border: 1px solid var(--shadow); border-bottom: 0; border-radius: 3px 3px 0 0;
  background: #e3e0d2; color: #000; position: relative; top: 1px;
}
.tab.on { background: var(--face); padding-bottom: 4px; top: 0; z-index: 2; }
.panel { flex: 1; min-height: 0; border: 1px solid var(--shadow); background: var(--face); padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.mon {
  width: 120px; height: 92px; margin: 0 auto; flex: none; background: #d8d4c8; border-radius: 8px 8px 3px 3px;
  border: 1px solid #8e8a7c; box-shadow: inset 0 0 0 1px #fff, 0 2px 3px rgba(0, 0, 0, .25); padding: 7px 7px 12px;
  position: relative;
}
.mon::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 46px; height: 5px; background: #c6c2b4;
  border: 1px solid #8e8a7c; border-top: 0; transform: translateX(-50%); border-radius: 0 0 3px 3px;
}
.mon-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #004e98; border: 1px solid #5a5648; }
.mon-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
canvas.mon-wall { image-rendering: pixelated; }
.mon-win { position: absolute; left: 14px; top: 24px; width: 68px; height: 36px; background: #ece9d8; border: 1px solid #0831d9; }
.mon-bar { height: 9px; background: linear-gradient(180deg, #0997ff, #0050ee 60%, #06f); }
.mon[data-luna="olive"] .mon-win { border-color: #5f7129; }
.mon[data-luna="olive"] .mon-bar { background: linear-gradient(180deg, #a8b96a, #76883c 60%, #839a47); }
.mon[data-luna="silver"] .mon-win { border-color: #7e7e92; }
.mon[data-luna="silver"] .mon-bar { background: linear-gradient(180deg, #e9e9f2, #a9a9bd 60%, #b9b9cb); }
.mon-ptr { position: absolute; left: 54px; top: 56px; }
.mon-ptr svg { display: block; transform: scale(.7); transform-origin: 0 0; }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.lhead { font-weight: 700; }
.lbox {
  flex: 1; min-height: 44px; overflow: auto; background: #fff; border: 1px solid;
  border-color: var(--shadow) #fff #fff var(--shadow); box-shadow: inset 1px 1px #716f64; padding: 1px;
}
.lrow { display: flex; align-items: center; gap: 5px; padding: 2px 4px; white-space: nowrap; }
.lrow:hover { background: #e6edfb; }
.lrow.on { background: var(--sel); color: #fff; }
.lrow .chip { width: 24px; height: 11px; border: 1px solid #555; flex: none; }
.lrow .chip[data-luna="blue"] { background: linear-gradient(180deg, #0997ff, #0050ee); }
.lrow .chip[data-luna="olive"] { background: linear-gradient(180deg, #a8b96a, #76883c); }
.lrow .chip[data-luna="silver"] { background: linear-gradient(180deg, #e9e9f2, #a9a9bd); }
.lrow .pchip { width: 16px; display: grid; place-items: center; flex: none; }
.lrow .pchip svg { display: block; max-width: 16px; max-height: 16px; }
.lrow img { width: 16px; height: 16px; flex: none; }
.lrow .blank { width: 16px; height: 16px; flex: none; }
.hint { color: #555; line-height: 1.35; }
.xpbtn.wide { width: 100%; }
.disp .dbtns { display: flex; justify-content: flex-end; padding-top: 6px; }

/* ---------------------------------------------------------------- My Pictures, folders, the Recycle Bin */
.tasks .box + .box { margin-top: 7px; }
.task-link { padding: 3px 6px; color: #215dc6; text-decoration: underline; line-height: 1.35; }
.task-link:hover { color: #0b3ea8; }
.task-link.dim, .task-link.dim:hover { color: #7c89a3; text-decoration: none; }
.grid { flex: 1; padding: 7px; overflow: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; background: #fff; }
.grid .empty { color: #666; margin: 30px auto; text-align: center; }
.pcell { width: 86px; padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pcell.sel { background: var(--sel); color: #fff; }
.pthumb { width: 82px; height: 52px; background: #fff; border: 1px solid #7f9db9; display: grid; place-items: center; }
.pthumb canvas { width: 80px; height: 50px; image-rendering: pixelated; }
.pcell span { max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flist .row.pick:hover { background: #e6edfb; }
.flist .row.sel { background: var(--sel); color: #fff; }
.flist .row.sel .num { color: #dde7fb; }

/* ---------------------------------------------------------------- Paint: the size box under the tools */
.optrow { width: 100%; height: 17px; padding: 0; display: grid; place-items: center; background: none; border: 0; }
.optrow.on { background: var(--sel); }
.sizemark { background: #000; display: block; }
.optrow.on .sizemark { background: #fff; }
.optrow.spray { height: auto; padding: 1px 0; }
.spraymark { display: block; image-rendering: pixelated; }
.optrow.on .spraymark { filter: invert(1); }
.optnote { padding: 4px; color: #555; line-height: 1.3; text-align: center; }

/* ---------------------------------------------------------------- dialogs with a box to type in */
#dialog .dtext { white-space: pre-line; line-height: 1.4; }
#dialog .drow { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px 56px; }
.xpinput {
  flex: 1; min-width: 0; height: 19px; padding: 1px 3px; border: 1px solid; border-color: #7f9db9 #fff #fff #7f9db9;
  background: #fff; color: #000; font: 11px var(--ui); outline: none;
}
/* the coin's address: 44 characters of Lucida Console at 10 px need ~275 px, so this box is wider than the others */
#dialog .win.cabox { width: 340px; }
#dialog .drow.ca { padding: 0 12px 10px; }
.xpinput.ca { font: 10px "Lucida Console", "Courier New", monospace; letter-spacing: 0; }

/* the coin's button in the tray (only there when token.js has an address) */
#coin { align-items: center; height: 100%; padding: 0 2px; border: 0; background: none; color: inherit; font: bold 11px var(--ui); }
#coin:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the screensaver someone set off */
#saverwrap { position: absolute; inset: 0; z-index: 985000; display: none; background: #000; }
#saverwrap.on { display: block; }
#saver { width: 512px; height: 512px; display: block; }

/* ---------------------------------------------------------------- turning it off, and starting up again */
#boot { position: absolute; inset: 0; z-index: 995000; display: none; background: #000; color: #fff; }
#boot.on { display: grid; place-items: center; }
/* shutting down looks like XP's welcome screen: dark bands top and bottom, the orange line, the light middle */
#boot.off {
  background: linear-gradient(180deg, #00309c 0 66px, #f99736 66px 68px, #5a7edc 68px calc(100% - 68px), #f99736 calc(100% - 68px) calc(100% - 66px), #00309c calc(100% - 66px));
}
#boot .blogo { display: block; width: 60px; height: 48px; margin: 0 auto 12px; }
#boot .bootlogo { display: block; width: 250px; height: 72px; margin: 0 auto 30px; }
#boot.off .btitle { font: 22px/1 "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif; font-style: normal; }
.xpprog { width: 106px; height: 15px; margin: 0 auto; padding: 2px 3px; border: 1px solid #b2b2b2; border-radius: 4px; overflow: hidden; }
.xpprog i { display: flex; gap: 2px; width: 30px; height: 9px; animation: xpprog 2.4s linear infinite; }
.xpprog b { width: 8px; height: 9px; flex: none; border-radius: 1px; background: linear-gradient(180deg, #a6c4fa, #3d6fe8 40%, #1c47c4 60%, #3f74e6); }
@keyframes xpprog { from { transform: translateX(-32px); } to { transform: translateX(102px); } }
#boot .bwrap { text-align: center; width: 300px; }
#boot .btitle { font: italic 700 30px/1 var(--title); text-shadow: 2px 2px 4px rgba(0, 0, 0, .35); }
#boot .bsub { margin-top: 12px; color: #d8e2ff; font: 11px var(--ui); }
#boot.safe .amber { color: #ffb000; font: 15px/1.5 var(--mono); text-align: center; padding: 0 28px; }
#boot.post { place-items: start; }
#boot .postwrap { margin: 0; padding: 26px 22px; color: #d8d8d8; font: 12px/1.5 var(--mono); }

/* ---------------------------------------------------------------- odds and ends */
.sm-top:hover .sm-name { text-decoration: underline; }
#sound { display: flex; align-items: center; padding: 0 2px; border: 0; background: none; color: #fff; height: 100%; }
#sound img { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .xpprog i { animation: none; }
}

/* ---------------------------------------------------------------- Command Prompt */
.con {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0 1px 1px; padding: 3px 4px 4px; background: #000; color: #c0c0c0;
  font: 11px/13px "Lucida Console", Consolas, "Courier New", monospace; white-space: pre-wrap; word-break: break-all;
  border: 1px solid; border-color: #404040 #ffffff #ffffff #404040; cursor: text; touch-action: pan-y;
  user-select: text; -webkit-user-select: text;
}
.con-out div { min-height: 13px; }
.con-in { display: flex; flex-wrap: wrap; white-space: pre; }
.con-pr { flex: none; max-width: 100%; overflow: hidden; }
.con-input {
  flex: 1 0 96px; min-width: 0; height: 13px; padding: 0; margin: 0; border: 0; background: transparent; color: inherit;
  font: inherit; outline: none; caret-color: currentColor; touch-action: auto;
}

/* ---------------------------------------------------------------- Task Manager */
.tm { flex: 1; display: flex; flex-direction: column; padding: 4px 5px 4px; min-height: 0; }
.tm-pane {
  flex: 1; min-height: 0; border: 1px solid var(--shadow); background: var(--face); padding: 7px;
  display: flex; flex-direction: column; gap: 6px;
}
.tm-list { flex: 1; min-height: 60px; padding: 0; }
.tm-head {
  display: flex; gap: 6px; padding: 2px 6px; background: linear-gradient(180deg, #fff, #ebeadb); color: #000;
  border-bottom: 1px solid #d6d2c2; position: sticky; top: 0;
}
.tm-head span:first-child { flex: 1; }
.tm-row { gap: 6px; }
.tm-row img { width: 16px; height: 16px; flex: none; }
.tm-row .tm-task { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tm-btns { display: flex; justify-content: flex-end; gap: 5px; }
.tm-btns .xpbtn { min-width: 0; padding: 0 8px; }
.xpbtn:disabled, .xpbtn:disabled:hover { color: #aca899; border-color: #c4c1b0; box-shadow: none; }
.tm-grid { display: grid; grid-template-columns: 64px 1fr; gap: 9px 6px; margin-top: 4px; }
.tm-box { border: 1px solid var(--shadow); border-radius: 3px; padding: 9px 4px 4px; position: relative; display: grid; place-items: center; }
.tm-bt { position: absolute; top: -7px; left: 6px; padding: 0 3px; background: var(--face); white-space: nowrap; }
.tm-box canvas { display: block; }
.tm-totals { display: grid; gap: 1px; padding: 0 2px; }
.tm-totals div { display: flex; justify-content: space-between; }
.tm-status .cell { flex: 1; margin-left: 0; }
.tm-status .cell.first { border-left: 0; padding-left: 2px; }

/* ---------------------------------------------------------------- the Quick Launch button next to start */
#ql {
  flex: none; display: flex; align-items: center; padding: 0 4px 0 7px;
  border-right: 1px solid rgba(0, 0, 0, .28); box-shadow: 1px 0 rgba(255, 255, 255, .16);
}
#ql button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; display: grid; place-items: center; }
#ql button:hover { background: rgba(255, 255, 255, .2); }
#ql button:active { background: rgba(0, 0, 0, .2); }
#ql img { width: 16px; height: 16px; pointer-events: none; }

/* ---------------------------------------------------------------- icon labels: two lines, the whole name when selected */
.icon span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  overflow-wrap: anywhere; width: max-content; max-width: 74px;   /* XP labels ran a little wider than the icon, so Minesweeper fits */
}
.icon.sel { z-index: 5; }
.icon.sel span { -webkit-line-clamp: 6; line-clamp: 6; }
.icon.drop-bin img { filter: drop-shadow(0 0 3px #fff) brightness(1.15); }

/* a long press on a phone shouldn't pop up the browser's own menu */
#screen { -webkit-touch-callout: none; }

/* The tray balloon sits over the bottom of Minesweeper and Notepad and is up most of the time with a crowd: taps go
   through it to whatever is underneath, and only its close button takes them. */
#balloon { pointer-events: none; }
#balloon .bx { pointer-events: auto; }
/* other people's pointers stay visible over the taskbar, the start menu and the balloons */
#cursors { z-index: 975000; }

/* ---------------------------------------------------------------- Start > All Programs */
.sm-allbtn { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 5px 9px 6px; color: #000; }
.sm-allbtn b { font-weight: 700; }
.sm-allbtn:hover { background: var(--sel); color: #fff; }
.sm-allbtn img { width: 16px; height: 16px; flex: none; }
.sm-all {
  position: absolute; left: 149px; bottom: 64px; z-index: 961000; display: none; min-width: 150px; padding: 1px 0;
  background: #fff; border: 1px solid #8ba3d8; box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
}
.sm-all.open { display: block; }
.sm-prog { display: flex; align-items: center; gap: 6px; padding: 3px 16px 3px 5px; white-space: nowrap; color: #000; }
.sm-prog:hover { background: var(--sel); color: #fff; }
.sm-prog img { width: 16px; height: 16px; flex: none; }
#screen[data-luna="olive"] .sm-allbtn:hover, #screen[data-luna="olive"] .sm-prog:hover { background: #7a8c43; }
#screen[data-luna="silver"] .sm-allbtn:hover, #screen[data-luna="silver"] .sm-prog:hover { background: #7e7e92; }

/* ---------------------------------------------------------------- XP's Turn Off Computer and Log Off boxes */
#dialog .xpbox { width: 300px; color: #fff; background: #5a7edc; border: 1px solid #001d63; box-shadow: 2px 3px 10px rgba(0, 0, 0, .5); }
.xptop {
  height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 12px;
  background: linear-gradient(180deg, #0c3fb0, #00309c 70%);
  font: 15px/1 "Franklin Gothic Medium", "Trebuchet MS", Tahoma, sans-serif; letter-spacing: .2px;
}
.xptop img { width: 30px; height: 24px; }
.xpmid {
  padding: 15px 10px 10px; border-top: 2px solid #7b98e8;
  background: radial-gradient(ellipse 70% 90% at 22% 0%, #85a3ee, #5a7edc 70%);
}
.xpbtns { display: flex; justify-content: center; gap: 20px; }
.xpbig {
  width: 64px; padding: 0; border: 0; background: none; color: #fff; display: flex; flex-direction: column;
  align-items: center; gap: 5px; font: 11px/1.2 var(--ui); cursor: default;
}
.xpbig img { width: 32px; height: 32px; }
.xpbig:hover img { filter: brightness(1.15) drop-shadow(0 0 2px rgba(255, 255, 255, .55)); }
.xpbig:active img { filter: brightness(.9); }
.xpnote { margin: 12px 4px 0; min-height: 28px; text-align: center; line-height: 1.3; }
.xpbot { height: 38px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; background: #00309c; }
/* everything behind the box goes grey, slowly, the way XP did it */
#screen.greyed > #wall, #screen.greyed > #wallpic, #screen.greyed > #icons, #screen.greyed > #wins,
#screen.greyed > #taskbar, #screen.greyed > #cursors, #screen.greyed > #balloon { filter: grayscale(1); transition: filter 1.2s ease-in; }

/* ---------------------------------------------------------------- Internet: Internet Explorer 6's toolbar and address bar */
.ie-bar { height: 26px; flex: none; display: flex; align-items: center; gap: 1px; padding: 0 3px; border-bottom: 1px solid #d0cdbc; }
.ie-b { display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 4px; border: 1px solid transparent; border-radius: 3px; color: #000; }
.ie-b img { width: 16px; height: 16px; flex: none; }
.ie-b:not(.dim):hover { border-color: #fff #aca899 #aca899 #fff; background: #f3f2ea; }
.ie-b.dim img { filter: grayscale(1); opacity: .5; }
.ie-b.dim { color: #aca899; }
.ie-sep { width: 1px; height: 18px; margin: 0 3px; background: #c5c2b2; box-shadow: 1px 0 #fff; }
.ie-addr { height: 24px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 3px 0 5px; border-bottom: 1px solid #d0cdbc; }
.ie-addr .lbl { color: #555; }
.ie-addr .box { flex: 1; min-width: 0; height: 19px; display: flex; align-items: center; gap: 3px; padding: 0 3px; background: #fff; border: 1px solid #7f9db9; }
.ie-addr .box img { width: 16px; height: 16px; }
.ie-go { display: flex; align-items: center; gap: 3px; padding: 0 3px; }
.ie-go img { width: 16px; height: 16px; }
.web .statusbar .cell, .statusbar .cell img { vertical-align: middle; }
.statusbar .cell img { width: 16px; height: 16px; margin-right: 3px; }