styles.css

/* DSPF·RAD — Windows 98 chrome wrapping a dark IBM 5250 terminal canvas
   and a dark CodeMirror DSPF source editor.  Loaded AFTER 98.css so we
   can override what doesn't fit the app's needs (compact toolbar buttons,
   the dark embedded terminal, the dark editor, the custom palette item
   rows, etc.).

   Two color worlds coexist here:
     1. Win98 silver/gray chrome — toolbar, panels, status bar, inspector.
        Uses 98.css defaults: #c0c0c0 face, #fff highlight, #808080 shadow,
        navy/blue gradient title bars, bitmap MS Sans Serif font.
     2. IBM 5250 phosphor green — the canvas + the source editor.  These
        sit inside Win98 windows but their content is dark + green, like
        an embedded terminal emulator (Client Access / PCOMM era).        */

:root {
    /* Height reserved for the bottom source panel + its handle.  JS updates
       this when the user drags the resize handle, and #canvasFrame's calc()
       below reads it to keep the canvas centred without overlap. */
    --source-panel-h: 260px;
    --source-handle-h: 6px;
    /* Outer title bar + menubar + record toolbar + statusbar + paddings.
       The canvas-frame's height calc subtracts this so the grid never
       overlaps the chrome.  Each chrome row is ~22-28px so the budget
       grew with the extra toolbar row beneath the menubar. */
    --chrome-h: 140px;

    /* IBM 5250 phosphor palette — used by the canvas + the embedded
       CodeMirror.  Preserved as authentic terminal greens. */
    --term-bg:  #050a05;
    --term-grn: #33ff33;
    --term-dim: #1f3a1f;

    /* Win98 chrome palette (matches 98.css internals so manual borders
       drawn in this file blend with 98.css-styled siblings).  The names
       describe the literal color in light mode; dark mode remaps them
       (see [data-theme="dark"] at the bottom of this file). */
    --w98-face:    #c0c0c0;
    --w98-light:   #dfdfdf;
    --w98-white:   #ffffff;
    --w98-shadow:  #808080;
    --w98-dark:    #0a0a0a;
    --w98-navy:    #000080;
    --w98-teal:    #008080;

    /* Semantic variables that diverge from --w98-* in dark mode.
         --bg-input  : input / listbox surface (was --w98-white).  In dark
                       this is the deepest field bg (#1e1e1e) while
                       --w98-white becomes a subtle light border (#3c3c3c).
         --fg-accent : navy-colored *text* (palette group headers, the
                       pi-icon glyph, insp-kw input field name).  In dark
                       this is a bright blue (#4a9aff); --w98-navy stays
                       a darker blue used as selection background.
         --bg-tooltip / --accent-hover-bg / --accent-hover-border :
                       hover and tooltip surfaces that don't fit any
                       --w98-* slot. */
    --bg-input:            #ffffff;
    --fg-accent:           #000080;
    --bg-tooltip:          #ffffe1;
    --accent-hover-bg:     #d8e4ff;
    --accent-hover-border: #6a90c0;
    --fg-text:             #000000;  /* default body text on chrome surfaces */
    --fg-on-accent:        #ffffff;  /* text on navy/selected bg (stays white in both themes) */
    --fg-muted:            #404040;
    --fg-disabled:         #808080;
    --status-ok:           #006000;
    --status-warn:         #806000;
    --status-error:        #800000;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--w98-teal);        /* classic Win98 desktop teal */
    color: var(--fg-text);
}

body {
    font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
}

/* ============================================================
   Outer app window — fills the viewport.  The .window class from
   98.css already gives us the 3D raised border + 3px padding.  We
   just add the flex column layout so children stack vertically.
   ============================================================ */
.app-window {
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.app-window > .title-bar { flex: 0 0 auto; }

/* Phosphor-green "DSPF" mark inside the title bar — a tiny terminal
   peeking through the chrome.  Same colors as the embedded canvas so
   the two read as siblings. */
.app-brand-mark {
    display: inline-block;
    padding: 0 4px;
    margin-right: 2px;
    background: var(--term-bg);
    color: var(--term-grn);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-weight: bold;
    letter-spacing: 1px;
    border: 1px solid var(--term-dim);
}

.app-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--w98-face);
}

/* ============================================================
   Menubar — classic Win98 File / Record / View / Export / Help.
   The interactive controls (Open select, Record select, Overlay
   toggle, RPGLE/COBOL/JSON exports) all live in the menus now.
   Their original buttons + selects are kept in #legacyControls
   (display:none via the hidden attribute) so main.js's existing
   handlers stay wired — the menubar controller synthesises clicks
   and `change` events on them.
   ============================================================ */
