:root { --taskbar-h: 30px; }

/* ─── Win98 tooltip ──────────────────────────────────────────────────────── */
.win98-tooltip {
  display: none;
  position: fixed;
  z-index: 99999;
  overflow: hidden; /* clip container — same pattern as .dropdown */
  pointer-events: none;
}
.win98-tooltip-inner {
  background: #ffffe1;
  border: 1px solid #000;
  padding: 2px 4px;
  font-size: 11px;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
  color: #000;
  white-space: nowrap;
}
.win98-tooltip-inner.animate-open {
  animation: slide-down 100ms steps(8, end) both;
}

/* Disable smooth scrolling globally — Windows 98 rule: all scrolling must be instant */
html { scroll-behavior: auto; }
* { scroll-behavior: auto !important; }

/* Fix duplicate scrollbar arrows — hide the wrong sub-buttons at each end */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display: none !important; }

body { margin: 0; padding: 0; overflow: hidden; height: 100vh; background: teal; font-family: 'Pixelated MS Sans Serif', sans-serif; }
#viewport { position: relative; width: 100%; height: calc(100% - var(--taskbar-h)); overflow: hidden; }
#viewport > .window { position: absolute; visibility: hidden; box-sizing: border-box; }

/* ─── Desktop ─────────────────────────────────────────────────────────────── */
#desktop {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px; padding: 10px;
  z-index: 0;
  pointer-events: auto;
}
.desktop-icon {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: 72px; gap: 4px;
  padding: 4px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.desktop-icon.selected .desktop-icon-img  { outline: 1px dotted #fff; }
.desktop-icon.selected .desktop-icon-img::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-conic-gradient(#000080 0% 25%, transparent 0% 50%);
  background-size: 2px 2px;
  pointer-events: none;
}
.desktop-icon.selected .desktop-icon-label { background: navy; color: #fff; outline: 1px dotted #fff; outline-offset: -1px; }
.desktop-icon-img {
  position: relative;
  width: 32px; height: 32px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.desktop-icon-label {
  font-size: 11px; color: #fff; text-align: center;
  text-shadow: 1px 1px #000;
  word-break: break-word; line-height: 1.2;
  max-width: 72px;
}
.desktop-icon-hint {
  position: absolute;
  left: 80px; top: 14px;
  white-space: nowrap;
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
}
/* Override min-width for minimized windows so the animate can shrink them */
.window.minimized { min-width: 0 !important; min-height: 0 !important; }
/* Minimized title text ellipsis */
.minimized .title-bar-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }

/* ─── Active Desktop project info ─────────────────────────────────────────── */
#active-desktop-info {
  position: absolute;
  top: 12px; right: 12px;
  min-width: 190px;
  background: #ffffc8;
  border: 1px solid #808080;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px grey,     inset 2px 2px #dfdfdf;
  padding: 6px 8px;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
  font-size: 11px;
  color: #000;
  z-index: 5;
  pointer-events: auto;
}
.adi-title {
  font-weight: bold; font-size: 12px;
}
.adi-subtitle { font-size: 10px; color: #444; margin-top: 1px; }
.adi-sep {
  border: none;
  border-top: 1px solid #808080;
  margin: 5px 0;
}
.adi-members {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
}
.adi-members li { display: flex; justify-content: space-between; gap: 8px; }
.adi-roll { color: #444; }
#active-desktop-info .adn-close {
  position: absolute; top: 4px; right: 4px;
}

/* ─── Active Desktop zoom notice ──────────────────────────────────────────── */
#active-desktop-notice {
  position: absolute;
  bottom: 12px; right: 12px;
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 280px;
  background: #ffffc8;
  border: 1px solid #808080;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px grey,     inset 2px 2px #dfdfdf;
  padding: 6px 8px;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
  font-size: 11px;
  color: #000;
  z-index: 5;
  pointer-events: auto;
}
.adn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 14px; height: 14px; margin-top: 1px;
  clip-path: var(--bln-polygon);
  background: #1a5fcc; color: #fff;
  font-size: 10px; font-weight: bold; font-style: italic;
  line-height: 1;
}
.adn-text { flex: 1; line-height: 1.4; }
.adn-text kbd {
  display: inline-block;
  background: silver;
  border: 1px solid #808080;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff;
  padding: 0 3px;
  font-family: inherit; font-size: 10px;
  line-height: 14px;
}
.adn-close {
  width: 14px; height: 14px !important;
  padding: 0; margin: 0;
  min-width: unset; min-height: unset;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0; align-self: flex-start;
  box-sizing: border-box;
}

/* ─── Desktop legalese ────────────────────────────────────────────────────── */
#desktop-legalese {
  position: fixed;
  bottom: calc(var(--taskbar-h) + 12px); right: 12px;
  max-width: 340px;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,1.0);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  text-align: right;
  line-height: 1.5;
  pointer-events: none;
  z-index: 4;
}
#desktop-legalese a {
  color: rgb(210, 210, 255);
  text-decoration: underline;
  pointer-events: auto;
}

