/* HOPIUM LABS 98 - the rest of the operating system.
 *
 * styles.css carries the core bevel and the window frame. This file adds the
 * parts a real shell needs: scrollbars, context menus, resize grips, cascading
 * menus, tooltips, tabbed property sheets, list views, and the chrome for the
 * bundled programs.
 *
 * Everything reuses the tokens and the .raised / .sunken / .groove bevels from
 * styles.css, so there is still one definition of what a 3D edge looks like.
 */

/* --------------------------------------------------------- scrollbars --- */

/* The 16px scrollbar with a stippled track and bevelled arrow buttons. This is
 * one of the strongest era cues, and a modern thin overlay scrollbar inside an
 * otherwise perfect 98 window ruins the illusion instantly.
 *
 * Firefox cannot restyle scrollbar parts, so it gets the closest approximation
 * the standard properties allow rather than nothing.
 */
* {
  scrollbar-width: auto;
  scrollbar-color: #c0c0c0 #dfdfdf;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-color: #dfdfdf;
  /* The 50% checkerboard 98 used behind the thumb. */
  background-image: repeating-conic-gradient(from 0deg at 0 0,
    #ffffff 0 25%, #c0c0c0 0 50%);
  background-size: 2px 2px;
}

::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  box-shadow:
    inset -1px -1px 0 0 #000,
    inset 1px 1px 0 0 #fff,
    inset -2px -2px 0 0 #808080,
    inset 2px 2px 0 0 #dfdfdf;
}

::-webkit-scrollbar-corner {
  background: #dfdfdf;
}

/* The arrow buttons. Only the single-button variants are styled, because the
 * doubled ones at each end are not what 98 drew. */
::-webkit-scrollbar-button:single-button {
  background: #c0c0c0;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow:
    inset -1px -1px 0 0 #000,
    inset 1px 1px 0 0 #fff,
    inset -2px -2px 0 0 #808080,
    inset 2px 2px 0 0 #dfdfdf;
}

::-webkit-scrollbar-button:single-button:vertical {
  height: 16px;
  width: 16px;
}

::-webkit-scrollbar-button:single-button:horizontal {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 0 L7 4 L0 4 Z' fill='%23000'/></svg>");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M0 0 L7 0 L3.5 4 Z' fill='%23000'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M0 3.5 L4 0 L4 7 Z' fill='%23000'/></svg>");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='7'><path d='M0 0 L4 3.5 L0 7 Z' fill='%23000'/></svg>");
}

/* The boot screen and the blue screen are not shell surfaces, so they keep
 * plain scrollbars rather than 3D ones floating on black. */
#boot::-webkit-scrollbar, #bsod::-webkit-scrollbar { width: 0; height: 0; }

/* ------------------------------------------------------- resize grips --- */

/* Eight invisible grips around the frame. They sit outside the padding so they
 * do not steal clicks from the window's own content. */
.grip {
  position: absolute;
  z-index: 5;
}

