/* ==========================================================================
   LEMUEL LEDESMA — portfolio
   Theme: the Visual Basic 5 IDE in design mode (1997).
   The page is the IDE: title bar, menu bar, toolbar, Toolbox, Project
   Explorer, Properties window, status bar. Each section is a form open in
   the designer, with the 8-pixel dot grid between its controls.

   Colour is the Windows 95 standard scheme: 3D objects #C0C0C0, title bars
   #000080, application workspace #808080, desktop #008080. Type is the
   system's own (Microsoft Sans Serif, Arial, Courier New): no webfonts.
   Every bevel is the classic two-pixel, four-colour edge, drawn with
   inset box-shadows so no control changes size when it is pressed.
   The one thing that is not VB is the self-portrait: it is kept exactly as
   drawn, in a black PictureBox, with its charge still running the line.
   ========================================================================== */

:root {
  /* Windows 95 system colours */
  --face:      #C0C0C0;   /* 3D objects                            */
  --light:     #DFDFDF;   /* 3D light                              */
  --hi:        #FFFFFF;   /* 3D highlight                          */
  --shadow:    #808080;   /* 3D shadow                             */
  --dark:      #000000;   /* 3D dark shadow, window text           */
  --window:    #FFFFFF;   /* window background                     */
  --title:     #000080;   /* active title bar, selection           */
  /* Inactive title bar. Win95 used #808080 with #C0C0C0 text (2.2:1);
     a hair darker with white text keeps the look and reads at 4.5:1. */
  --title-off: #767676;
  --workspace: #808080;   /* MDI application workspace             */
  --desktop:   #008080;   /* the teal                              */
  --tip:       #FFFFE1;   /* tooltip                               */
  --link:      #0000FF;   /* 4.7:1 on #C0C0C0, 8.6:1 on white      */
  --visited:   #800080;
  --danger:    #800000;   /* maroon: 6:1 on #C0C0C0                */
  --hot:       #008080;   /* the module a client lives in, white text 4.8:1 */

  /* the self-portrait's own colours, unchanged */
  --emerald:     #00A86B;
  --emerald-lit: #12C480;
  --volt:        #F4FFFA;
  --volt-halo:   #6EFFC0;
  --volt-mid:    #3FE9A0;

  /* type: the system fonts VB5 forms used */
  --font-ui:      "Microsoft Sans Serif", "MS Sans Serif", Tahoma, Geneva, Arial, sans-serif;
  --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-code:    "Courier New", Courier, monospace;

  /* bevels: [outer bottom-right, outer top-left, inner bottom-right, inner top-left] */
  --bevel-window:  inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  --bevel-button:  inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --bevel-pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  --bevel-sunken:  inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  --bevel-default: inset 0 0 0 1px var(--dark), inset -2px -2px var(--dark), inset 2px 2px var(--hi), inset -3px -3px var(--shadow), inset 3px 3px var(--light);
  --bevel-in:      inset -1px -1px var(--hi), inset 1px 1px var(--shadow);   /* status panels */
  --bevel-out:     inset -1px -1px var(--shadow), inset 1px 1px var(--hi);   /* flat-button hover */

  /* the 8-pixel design grid (120 twips) that VB draws on every form */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='1' height='1'/%3E%3C/svg%3E");
  /* the checkerboard VB uses behind a pressed toolbox button */
  --dither: repeating-conic-gradient(var(--hi) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;

  /* chrome heights; script.js re-measures these and writes the real values */
  --head-h:   78px;
  --status-h: 24px;
  --filter-h: 0px;
}

/* ── reset / base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* focused or linked-to content must never land under the sticky chrome;
     the pinned filter adds its own height only inside the systems list */
  scroll-padding-top: calc(var(--head-h) + 8px);
  scroll-padding-bottom: calc(var(--status-h) + 10px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--dark);
  background: var(--desktop);
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: bold; }
p { margin: 0; }
a { color: var(--link); }
a:visited { color: var(--visited); }

/* Windows draws focus as a dotted rectangle. Two pixels, not one, so it
   holds up on a modern screen. */
:focus-visible {
  outline: 2px dotted var(--dark);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 300;
  padding: 6px 12px;
  background: var(--tip);
  color: var(--dark);
  border: 1px solid var(--dark);
  font-size: 12px;
}

.skip-link:focus { left: 8px; top: 8px; }

/* ── icons: one 16px pixel-art sheet (tools/build-icons.mjs) ──────────────── */

.ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  background: url(assets/img/vb/icons.png) var(--x, 0) var(--y, 0) / 944px 32px no-repeat;
  image-rendering: pixelated;
}

.ico.is-off { --y: -16px; }