/* ─── Taskbar ─────────────────────────────────────────────────────────────── */
#taskbar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  height: var(--taskbar-h); z-index: 10000;
  background: silver;
  border-top: 1px solid #dfdfdf;
  box-shadow: inset 0 1px #fff;
  display: flex; align-items: center; gap: 2px;
  padding: 2px 2px; box-sizing: border-box;
}
#start-btn {
  display: inline-flex; align-items: center; gap: 2px;
  height: 22px; padding: 0 4px; font-weight: bold;
  white-space: nowrap; flex-shrink: 0; min-width: 0;
}
#start-btn:active { padding: 1px 3px 0 5px; }
/* Replaceable start icon — swap src in HTML to change the image */
#start-btn > img { flex-shrink: 0; width: 14px; height: 14px; }
#taskbar-sep {
  width: 1px; height: 18px; flex-shrink: 0;
  box-shadow: inset -1px 0 #808080, inset 1px 0 #fff;
  margin: 0 2px;
}
#taskbar-tasks { flex: 1; display: flex; align-items: center; gap: 2px; overflow: hidden; }

/* Window buttons in the taskbar tasks area */
.taskbar-task-btn {
  height: 22px; width: 160px;
  padding: 0 6px; overflow: hidden;
  display: inline-flex; align-items: center; gap: 4px;
  text-align: left; font-size: 11px;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
}
.taskbar-task-btn > .task-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.taskbar-task-btn > img { flex-shrink: 0; width: 16px; height: 16px; }
/* Pressed/active state while window is focused */
.taskbar-task-btn[aria-pressed="true"] {
  font-weight: bold;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
              inset -2px -2px #dfdfdf, inset 2px 2px grey;
}
#taskbar-tray {
  display: flex; align-items: stretch;
  height: calc(var(--taskbar-h) - 4px);
}
#taskbar-clock {
  display: flex; align-items: center; padding: 0 8px;
  font-size: 11px; white-space: nowrap;
  font-family: 'Pixelated MS Sans Serif', sans-serif;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}

/* ─── WM windows ──────────────────────────────────────────────────── */.title-bar { cursor: default; -webkit-user-select: none; user-select: none; touch-action: none; }.wm-resize-handle { position: absolute; z-index: 1; touch-action: none; }
.wm-resize-handle[data-dir="n"]  { top: 0;    left: 8px;    right: 8px;   height: 4px; cursor: n-resize;  }
.wm-resize-handle[data-dir="s"]  { bottom: 0; left: 8px;    right: 8px;   height: 4px; cursor: s-resize;  }
.wm-resize-handle[data-dir="e"]  { top: 8px;  bottom: 8px;  right: 0;     width:  4px; cursor: e-resize;  }
.wm-resize-handle[data-dir="w"]  { top: 8px;  bottom: 8px;  left: 0;      width:  4px; cursor: w-resize;  }
.wm-resize-handle[data-dir="ne"] { top: 0;    right: 0;     width: 8px;   height: 8px; cursor: ne-resize; }
.wm-resize-handle[data-dir="nw"] { top: 0;    left: 0;      width: 8px;   height: 8px; cursor: nw-resize; }
.wm-resize-handle[data-dir="se"] { bottom: 0; right: 0;     width: 8px;   height: 8px; cursor: se-resize; }
.wm-resize-handle[data-dir="sw"] { bottom: 0; left: 0;      width: 8px;   height: 8px; cursor: sw-resize; }
/* Strip window chrome during WM animations — only title bar remains visible */
.wm-transitioning {
  background: transparent !important;
  box-shadow: none !important;
}