#menubar {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 1px 2px;
    list-style: none;
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-shadow);
    box-shadow: 0 1px 0 var(--w98-white);
    font-size: 11px;
    position: relative;
    z-index: 100;
}
#menubar > li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
#menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- Top-level menu titles (File, Record, View, …) ---- */
.menu-title {
    background: transparent;
    color: var(--fg-text);
    border: 1px solid transparent;
    padding: 2px 9px 3px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    height: 22px;
    line-height: 1;
    min-width: 0;
    box-shadow: none;
    border-radius: 0;
}
.menu-title:hover,
#menubar > li.open > .menu-title {
    background: var(--w98-navy);
    color: var(--fg-on-accent);
}
/* Underlined access-key hint (visual only — no Alt+key binding). */
.menu-title u,
.menu-item u { text-decoration: underline; }

/* ---- Dropdown panel ---- */
.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--w98-face);
    border: 1px solid var(--w98-dark);
    box-shadow:
        inset  1px  1px 0 var(--w98-white),
        inset -1px -1px 0 var(--w98-shadow),
        2px   2px   4px rgba(0, 0, 0, 0.3);
    padding: 2px;
    margin: 0;
    list-style: none;
    z-index: 1000;
}
#menubar > li.open > .menu-dropdown { display: block; }

.menu-dropdown li { display: block; }

/* ---- Menu item (row inside a dropdown) ----
   Big left padding leaves room for the check / radio glyph; right
   padding leaves room for the submenu arrow / accelerator. */
.menu-item {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    background: transparent;
    color: var(--fg-text);
    border: 1px solid transparent;
    padding: 3px 24px 3px 28px;
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    box-shadow: none;
    min-width: 0;
    height: auto;
    border-radius: 0;
    white-space: nowrap;
}
.menu-item:hover {
    background: var(--w98-navy);
    color: var(--fg-on-accent);
}
.menu-item .menu-label { flex: 1; }
.menu-item .menu-accel {
    margin-left: 24px;
    color: var(--fg-muted);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
}
.menu-item:hover .menu-accel { color: #c0c0c0; }

/* Checkmark for boolean toggles (Overlay, Hide cond). */
.menu-item.menu-check[data-checked="true"]::before {
    content: '✓';
    position: absolute;
    left: 9px;
    font-weight: bold;
    color: inherit;
}
/* Filled bullet for radio-style submenus (Model 24×80 / 27×132,
   active record in the Record > Active submenu). */
.menu-item.menu-radio[data-radio-on="true"]::before,
.menu-item[data-radio-on="true"]::before {
    content: '●';
    position: absolute;
    left: 10px;
    color: inherit;
}

.menu-separator {
    height: 0;
    border-top:    1px solid var(--w98-shadow);
    border-bottom: 1px solid var(--w98-white);
    margin: 3px 1px;
    padding: 0;
    list-style: none;
}

/* Disabled menu items get the classic Win98 "etched gray" look — gray
   text with a 1px white drop shadow that creates the carved-out feel.
   Hover override prevents the blue highlight on disabled items.  The JS
   dispatcher in main.js also bails early on .disabled items so the menu
   doesn't close when one is clicked (matches Win98). */
.menu-item.disabled,
.menu-item.disabled .menu-label,
.menu-item.disabled .menu-accel {
    color: var(--fg-disabled);
    text-shadow: 1px 1px 0 var(--w98-white);
    cursor: default;
}
.menu-item.disabled:hover {
    background: transparent;
    color: var(--fg-disabled);
}
.menu-item.disabled:hover .menu-accel { color: var(--fg-disabled); }

/* ============================================================
   Main toolbar — visible row below the menubar grouping the
   controls the user reaches for most often:
     [ Model ▼ ] | [ Record ▼  +R  +SFL  ⇄  −R ] | [Overlay] [Hide cond]
   Two-row Win98 chrome (menubar + button toolbar) matches VB6
   and Borland tools of the era.
   ============================================================ */
#toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-shadow);
    box-shadow: 0 1px 0 var(--w98-white);
    font-size: 11px;
}
#toolbar .lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    color: var(--fg-text);
    font-size: 11px;
}
#toolbar select {
    height: 22px;
    min-width: 140px;
    font-size: 11px;
}
#toolbar button {
    min-width: 0;
    padding: 2px 8px;
    height: 22px;
    font-size: 11px;
}
/* Classic Win98 vertical divider — two pixel-wide column with one
   dark and one light pixel, simulating an etched groove between
   toolbar groups. */
#toolbar .sep {
    width: 0;
    border-left:  1px solid var(--w98-shadow);
    border-right: 1px solid var(--w98-white);
    height: 18px;
    margin: 0 4px;
    align-self: center;
}
/* Pressed-in state for Overlay / Hide cond toggles.  Inverts the
   3D border direction (raised → sunken) and bumps padding 1px so
   the label visually "sinks in" — exactly how Win98 toolbar latches
   looked on Office 97 / VB6. */