.ico--app              { --x: 0; }
.ico--form             { --x: -16px; }
.ico--min              { --x: -32px; }
.ico--max              { --x: -48px; }
.ico--close            { --x: -64px; }
.ico--new-project      { --x: -96px; }
.ico--add-form         { --x: -112px; }
.ico--menu-editor      { --x: -128px; }
.ico--open             { --x: -144px; }
.ico--save             { --x: -160px; }
.ico--cut              { --x: -176px; }
.ico--copy             { --x: -192px; }
.ico--paste            { --x: -208px; }
.ico--find             { --x: -224px; }
.ico--undo             { --x: -240px; }
.ico--redo             { --x: -256px; }
.ico--start            { --x: -272px; }
.ico--break            { --x: -288px; }
.ico--end              { --x: -304px; }
.ico--project-explorer { --x: -320px; }
.ico--properties       { --x: -336px; }
.ico--form-layout      { --x: -352px; }
.ico--object-browser   { --x: -368px; }
.ico--toolbox          { --x: -384px; }
.ico--pointer          { --x: -400px; }
.ico--picturebox       { --x: -416px; }
.ico--label            { --x: -432px; }
.ico--textbox          { --x: -448px; }
.ico--frame            { --x: -464px; }
.ico--commandbutton    { --x: -480px; }
.ico--checkbox         { --x: -496px; }
.ico--optionbutton     { --x: -512px; }
.ico--combobox         { --x: -528px; }
.ico--listbox          { --x: -544px; }
.ico--hscroll          { --x: -560px; }
.ico--vscroll          { --x: -576px; }
.ico--timer            { --x: -592px; }
.ico--drivelist        { --x: -608px; }
.ico--dirlist          { --x: -624px; }
.ico--filelist         { --x: -640px; }
.ico--shape            { --x: -656px; }
.ico--line             { --x: -672px; }
.ico--image            { --x: -688px; }
.ico--data             { --x: -704px; }
.ico--ole              { --x: -720px; }
.ico--folder-closed    { --x: -736px; }
.ico--folder-open      { --x: -752px; }
.ico--project          { --x: -768px; }
.ico--info             { --x: -800px; }
.ico--globe            { --x: -848px; }
.ico--view-code        { --x: -864px; }
.ico--view-object      { --x: -880px; }
.ico--toggle-folders   { --x: -896px; }
.ico--position         { --x: -912px; }
.ico--size             { --x: -928px; }

/* ── the IDE window ───────────────────────────────────────────────────────── */

.ide {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--face);
}

/* past 1700px the IDE stops maximising and the desktop shows round it */
@media (min-width: 1700px) {
  .ide {
    max-width: 1680px;
    margin: 0 auto;
    box-shadow: var(--bevel-window);
    /* no bottom padding: it would lift the docks and status bar 3px at the
       end of the page */
    padding: 0 3px;
  }
}

.ide__head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--face);
}

/* title bar */
.titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 3px 0 4px;
  background: var(--title);
  color: var(--hi);
}

.titlebar__text {
  flex: 1;
  min-width: 0;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* caption buttons: minimise, maximise, close */
.wbtns {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wbtn {
  display: grid;
  place-items: center;
  width: 16px;
  height: 14px;
  overflow: hidden;
  background: var(--face);
  box-shadow: var(--bevel-button);
}

.wbtn--close { margin-left: 2px; }

.wbtn--sm { width: 14px; height: 12px; }

/* menu bar */
.menubar {
  height: 24px;
  padding: 1px 2px;
}

.menubar__list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu { position: relative; }

.menu__top {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 9px;
  color: var(--dark);
  text-decoration: none;
}

.menu__top:visited { color: var(--dark); }
.menu__top[aria-expanded="true"] { box-shadow: var(--bevel-in); }
.menu__top:focus-visible { outline-offset: -3px; }

.menu__pop {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 240px;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--bevel-window);
}

.menu__pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__pop a {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 3px 18px 3px 20px;
  color: var(--dark);
  text-decoration: none;
  white-space: nowrap;
}

/* the highlight bar is the focus indicator inside a menu, as in Windows */
.menu__pop a:hover,
.menu__pop a:focus {
  background: var(--title);
  color: var(--hi);
  outline: none;
}

.menu__key { padding-left: 12px; }

.menu__sep {
  margin: 3px 1px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--hi);
}

/* toolbar */
.toolbar {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 3px 4px 4px;
  border-top: 1px solid var(--hi);
  box-shadow: inset 0 -1px var(--shadow);
}

.toolbar__grip {
  flex-shrink: 0;
  width: 7px;
  height: 22px;
  margin: 0 4px 0 1px;
  background:
    linear-gradient(to right, var(--hi) 0 1px, var(--shadow) 1px 2px, transparent 2px 4px,
                              var(--hi) 4px 5px, var(--shadow) 5px 6px, transparent 6px);
}

.toolbar__grp {
  display: flex;
  align-items: center;
}

.toolbar__sep {
  flex-shrink: 0;
  width: 2px;
  height: 22px;
  margin: 0 4px;
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--hi);
}

.tb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  min-width: 24px;
  height: 23px;
  padding: 0 4px;
  color: var(--dark);
  text-decoration: none;
}

.tb:visited { color: var(--dark); }
a.tb:active { box-shadow: var(--bevel-in); }
.tb.is-down { box-shadow: var(--bevel-in); background: var(--dither); }
.tb--text { padding: 0 8px 0 6px; }

/* Hover states only where there is a real pointer: on touch a tap would
   leave the raised bevel, the tooltip or the selection handles stuck on. */
@media (hover: hover) {
  .menu__top:hover,
  a.tb:hover,
  .tool:hover { box-shadow: var(--bevel-out); }

  .card:hover::after,
  [data-tip]:hover::after { display: block; }
}