/* Analyser window: flex column so window-body fills remaining height */
#win-analyser { display: flex; flex-direction: column; }
#win-analyser > .window-body { flex: 1; min-height: 0; overflow: hidden; }
/* Icon in title bar: anchor title text left-aligned next to icon */
#win-analyser .title-bar img { margin-right: 3px; }
#win-analyser .title-bar-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Batch window: flex column so window-body fills remaining height */
#win-batch { display: flex; flex-direction: column; }
#win-batch > .window-body { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.field-row { margin-bottom: 6px; }

/* ─── Menu bar ────────────────────────────────────────────────────────────── */
.menu-bar { display: flex; background: silver; padding: 2px 0; border-bottom: 1px solid grey; position: relative; }
.menu-item { position: relative; }
.menu-item > button {
  background: none; border: none; box-shadow: none; min-width: unset;
  padding: 2px 6px; font-size: 11px; cursor: default;
}
.menu-item > button:focus { outline: none; }
.menu-item.open > button {
  background: navy; color: #fff;
  box-shadow: none;
}
/* Dropdown: .dropdown = cutout (overflow:hidden), .dropdown-inner = sliding card */
@keyframes slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  z-index: 100; min-width: 140px;
  overflow: hidden; /* clipping vessel only — no background here */
}
.menu-item.open > .dropdown { display: block; }
.dropdown-inner {
  padding: 2px 0;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.menu-item.open > .dropdown > .dropdown-inner {
  animation: slide-down 100ms steps(8, end) both;
  /* 'both' fill-mode: applies 'from' before first tick → card hidden before animation starts */
}
.menu-item.open > .dropdown > .dropdown-inner.animate-open {
  animation: slide-down 100ms steps(8, end) both;
}
.menu-item.open > .dropdown > .dropdown-inner:not(.animate-open) {
  animation: none;
}
.dropdown-item {
  display: block; width: calc(100% - 4px); margin: 0 2px;
  box-sizing: border-box; text-align: left;
  background: none; border: none; box-shadow: none;
  min-width: unset; padding: 3px 18px;
  font-size: 11px; cursor: default;
}
.dropdown-item:hover, .dropdown-item:active { background: navy; color: #fff; box-shadow: none; }
.dropdown-item:disabled { color: grey; }
.dropdown-separator { border: none; border-top: 1px solid grey; margin: 3px 4px; }
/* Check-type menu items — fixed-width checkmark glyph area on the left */
.dropdown-check { padding: 3px 18px 3px 3px; }
.dropdown-check::before {
  content: '';
  display: inline-block;
  width: 14px;
  text-align: center;
  margin-right: 2px;
}
.dropdown-check[data-checked="true"]::before { content: '\2713'; }

/* Submenu trigger item — arrow indicator on the right */
.has-submenu { padding-right: 22px; cursor: default; -webkit-user-select: none; user-select: none; }
.has-submenu::after {
  content: '\25BA'; /* ► */
  position: absolute;
  right: 6px;
  font-size: 8px;
  line-height: inherit;
  pointer-events: none;
}
/* Submenu flyout — mirrors the dropdown clip+card pattern, but horizontal */
@keyframes slide-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
/* .submenu-panel = overflow:hidden clipping vessel (position:fixed, set by JS) */
.submenu-panel {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 140px;
  overflow: hidden;
}
.submenu-panel.open { display: block; }
/* .submenu-inner = Win98-styled card that slides in from the left */
.submenu-inner {
  padding: 2px 0;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px grey, inset 2px 2px #dfdfdf;
}
.submenu-panel.open .submenu-inner {
  animation: slide-right 100ms steps(8, end) both;
}

/* ─── Context menu (right-click) ──────────────────────────────────────────── */
/* .ctx-clip = overflow:hidden clipping vessel (position:fixed, set by JS)    */
/* .ctx-inner = Win98-styled card, slides from bottom-left → top-right        */
@keyframes ctx-slide-in {
  from { transform: translate(-100%, 100%); }
  to   { transform: translate(0, 0); }
}
.ctx-inner.ctx-animate {
  animation: ctx-slide-in 100ms steps(8, end) both;
}

/* ─── Balloon tooltip (XP-style validation bubble) ────────────────────────── */
/*
 * Pixelated rounded corners via double-clip-path:
 *   .balloon-shell  = clip-path octagon filled black → acts as 1 px border
 *   .balloon-box    = same clip-path on the inner fill → content area
 * CSS variable  --balloon-bg  is set on .balloon[data-type] and inherited by
 * both the box and the tail's fill pseudo-element.
 *
 * Tail: two overlapping border-trick triangles (::before border, ::after fill)
 * Default: tail below shell, pointing DOWN  (balloon above anchor)
 * .balloon--below: tail above shell, pointing UP  (balloon below anchor)
 */

/* Polygon shared by both shell and box — 4 px chamfered corners */
:root {
  --bln-polygon: polygon(
    4px 0%, calc(100% - 4px) 0%,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0% calc(100% - 4px), 0% 4px
  );
}

/* All types share the same neutral cream background — type is shown via the icon */
.balloon { --balloon-bg: #fffef0; }

/* Pixelated icon badge — 16×16 image, source determined per balloon type */
.balloon-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  line-height: 1;
}
/* type-specific rules removed — images carry type differentiation */

.balloon {
  position: fixed;
  z-index: 99999;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 1;
  transition: opacity 150ms linear;
}

/* Balloon box — 1 px solid border + 4 px radius gives pixelated rounded corners
 * without clip-path, so the tail triangle can connect to the border seamlessly.
 * z-index:1 ensures the box paints over the top 1 px of the tail that overlaps
 * behind it, hiding the raw triangle edge and making it look attached. */
.balloon-box {
  background: var(--balloon-bg, #fffef0);
  border: 1px solid #000;
  border-radius: 4px;
  padding: 6px;
  min-width: 160px;
  max-width: 260px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

/* Fade-in only — no movement. Applied to the whole .balloon so box and tail
 * are a single animated unit. */
@keyframes balloon-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.balloon.balloon-animate {
  animation: balloon-fade 120ms steps(4, end) both;
}

/* Header: icon + title [+ close] */
.balloon-hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}
/* .balloon-icon-wrapper is styled above with per-type rules */
.balloon-title {
  flex: 1;
  font-size: 11px;
}
.balloon-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: unset !important;
  padding: 0;
  font-size: 9px;
  line-height: 1;
  cursor: default;
  flex-shrink: 0;
}
.balloon-msg {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.4;
  color: #000;
}

/* ── Tail: single rotated square — two borders only, no base line ─────────── */
/*
 * A 12×12 px square rotated 45° → a diamond. Only two CSS border sides kept
 * so the base (where diamond meets box) has NO border line — box + tail are
 * visually one contiguous shape.
 *
 * Default (pointing DOWN — balloon above anchor):
 *   Visible: border-bottom (lower-right) + border-left (lower-left diamond side)
 *   border-top + border-right: none  (inside/behind the box)
 *   z-index:1 on tail → fill paints over box bottom border → no base line
 *
 * .balloon--below (pointing UP — balloon below anchor):
 *   Visible: border-top + border-right (upper two diamond sides)
 *   border-bottom + border-left: none
 *   z-index flips: box z:1, tail z:0 → box background covers open tail top
 */
.balloon-tail {
  width:  12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 14px;
  margin-top: -7px;           /* pull up: top half overlaps box bottom */
  background: var(--balloon-bg, #fffef0);
  border: 1px solid #000;
  border-top:   none;         /* hide upper diamond sides (inside the box) */
  border-right: none;
  transform: rotate(45deg);
  transform-origin: center;
  position: relative;
  z-index: 1;                 /* above box → fill erases box bottom border at junction */
}

/* Pointing UP — tail before box in DOM, tip toward anchor above */
.balloon--below .balloon-tail {
  margin-top:    0;
  margin-bottom: -7px;        /* pull down: bottom half overlaps box top */
  border: 1px solid #000;
  border-bottom: none;        /* hide lower diamond sides (inside the box) */
  border-left:   none;
  z-index: 0;                 /* below box → box background covers open tail bottom */
}
.balloon--below .balloon-box {
  z-index: 1;                 /* above tail → covers the open side at junction */
}

/* Unit input row: number input + unit select side by side */
.unit-input-row { display: flex; gap: 2px; align-items: center; }
/* 98.css .field-row-stacked *+* adds margin-top to every adjacent sibling, including
   the select next to the input — reset it so they stay on the same baseline */
.unit-input-row * + * { margin-top: 0; }
/* line-height:2 from 98.css inflates input[type=number] beyond its height:22px — reset it */
.unit-input-row input  { flex: 1; min-width: 0; line-height: normal; height: 22px; }
.unit-input-row select { flex: 0 0 auto; width: 70px; height: 22px; }
/* Override 98.css navy focus highlight — Win98 selects don't invert the box itself */
.unit-input-row select:focus        { background-color: #fff; color: #222; }
.unit-input-row select:focus option { background-color: #fff; color: #222; }
/* Pressed appearance while dropdown is open (select retains :focus while open) */
.unit-input-row select:focus {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
              inset -2px -2px #dfdfdf, inset 2px 2px grey;
}

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: stretch;
  background: silver; padding: 2px 0;
  border-bottom: 1px solid grey;
  overflow: hidden;
}
.toolbar-inner {
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0;
  overflow-x: hidden;
  padding: 0 4px;
  scroll-behavior: auto;
}
.toolbar button { min-width: unset; padding: 2px 8px; font-size: 11px; }
.toolbar-separator { width: 1px; height: 22px; background: grey; margin: 0 4px; box-shadow: 1px 0 #fff; flex-shrink: 0; }
.toolbar-scroll-btn {
  flex-shrink: 0;
  min-width: unset !important;
  width: 14px;
  padding: 0;
  font-size: 9px;
  align-self: stretch;
  display: none;
  border: none;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
}
.toolbar-scroll-btn.visible { display: block; }

/* ─── Panel layout ────────────────────────────────────────────────────────── */
#panel-layout {
  --left-width: 260px;
  --bottom-height: 180px;
  display: flex; flex-direction: column;
  height: 100%;
}
#panel-top-row {
  display: flex; flex: 1; min-height: 40px; overflow: hidden;
}
#panel-left {
  flex: 0 1 var(--left-width); min-width: 120px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  background: #fff;
}
#panel-right {
  flex: 1; min-width: 100px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  background: #fff;
}
#panel-bottom {
  flex: 0 0 var(--bottom-height); min-height: 40px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset -1px -1px #fff, inset 1px 1px grey,
              inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  background: #fff;
}
/* Inner scroll area — margin: 2px reserves bevel pixels so content never overlaps shadow */
.panel-content {
  flex: 1; overflow: auto; padding: 6px;
  margin: 2px;
  box-sizing: border-box;
}
#results-scroll {
  flex: 1; overflow: auto;
  margin: 0 2px 2px 2px;
}
/* Splitters */
.splitter-v {
  flex: 0 0 4px; cursor: col-resize;
  background: silver;
  box-shadow: inset -1px 0 #0a0a0a, inset 1px 0 #fff;
  touch-action: none;
}
.splitter-h {
  flex: 0 0 4px; cursor: row-resize;
  background: silver;
  box-shadow: inset 0 -1px #0a0a0a, inset 0 1px #fff;
  touch-action: none;
}
.splitter-v:hover, .splitter-v:active,
.splitter-h:hover, .splitter-h:active { background: #b0b0b0; }
/* Status bar fields */
/* Pin status bar to a fixed height so hover text changes never cause layout shifts */
#win-analyser .status-bar {
  height: 22px;
  min-height: 22px;
  max-height: 22px;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}
