/* ============================================================
   MONOSYSM ECOSYSTEM — BASE / RESET / TYPOGRAPHY / PRIMITIVES
   ============================================================ */

/* ---- Fonts (self-hosted, both monospace) ---- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/martian-mono.woff2") format("woff2");
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

html {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Desktop app feel: the page itself never scrolls; regions scroll internally */
  overflow: hidden;
}

body {
  min-height: 100%;
  line-height: var(--lh-body);
  font-size: var(--t-md);
  /* brand colours transition smoothly on switch */
  transition: background var(--dur-brand) var(--ease-in-out),
              color var(--dur-brand) var(--ease-in-out);
  background: var(--bg);
  color: var(--fg);
}

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: var(--fg); color: var(--bg); }

/* ---- Type primitives ---- */
.display { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.01em; }
.mega { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mega); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.h-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--t-hero); line-height: var(--lh-tight); }
.h-xl { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-snug); }

/* wide-tracked machine label */
.label {
  font-family: var(--font-ui);
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-soft);
}
.label--fg { color: var(--fg); }
.mono { font-family: var(--font-ui); }
.dim { color: var(--fg-soft); }
.faint { color: var(--fg-faint); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- App shell layout ---- */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Screen host — screens swap in place, one viewport each */
#screens { position: relative; flex: 1 1 auto; min-height: 0; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-screen) var(--ease-out);
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* body region inside a screen that MAY scroll (Basic catalog only) */
.scroll-region {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbars are overlay-style everywhere: content still scrolls (wheel /
   touch / trackpad) but the bar reserves no layout width and never shifts or
   misaligns the industrial grid. Keeping it consistent across every scroll
   region also means a returning scrollbar can't offset a panel edge. */
.scroll-region,
.detail-info-scroll,
.overlay-body,
.detail,
.detail-thumbs,
.navmenu-panel { scrollbar-width: none; -ms-overflow-style: none; }
.scroll-region::-webkit-scrollbar,
.detail-info-scroll::-webkit-scrollbar,
.overlay-body::-webkit-scrollbar,
.detail::-webkit-scrollbar,
.detail-thumbs::-webkit-scrollbar,
.navmenu-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- Layout helpers ---- */
.pad { padding: var(--gutter); }
.row { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.stack { display: flex; flex-direction: column; }
.grow { flex: 1 1 auto; min-height: 0; min-width: 0; }
.hide { display: none !important; }

/* visually hidden but accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}