/* yellow tooltips, as VB draws them: on keyboard focus, and on hover where
   there is a mouse */
[data-tip]:focus-visible::after { display: block; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 5px);
  left: 2px;
  z-index: 70;
  display: none;
  padding: 1px 5px;
  background: var(--tip);
  color: var(--dark);
  border: 1px solid var(--dark);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

/* in VB the readouts follow the last button, they do not sit flush right */
.toolbar__readouts {
  display: flex;
  gap: 4px;
  margin-left: 16px;
}

.readout {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 126px;
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── body: docks either side of the MDI workspace ─────────────────────────── */

.ide__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--workspace);
}

.ide__center {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dock { display: none; }

@media (min-width: 1280px) {
  .ide__body { grid-template-columns: 64px minmax(0, 1fr) 300px; }

  .dock {
    position: sticky;
    top: var(--head-h);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: calc(100vh - var(--head-h) - var(--status-h));
    padding: 2px;
    background: var(--face);
  }
}

.dockwin {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--bevel-window);
}

.dock--tools .dockwin { flex: 1; }
.dock--panes { overflow: hidden; }
.dockwin--project { flex-shrink: 0; }

.dockwin__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 18px;
  padding: 0 2px 0 4px;
  background: var(--title-off);
  color: var(--hi);
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

/* Toolbox */
.toolbox {
  display: grid;
  grid-template-columns: repeat(2, 25px);
  justify-content: center;
  gap: 1px;
  padding: 5px 0;
}

.tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 24px;
}

.tool.is-down { box-shadow: var(--bevel-in); background: var(--dither); }

/* Project Explorer */
.dockwin__tools {
  display: flex;
  gap: 1px;
  padding: 2px 1px;
}

.tree {
  max-height: 210px;
  overflow: auto;
  padding: 5px 4px 6px;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
  font-size: 11px;
}

.tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree ul ul {
  margin-left: 7px;
  padding-left: 10px;
  border-left: 1px dotted var(--shadow);
}

.tree__row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 3px 1px 1px;
  color: var(--dark);
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.tree__leaf:visited { color: var(--dark); }
.tree__leaf.is-sel { background: var(--title); color: var(--hi); }

/* the 9px +/- boxes */
.tree__exp {
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border: 1px solid var(--shadow);
  background:
    linear-gradient(var(--dark), var(--dark)) center / 5px 1px no-repeat,
    linear-gradient(var(--dark), var(--dark)) center / 1px 5px no-repeat,
    var(--window);
}

.tree__exp.is-open {
  background:
    linear-gradient(var(--dark), var(--dark)) center / 5px 1px no-repeat,
    var(--window);
}

/* Properties window */
.dockwin--props { flex: 1; }

.props__combo {
  position: relative;
  display: flex;
  align-items: center;
  height: 21px;
  margin: 3px 0 0;
  padding: 0 20px 0 5px;
  overflow: hidden;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
  font-size: 11px;
  white-space: nowrap;
}

.props__arrow {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 17px;
  background: var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M4 6h7v1h-7zM5 7h5v1h-5zM6 8h3v1h-3zM7 9h1v1h-1z'/%3E%3C/svg%3E") center no-repeat;
  box-shadow: var(--bevel-button);
}

.props__tabs {
  display: flex;
  margin: 5px 0 0;
  padding-left: 2px;
  font-size: 11px;
}

.props__tab {
  margin-top: 2px;
  padding: 1px 7px 2px;
  background: var(--face);
  box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dark), inset -2px 0 var(--shadow);
}

.props__tab.is-on {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-bottom: 4px;
}

.props__grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 2px;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
}