#win-analyser .status-bar .status-bar-field {
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
}
#sb-hover { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sb-time  { flex: 0 0 90px; text-align: center; }
#sb-status { flex: 0 0 100px; text-align: center; }

/* Diagram pane container */
#canvas-container { flex: 1; overflow: hidden; margin: 2px; display: flex; }

/* ─── Diagram grid (3 SVG panes) ──────────────────────────────────────────── */
.diagram-grid {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: var(--dg-col1, 200px) 5px 1fr;
  grid-template-rows: var(--dg-row1, 1fr) 5px 1fr;
  overflow: auto;
  min-height: 0;
}
.dpane {
  display: flex; flex-direction: column;
  border: none;
  overflow: hidden;
  min-height: 0; min-width: 0;
}
.dpane-arrangement { grid-column: 1; grid-row: 1; }
.dpane-circuit     { grid-column: 3; grid-row: 1 / span 3; }
.dpane-phasor      { grid-column: 1; grid-row: 3; }
/* Diagram-grid drag splitters */
.dg-splitter-v {
  grid-column: 2; grid-row: 1 / span 3;
  cursor: col-resize;
  background: silver;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  z-index: 1;
  touch-action: none;
  position: relative;
}
.dg-splitter-h {
  grid-column: 1; grid-row: 2;
  cursor: row-resize;
  background: silver;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  z-index: 1;
  touch-action: none;
  position: relative;
}
/* Expand touch hit area to ~44px without changing visual size */
.dg-splitter-v::before {
  content: ''; position: absolute;
  left: -6px; right: -6px; top: 0; bottom: 0;
}
.dg-splitter-h::before {
  content: ''; position: absolute;
  top: -6px; bottom: -6px; left: 0; right: 0;
}
.dpane-title {
  flex: 0 0 auto;
  background: #d4d0c8;
  padding: 0 1px 0 5px;
  font-size: 10px; font-weight: bold;
  border-bottom: 1px solid #808080;
  display: flex; align-items: center; justify-content: space-between;
  height: 18px; min-height: 18px;
}
.dpane-title-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Compact controls in dpane title — reuse 98.css button look but smaller */
.dpane-controls {
  display: flex; align-items: center; gap: 1px;
  flex-shrink: 0; padding: 1px 1px 1px 2px;
}
.dpane-scale-label {
  display: flex; align-items: center;
  font-size: 9px; line-height: 1;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', sans-serif;
  -webkit-user-select: none; user-select: none;
  cursor: pointer; white-space: nowrap;
  padding: 0 3px;
}
.dpane-scale-label input[type="checkbox"] {
  margin: 0 1px 0 0;
  width: 10px; height: 10px;
  cursor: pointer;
}
/* SVG wrapper + bottom overlay bar */
.dpane-svg-wrap {
  position: relative; flex: 1;
  overflow: hidden; min-width: 0; min-height: 0;
}
.dpane-svg-wrap > svg { width: 100%; height: 100%; display: block; }
.dpane-bottom-bar {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  display: flex; align-items: center; gap: 4px;
  pointer-events: none;
}
.dpane-bottom-bar > * { pointer-events: auto; }
.dpane-overlay-info {
  font-size: 9px; line-height: 1.4;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', sans-serif;
  background: rgba(240,240,240,0.90); border: 0.5px solid #808080;
  padding: 1px 3px; white-space: nowrap;
}
.dpane-overlay-scale { margin-left: auto; }
.dpane-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(240,240,240,0.90); border: 0.5px solid #808080;
  padding: 1px 4px 1px 2px;
}
.dpane-checkbox-wrap label {
  font-size: 9px; line-height: 1;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', sans-serif;
  -webkit-user-select: none; user-select: none;
  cursor: pointer; white-space: nowrap;
}
.dpane-btn {
  width: 13px; height: 13px !important;
  padding: 0; margin: 0;
  min-width: unset; min-height: unset;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: silver;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
              inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  border: none; outline: none;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', sans-serif;
  -webkit-user-select: none; user-select: none;
  box-sizing: border-box;
}
.dpane-btn-text {
  width: auto !important;
  padding: 0 4px;
  font-size: 10px;
}
.dpane-btn:active,
.dpane-btn[data-active="true"] {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a,
              inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}