.grip-n  { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.grip-s  { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.grip-w  { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.grip-e  { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.grip-nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.grip-se { bottom: -3px; right: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.grip-ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.grip-sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }

/* A maximised window cannot be resized, and neither can a dialog. */
.win.max .grip, .win.fixed .grip { display: none; }

/* The diagonal hatch in the bottom right of a resizable window. */
.sizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background-image:
    linear-gradient(135deg,
      transparent 0 42%, #fff 42% 52%, #808080 52% 62%,
      transparent 62% 70%, #fff 70% 80%, #808080 80% 90%, transparent 90%);
}

.win.max .sizer, .win.fixed .sizer { display: none; }

/* While a drag or resize is in flight the pointer must not select text or
 * hover things inside other windows. */
body.dragging, body.dragging * { cursor: inherit !important; user-select: none !important; }
body.dragging iframe, body.dragging .wbody { pointer-events: none; }

/* ------------------------------------------------------ context menus --- */

.ctx {
  position: fixed;
  z-index: 7500;
  min-width: 148px;
  background: var(--face);
  padding: 2px;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .4));
}

.ctx .ci {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 20px 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
  position: relative;
}

.ctx .ci:hover:not(.dis) { background: var(--title); color: #fff; }
.ctx .ci.dis { color: var(--shadow); text-shadow: 1px 1px 0 var(--white); }
.ctx .ci.dis:hover { background: transparent; }
.ctx .ci b { font-weight: bold; }
.ctx .ci .ck { width: 12px; flex: 0 0 auto; text-align: center; }
.ctx .ci .arw { position: absolute; right: 5px; font-size: 9px; }

.ctx .sep {
  height: 2px;
  margin: 3px 2px;
  box-shadow: inset 0 1px 0 var(--shadow), inset 0 -1px 0 var(--white);
}

/* A floating panel that is not a menu: the tray volume popup. */
.pop98 {
  position: fixed;
  z-index: 7400;
  display: none;
  background: var(--face);
  padding: 9px 11px;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .4));
}

.pop98.on { display: block; }

/* ---------------------------------------------------------- submenus --- */

/* A Start menu entry that opens a cascade. The cascade itself is a .ctx like
 * every other menu, so there is nothing else to style here. */
.mitem.has-sub > .sub-arrow {
  margin-left: auto;
  padding-left: 10px;
  font-size: 9px;
}

/* The row stays highlighted while its cascade is showing. */
.mitem.open { background: var(--title); color: #fff; }

/* --------------------------------------------------------- tooltips --- */

#tip {
  position: fixed;
  z-index: 8800;
  display: none;
  max-width: 260px;
  padding: 2px 5px;
  background: #ffffe1;
  border: 1px solid #000;
  font-size: 11px;
  line-height: 1.35;
  color: #000;
  pointer-events: none;
}

#tip.on { display: block; }

/* ------------------------------------------------------ alt-tab panel --- */

#alttab {
  position: fixed;
  z-index: 8600;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background: var(--face);
  padding: 12px;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .5));
}

#alttab.on { display: block; }

#alttab .row2 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 420px;
  justify-content: center;
}

#alttab .at {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

#alttab .at img { width: 32px; height: 32px; object-fit: contain; }
#alttab .at.on { outline: 2px dotted var(--dark); background: rgba(0, 0, 128, .12); }
#alttab .lbl { text-align: center; margin-top: 9px; font-size: 11px; min-height: 15px; }

/* --------------------------------------------------- quick launch bar --- */

#quick {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1px;
  height: 24px;
  padding: 0 2px;
}

#quick .q {
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: default;
  background: transparent;
  border: 0;
  padding: 0;
}

#quick .q img { width: 16px; height: 16px; object-fit: contain; }
#quick .q:hover { box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--white); }
#quick .q:active { box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--white); }

/* ---------------------------------------------------- tabs (property) --- */

.tabs {
  display: flex;
  gap: 2px;
  padding-left: 3px;
  position: relative;
  z-index: 2;
  margin-bottom: -2px;
}

.tab {
  padding: 3px 9px 4px;
  background: var(--face);
  font-size: 11px;
  cursor: default;
  border-radius: 3px 3px 0 0;
  box-shadow:
    inset 1px 1px 0 0 var(--white),
    inset -1px 0 0 0 var(--shadow),
    inset -2px 0 0 0 var(--light);
  position: relative;
  top: 2px;
}

.tab.on {
  top: 0;
  padding: 5px 11px 5px;
  font-weight: normal;
  z-index: 3;
}

.tabpanel {
  background: var(--face);
  padding: 12px 11px;
  position: relative;
  z-index: 1;
  box-shadow:
    inset -1px -1px 0 0 var(--dark),
    inset 1px 1px 0 0 var(--white),
    inset -2px -2px 0 0 var(--shadow),
    inset 2px 2px 0 0 var(--light);
}

.tabbody > div { display: none; }
.tabbody > div.on { display: block; }

/* ------------------------------------------------------- form widgets --- */

/* 98 drew its own tick and dot, so the native control has to go. */
.chk, .rad {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  cursor: default;
  padding: 2px 0;
}

.chk input, .rad input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background: #fff;
  box-shadow:
    inset 1px 1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--white),
    inset 2px 2px 0 0 var(--dark),
    inset -2px -2px 0 0 var(--light);
  position: relative;
}