.props__grid table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.props__grid td {
  height: 17px;
  padding: 0 4px;
  border: 1px solid var(--face);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.props__grid td:first-child { width: 44%; }
.props__grid tr.is-sel td:first-child { background: var(--title); color: var(--hi); }

.swatch {
  display: inline-block;
  width: 11px;
  height: 9px;
  margin-right: 4px;
  border: 1px solid var(--dark);
  background: var(--face);
  vertical-align: -1px;
}

.swatch--dark { background: var(--dark); }

.props__desc {
  height: 58px;
  margin-top: 3px;
  padding: 4px 6px;
  overflow: hidden;
  box-shadow: var(--bevel-in);
  font-size: 11px;
}

.props__desc b { display: block; margin-bottom: 1px; }

/* ── the workspace and its forms ──────────────────────────────────────────── */

.workspace {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.form {
  min-width: 0;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--bevel-window);
}

.form__title {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 2px 0 3px;
  background: var(--title-off);
  color: var(--hi);
  font-weight: bold;
}

/* the form you are reading is the active window */
.form.is-active .form__title { background: var(--title); }

.form__caption {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Design-mode client area: the grid shows only between controls, because
   every control below paints its own opaque face over it, as VB's do. */
.form__client {
  margin-top: 1px;
  /* edges on the 8px grid, as VB snaps them, so no stray dot sits beside text */
  padding: 16px 24px 24px;
  background-color: var(--face);
  background-image: var(--dots);
  /* layouts inside a form follow the form's own width, not the window's:
     with the docks open a form is far narrower than the viewport says */
  container-type: inline-size;
}

.form__head { margin-bottom: 16px; }

.form__h {
  width: fit-content;
  margin-bottom: 4px;
  background: var(--face);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
}

.form__meta,
.form__lede {
  width: fit-content;
  background: var(--face);
}

.form__meta { font-size: 12px; }

.form__lede {
  max-width: 62ch;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
}

/* ── controls ─────────────────────────────────────────────────────────────── */

/* Frame: the etched group box. Its caption sits on the line. */
.frame {
  position: relative;
  margin: 9px 0 0;
  padding: 20px 14px 14px;
  border: 1px solid var(--shadow);
  background: var(--face);
  box-shadow: inset 1px 1px var(--hi), 1px 1px var(--hi);
}

.frame__cap {
  position: absolute;
  top: -9px;
  left: 9px;
  max-width: calc(100% - 18px);
  padding: 0 4px;
  background: var(--face);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 16px;
}

legend.frame__cap {
  position: static;
  padding: 0 4px;
}

/* PictureBox / Image: a sunken white well */
.picbox {
  padding: 2px;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
}

.picbox--black { background: var(--dark); }

/* CommandButton */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  min-height: 26px;
  padding: 4px 14px;
  border: 0;
  border-radius: 0;
  background: var(--face);
  color: var(--dark);
  box-shadow: var(--bevel-button);
  font: 12px/1.2 var(--font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:visited { color: var(--dark); }

/* pressed: the bevel flips and the caption shifts a pixel down-right */
.btn:active {
  box-shadow: var(--bevel-pressed);
  padding: 5px 13px 3px 15px;
}

/* the Default button carries the extra black frame */
.btn--default { box-shadow: var(--bevel-default); }
.btn--default:active { box-shadow: inset 0 0 0 1px var(--dark), inset 0 0 0 2px var(--shadow); }

/* focus rectangle inside the button face */
.btn:focus-visible { outline-offset: -6px; }

/* TextBox */
.field {
  display: block;
  width: 100%;
  padding: 5px 6px;
  border: 0;
  border-radius: 0;
  background: var(--window);
  color: var(--dark);
  box-shadow: var(--bevel-sunken);
  font: 14px/1.35 var(--font-ui);
}

.field:focus-visible { outline-offset: 1px; }

.field--area {
  min-height: 7.5rem;
  resize: vertical;
}

/* invalid: a maroon ring outside the bevel, which leaves the outline free
   for the focus rectangle */
.field[aria-invalid="true"] {
  outline: 0;
  box-shadow: var(--bevel-sunken), 0 0 0 2px var(--danger);
}

.field[aria-invalid="true"]:focus-visible {
  outline: 2px dotted var(--dark);
  outline-offset: 4px;
}

/* Shape control: a filled circle, for status */
.shape {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid var(--dark);
  border-radius: 50%;
  vertical-align: -1px;
}

.shape--live { background: #00FF00; }

/* label: value pairs, as on a VB data-entry form */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 3px 12px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.facts__row { display: contents; }
.facts__row[hidden] { display: none; }

.facts dt { white-space: nowrap; }

.facts dd {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  font-weight: bold;
  overflow-wrap: anywhere;
}

/* ── frmSplash ────────────────────────────────────────────────────────────── */

.splash {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px 28px;
  margin: 0;
  padding: 16px 24px;
}

.splash__art { margin: 0; }

.splash__cap {
  margin-top: 6px;
  font-size: 11px;
}

.splash__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.splash__license {
  margin-bottom: 12px;
  font-size: 12px;
}

.splash__company {
  margin-bottom: 6px;
  font: bold 18px/1.2 var(--font-display);
}

.splash__product {
  margin-bottom: 14px;
  color: var(--title);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.splash__platform {
  margin-bottom: 2px;
  font: bold 16px/1.3 var(--font-display);
}

.splash__version {
  margin-bottom: 14px;
  font: bold 13px/1.3 var(--font-display);
}

.splash__desc {
  max-width: 46ch;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.55;
}

.splash__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* the template's legal-warning label, at the foot of the frame */
.splash__warning {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--shadow);
  box-shadow: inset 0 1px var(--hi);
  font-size: 12px;
}

/* the self-portrait, retained: one path, the charge running its length.
   Dashes are per-mille of the route (pathLength="1000"); --lag holds each
   copy back through animation-delay, which is equivalent on a periodic loop. */
.lineart {
  --volt-dur: 6.5s;
  width: 100%;
  height: auto;
}

.lineart__bloom { stroke: var(--emerald); stroke-width: 15; opacity: .18; filter: url(#lineart-bloom); }
.lineart__line  { stroke: var(--emerald); stroke-width: 5; }

.lineart__streak,
.lineart__tail,
.lineart__halo,
.lineart__core {
  animation: volt var(--volt-dur) linear infinite;
  animation-delay: calc((var(--lag) - 1000) / 1000 * var(--volt-dur));
}

.lineart__streak { --lag: 70; stroke: var(--emerald-lit); stroke-width: 5;   opacity: .28; stroke-dasharray: 150 850; }
.lineart__tail   { --lag: 22; stroke: var(--volt-mid);    stroke-width: 5;   opacity: .48; stroke-dasharray: 58 942; }
.lineart__halo   { --lag: 7;  stroke: var(--volt-halo);   stroke-width: 12;  opacity: .30; stroke-dasharray: 30 970; }
.lineart__core   { --lag: 0;  stroke: var(--volt);        stroke-width: 5.5;               stroke-dasharray: 14 986; }

@keyframes volt {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* off screen, nobody sees the charge: script.js pauses it so it is not
   repainting the long dashed path on every frame while you read */
.lineart.is-paused use { animation-play-state: paused; }

/* the clients, on the first screen: a multi-column ListBox whose items
   jump to each system */
.roll { margin-top: 16px; }

.roll__label {
  width: fit-content;
  margin-bottom: 3px;
  background: var(--face);
  font-size: 12px;
}

.roll__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
}

.roll__list a {
  display: block;
  padding: 3px 8px;
  color: var(--dark);
  font-size: 13px;
  text-decoration: none;
}

.roll__list a:hover,
.roll__list a:focus-visible {
  background: var(--title);
  color: var(--hi);
  outline: none;
}

/* ── frmSystems ───────────────────────────────────────────────────────────── */

/* The filter stays pinned under the toolbar so the choice and the count
   never leave the screen while the panels scroll. */
.filter {
  position: sticky;
  top: var(--head-h);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 0 -6px 18px;
  padding: 2px 6px 10px;
  background: var(--face);
  box-shadow: 0 1px var(--shadow), 0 2px var(--hi);
}

.filter__frame {
  min-width: 0;
  margin: 0;
  padding: 6px 12px 8px;
}

.filter__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

/* OptionButton */
.opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  white-space: nowrap;
}

.opt input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23808080' d='M4 0h4v1h-4zM2 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM1 3h1v1h-1zM0 4h1v1h-1zM0 5h1v1h-1zM0 6h1v1h-1zM0 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1z'/%3E%3Cpath fill='%23000000' d='M4 1h4v1h-4zM2 2h2v1h-2zM8 2h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1zM1 7h1v1h-1zM2 8h1v1h-1z'/%3E%3Cpath fill='%23FFFFFF' d='M4 2h4v1h-4zM10 2h1v1h-1zM3 3h6v1h-6zM10 3h1v1h-1zM2 4h8v1h-8zM11 4h1v1h-1zM2 5h8v1h-8zM11 5h1v1h-1zM2 6h8v1h-8zM11 6h1v1h-1zM2 7h8v1h-8zM11 7h1v1h-1zM3 8h6v1h-6zM10 8h1v1h-1zM4 9h4v1h-4zM10 9h1v1h-1zM2 10h2v1h-2zM8 10h2v1h-2zM4 11h4v1h-4z'/%3E%3Cpath fill='%23DFDFDF' d='M9 2h1v1h-1zM9 3h1v1h-1zM10 4h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM10 7h1v1h-1zM9 8h1v1h-1zM2 9h2v1h-2zM8 9h2v1h-2zM4 10h4v1h-4z'/%3E%3C/svg%3E") no-repeat;
  cursor: pointer;
}

.opt input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23808080' d='M4 0h4v1h-4zM2 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM1 3h1v1h-1zM0 4h1v1h-1zM0 5h1v1h-1zM0 6h1v1h-1zM0 7h1v1h-1zM1 8h1v1h-1zM1 9h1v1h-1z'/%3E%3Cpath fill='%23000000' d='M4 1h4v1h-4zM2 2h2v1h-2zM8 2h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM5 4h2v1h-2zM1 5h1v1h-1zM4 5h4v1h-4zM1 6h1v1h-1zM4 6h4v1h-4zM1 7h1v1h-1zM5 7h2v1h-2zM2 8h1v1h-1z'/%3E%3Cpath fill='%23FFFFFF' d='M4 2h4v1h-4zM10 2h1v1h-1zM3 3h6v1h-6zM10 3h1v1h-1zM2 4h3v1h-3zM7 4h3v1h-3zM11 4h1v1h-1zM2 5h2v1h-2zM8 5h2v1h-2zM11 5h1v1h-1zM2 6h2v1h-2zM8 6h2v1h-2zM11 6h1v1h-1zM2 7h3v1h-3zM7 7h3v1h-3zM11 7h1v1h-1zM3 8h6v1h-6zM10 8h1v1h-1zM4 9h4v1h-4zM10 9h1v1h-1zM2 10h2v1h-2zM8 10h2v1h-2zM4 11h4v1h-4z'/%3E%3Cpath fill='%23DFDFDF' d='M9 2h1v1h-1zM9 3h1v1h-1zM10 4h1v1h-1zM10 5h1v1h-1zM10 6h1v1h-1zM10 7h1v1h-1zM9 8h1v1h-1zM2 9h2v1h-2zM8 9h2v1h-2zM4 10h4v1h-4z'/%3E%3C/svg%3E");
}

/* Windows puts the focus rectangle round the caption, not the dot */
.opt input:focus-visible { outline: none; }
.opt input:focus-visible + span { outline: 2px dotted var(--dark); outline-offset: 1px; }

.opt__n { font-variant-numeric: tabular-nums; }

/* without scripting the options could not filter anything, so they are not
   offered; the legend and the count still describe all nine */
html:not(.js) .filter__frame { display: none; }

.filter__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.filter__legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* the key for the filled module in every diagram */
.flow__key {
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-left: 10px;
  border: 1px solid var(--dark);
  background: var(--hot);
  vertical-align: -1px;
}

/* ComboBox: replaces the OptionButtons when the form is narrow */
.filter__combo {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
}

.filter__select {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 22px 0 5px;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  /* the drop-down button is painted as background layers (arrow, its raised
     edges, its face) so the arrow sits above it, not under a shadow */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M4 6h7v1h-7zM5 7h5v1h-5zM6 8h3v1h-3zM7 9h1v1h-1z'/%3E%3C/svg%3E") right 3px center / 16px 16px no-repeat,
    linear-gradient(var(--hi), var(--hi)) right 19px top 2px / 1px calc(100% - 4px) no-repeat,
    linear-gradient(var(--dark), var(--dark)) right 2px top 2px / 1px calc(100% - 4px) no-repeat,
    linear-gradient(var(--dark), var(--dark)) right 2px bottom 2px / 18px 1px no-repeat,
    linear-gradient(var(--face), var(--face)) right 2px top 2px / 18px calc(100% - 4px) no-repeat,
    var(--window);
  box-shadow: var(--bevel-sunken);
  color: var(--dark);
  font: 14px var(--font-ui);
  cursor: pointer;
}

.filter__combo-label { flex-shrink: 0; }

html:not(.js) .filter__combo { display: none !important; }

.filter__count {
  padding: 2px 9px;
  box-shadow: var(--bevel-in);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* the panels: Myvan Holdings runs full width, the other nine three-up */
.sys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sys__item {
  display: flex;
  min-width: 0;
}

.sys__item,
#workList :focus { scroll-margin-top: calc(var(--filter-h) + 8px); }

.sys__item[hidden] { display: none; }
.sys__item[data-featured] { grid-column: 1 / -1; }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px 16px 16px;
}

.sys__item[data-featured] .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  align-items: start;
  gap: 16px 28px;
}

.card__cap {
  display: flex;
  align-items: center;
  gap: 7px;
  font: bold 15px/18px var(--font-display);
}

.card__idx {
  padding: 0 3px;
  background: var(--title);
  color: var(--hi);
  font: bold 11px/15px var(--font-code);
}

/* VB's selection handles: hover or focus a panel and it is "selected" in
   the designer (and its properties show in the Properties window) */
.card::after {
  content: "";
  position: absolute;
  /* a Frame's handles start at the top of its caption, not at the line */
  inset: -13px -4px -4px;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(var(--title), var(--title)) 0 0 / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 50% 0 / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 0 / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 0 50% / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 50% / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 0 100% / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 50% 100% / 6px 6px no-repeat,
    linear-gradient(var(--title), var(--title)) 100% 100% / 6px 6px no-repeat;
}

.card:focus-within::after { display: block; }

.card__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.card__id {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Image control in a thin sunken border */
.imgctl {
  flex-shrink: 0;
  width: 76px;
  height: 56px;
  padding: 2px;
  background: var(--window);
  box-shadow: var(--bevel-in), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
}

.card__logo {
  width: 72px;
  height: 52px;
  object-fit: cover;
}

.card__desc {
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.55;
}

.card__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: auto;
}

.sys__item[data-featured] .card__btns { margin-top: 0; }

.card__nolink {
  margin-right: auto;
  font-size: 12px;
}

.sys__item:not([data-featured]) .card__desc {
  font-size: 13px;
  line-height: 1.5;
}

/* a link button names the real domain, which can be long: let it wrap */
.card__btns .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* The module diagram: Shape rectangles joined by Line controls, drawn top
   to bottom so it never wraps, however narrow the panel. One module, the
   one the client lives in every day, is filled. */
.card__flow { min-width: 0; }

.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 10px;
  list-style: none;
}

.flow > li {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.flow > li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  height: 12px;
  border-left: 1px solid var(--dark);
}

.flow__mod {
  position: relative;
  display: block;
  padding: 3px 10px;
  border: 1px solid var(--dark);
  background: var(--window);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.flow__mod.is-hot {
  background: var(--hot);
  color: var(--hi);
  font-weight: bold;
}

/* a branch: two modules side by side, joined by a bar above and below */
.flow > .flow__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  padding: 7px 0;
  background:
    linear-gradient(var(--dark), var(--dark)) 50% 0 / calc(50% + 6px) 1px no-repeat,
    linear-gradient(var(--dark), var(--dark)) 50% 100% / calc(50% + 6px) 1px no-repeat;
}

.flow > .flow__pair:first-child {
  padding-top: 0;
  background-size: 0 0, calc(50% + 6px) 1px;
}

.flow > .flow__pair:last-child {
  padding-bottom: 0;
  background-size: calc(50% + 6px) 1px, 0 0;
}

.flow__pair:not(:first-child) .flow__mod::before,
.flow__pair:not(:last-child) .flow__mod::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 7px;
  border-left: 1px solid var(--dark);
}