/* Maximised pane fills the whole grid */
.dpane--maximized {
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  z-index: 2;
  border: none;
}
.diagram-grid:has(.dpane--maximized) .dpane:not(.dpane--maximized) { display: none; }
.diagram-grid:has(.dpane--maximized) .dg-splitter-v,
.diagram-grid:has(.dpane--maximized) .dg-splitter-h { display: none; }
.dpane-body {
  flex: 1; overflow: hidden;
  display: flex;
  min-height: 0; min-width: 0;
  padding: 4px; box-sizing: border-box;
}
.dpane-body > svg { flex: 1; min-width: 0; min-height: 0; }
/* Results panel heading */
#results-heading {
  flex: 0 0 auto; margin: 2px 2px 0 2px; padding: 1px 6px;
  font-size: 11px; font-weight: bold; border-bottom: 1px solid grey;
}

/* ─── Excel 97 results grid ───────────────────────────────────────────────── */
#results-grid { display: block; min-width: 100%; font-size: 11px; font-family: inherit; }
.result-row {
  display: flex; border-bottom: 1px solid #d4d0c8;
}
.result-row:first-child { border-top: 1px solid #d4d0c8; }
.result-label {
  flex: 0 0 50%; padding: 2px 4px;
  background: #d4d0c8;
  border-right: 1px solid #808080;
  box-shadow: inset -1px 0 #808080, inset 1px 0 #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.result-value {
  flex: 1; padding: 2px 4px; background: #fff;
  font-family: monospace; font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#eg-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11px; font-family: inherit; }
#eg-table thead { position: sticky; top: 0; z-index: 2; }
.eg-corner, .eg-col-hdr {
  background: #d4d0c8; border: 1px solid #808080; border-top: none; border-left: none;
  text-align: center; padding: 1px 4px;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
  -webkit-user-select: none; user-select: none; white-space: nowrap; overflow: hidden;
}
.eg-corner { position: sticky; left: 0; z-index: 3; min-width: 30px; border-left: 1px solid #808080; }
.eg-col-hdr { position: relative; }
#eg-table thead tr th:first-child { border-top: 1px solid #808080; }
#eg-table thead tr th { border-top: 1px solid #808080; }
.eg-row-hdr {
  background: #d4d0c8; border: 1px solid #808080; border-top: none; border-left: 1px solid #808080;
  text-align: center; padding: 1px 4px;
  box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
  position: sticky; left: 0; z-index: 1;
  -webkit-user-select: none; user-select: none; white-space: nowrap;
}
#eg-table tbody tr:first-child .eg-row-hdr,
#eg-table tbody tr:first-child td { border-top: 1px solid #d0d0d0; }
#eg-table tbody td { border: 1px solid #d0d0d0; border-top: none; border-left: none; padding: 1px 4px; background: #fff; white-space: nowrap; }
#eg-table tbody td:first-child + td { border-left: 1px solid #d0d0d0; }
.eg-col-resize {
  position: absolute; right: -2px; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 1;
}

/* ─── Code Viewer window ──────────────────────────────────────────────────── */
#win-code-viewer { display: flex; flex-direction: column; }
#win-code-viewer > .window-body {
  flex: 1; min-height: 0; overflow: hidden;
  background: #0c0c0c; /* cmd black */
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
#code-viewer-pre {
  flex: 1; overflow: auto;
  margin: 0; padding: 8px 10px;
  background: transparent;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px; line-height: 1.5;
  color: #cccccc;
  tab-size: 2; -moz-tab-size: 2;
  white-space: pre;
  box-sizing: border-box;
}
/* Syntax highlight token classes */
.cv-kw   { color: #569cd6; }   /* keywords: const, function, return … */
.cv-fn   { color: #dcdcaa; }   /* function names */
.cv-str  { color: #ce9178; }   /* strings */
.cv-num  { color: #b5cea8; }   /* numbers */
.cv-cmt  { color: #6a9955; }   /* comments */
.cv-op   { color: #d4d4d4; }   /* operators / punctuation */
.cv-cls  { color: #4ec9b0; }   /* class names */
.cv-prop { color: #9cdcfe; }   /* this.xxx, identifiers after . */

/* Code viewer: line-number gutter */
#code-viewer-pre {
  display: flex;
  gap: 0;
  padding: 0;          /* clear old padding — children own their own padding */
  white-space: normal; /* reset; children set white-space: pre themselves */
  align-items: flex-start; /* items take natural content height so overflow:auto scrolls correctly */
}
#code-viewer-linenos {
  flex: 0 0 auto;
  padding: 8px 6px 8px 10px;
  text-align: right;
  color: #6a9955;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid #333;
  margin-right: 10px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px; line-height: 1.5;
  white-space: pre;
  background: transparent;
}
#code-viewer-code {
  flex: 1;
  padding: 8px 10px 8px 0;
  white-space: pre;
}

/* ─── Calc Viewer window ──────────────────────────────────────────────────── */
#win-calc-viewer { display: flex; flex-direction: column; }
#win-calc-viewer > .window-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
#calc-viewer-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px;
  background: silver;
  border-bottom: 1px solid grey;
}
#calc-viewer-toolbar button { min-width: unset; padding: 2px 10px; font-size: 11px; }
#calc-viewer-scroll {
  flex: 1; overflow: auto;
  padding: 12px 16px;
  background: #fff;
  color: #000;
  box-sizing: border-box;
}
#calc-viewer-content {
  font-family: 'Pixelated MS Sans Serif', 'Arial', sans-serif;
  font-size: 12px; line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
}
#calc-viewer-content h2 {
  font-size: 16px; border-bottom: 1px solid #aaa;
  padding-bottom: 4px; margin-top: 0;
}
#calc-viewer-content h3 { font-size: 14px; margin-top: 1.4em; }
#calc-viewer-content h4 { font-size: 12px; margin-top: 1em; }
#calc-viewer-content p  { margin: 0.5em 0; }
#calc-viewer-content .katex-display {
  overflow: visible;   /* let #calc-viewer-scroll handle any horizontal overflow */
  margin: 0.8em 0;
  padding-bottom: 0.2em; /* prevent descenders being clipped by a scrollbar */
}

/* ─── Panel headers (pop-out buttons) ────────────────────────────────────── */
/* Shared header bar on the left and canvas panels */
.panel-header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: #d4d0c8;
  padding: 0 2px 0 6px;
  font-size: 11px; font-weight: bold;
  border-bottom: 1px solid #808080;
  height: 18px; min-height: 18px;
  -webkit-user-select: none; user-select: none;
}
.panel-header-title {
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* Results heading gets the same flex layout for the pop-out button */
#results-heading {
  display: flex; align-items: center; justify-content: space-between;
}
/* Pop-out button — uses the same dpane-btn size/style from the diagram panes */
.panel-popout-btn { flex-shrink: 0; }

/* Hide the in-panel header bar when the panel is living in its own window */
.panel-popped-out .panel-header,
.panel-popped-out #results-heading { display: none !important; }

/* ─── Pop-out window chrome ───────────────────────────────────────────────── */
/* The dynamically-created window that hosts a popped-out panel */
.panel-popout-window {
  display: flex; flex-direction: column;
}
.panel-popout-window > .panel-popout-body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: 0 !important;      /* override 98.css .window-body padding */
  display: flex; flex-direction: column;
}
/* When a panel is living inside a pop-out window it must fill the body */
.panel-popped-out {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important; /* window provides the border — skip inner bevel */
}

