/* The program's own window chrome and controls (phase 3, owner note 2): an
   early-2000s look that is nanophageONLINE's, not Windows XP's. Teal frames
   and title bars from the house teal #008080, cool "chrome" steel bodies with
   crisp 1 px bevels (think Platinum or brushed metal, not XP beige), steel
   push buttons with a teal focus ring, and a red-orange hexagonal close button
   (the phage capsid's outline). Every colour comes from the palette in
   base.css :root (--np-*); glyphs are small inline SVGs (no icon fonts).
   Used by client/js/ui/kit.js. Only the menus cast a shadow. */

/* ---------------------------------------------------------------- windows */

.win {
  position: absolute;
  outline: none;     /* a window holding the keyboard itself shows it by its active title bar */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 3px 3px;
  border-radius: 0;
  background: var(--np-frame);
  box-shadow:
    inset 1px 0 var(--np-frame-edge), inset -1px 0 var(--np-frame-edge), inset 0 -1px var(--np-frame-edge),
    inset 2px 0 var(--np-frame-hi), inset -2px 0 var(--np-frame-lo), inset 0 -2px var(--np-frame-lo);
  font: var(--np-font);
  color: var(--np-text);
  user-select: none;
}
.win:not(.active) {
  background: var(--np-off-frame);
  box-shadow:
    inset 1px 0 var(--np-off-edge), inset -1px 0 var(--np-off-edge), inset 0 -1px var(--np-off-edge),
    inset 2px 0 var(--np-off-hi), inset -2px 0 var(--np-off-lo), inset 0 -2px var(--np-off-lo);
}