.flow__pair:not(:first-child) .flow__mod::before { top: -8px; }
.flow__pair:not(:last-child) .flow__mod::after { bottom: -8px; }

/* if one of a pair wraps to two lines, its partner stays centred */
.flow__pair .flow__mod {
  display: grid;
  place-items: center;
}

.sys__empty {
  width: fit-content;
  padding: 18px 4px;
  background: var(--face);
  font-size: 14px;
}

/* ── frmAbout ─────────────────────────────────────────────────────────────── */

.about__id {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}

.about__pic {
  flex-shrink: 0;
  width: 200px;
}

.about__text > * {
  width: fit-content;
  background: var(--face);
}

.about__name {
  margin: 8px 0 2px;
  font: bold 18px/1.25 var(--font-display);
}

.about__ver {
  margin-bottom: 12px;
  font: bold 13px/1.3 var(--font-display);
}

.facts--about { font-size: 13px; }

.about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}

.about__entry p {
  font-size: 14px;
  line-height: 1.6;
}

.about__entry--lead { grid-column: 1 / -1; }

.about__entry .about__quote {
  max-width: 56ch;
  color: var(--title);
  font: bold clamp(17px, 1.6vw, 20px)/1.45 var(--font-display);
}

/* no one-word last lines in running text */
.splash__desc,
.card__desc,
.form__lede,
.about__entry p { text-wrap: pretty; }