#toolbar button.toggle.on {
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
    background: var(--w98-face);
    padding-top: 3px;
    padding-bottom: 1px;
}

/* ---- Submenu (Record > Active …, View > Model …) ----
   CSS-only fly-out on hover.  Works because the submenu nests inside
   its trigger <li>, so the trigger's :hover persists while the cursor
   is inside the submenu (descendant relationship). */
.menu-item .menu-arrow {
    position: absolute;
    right: 8px;
    font-size: 9px;
}
.has-submenu > .menu-submenu {
    top: -3px;
    left: 100%;
}
.has-submenu:hover > .menu-submenu,
#menubar > li.open .has-submenu:hover > .menu-submenu {
    display: block;
}

/* ---- Right-side menubar info: hint chip + ephemeral status pill ---- */
.menubar-spacer {
    flex: 1;
    list-style: none;
}
.menubar-info {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 4px;
    height: 100%;
}
.hint {
    font-size: 11px;
    color: var(--fg-muted);
    padding: 2px 6px;
    background: var(--w98-face);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    cursor: help;
    font-family: "SF Mono", Menlo, Consolas, monospace;
}
/* Ephemeral status — sunken field, monospace, color-coded.  Same
   look as before but at the right of the menubar instead of toolbar. */
.toolbar-status {
    padding: 2px 8px;
    font-size: 11px;
    background: var(--bg-input);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-light) var(--w98-light) var(--w98-shadow);
    min-width: 100px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
}
.toolbar-status.error { color: var(--status-error); font-weight: bold; }
.toolbar-status.ok    { color: var(--status-ok); }

/* ============================================================
   Workspace 3-col layout
   ============================================================ */
.workspace {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    padding: 3px;
    gap: 3px;
    background: var(--w98-face);
}

/* Palette + Inspector are full Win98 sub-windows.  They keep the .window
   class from 98.css (gets the raised border) and we just give them a
   flex column layout + fixed widths. */
.panel.palette,
.panel.inspector {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
}
.panel.palette   { width: 240px; flex: 0 0 240px; }
.panel.inspector { width: 300px; flex: 0 0 300px; }
.panel > .title-bar { flex: 0 0 auto; }

/* The interior of each panel — a sunken "well" inside the raised
   window.  Looks like the standard Win98 "split" subwindow shell. */
.panel .panel-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 5px;
    margin: 2px;
    background: var(--w98-face);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
}

/* ============================================================
   Palette — each item is a list-row in the Win98 listbox style
   (white bg, blue selected, dotted focus ring on armed).
   ============================================================ */
.palette-group + .palette-group { margin-top: 6px; }
.palette-group h4 {
    margin: 4px 2px 4px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: bold;
    color: var(--fg-accent);
}
.palette-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    background: var(--bg-input);
    border: 1px solid var(--w98-face);   /* invisible until hover/armed */
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    color: var(--fg-text);
}
.palette-item + .palette-item { margin-top: 1px; }
.palette-item:hover {
    background: var(--accent-hover-bg);
    border-color: var(--accent-hover-border);
}
.palette-item:active { cursor: grabbing; }
.palette-item.palette-armed {
    background: var(--w98-navy);
    color: var(--fg-on-accent);
    border: 1px dotted var(--fg-on-accent);
    outline: 1px solid var(--w98-navy);
    outline-offset: -2px;
}
.palette-item.palette-armed .pi-icon,
.palette-item.palette-armed .pi-label { color: var(--fg-on-accent); }
.palette-item.palette-armed::after {
    content: '◉ click grid';
    margin-left: auto;
    color: var(--fg-on-accent);
    font-family: "SF Mono", Menlo, monospace;
    font-size: 10px;
}
.pi-icon {
    width: 18px;
    text-align: center;
    color: var(--fg-accent);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-weight: bold;
    flex-shrink: 0;
}
.pi-label { flex: 1; color: var(--fg-text); }
.palette-hint {
    margin: 8px 2px 2px;
    padding: 4px;
    color: var(--fg-muted);
    font-size: 10px;
    line-height: 1.4;
    background: var(--bg-tooltip);
    border: 1px solid var(--w98-shadow);
}
.palette-hint em { color: var(--fg-accent); font-style: normal; font-weight: bold; }

/* ============================================================
   Canvas — dark 5250 terminal embedded in a deep Win98 sunken well.
   Keeps the original aspect-ratio + height calc so the grid scales
   with viewport / source-panel size.
   ============================================================ */
