/* ═══════════════════════════════════════════════════════════════
   GEM Desktop — Authentic Atari ST 1-bit Monochrome
   Based on C-Lab Notator / faithful Atari ST GEM styling
   NO bevels, NO grays — pure black & white + dither patterns
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Atari ST";
  src: url("https://db.onlinewebfonts.com/t/7a7d5578bd2ddba4a33b77d1f90fa994.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/7a7d5578bd2ddba4a33b77d1f90fa994.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/7a7d5578bd2ddba4a33b77d1f90fa994.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --white: #ffffff;
  --black: #000000;
  /* Authentic Atari ST dither: 50% checkerboard */
  --gray-dither: repeating-conic-gradient(var(--black) 0% 25%, var(--white) 0% 50%) 50% / 2px 2px;

  /* Display panel (the one non-monochrome element — the VFD display itself) */
  --display-bg: #080a10;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black);
  font-family: "Atari ST", 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--black);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ════════════════════════════════════════
   DESKTOP BACKGROUND — GEM hatched pattern
   ════════════════════════════════════════ */

.gem-desktop {
  width: 100%;
  height: 100%;
  background: var(--gray-dither);
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════
   MENU BAR — flat, 1-bit
   ════════════════════════════════════════ */

.gem-menubar {
  height: 14px;
  min-height: 14px;
  background: var(--white);
  border-bottom: 1px solid var(--black);
  display: flex;
  align-items: center;
  padding: 0 2px;
  flex-shrink: 0;
  font-size: 8px;
}

.gem-menubar .menu-item {
  padding: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
}

.gem-menubar .menu-item:hover {
  background: var(--black);
  color: var(--white);
}

/* ════════════════════════════════════════
   WINDOW — flat black border, no shadow
   ════════════════════════════════════════ */

.gem-window {
  margin: 4px;
  flex: 1;
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--black);
  display: flex;
  flex-direction: column;
}

/* ── Title Bar — flat, no bevel ── */

.gem-titlebar {
  height: 14px;
  min-height: 14px;
  background: var(--white);
  border-bottom: 1px solid var(--black);
  display: flex;
  align-items: center;
  padding: 0 2px;
  gap: 2px;
  flex-shrink: 0;
  font-size: 8px;
}

.titlebar-gadget {
  width: 10px;
  height: 8px;
  background: var(--white);
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  flex-shrink: 0;
}

.titlebar-title {
  flex: 1;
  text-align: center;
  font-size: 8px;
  letter-spacing: 2px;
  background: var(--white);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

/* ── Window Content ── */

.gem-window-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
}

/* ════════════════════════════════════════
   SECTION HEADER — like Notator panel headers
   ════════════════════════════════════════ */

.section-header {
  height: 14px;
  min-height: 14px;
  border-bottom: 1px solid var(--black);
  display: flex;
  align-items: center;
  padding: 0 3px;
  font-size: 8px;
  font-weight: bold;
  background: var(--white);
  flex-shrink: 0;
  gap: 4px;
}

.section-label {
  font-size: 7px;
  font-weight: bold;
  background: var(--gray-dither);
  padding: 1px 3px;
  border: 1px solid var(--black);
}

/* Section groove divider (white|black vertical line between panels) */
.section-groove {
  width: 2px;
  background: linear-gradient(90deg, var(--white) 50%, var(--black) 50%);
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   DISPLAY PANEL — the 16-segment area
   Only element that breaks monochrome (it's a VFD display)
   ════════════════════════════════════════ */

.display-panel {
  flex: 1;
  min-height: 0;
  background: var(--display-bg);
  border: 1px solid var(--black);
  position: relative;
  overflow: hidden;
}

.display-panel canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ════════════════════════════════════════
   STATUS BAR — like Notator transport/info bar
   Uses dithered background with value cells
   ════════════════════════════════════════ */

.gem-statusbar {
  height: 20px;
  min-height: 20px;
  background: var(--gray-dither);
  border-top: 1px solid var(--black);
  display: flex;
  align-items: center;
  padding: 2px;
  gap: 2px;
  font-size: 8px;
  flex-shrink: 0;
  user-select: none;
}

.stat-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  border: 1px solid var(--black);
  background: var(--white);
  min-width: 38px;
  height: 100%;
}

.stat-cell .val {
  font-weight: bold;
  font-size: 8px;
}

.stat-cell .lbl {
  font-size: 6px;
}

.stat-cell.inv {
  background: var(--black);
  color: var(--white);
}

/* ════════════════════════════════════════
   BUTTONS — flat 1-bit, no bevel
   ════════════════════════════════════════ */

.gem-buttonbar {
  height: 16px;
  min-height: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
  flex-shrink: 0;
  background: var(--gray-dither);
  border-bottom: 1px solid var(--black);
}

.gem-button {
  padding: 1px 6px;
  font-family: inherit;
  font-size: 7px;
  background: var(--white);
  border: 1px solid var(--black);
  cursor: pointer;
  user-select: none;
}

.gem-button.inv,
.gem-button:active {
  background: var(--black);
  color: var(--white);
}

.gem-separator {
  width: 1px;
  height: 10px;
  background: var(--black);
}

/* ════════════════════════════════════════
   INFO BAR — row of value cells
   ════════════════════════════════════════ */

.gem-infobar {
  height: 14px;
  min-height: 14px;
  background: var(--white);
  border-top: 1px solid var(--black);
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 8px;
  font-size: 7px;
  flex-shrink: 0;
  user-select: none;
}

.gem-infobar .info-label {
  font-size: 6px;
}

.gem-infobar .info-value {
  font-weight: bold;
  font-size: 7px;
}

/* ════════════════════════════════════════
   UTILITY — inverted, dither fills
   ════════════════════════════════════════ */

.inv {
  background: var(--black);
  color: var(--white);
}

.fill-dense {
  background: repeating-conic-gradient(var(--black) 0% 25%, var(--white) 0% 50%) 50% / 2px 2px;
}

.val-box {
  border: 1px solid var(--black);
  padding: 0 2px;
  min-width: 12px;
  text-align: center;
  font-size: 7px;
  font-weight: bold;
  background: var(--white);
}