/* ListView in report mode */
.listview {
  width: 100%;
  border-collapse: collapse;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
  font-size: 13px;
}

.listview thead th {
  padding: 3px 8px;
  background: var(--face);
  box-shadow: var(--bevel-button);
  font-weight: normal;
  text-align: left;
}

.listview tbody th {
  padding: 4px 8px 4px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.listview td { padding: 4px 8px; }

/* ── frmContact ───────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 18px;
}

.facts--contact { font-size: 13px; }

.contact__form {
  display: grid;
  gap: 10px;
}

.contact__req { font-size: 12px; }

.field-row {
  display: grid;
  grid-template-columns: 7.75rem minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.field-row--area { align-items: start; }

.field-row__label { font-size: 13px; }
.field-row--area .field-row__label { padding-top: 5px; }

.field-row__opt { font-size: 11px; }

.contact__btns {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.contact__submit-label { pointer-events: none; }

.contact__submit:disabled {
  color: var(--shadow);
  text-shadow: 1px 1px var(--hi);
  cursor: default;
}

/* a MsgBox in a line: information icon, or warning on failure */
.contact__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 1.4em;
  font-size: 13px;
}

.contact__status:not(:empty)::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url(assets/img/vb/icons.png) -800px 0 / 944px 32px no-repeat;
  image-rendering: pixelated;
}