.win-title {
  flex: 0 0 auto;
  height: 28px;
  margin: 0 -3px;
  padding: 0 5px 0 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 0;
  /* the teal bevel, with fine pinstripes over it */
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(180deg,
      var(--np-title-hi) 0px, var(--np-title-hi) 2px, #1E9F9A 6px, #108F8B 11px, var(--np-teal) 17px,
      #007070 22px, var(--np-title-lo) 26px, #004E4E 28px);
  box-shadow:
    inset 0 1px var(--np-frame-edge), inset 1px 0 var(--np-frame-edge), inset -1px 0 var(--np-frame-edge),
    inset 0 2px var(--np-title-line), inset 2px 0 var(--np-frame-hi), inset -2px 0 var(--np-frame-lo);
  color: #fff;
  cursor: default;
}
.win:not(.active) .win-title {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
    linear-gradient(180deg, var(--np-off-title-hi) 0px, var(--np-off-title-hi) 2px, var(--np-off-title) 14px, var(--np-off-title-lo) 28px);
  box-shadow:
    inset 0 1px var(--np-off-edge), inset 1px 0 var(--np-off-edge), inset -1px 0 var(--np-off-edge),
    inset 0 2px var(--np-off-line), inset 2px 0 var(--np-off-hi), inset -2px 0 var(--np-off-lo);
}
.win-icon {
  width: 16px; height: 16px;
  flex: 0 0 16px;
  image-rendering: pixelated;
  pointer-events: none;
}
.win-caption {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: var(--np-font-caption);
  letter-spacing: 0;
  text-shadow: 1px 1px var(--np-title-shadow);
  padding-top: 1px;
}
.win:not(.active) .win-caption { color: var(--np-off-text); text-shadow: 1px 1px var(--np-off-shadow); }

/* Caption buttons: chamfered steel plates for Minimize / Maximize / Restore, and the close button,
   a red-orange hexagon. The glyph is its own layer so a press can shift it by a pixel. */
.win-btns { display: flex; gap: 2px; flex: 0 0 auto; position: relative; z-index: 7; }
.win-tbtn {
  width: 21px; height: 21px;
  padding: 0; margin: 0;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--glyph), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='0.45' stop-color='%23E3E8EA'/%3E %3Cstop offset='0.55' stop-color='%23CDD4D7'/%3E%3Cstop offset='1' stop-color='%23A9B2B7'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M3 0H18L21 3V18L18 21H3L0 18V3Z' fill='%230E2A2A'/%3E %3Cpath d='M3 1H18L20 3V18L18 20H3L1 18V3Z' fill='url(%23g)'/%3E %3Cpath d='M3 1H18V2H3ZM1 3H2V18H1Z' fill='%23FFFFFF'/%3E %3Cpath d='M3 19H18V20H3ZM19 3H20V18H19Z' fill='%237A858A'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  cursor: default;
}
.win-tbtn:hover { filter: brightness(1.07); }
.win-tbtn:active { filter: brightness(0.86); background-position: 1px 1px, 0 0; }
.win:not(.active) .win-tbtn { filter: saturate(0.3); opacity: 0.8; }
.win-min { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E%3Cpath d='M6 13h9v3H6z' fill='%230B3B3B'/%3E%3C/svg%3E"); }
.win-max { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E%3Cpath d='M5 5h11v11H5z M6 8h9v7H6z' fill='%230B3B3B' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.win-restore { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E%3Cpath d='M8 4h9v9h-2v-6H8z' fill='%230B3B3B'/%3E%3Cpath d='M4 8h9v9H4z M5 11h7v5H5z' fill='%230B3B3B' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.win-close {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E %3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%235A1402' stroke-width='2.4' transform='translate(0.8 0.8)'/%3E %3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%23FFFFFF' stroke-width='2.4'/%3E%3C/svg%3E");
  background-image: var(--glyph), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23FFB294'/%3E%3Cstop offset='0.42' stop-color='%23EE6A3C'/%3E %3Cstop offset='0.58' stop-color='%23D8481C'/%3E%3Cstop offset='1' stop-color='%23A8300C'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M5 0H16L21 10V11L16 21H5L0 11V10Z' fill='%233A0E02'/%3E %3Cpath d='M6 1H15L19 10V11L15 20H6L2 11V10Z' fill='url(%23g)'/%3E %3Cpath d='M6 1H15V2H6ZM5 3H6V5H5ZM4 5H5V7H4ZM3 7H4V9H3Z' fill='%23FFD8C6'/%3E %3Cpath d='M6 19H15V20H6ZM16 16H17V18H16ZM17 14H18V16H17ZM18 12H19V14H18Z' fill='%237A1E04'/%3E %3C/svg%3E");
}
.win:not(.active) .win-close { filter: none; opacity: 1; background-image: var(--glyph), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' shape-rendering='crispEdges'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E %3Cstop offset='0' stop-color='%23D7C7C0'/%3E%3Cstop offset='0.42' stop-color='%23B99A8E'/%3E %3Cstop offset='0.58' stop-color='%23A78578'/%3E%3Cstop offset='1' stop-color='%2386665A'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M5 0H16L21 10V11L16 21H5L0 11V10Z' fill='%233A302C'/%3E %3Cpath d='M6 1H15L19 10V11L15 20H6L2 11V10Z' fill='url(%23g)'/%3E %3Cpath d='M6 1H15V2H6ZM5 3H6V5H5ZM4 5H5V7H4ZM3 7H4V9H3Z' fill='%23EDE2DC'/%3E %3Cpath d='M6 19H15V20H6ZM16 16H17V18H16ZM17 14H18V16H17ZM18 12H19V14H18Z' fill='%235E4A42'/%3E %3C/svg%3E"); }

.win-body {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  background: linear-gradient(180deg, var(--np-face-top) 0%, var(--np-face) 55%, var(--np-face-bot) 100%);
  box-shadow: inset 1px 1px var(--np-steel-0), inset -1px -1px var(--np-steel-4);
  box-sizing: border-box;
  overflow: clip;   /* clip, not hidden: a focused control must never scroll the frame */
}

.win.maximized { border-radius: 0; }
.win.maximized .win-title { border-radius: 0; }
.win.minimized .win-body, .win.minimized .win-grip { display: none; }
.win.minimized { padding-bottom: 0; }

.win-grip {
  position: absolute; right: 3px; bottom: 3px;
  width: 13px; height: 13px;
  cursor: nwse-resize;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='10' y='3' width='2' height='2'/%3E%3Crect x='7' y='6' width='2' height='2'/%3E%3Crect x='10' y='6' width='2' height='2'/%3E%3Crect x='4' y='9' width='2' height='2'/%3E%3Crect x='7' y='9' width='2' height='2'/%3E%3Crect x='10' y='9' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%237A858A'%3E%3Crect x='9' y='2' width='2' height='2'/%3E%3Crect x='6' y='5' width='2' height='2'/%3E%3Crect x='9' y='5' width='2' height='2'/%3E%3Crect x='3' y='8' width='2' height='2'/%3E%3Crect x='6' y='8' width='2' height='2'/%3E%3Crect x='9' y='8' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  z-index: 5;
}

/* Resize zones (kit.js _wireResize): edges 4 px over the frame, the top edge a 3 px band inside the
   title bar, corners 10 px (6 px tall at the top, so the caption buttons, which sit above them,
   keep their clicks). Invisible; only the cursor shows them. */
.win-rz { position: absolute; z-index: 6; }
.win-rz-n { top: 0; left: 10px; right: 10px; height: 3px; cursor: ns-resize; }
.win-rz-s { bottom: 0; left: 10px; right: 10px; height: 4px; cursor: ns-resize; }
.win-rz-e { right: 0; top: 6px; bottom: 10px; width: 4px; cursor: ew-resize; }
.win-rz-w { left: 0; top: 6px; bottom: 10px; width: 4px; cursor: ew-resize; }
.win-rz-nw { left: 0; top: 0; width: 10px; height: 6px; cursor: nwse-resize; }
.win-rz-ne { right: 0; top: 0; width: 10px; height: 6px; cursor: nesw-resize; }
.win-rz-sw { left: 0; bottom: 0; width: 10px; height: 10px; cursor: nesw-resize; }
.win-rz-se { right: 0; bottom: 0; width: 10px; height: 10px; cursor: nwse-resize; }
.win.maximized > .win-rz, .win.minimized > .win-rz, .win.maximized > .win-grip { display: none; }
.win.resizing, .win.resizing * { user-select: none; }

/* A transparent pane that blocks the rest of the desktop under a modal dialog. */
.modal-shield { position: absolute; inset: 0; background: transparent; }

/* ------------------------------------------------------------ message box */

.msgbox .win-body, .promptbox .win-body { padding: 12px 11px 11px; }
.msgbox { min-width: 200px; max-width: 460px; }
.msg-row { display: flex; align-items: flex-start; gap: 13px; padding: 1px 2px 16px; }
.msg-icon { width: 32px; height: 32px; flex: 0 0 32px; image-rendering: pixelated; }
.msg-text { white-space: pre-line; line-height: 14px; padding-top: 2px; max-width: 360px; overflow-wrap: anywhere; user-select: text; }
.msg-icon + .msg-text { padding-top: 9px; }
.msg-btns { display: flex; justify-content: center; gap: 6px; }
.msg-btns.right { justify-content: flex-end; }
.promptbox { width: 320px; }
.prompt-text { margin: 0 0 7px; white-space: pre-line; }
.promptbox .xp-text { width: 100%; box-sizing: border-box; margin-bottom: 12px; }

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

.menu {
  position: absolute;
  min-width: 128px;
  padding: 2px;
  background: var(--np-menu);
  border: 1px solid var(--np-steel-6);
  box-shadow: inset 1px 1px var(--np-steel-0), inset -1px -1px var(--np-steel-3),
    2px 2px 2px rgba(0, 0, 0, 0.28), 4px 4px 3px rgba(0, 0, 0, 0.12);
  font: var(--np-font);
  color: var(--np-text);
  user-select: none;
  cursor: default;
}
.menu-item {
  display: flex;
  align-items: center;
  height: 17px;
  padding: 0 0 0 0;
  white-space: nowrap;
}
.menu-item.bold .menu-label { font-weight: bold; }
.menu-check { width: 20px; height: 17px; flex: 0 0 20px; background-position: center; background-repeat: no-repeat; }
.menu-label { flex: 1 1 auto; padding-right: 8px; }
.menu-hint { padding: 0 6px 0 18px; }
.menu-hint:empty { display: none; }
.menu-arrow { width: 17px; height: 17px; flex: 0 0 17px; }
.menu-item.has-sub .menu-arrow { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' shape-rendering='crispEdges'%3E%3Cpath d='M7 4h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1H7z' fill='black'/%3E%3C/svg%3E") center no-repeat; }
.menu-item.checked .menu-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' shape-rendering='crispEdges'%3E%3Cpath d='M5 8h1v1h1v1h1V9h1V8h1V7h1V6h1V5h1v3h-1v1h-1v1h-1v1h-1v1H8v1H7v-1H6v-1H5z' fill='black'/%3E%3C/svg%3E"); }
.menu-item.radio .menu-check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' shape-rendering='crispEdges'%3E%3Cpath d='M7 6h3v1h1v3h-1v1H7v-1H6V7h1z' fill='black'/%3E%3C/svg%3E"); }
.menu-item.sel:not(.disabled) { background: var(--np-select); color: var(--np-select-text); box-shadow: inset 0 1px var(--np-select-hi); }
.menu-item.sel:not(.disabled).checked .menu-check { filter: invert(1); }
.menu-item.sel:not(.disabled).radio .menu-check { filter: invert(1); }
.menu-item.sel:not(.disabled).has-sub .menu-arrow { filter: invert(1); }
.menu-item.disabled { color: var(--np-text-off); text-shadow: 1px 1px var(--np-steel-0); }
.menu-item.disabled.sel { background: transparent; }
.menu-sep { height: 1px; margin: 3px 1px 4px; background: var(--np-steel-4); box-shadow: 0 1px var(--np-steel-0); }

/* ------------------------------------------------------------- push button */

.xp-btn {
  min-width: 75px;
  height: 23px;
  padding: 0 8px;
  box-sizing: border-box;
  font: var(--np-font);
  color: var(--np-text);
  border: 1px solid var(--np-steel-6);
  border-radius: 2px;
  background: linear-gradient(180deg, #FDFEFE 0%, #EEF1F3 42%, #DCE1E4 58%, #C8CFD3 100%);
  box-shadow: inset 1px 1px #FFFFFF, inset -1px -1px var(--np-steel-4);
  cursor: default;
  outline: none;
  white-space: nowrap;
}
.xp-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F7F8 42%, #E4E9EB 58%, #D2D9DC 100%);
  box-shadow: inset 1px 1px #FFFFFF, inset -1px -1px var(--np-steel-4), inset 0 0 0 2px var(--np-hover-ring);
}
/* the default button (Enter) and a keyboard-focused one wear the teal ring */
.xp-btn.default:not(:disabled), .xp-btn:focus-visible {
  border-color: var(--np-teal-ink);
  box-shadow: inset 0 0 0 1px var(--np-focus), inset 2px 2px #FFFFFF, inset -2px -2px var(--np-steel-4);
}
.xp-btn:focus-visible { outline: 1px dotted var(--np-teal-ink); outline-offset: -5px; }
.xp-btn:active:not(:disabled) {
  background: linear-gradient(180deg, #B7C0C4 0%, #CDD3D6 20%, #DCE1E3 80%, #E6EAEC 100%);
  box-shadow: inset 1px 1px var(--np-steel-5), inset -1px -1px var(--np-steel-1);
  padding-top: 1px;
}
.xp-btn:disabled {
  color: var(--np-text-off); text-shadow: 1px 1px var(--np-steel-0);
  border-color: var(--np-steel-4); background: var(--np-steel-1); box-shadow: inset 1px 1px var(--np-steel-0);
}

/* -------------------------------------------------------- text fields etc. */

/* A sunken, two-pixel field (dark shadow inside the grey one), as the period drew them. */
.xp-text {
  box-sizing: border-box;
  height: 21px;
  padding: 2px 3px;
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  border-radius: 0;
  box-shadow: inset 1px 1px var(--np-steel-6);
  background: var(--np-field);
  color: var(--np-text);
  font: var(--np-font);
  outline: none;
  user-select: text;
}
.xp-text:focus { box-shadow: inset 1px 1px var(--np-steel-6), 0 0 0 1px var(--np-focus); }
.xp-text:disabled, .xp-text[readonly] { background: var(--np-field-ro); }
.xp-text:disabled { color: var(--np-text-off); background: var(--np-steel-1); box-shadow: inset 1px 1px var(--np-steel-4); }
.xp-area { height: auto; resize: none; overflow-y: auto; line-height: 13px; }

.xp-form-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.xp-form-label { width: 70px; flex: 0 0 auto; }

.xp-link { color: var(--np-link); text-decoration: underline; cursor: pointer; outline: none; }
.xp-link:focus-visible { outline: 1px dotted currentColor; }
.xp-link:visited { color: var(--np-link-visited); }

.xp-sunken {
  background: var(--np-field);
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  box-shadow: inset 1px 1px var(--np-steel-6);
  padding: 4px;
  box-sizing: border-box;
}

/* --------------------------------------------------- checkboxes and radios */

.xp-check { display: inline-flex; align-items: center; gap: 5px; cursor: default; line-height: 13px; }
.xp-check input {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px; margin: 0;
  flex: 0 0 13px;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  box-shadow: inset 1px 1px var(--np-steel-6);
  background: var(--np-field);
  outline: none;
}
.xp-radio input { border-radius: 50%; }
.xp-check:hover input:not(:disabled) { background-color: var(--np-hover-field); }
.xp-check input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M2 4h1v1h1v1h1V5h1V4h1V3h1V2h1v3H8v1H7v1H6v1H5v1H4V8H3V7H2z' fill='%230A5E5D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.xp-radio input:checked {
  background-image: radial-gradient(circle at 50% 50%, var(--np-teal-ink) 0, var(--np-teal-ink) 2.2px, #1E8D8A 2.7px, transparent 3.2px);
}
.xp-check input:focus-visible + .xp-check-text { outline: 1px dotted var(--np-teal-ink); outline-offset: 1px; }
.xp-check input:disabled { background-color: var(--np-steel-1); box-shadow: inset 1px 1px var(--np-steel-4); }
.xp-check input:disabled + .xp-check-text { color: var(--np-text-off); text-shadow: 1px 1px var(--np-steel-0); }

/* ------------------------------------------------------------- group box */

/* An etched frame: a grey line with a white one beside it, and a teal legend. */
.xp-group {
  margin: 0 0 8px;
  padding: 4px 8px 8px;
  border: 1px solid var(--np-steel-4);
  border-radius: 0;
  box-shadow: inset 1px 1px var(--np-steel-0), 1px 1px var(--np-steel-0);
}
.xp-group > legend { padding: 0 3px; margin-left: -1px; color: var(--np-teal-ink); font-weight: bold; }

/* --------------------------------------------------------- listbox, listview */

.xp-list {
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  box-shadow: inset 1px 1px var(--np-steel-6);
  padding: 1px 0 0 1px;
  background: var(--np-field);
  overflow-y: auto;
  outline: none;
  cursor: default;
}
.xp-list-row { padding: 1px 3px; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-list-row.sel { background: var(--np-select); color: var(--np-select-text); }
.xp-list:focus .xp-list-row.sel { outline: 1px dotted var(--np-select-dots); outline-offset: -1px; }
.xp-list:not(:focus) .xp-list-row.sel { background: var(--np-select-off); color: var(--np-text); }

.xp-lv {
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  box-shadow: inset 1px 1px var(--np-steel-6);
  padding: 1px 0 0 1px;
  background: var(--np-field);
  display: flex; flex-direction: column;
}
.xp-lv-head {
  display: flex; height: 18px; flex: 0 0 18px;
  background: linear-gradient(180deg, #FBFCFC 0%, var(--np-steel-1) 55%, var(--np-steel-2) 100%);
  border-bottom: 1px solid var(--np-steel-4);
}
.xp-lv-col {
  box-sizing: border-box; padding: 3px 6px 0; height: 18px;
  border-right: 1px solid var(--np-steel-4);
  box-shadow: inset -1px 0 #fff, inset 1px 0 #fff;
  white-space: nowrap; overflow: hidden;
}
.xp-lv-col:last-child { border-right: 0; }
.xp-lv-body { border: 0; box-shadow: none; padding: 0; flex: 1 1 auto; }
.xp-lv-body .xp-list-row { padding: 0; }
.xp-lv-cells { display: flex; height: 16px; align-items: center; }
.xp-lv-cell { box-sizing: border-box; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-lv-cell.right { text-align: right; }

/* ------------------------------------------------------------ progress bar */

.xp-progress {
  position: relative;
  height: 15px;
  box-sizing: border-box;
  padding: 2px 3px;
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  border-radius: 0;
  background: var(--np-well);
  box-shadow: inset 1px 1px var(--np-steel-6);
}
.xp-progress-fill {
  height: 9px;
  width: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, var(--np-well) 8px 10px),
    linear-gradient(180deg, #8EE3DE 0%, #3DB6B1 30%, var(--np-teal) 60%, #1C9C98 100%);
}

/* --------------------------------------------------------------- trackbar */

.xp-trackbar { display: inline-flex; flex-direction: column; align-items: stretch; }
.xp-track {
  appearance: none; -webkit-appearance: none;
  height: 22px; margin: 0; background: transparent; outline: none;
}
.xp-track::-webkit-slider-runnable-track {
  height: 4px;
  border: 1px solid;
  border-color: var(--np-steel-5) var(--np-steel-0) var(--np-steel-0) var(--np-steel-5);
  background: var(--np-steel-3);
  box-shadow: inset 1px 1px var(--np-steel-6);
}
.xp-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 21px;
  margin-top: -9px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='21' shape-rendering='crispEdges'%3E %3Cpath d='M0 0h11v15l-5 5h-1l-5-5z' fill='%233A4448'/%3E %3Cpath d='M1 1h9v14l-4 4h-1l-4-4z' fill='%23D9DEE1'/%3E %3Cpath d='M1 1h9v1H1zM1 2h1v13H1z' fill='%23FFFFFF'/%3E %3Cpath d='M9 2h1v13H9z' fill='%238A949A'/%3E %3Cpath d='M2 2h7v2H2z' fill='%231C9C98'/%3E %3C/svg%3E") no-repeat;
}
.xp-track:hover::-webkit-slider-thumb { filter: brightness(1.06); }
.xp-track:focus-visible::-webkit-slider-thumb { filter: drop-shadow(0 0 0 var(--np-focus)); }
.xp-ticks { display: flex; justify-content: space-between; padding: 0 5px; box-sizing: border-box; height: 5px; }
.xp-ticks span { width: 1px; height: 4px; background: var(--np-steel-5); }

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

/* Square steel: a raised thumb with grip lines, raised arrow buttons, and a dithered track, as
   the period's own skinned programs drew them. */
.win ::-webkit-scrollbar { width: 16px; height: 16px; }
.win ::-webkit-scrollbar-track { background: var(--np-steel-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='2' height='2' fill='%23F2F4F5'/%3E%3Crect width='1' height='1' fill='%23C9CFD3'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23C9CFD3'/%3E%3C/svg%3E") repeat; }
.win ::-webkit-scrollbar-thumb {
  border: 1px solid var(--np-steel-6);
  border-radius: 0;
  background-color: var(--np-steel-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF'%3E%3Crect width='7' height='1'/%3E%3Crect y='3' width='7' height='1'/%3E%3Crect y='6' width='7' height='1'/%3E%3C/g%3E%3Cg fill='%236E797E'%3E%3Crect x='1' y='1' width='7' height='1'/%3E%3Crect x='1' y='4' width='7' height='1'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(90deg, #F4F6F7 0%, var(--np-steel-2) 50%, var(--np-steel-3) 100%);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 1px 1px #FFFFFF, inset -1px -1px var(--np-steel-4);
  min-height: 16px;
}
.win ::-webkit-scrollbar-thumb:horizontal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='8' shape-rendering='crispEdges'%3E%3Cg fill='%23FFFFFF'%3E%3Crect width='1' height='7'/%3E%3Crect x='3' width='1' height='7'/%3E%3Crect x='6' width='1' height='7'/%3E%3C/g%3E%3Cg fill='%236E797E'%3E%3Crect x='1' y='1' width='1' height='7'/%3E%3Crect x='4' y='1' width='1' height='7'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(180deg, #F4F6F7 0%, var(--np-steel-2) 50%, var(--np-steel-3) 100%);
}
.win ::-webkit-scrollbar-thumb:hover { filter: brightness(1.05); }
.win ::-webkit-scrollbar-button {
  display: block; width: 16px; height: 16px;
  border: 1px solid var(--np-steel-6);
  border-radius: 0;
  background-color: var(--np-steel-2);
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 1px 1px #FFFFFF, inset -1px -1px var(--np-steel-4);
}
.win ::-webkit-scrollbar-button:vertical:increment:start,
.win ::-webkit-scrollbar-button:vertical:decrement:end,
.win ::-webkit-scrollbar-button:horizontal:increment:start,
.win ::-webkit-scrollbar-button:horizontal:decrement:end { display: none; }
.win ::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z' fill='%230B3B3B'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFFFFF 0%, var(--np-steel-2) 55%, var(--np-steel-3) 100%); }
.win ::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z' fill='%230B3B3B'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFFFFF 0%, var(--np-steel-2) 55%, var(--np-steel-3) 100%); }
.win ::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z' fill='%230B3B3B'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFFFFF 0%, var(--np-steel-2) 55%, var(--np-steel-3) 100%); }
.win ::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z' fill='%230B3B3B'/%3E%3C/svg%3E"), linear-gradient(135deg, #FFFFFF 0%, var(--np-steel-2) 55%, var(--np-steel-3) 100%); }
.win ::-webkit-scrollbar-button:hover { filter: brightness(1.05); }
.win ::-webkit-scrollbar-button:active { filter: brightness(0.9); box-shadow: inset 1px 1px var(--np-steel-4); }
.win ::-webkit-scrollbar-corner { background: var(--np-steel-2); }

/* Browsers without ::-webkit-scrollbar (Firefox) get the nearest colours. */
@supports not selector(::-webkit-scrollbar) {
  .win * { scrollbar-color: var(--np-steel-3) var(--np-steel-1); }
}