.rad input { border-radius: 50%; }

.chk input:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 8px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.rad input:checked::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 3.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #000;
}

select.sel98 {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  font-family: var(--ui);
  font-size: 11px;
  padding: 2px 20px 2px 4px;
  border: 0;
  box-shadow:
    inset 1px 1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--white),
    inset 2px 2px 0 0 var(--dark),
    inset -2px -2px 0 0 var(--light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M0 0 L7 0 L3.5 4 Z' fill='%23000'/></svg>");
  background-repeat: no-repeat;
  background-position: right 5px center;
  cursor: default;
}

input.in98, textarea.in98 {
  background: #fff;
  font-family: var(--ui);
  font-size: 11px;
  padding: 3px 4px;
  border: 0;
  color: #000;
  box-shadow:
    inset 1px 1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--white),
    inset 2px 2px 0 0 var(--dark),
    inset -2px -2px 0 0 var(--light);
}

textarea.in98 { font-family: var(--mono); resize: none; }

/* The trackbar. */
input.rng98 {
  appearance: none;
  -webkit-appearance: none;
  height: 20px;
  background: transparent;
  cursor: default;
}

input.rng98::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--face);
  box-shadow:
    inset 1px 1px 0 0 var(--shadow),
    inset -1px -1px 0 0 var(--white),
    inset 2px 2px 0 0 var(--dark);
}

input.rng98::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 20px;
  margin-top: -8px;
  background: var(--face);
  box-shadow:
    inset -1px -1px 0 0 var(--dark),
    inset 1px 1px 0 0 var(--white),
    inset -2px -2px 0 0 var(--shadow),
    inset 2px 2px 0 0 var(--light);
}

input.rng98::-moz-range-track { height: 4px; background: var(--shadow); }
input.rng98::-moz-range-thumb {
  width: 11px; height: 20px; border: 0; border-radius: 0;
  background: var(--face);
  box-shadow: inset -1px -1px 0 0 var(--dark), inset 1px 1px 0 0 var(--white);
}

/* ---------------------------------------------------------- toolbars --- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.tbb {
  min-width: 23px;
  height: 22px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--face);
  border: 0;
  font-family: var(--ui);
  font-size: 11px;
  cursor: default;
}

.tbb:hover:not(:disabled) { box-shadow: inset -1px -1px 0 var(--shadow), inset 1px 1px 0 var(--white); }
.tbb:active:not(:disabled) { box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--white); }
.tbb:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--white); }
.tbb.on { box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--white); }

.tbsep { width: 2px; height: 18px; margin: 0 3px; box-shadow: inset -1px 0 0 var(--white), inset 1px 0 0 var(--shadow); }

/* ------------------------------------------------------------ explorer --- */

.addr {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 3px 4px;
  flex: 0 0 auto;
}

.addr .lb { font-size: 11px; flex: 0 0 auto; }

.explorer {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 3px;
}