.canvas-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
    background: var(--w98-face);
}
.canvas-frame {
    position: relative;
    background: var(--term-bg);
    /* Win98 deep-sunken bezel: 2px outer (dark/white) + 1px inner inset
       (darker/lighter) — same recipe as 98.css's .sunken-panel but with
       a touch more depth because the dark canvas behind it makes the
       bezel read crisply. */
    border: 2px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
    padding: 4px;
    aspect-ratio: 5 / 3;
    width: min(100%, calc((100vh - var(--chrome-h) - var(--source-panel-h) - var(--source-handle-h)) * 5 / 3));
    max-height: calc(100vh - var(--chrome-h) - var(--source-panel-h) - var(--source-handle-h));
}
.canvas-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: crosshair;
    background: var(--term-bg);
}
.canvas-frame canvas.canvas-armed {
    cursor: copy;
    box-shadow: inset 0 0 0 2px var(--term-grn);
}
body.wide-mode .canvas-frame {
    aspect-ratio: 11 / 5;
    width: min(100%, calc((100vh - var(--chrome-h) - var(--source-panel-h) - var(--source-handle-h)) * 11 / 5));
}
/* Bottom-left helper text drawn over the dark canvas — keep phosphor
   dim-green so it reads as terminal scrollback. */
.canvas-help {
    position: absolute;
    bottom: 16px;
    left: 20px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: #2a4a2a;
    pointer-events: none;
    transition: opacity 0.3s;
}
.canvas-help.hidden { opacity: 0; }

/* ============================================================
   Inspector — keeps Inspector.js's existing class names so no JS
   changes are needed.  Each .insp-section becomes a Win98 group
   box with a "cut-into-border" h4 legend.
   ============================================================ */
.inspector .empty {
    color: var(--fg-muted);
    font-size: 11px;
    text-align: center;
    padding: 16px 8px;
    font-style: italic;
}

/* ---- Tabs (Item / Record) ----
   Authentic Win98 tab strip: tabs sit above a content area with a
   1px shadow border; the active tab pokes UP one pixel and its
   bottom border merges with the content area so they read as
   continuous (the standard property-sheet pattern). */
.insp-tabs {
    display: flex;
    gap: 0;
    padding-left: 4px;
    margin: 2px 0 0;
    border-bottom: 1px solid var(--w98-shadow);
    position: relative;
    z-index: 1;
}
.insp-tab {
    background: var(--w98-face);
    color: var(--fg-text);
    border: 1px solid;
    border-color: var(--w98-white) var(--w98-shadow) var(--w98-shadow) var(--w98-white);
    border-bottom: none;
    padding: 3px 14px 2px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    margin-right: 2px;
    margin-bottom: -1px;
    border-radius: 0;
    height: auto;
    min-width: 0;
}
.insp-tab:hover { color: var(--fg-text); }
.insp-tab.active {
    background: var(--w98-face);
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 4px;
    margin-top: -2px;
    margin-left: -2px;
    margin-right: 0;
    z-index: 2;
    border-bottom: 1px solid var(--w98-face);
}
.insp-pane { padding: 6px 2px 2px; }

/* ---- Group boxes (each .insp-section is a Win98 fieldset look) ---- */
.insp-section {
    margin-bottom: 10px;
    padding: 10px 6px 6px;
    background: var(--w98-face);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-white),
        inset -1px -1px 0 var(--w98-shadow);
    position: relative;
}
.insp-section:last-child { margin-bottom: 4px; }
.insp-section h4 {
    position: absolute;
    top: -7px;
    left: 8px;
    padding: 0 4px;
    margin: 0;
    background: var(--w98-face);
    font-size: 11px;
    font-weight: normal;
    color: var(--fg-text);
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Label + control rows ---- */
.insp-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 11px;
}
.insp-row > label {
    color: var(--fg-text);
    font-size: 11px;
    font-family: inherit;
}
.insp-row input,
.insp-row select,
.insp-row textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 11px;
}
.insp-row textarea {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    resize: vertical;
    min-height: 50px;
}

/* ---- Chip toggles (DSPATR flags, SFLEND modes, etc.) ----
   Small Win98 buttons with a pressed-in state when on.  98.css's
   default button min-width would explode the row, so we override. */
.insp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 0;
}
.insp-chip {
    display: inline-block;
    background: var(--w98-face);
    color: var(--fg-text);
    border: 1px solid;
    border-color: var(--w98-white) var(--w98-shadow) var(--w98-shadow) var(--w98-white);
    box-shadow:
        inset  1px  1px 0 var(--w98-light),
        inset -1px -1px 0 var(--w98-dark);
    padding: 2px 7px 1px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    min-width: 24px;
    text-align: center;
}
.insp-chip:hover { color: var(--fg-text); }
.insp-chip.on {
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
    padding: 3px 6px 0 8px;
    background: var(--w98-face);
    font-weight: bold;
}

/* ---- Action buttons (Delete, etc.) ---- */
.insp-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.insp-actions button {
    flex: 1;
    min-width: 0;
    height: 24px;
    font-size: 11px;
}
.insp-actions button.danger {
    color: var(--status-error);
    font-weight: bold;
}