.contact__status.is-error { color: var(--danger); }
.contact__status.is-error::before { background-position: -816px 0; }

/* ── Immediate window (footer) ────────────────────────────────────────────── */

.immediate {
  margin: 0 18px 18px;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--bevel-window);
}

.immediate__body {
  margin-top: 1px;
  padding: 8px 10px;
  background: var(--window);
  box-shadow: var(--bevel-sunken);
  font: 13px/1.6 var(--font-code);
}

.immediate__in { color: var(--title); }

.immediate__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* ── status bar ───────────────────────────────────────────────────────────── */

.statusbar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 2px;
  height: var(--status-h);
  padding: 2px;
  background: var(--face);
  box-shadow: inset 0 1px var(--hi);
  font-size: 11px;
}

.sb {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  box-shadow: var(--bevel-in);
  white-space: nowrap;
}

.sb--grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sb--form { min-width: 96px; }

.sb--clock {
  justify-content: flex-end;
  min-width: 96px;
  font-variant-numeric: tabular-nums;
}

/* the sizing grip in the corner */
.statusbar::after {
  content: "";
  flex: 0 0 13px;
  background: linear-gradient(135deg,
    transparent 0 46%, var(--hi) 46% 52%, var(--shadow) 52% 64%,
    transparent 64% 70%, var(--hi) 70% 76%, var(--shadow) 76% 88%, transparent 88%);
}

/* ── Windows 95 scroll bars (Chromium, Safari) ───────────────────────────── */

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--dither); }
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--bevel-button); }
::-webkit-scrollbar-corner { background: var(--face); }

::-webkit-scrollbar-button:single-button {
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--face);
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--bevel-button);
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M7 6h1v1h-1zM6 7h3v1h-3zM5 8h5v1h-5zM4 9h7v1h-7z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M4 6h7v1h-7zM5 7h5v1h-5zM6 8h3v1h-3zM7 9h1v1h-1z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M9 4h1v1h-1zM8 5h2v1h-2zM7 6h3v1h-3zM6 7h4v1h-4zM7 8h3v1h-3zM8 9h2v1h-2zM9 10h1v1h-1z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000000' d='M6 4h1v1h-1zM6 5h2v1h-2zM6 6h3v1h-3zM6 7h4v1h-4zM6 8h3v1h-3zM6 9h2v1h-2zM6 10h1v1h-1z'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:single-button:active { box-shadow: var(--bevel-in); }

/* Firefox has no scrollbar parts; give it the colours at least */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--face) var(--light); }
}

/* ── responsive: the IDE chrome follows the window ───────────────────────── */

@media (max-width: 899.98px) {
  .toolbar__deco,
  .toolbar__readouts { display: none; }
}

@media (max-width: 767.98px) {
  .titlebar__more { display: none; }

  .workspace {
    gap: 12px;
    padding: 8px;
  }

  .form__client { padding: 16px 8px; }

  /* iPhone Safari zooms into any field under 16px and stays zoomed */
  .field,
  .filter__select { font-size: 16px; }

  .immediate { margin: 0 8px 8px; }

  .sb--form { display: none; }
}