.exp-list {
  flex: 1 1 auto;
  background: #fff;
  overflow: auto;
  padding: 4px;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.fitem {
  width: 82px;
  padding: 4px 2px;
  text-align: center;
  cursor: default;
  font-size: 11px;
}

.fitem .fg { display: block; font-size: 27px; line-height: 32px; height: 32px; }
.fitem .fg img { width: 30px; height: 30px; object-fit: contain; }
.fitem .fn { display: inline-block; word-break: break-word; padding: 1px 2px; }
.fitem.sel .fn { background: var(--title); color: #fff; }
.fitem.sel .fg { filter: brightness(.75) saturate(1.5); }

/* The details view, which is how anyone actually reads a folder. */
.exp-list.details { display: block; padding: 0; }

table.dtl {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  background: #fff;
}

table.dtl th {
  position: sticky;
  top: 0;
  background: var(--face);
  padding: 3px 6px;
  text-align: left;
  font-weight: normal;
  box-shadow:
    inset -1px -1px 0 var(--shadow),
    inset 1px 1px 0 var(--white);
  cursor: default;
}

table.dtl td { padding: 2px 6px; white-space: nowrap; }
table.dtl tr.sel td { background: var(--title); color: #fff; }

/* The icon gutter. An image icon has to be forced down to the same box as a
 * glyph icon, or one .exe with a real png sets the height of its whole row. */
table.dtl td .rg {
  display: inline-block;
  width: 17px;
  line-height: 15px;
  vertical-align: middle;
}

table.dtl td .rg img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

/* ----------------------------------------------------------- ms-dos --- */

.dos {
  background: #000;
  color: #c0c0c0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  padding: 6px 8px;
  height: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.dos .in {
  background: transparent;
  border: 0;
  outline: 0;
  color: #c0c0c0;
  font: inherit;
  width: 60%;
  padding: 0;
  caret-color: #c0c0c0;
}

.dos b { color: #fff; font-weight: normal; }
.dos .g { color: var(--lab); }

/* -------------------------------------------------------- calculator --- */

.calc-out {
  background: #fff;
  padding: 4px 6px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 17px;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

.calc-grid button {
  height: 26px;
  min-width: 0;
  padding: 0;
  font-weight: bold;
}

.calc-grid button.op { color: #0000a0; }
.calc-grid button.fn { color: #a00000; }
.calc-mem { display: flex; gap: 6px; font-size: 11px; margin-bottom: 7px; }
.calc-mem span { padding: 2px 6px; min-width: 26px; text-align: center; }

/* ------------------------------------------------------- minesweeper --- */

.ms-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px;
  margin-bottom: 6px;
}

.ms-led {
  background: #000;
  color: #ff0000;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: bold;
  padding: 1px 4px;
  letter-spacing: 1px;
  min-width: 44px;
  text-align: center;
}

.ms-face {
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--face);
  border: 0;
  cursor: default;
  padding: 0;
}

.ms-grid {
  display: grid;
  gap: 0;
  padding: 3px;
  background: var(--face);
  width: max-content;
  margin: 0 auto;
}

.ms-cell {
  width: 16px;
  height: 16px;
  background: var(--face);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  cursor: default;
  box-shadow:
    inset -1px -1px 0 0 var(--shadow),
    inset 1px 1px 0 0 var(--white);
  user-select: none;
}

.ms-cell.open {
  box-shadow: inset 1px 1px 0 0 #a0a0a0;
  background: #c8c8c8;
}

/* The original colour per adjacency count. Everyone remembers these. */
.ms-cell.n1 { color: #0000ff; }
.ms-cell.n2 { color: #008000; }
.ms-cell.n3 { color: #ff0000; }
.ms-cell.n4 { color: #000080; }
.ms-cell.n5 { color: #800000; }
.ms-cell.n6 { color: #008080; }
.ms-cell.n7 { color: #000000; }
.ms-cell.n8 { color: #808080; }
.ms-cell.boom { background: #ff0000; }

/* --------------------------------------------------------- solitaire --- */

.sol {
  background: #008000;
  padding: 8px;
  min-height: 340px;
  position: relative;
  user-select: none;
}

.sol-top { display: flex; gap: 8px; margin-bottom: 14px; }
.sol-cols { display: flex; gap: 8px; align-items: flex-start; }

.slot {
  width: 52px;
  height: 72px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 3px;
  background: rgba(0, 0, 0, .12);
  position: relative;
}

.pile { width: 52px; flex: 0 0 auto; position: relative; min-height: 72px; }

.card {
  position: absolute;
  left: 0;
  width: 52px;
  height: 72px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px #000, 1px 1px 2px rgba(0, 0, 0, .35);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: bold;
  cursor: default;
  overflow: hidden;
}

.card .cnr {
  position: absolute;
  top: 2px;
  left: 3px;
  line-height: 1.05;
  text-align: center;
}

.card .big {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 21px;
  line-height: 1;
}

.card.red { color: #d00000; }
.card.black { color: #000; }

.card.down {
  /* The blue crosshatch back. */
  background-color: #1a3faa;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 2px, transparent 2px 4px);
}

.card.down .cnr, .card.down .big { display: none; }
.card.pick { box-shadow: 0 0 0 2px #ffff00, 2px 2px 4px rgba(0,0,0,.5); }
.card.hint { box-shadow: 0 0 0 2px #39ff14, 2px 2px 4px rgba(0,0,0,.5); }

.sol-bar { display: flex; gap: 12px; align-items: center; margin-top: 10px; color: #fff; font-size: 11px; }

/* ------------------------------------------------------ task manager --- */

.tm-list {
  background: #fff;
  height: 168px;
  overflow: auto;
  padding: 2px;
}

.tm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 5px;
  font-size: 11px;
  cursor: default;
}

.tm-row .tmi { width: 17px; text-align: center; font-size: 13px; flex: 0 0 auto; }
.tm-row .tmi img { width: 15px; height: 15px; object-fit: contain; }
.tm-row.sel { background: var(--title); color: #fff; }
.tm-row .st { margin-left: auto; color: var(--shadow); }
.tm-row.sel .st { color: #cfcfcf; }

/* --------------------------------------------------- internet explorer --- */

.ie-page {
  background: #fff;
  padding: 14px 16px;
  overflow: auto;
  height: 100%;
  user-select: text;
  -webkit-user-select: text;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
}

.ie-page h1 { font-size: 24px; margin: 0 0 10px; }
.ie-page h2 { font-size: 18px; margin: 16px 0 7px; }
.ie-page p { margin: 0 0 11px; }
.ie-page a { color: #0000ee; text-decoration: underline; cursor: pointer; }
.ie-page a:visited { color: #551a8b; }
.ie-page hr { border: 0; border-top: 1px solid #999; margin: 14px 0; }
.ie-page ul { margin: 0 0 11px; padding-left: 26px; }
.ie-page .ctr { text-align: center; }
.ie-page img { max-width: 100%; height: auto; }

.ie-status { font-family: var(--ui); font-size: 11px; }

/* The under-construction bar, which every page had. */
.ie-page .construction {
  background: #ffcc00;
  color: #000;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: bold;
  padding: 4px 8px;
  text-align: center;
  border: 2px dashed #000;
  margin: 12px 0;
}

/* --------------------------------------------------- shutdown screen --- */

#shutdown {
  position: fixed;
  inset: 0;
  z-index: 9600;
  display: none;
  background: #000;
  color: #ffb000;
  font-family: var(--mono);
  font-size: clamp(15px, 3.4vw, 30px);
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#shutdown.on { display: flex; }
#shutdown .sd { max-width: 22em; line-height: 1.6; }
#shutdown small { display: block; margin-top: 26px; font-size: .5em; color: #7a5400; }

/* ------------------------------------------------------- lab assistant --- */

#clippy {
  position: fixed;
  right: 14px;
  bottom: calc(var(--taskbar-h) + 12px);
  z-index: 6800;
  display: none;
  align-items: flex-end;
  gap: 8px;
}

#clippy.on { display: flex; }

#clippy .bubble {
  max-width: 232px;
  background: #ffffe1;
  border: 1px solid #000;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  position: relative;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35));
}

#clippy .bubble .x {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 11px;
  cursor: default;
  color: #666;
}

#clippy .guy {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  background: var(--lab-black);
  border: 1px solid #000;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .35));
}

/* ------------------------------------------------------- rubber band --- */

#band {
  position: absolute;
  z-index: 4;
  display: none;
  border: 1px dotted #fff;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}

#band.on { display: block; }

/* Free-positioned desktop icons, once one has been dragged. */
#icons.free { display: block; }
#icons.free .dicon { position: absolute; }

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 720px) {
  /* Resizing and rubber banding are mouse gestures. On a phone the windows
   * are already full width, so the grips would only intercept scrolls. */
  .grip, .sizer, #band { display: none !important; }

  #quick { display: none; }
  #clippy { display: none !important; }

  .ctx { min-width: 172px; }
  .ctx .ci { padding: 7px 22px 7px 10px; }

  .sol { min-height: 300px; }
  .calc-grid button { height: 34px; }
  .ms-cell { width: 20px; height: 20px; line-height: 20px; }
}