/* ---- Keyword editor cards ---- */
.insp-kw {
    background: var(--w98-face);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    padding: 4px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.insp-kw-head {
    display: flex;
    gap: 3px;
}
.insp-kw-head input {
    flex: 1;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--fg-accent);
    font-size: 11px;
}
.insp-kw-rm {
    width: 22px;
    height: 22px;
    min-width: 0;
    padding: 0;
    color: var(--status-error);
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}
.insp-kw input,
.insp-kw select,
.insp-kw .insp-ind {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
}
.insp-kw .insp-kw-ind { color: var(--status-warn); }

.insp-add-kw {
    margin-top: 4px;
    width: 100%;
    height: 22px;
    font-size: 11px;
    min-width: 0;
    /* Faint dashed cue that this is a "do-add" affordance, distinct
       from the surrounding solid buttons. */
    border-style: dashed;
}

/* ---- Items list (in Record tab) — Win98 listbox look ---- */
.insp-itemlist {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 280px;
    overflow: auto;
    padding: 2px;
    background: var(--bg-input);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-light) var(--w98-light) var(--w98-shadow);
}
.insp-itemrow {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
    background: var(--bg-input);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--fg-text);
    text-align: left;
    border-radius: 0;
    min-width: 0;
    height: auto;
}
.insp-itemrow:hover {
    background: var(--accent-hover-bg);
}
.insp-itemrow:focus {
    background: var(--w98-navy);
    color: var(--fg-on-accent);
    outline: 1px dotted var(--fg-on-accent);
    outline-offset: -3px;
}
.insp-itemrow:focus .insp-itemrow-label,
.insp-itemrow:focus .insp-itemrow-pos { color: inherit; }
.insp-itemrow-tag {
    width: 16px;
    text-align: center;
    font-weight: bold;
    background: transparent;
}
.insp-itemrow-tag.tag-constant { color: #0000c0; }
.insp-itemrow-tag.tag-sysvalue { color: #008080; }
.insp-itemrow-tag.tag-field    { color: #006000; }
.insp-itemrow-tag.tag-hidden   { color: #a000a0; }
.insp-itemrow-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insp-itemrow-pos { color: var(--fg-muted); font-size: 10px; }

/* Indicators input outside keyword cards */
.insp-ind {
    color: var(--status-warn);
    width: 100%;
    box-sizing: border-box;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}

/* Full-width select inside an .insp-section (no label) */
.insp-raw-select {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
}

/* ============================================================
   Source panel (bottom) + splitter
   ============================================================ */

/* Classic Win98 splitter — gray bar with a dotted "gripper" in the
   middle.  Cursor hint is row-resize.  JS toggles .dragging while
   the pointer drag is active. */
.resize-handle {
    flex: 0 0 var(--source-handle-h);
    background: var(--w98-face);
    cursor: row-resize;
    border-top:    1px solid var(--w98-white);
    border-bottom: 1px solid var(--w98-shadow);
    user-select: none;
    position: relative;
    margin: 0 3px;
}
.resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 2px;
    background-image: radial-gradient(circle, var(--fg-muted) 1px, transparent 1.5px);
    background-size: 4px 2px;
    background-repeat: repeat-x;
}
.resize-handle:hover { background: #d0d0d0; }
.resize-handle.dragging { background: #a0a0a0; }
body.source-collapsed .resize-handle { display: none; }

/* Source panel is itself a Win98 sub-window — title bar at top,
   gray sub-toolbar (col toggle, sync LED, collapse arrow), then
   the dark CodeMirror surface in a sunken well. */
.source-panel {
    flex: 0 0 var(--source-panel-h);
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0 3px 3px;
    overflow: hidden;
}
.source-panel > .title-bar { flex: 0 0 auto; }
/* Collapsed = "window-shade" pattern: title-bar stays visible so the
   ▴ button is always clickable to re-expand; only the toolbar + editor
   collapse away.  main.js shrinks --source-panel-h to ~24px (title-bar
   height) so the canvas's height calc gives back the freed pixels. */
body.source-collapsed .source-toolbar,
body.source-collapsed .source-editor { display: none; }

/* Sub-toolbar between the source panel's title bar and the editor. */
.source-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: var(--w98-face);
    border-bottom: 1px solid var(--w98-shadow);
    box-shadow: 0 1px 0 var(--w98-white);
    flex: 0 0 auto;
    margin: 2px 2px 0;
}
.source-toolbar-spacer { flex: 1; }

/* Reusable chip-style button (┃ col toggle). */
.source-chip {
    background: var(--w98-face);
    color: var(--fg-text);
    border: 1px solid;
    border-color: var(--w98-white) var(--w98-shadow) var(--w98-shadow) var(--w98-white);
    box-shadow:
        inset  1px  1px 0 var(--w98-light),
        inset -1px -1px 0 var(--w98-dark);
    padding: 1px 8px;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    cursor: pointer;
    min-width: 0;
    height: 22px;
    border-radius: 0;
}
.source-chip:hover { color: var(--fg-text); }
.source-chip.on {
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
    background: var(--w98-face);
    font-weight: bold;
}
/* Source-panel collapse arrow inside its title-bar-controls.  We override
   98.css's default title-bar-controls button (which is 16x14 with a
   background-image icon) to render our text ▾/▴ instead.  The button
   takes no aria-label so 98.css's [aria-label="Minimize"]::before
   background-image rule won't apply — the empty button face is ours to
   paint with text. */
.title-bar-controls .source-collapse {
    width: auto;
    min-width: 24px;
    height: 16px;
    padding: 0 4px;
    background: var(--w98-face);
    background-image: none;
    color: var(--fg-text);
    border: 1px solid;
    border-color: var(--w98-white) var(--w98-shadow) var(--w98-shadow) var(--w98-white);
    box-shadow:
        inset  1px  1px 0 var(--w98-light),
        inset -1px -1px 0 var(--w98-dark);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    border-radius: 0;
    margin-left: 2px;
}
.title-bar-controls .source-collapse:active {
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
}

/* ---- Sync status LED ----
   Tiny "indicator light" mounted in a sunken pill.  The dot is a
   CSS circle (fixed width — no emoji glyph drift) inside a Win98
   sunken field.  Pulses while debounced parse is in flight. */
.source-status {
    padding: 1px 9px 1px 7px;
    background: var(--w98-face);
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 50px;
    height: 22px;
    box-sizing: border-box;
}
.source-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0 2px currentColor,
        inset 1px 1px 0 rgba(255,255,255,0.45);
    flex-shrink: 0;
}
.source-status.ok    { color: var(--status-ok); }
.source-status.warn  { color: var(--status-warn); }
.source-status.error { color: var(--status-error); font-weight: bold; }
.source-status.warn::before {
    /* Subtle pulse during the parse-debounce window so the user gets a
       beat of "still working" feedback. */
    animation: source-status-pulse 0.9s ease-in-out infinite alternate;
}
@keyframes source-status-pulse {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}

/* ---- Source editor well ---- */
.source-editor {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--term-bg);
    margin: 2px;
    border: 1px solid;
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
}

/* ============================================================
   CodeMirror 6 dark theme — preserved inside the Win98 sunken well.
   The terminal aesthetic for DSPF source matches the canvas + the
   .app-brand-mark in the title bar.
   ============================================================ */
.cm-editor {
    height: 100%;
    background: var(--term-bg);
    color: #d6d6d6;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}
.cm-editor.cm-focused { outline: none; }
.cm-editor .cm-scroller { font-family: inherit; }
.cm-editor .cm-gutters {
    background: #0a0e0a;
    color: #2a4a2a;
    border-right: 1px solid #1c1c1c;
    user-select: none;
}
.cm-editor .cm-activeLineGutter {
    background: #0e1a0e;
    color: var(--term-grn);
}
.cm-editor .cm-activeLine { background: rgba(15, 30, 15, 0.6); }
.cm-editor .cm-cursor,
.cm-editor .cm-dropCursor { border-left-color: var(--term-grn); }
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground,
.cm-editor ::selection {
    background: rgba(74, 154, 255, 0.25) !important;
}
.cm-editor .cm-tooltip {
    background: #0e1a0e;
    border: 1px solid #2a4a2a;
    color: #ccc;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}
.cm-editor .cm-tooltip-autocomplete > ul > li[aria-selected] {
    background: #1f3320;
    color: var(--term-grn);
}
.cm-editor .cm-tooltip-autocomplete > ul > li {
    font-family: "SF Mono", Menlo, Consolas, monospace;
}
.cm-editor .cm-completionLabel { color: #ccc; }
.cm-editor .cm-completionDetail { color: #6cf; font-style: normal; margin-left: 8px; }

/* Per-item highlight ring when canvas selection is mapped to a source
   line range.  Applied via a CodeMirror Decoration line mark from JS. */
.cm-editor .cm-line.dspf-item-highlight {
    background: rgba(74, 154, 255, 0.08);
    box-shadow: inset 2px 0 0 #4a9aff;
}

/* Vertical bar tracking the cursor's column.  See SourceEditor.js — the
   `.show` class is toggled on THIS element (not on .cm-editor) because
   CM6 rewrites .cm-editor's className whenever editorAttributes recompute
   (focus/blur etc.), which would silently strip any class we set there. */
.cm-editor .dspf-col-marker-bar {
    position: absolute;
    top: 0;
    width: 1px;
    background: rgba(255, 221, 51, 0.45);
    pointer-events: none;
    z-index: 0;
    display: none;
}
.cm-editor .dspf-col-marker-bar.show { display: block; }

/* ---- DDS column ruler (sticky panel above the editor) ---- */
.dspf-ruler {
    background: #0a1a0a;
    border-bottom: 1px solid #1f3a1f;
    overflow: hidden;
    user-select: none;
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
}
.dspf-ruler-inner {
    white-space: pre;
    will-change: transform;
}
.dspf-ruler-cols   { color: #3a5a3a; }
.dspf-ruler-labels { color: var(--term-grn); }

/* Hide the default CodeMirror panel border the showPanel injects above
   the editor — our ruler carries its own bottom border. */
.cm-editor .cm-panels.cm-panels-top { border-bottom: none; }
.cm-editor .cm-panels { background: transparent; }

/* ============================================================
   Status bar at the very bottom — 98.css .status-bar handles the
   horizontal layout with sunken fields; we only need to tighten
   font + add monospace for the cursor / item-count readouts.
   ============================================================ */
#statusbar {
    flex: 0 0 auto;
    margin: 0 0 0;
}
#statusbar.status-bar { padding: 2px 3px; }
#statusbar .status-bar-field {
    font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
}
#statusbar #sbCursor,
#statusbar #sbItems {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
}
#sbModel  { min-width: 90px; }
#sbRecord { min-width: 110px; }
#sbItems  { min-width: 70px; }
#sbCursor { min-width: 70px; text-align: right; }

/* ============================================================
   Theme toggle button — chip-style ☀/☾ in the menubar-info row.
   Reuses the .source-chip Win98 3D-raised look (kept consistent
   with the other small chips in the chrome).  Glyph is wider than
   text so we drop the monospace family for a slightly more open
   look — the sun/moon read better at the default UI font weight. */
.theme-toggle {
    background: var(--w98-face);
    color: var(--fg-text);
    border: 1px solid;
    border-color: var(--w98-white) var(--w98-shadow) var(--w98-shadow) var(--w98-white);
    box-shadow:
        inset  1px  1px 0 var(--w98-light),
        inset -1px -1px 0 var(--w98-dark);
    padding: 0 7px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    min-width: 24px;
    height: 20px;
    border-radius: 0;
}
.theme-toggle:active {
    border-color: var(--w98-shadow) var(--w98-white) var(--w98-white) var(--w98-shadow);
    box-shadow:
        inset  1px  1px 0 var(--w98-dark),
        inset -1px -1px 0 var(--w98-light);
}
.theme-toggle:focus {
    outline: 1px dotted var(--fg-text);
    outline-offset: -3px;
}

/* ============================================================
   Dark theme — applied via [data-theme="dark"] on <html>.

   Strategy:
     1. Remap the --w98-* literal palette to dark values.  Most of
        styles.css already cascades through these vars so 90% of the
        chrome flips automatically.
     2. Remap the semantic vars (--bg-input, --fg-text, --fg-muted,
        --fg-accent, --accent-hover-*, --bg-tooltip, --status-*)
        to dark counterparts.
     3. Override 98.css's own hardcoded chrome (.window, .title-bar,
        select, input, button, .status-bar-field) by selector since
        98.css 0.1.21 does NOT expose CSS variables.
     4. Brighten the per-tag-color text classes (constant/sysvalue/
        field/hidden) and any other spots where a hardcoded color
        wouldn't read on a dark background.

   The phosphor canvas + CodeMirror (--term-bg, --term-grn,
   --term-dim) are deliberately untouched — phosphor green on black
   is the canonical IBM 5250 look and shouldn't change with theme.
   ============================================================ */
[data-theme="dark"] {
    /* --- semantic palette ---------------------------------- */
    --bg-input:            #1e1e1e;
    --fg-accent:           #4a9aff;
    --bg-tooltip:          #3a3a1a;
    --accent-hover-bg:     #264f78;
    --accent-hover-border: #3794ff;
    --fg-text:             #cccccc;
    --fg-muted:            #888888;
    --fg-disabled:         #555555;
    --status-ok:           #4ec94e;
    --status-warn:         #d7b75d;
    --status-error:        #e06c75;

    /* --- Win98 palette remap ------------------------------ */
    --w98-face:    #2b2b2b;
    --w98-light:   #353535;
    --w98-white:   #3c3c3c;   /* "lightest" border ladder in dark */
    --w98-shadow:  #1a1a1a;
    --w98-dark:    #000000;
    --w98-navy:    #0e3a5c;
    --w98-teal:    #181818;   /* desktop bg behind the app window */
}

/* ---- 98.css overrides (no CSS vars in 98.css 0.1.21) ------ */

/* .window — the raised silver panel.  Original box-shadow uses the
   classic 4-color recipe (white, light gray, gray, dark); dark mode
   uses the same recipe shifted down. */
[data-theme="dark"] .window {
    background: var(--w98-face);
    color: var(--fg-text);
    box-shadow:
        inset -1px -1px 0 var(--w98-dark),
        inset  1px  1px 0 var(--w98-light),
        inset -2px -2px 0 var(--w98-shadow),
        inset  2px  2px 0 var(--w98-white);
}

/* .title-bar — the navy gradient.  Solid dark blue in dark mode
   keeps the brand-mark legible without a bright gradient.  98.css's
   inactive title bar uses a gray gradient; in dark we use muted blue. */
[data-theme="dark"] .title-bar {
    background: linear-gradient(90deg, #0c2840 0%, #0e639c 100%);
}
[data-theme="dark"] .title-bar.inactive {
    background: linear-gradient(90deg, #2a2a2a 0%, #555555 100%);
}

/* form controls — 98.css gives them a white bg + 4-color sunken
   bezel.  Dark mode uses the dark input bg + a darker bezel. */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-input);
    color: var(--fg-text);
    box-shadow:
        inset -1px -1px 0 var(--w98-light),
        inset  1px  1px 0 var(--w98-shadow),
        inset -2px -2px 0 var(--w98-white),
        inset  2px  2px 0 var(--w98-dark);
}

/* select :focus highlight — 98.css paints it navy+white text.  In
   dark we use the darker accent + white-on-accent. */
[data-theme="dark"] select:focus {
    background-color: var(--w98-navy);
    color: var(--fg-on-accent);
}

/* button — 98.css raised silver; same 4-color recipe in dark. */
[data-theme="dark"] button,
[data-theme="dark"] input[type="reset"],
[data-theme="dark"] input[type="submit"] {
    background: var(--w98-face);
    color: var(--fg-text);
    box-shadow:
        inset -1px -1px 0 var(--w98-dark),
        inset  1px  1px 0 var(--w98-white),
        inset -2px -2px 0 var(--w98-shadow),
        inset  2px  2px 0 var(--w98-light);
}
[data-theme="dark"] button:not(:disabled):active,
[data-theme="dark"] input[type="reset"]:not(:disabled):active,
[data-theme="dark"] input[type="submit"]:not(:disabled):active {
    box-shadow:
        inset -1px -1px 0 var(--w98-white),
        inset  1px  1px 0 var(--w98-dark),
        inset -2px -2px 0 var(--w98-light),
        inset  2px  2px 0 var(--w98-shadow);
}
[data-theme="dark"] :disabled,
[data-theme="dark"] :disabled + label,
[data-theme="dark"] input[readonly],
[data-theme="dark"] input[readonly] + label {
    color: var(--fg-disabled);
}

/* .status-bar-field — 98.css gives it a sunken 2-color shadow. */
[data-theme="dark"] .status-bar-field {
    box-shadow:
        inset -1px -1px 0 var(--w98-light),
        inset  1px  1px 0 var(--w98-shadow);
    color: var(--fg-text);
}

/* ---- App-specific dark adjustments ---------------------- */

/* Body text default — html/body set color:#000 inline, so override. */
[data-theme="dark"] html,
[data-theme="dark"] body {
    color: var(--fg-text);
}

/* The .app-brand-mark inside the title bar is its own phosphor pill
   — leave untouched (looks great in either theme). */

/* Item tag colors — saturated primaries don't read on dark.  Brighten. */
[data-theme="dark"] .insp-itemrow-tag.tag-constant { color: #6a9aff; }
[data-theme="dark"] .insp-itemrow-tag.tag-sysvalue { color: #5fd7d7; }
[data-theme="dark"] .insp-itemrow-tag.tag-field    { color: #87d787; }
[data-theme="dark"] .insp-itemrow-tag.tag-hidden   { color: #d787d7; }

/* Resize-handle hover/dragging — light-mode uses gray shades that
   would clash with the dark chrome.  Override to dark equivalents. */
[data-theme="dark"] .resize-handle:hover    { background: #3a3a3a; }
[data-theme="dark"] .resize-handle.dragging { background: #505050; }

/* Disabled menu items use a "carved-out" white text-shadow in light
   mode; in dark that white shadow would be a bright halo around gray
   text.  Drop the text-shadow. */
[data-theme="dark"] .menu-item.disabled,
[data-theme="dark"] .menu-item.disabled .menu-label,
[data-theme="dark"] .menu-item.disabled .menu-accel {
    text-shadow: none;
}

/* Menu accelerator on navy hover — light mode uses #c0c0c0; that's
   still readable on the dark blue hover bg, but slightly bumped
   here for better legibility. */
[data-theme="dark"] .menu-item:hover .menu-accel { color: #b8b8b8; }

/* Scrollbar — 98.css renders custom scrollbars via background-image
   SVGs that are tuned for light chrome.  In dark they look slightly
   off but remain functional.  Accepted (matches 98.css ecosystem
   behavior — most 98.css dark forks ignore the scrollbar). */