/* fingers, not a mouse: every target at least 28px */
@media (pointer: coarse) {
  .menubar { height: 34px; }
  .menu__top { padding: 0 12px; }
  .menu__pop a { padding-top: 10px; padding-bottom: 10px; }
  .toolbar { height: 36px; }
  .tb { height: 28px; min-width: 28px; }
  .opt { padding-top: 8px; padding-bottom: 8px; }
  .filter__select { height: 32px; }
  .roll__list a { padding: 7px 10px; }
}

/* ── responsive: everything inside a form follows the form ───────────────── */

/* the row panels: three-up, two-up, one-up. Three-up holds down to 800px
   of form, so 02 to 04 share a row even on a 1280px laptop with the docks
   open (the facts wrap to two lines there, which still reads) */
@container (max-width: 799.98px) {
  .sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 559.98px) {
  .sys { grid-template-columns: minmax(0, 1fr); }
}

/* Side by side, panels in a row share their row lines (subgrid): the
   nameplates, the diagrams and the buttons line up across the row however
   long each description runs. The gap moves into padding because a subgrid
   row cannot carry the parent's row-gap. */
@container (min-width: 560px) {
  .sys { row-gap: 0; }
  .sys__item { padding-bottom: 22px; }

  .sys__item:not([data-featured]):not([hidden]) {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .sys__item:not([data-featured]) .card {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 14px;
  }

  .sys__item:not([data-featured]) .card__flow {
    display: grid;
    align-content: center;
  }

  .sys__item:not([data-featured]) .card__btns { margin-top: 0; }
}

/* featured, wide: nameplate and facts | description and link | diagram,
   with the plate at its native size */
@container (min-width: 960px) {
  .sys__item[data-featured] .card {
    grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr) minmax(270px, 340px);
    grid-template-rows: auto 1fr;
  }

  .sys__item[data-featured] .card__main { display: contents; }

  .sys__item[data-featured] .card__id {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-direction: column;
  }

  .sys__item[data-featured] .card__desc { grid-column: 2; grid-row: 1; }

  .sys__item[data-featured] .card__btns {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .sys__item[data-featured] .card__flow { grid-column: 3; grid-row: 1 / span 2; }

  .sys__item[data-featured] .imgctl { width: 148px; height: 108px; }
  .sys__item[data-featured] .card__logo { width: 144px; height: 104px; }
}

/* featured, narrow: one column; words first, then the diagram, then the link */
@container (max-width: 699.98px) {
  .sys__item[data-featured] .card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .sys__item[data-featured] .card__main { display: contents; }
  .sys__item[data-featured] .card__desc { order: 1; }
  .sys__item[data-featured] .card__flow { order: 2; }
  .sys__item[data-featured] .card__btns { order: 3; }
}

/* narrow: the OptionButtons give way to a ComboBox, so the pinned filter
   is one short row with the count beside it */
@container (max-width: 559.98px) {
  .filter {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 8px;
  }

  .filter__frame,
  .filter__legend { display: none; }

  .filter__combo { display: flex; }
}

@container (max-width: 759.98px) {
  .splash { grid-template-columns: minmax(0, 1fr); }
  .splash__art { max-width: 560px; }

  .contact { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 639.98px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 599.98px) {
  .splash { padding: 16px; }
}

@container (max-width: 519.98px) {
  .about__id { flex-direction: column; }
  .about__pic { width: 160px; }
}

@container (max-width: 419.98px) {
  .splash__actions .btn { flex: 1 1 100%; }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .field-row--area .field-row__label { padding-top: 0; }
}

@container (max-width: 299.98px) {
  .card__id { flex-direction: column; }
  .card__cap { font-size: 13px; }
}

/* ── reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* The charge IS its animation; frozen it would be a bright stub parked on
     the line, so it goes away and the drawing stays. */
  .lineart__streak,
  .lineart__tail,
  .lineart__halo,
  .lineart__core { display: none; }
}

/* ── Windows High Contrast (forced-colors) ────────────────────────────────
   Forced colours drop box-shadow, so every bevel would vanish and leave
   buttons, fields and windows without edges. Each gets a real border back
   in the system colour; selection keeps the system highlight. */
@media (forced-colors: active) {
  .btn,
  .field,
  .wbtn,
  .picbox,
  .form,
  .dockwin,
  .menu__pop,
  .imgctl,
  .filter__count,
  .sb,
  .listview { border: 1px solid CanvasText; }

  .titlebar,
  .form__title,
  .dockwin__title { border-bottom: 1px solid CanvasText; }

  .opt input {
    appearance: auto;
    -webkit-appearance: auto;
    background: none;
  }

  .opt input:checked { background-image: none; }

  .shape,
  .card__idx { forced-color-adjust: none; }

  .tree__leaf.is-sel,
  .props__grid tr.is-sel td:first-child {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .flow__mod.is-hot { border-width: 3px; }

  .flow > .flow__pair {
    background: none;
    border-top: 1px solid CanvasText;
    border-bottom: 1px solid CanvasText;
  }

  .card::after { display: none !important; }
}