/* ─── Help window ─────────────────────────────────────────────────────────── */
#win-help { display: flex; flex-direction: column; }
#win-help > .window-body {
  flex: 1; min-height: 0;
  padding: 0;
  display: flex; flex-direction: column;
}

/* Outer body wrapper (toolbar + split panes) */
.help-body { display: flex; flex-direction: column; height: 100%; }

/* Toolbar — override 98.css .toolbar display:block */
.help-toolbar.toolbar {
  display: flex !important;
  align-items: center;
  padding: 2px 4px;
  gap: 1px;
  flex-shrink: 0;
}
.help-toolbar button { min-width: 52px; }
.help-toolbar-sep {
  width: 0;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  height: 22px;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Two-pane container */
.help-main { display: flex; flex: 1; min-height: 0; }

/* Left navigation pane */
.help-nav {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #808080;
  overflow: hidden;
}
.help-nav--hidden { display: none !important; }

/* Tab list (98.css handles visual) */
.help-tabs { flex-shrink: 0; margin-bottom: 0 !important; }

/* Tab panels: hidden by default; active panel fills remaining height */
.help-tab-panel {
  display: none;
  flex: 1; min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.help-tab-panel.is-active { display: flex; }

/* Tree view inside a nav panel — fills height and scrolls */
.help-tab-panel .help-tree { flex: 1; min-height: 0; overflow-y: auto; margin: 0; }

/* Search panel internals */
.help-search-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
}
.help-search-bar input { flex: 1; }
.help-search-bar button { min-width: 52px; }
.help-search-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0 4px 4px; }

/* Right content area */
.help-content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: 12px 16px;
  font-size: 11px;
  line-height: 1.5;
  background: #fff;
}
.help-content h3 { margin: 0 0 8px; font-size: 13px; }
.help-content h4 { margin: 10px 0 4px; font-size: 11px; }
.help-content p,
.help-content ul,
.help-content ol  { margin: 0 0 8px; }
.help-content ul,
.help-content ol  { padding-left: 20px; }
.help-content li  { margin-bottom: 2px; }
.help-content a   { color: #00f; }
.help-content a:visited { color: #800080; }
.help-content table { margin-bottom: 8px; font-size: 11px; }
.help-content code { font-family: 'Courier New', monospace; }