/*
  Gener8 style kit — page base and the panel surface.

  Needs tokens.css first. The typeface (Outfit, Regular and Bold) is loaded by
  tokens.css from kit/css/fonts.css, served from this site.

  Touch rules that apply everywhere:
  - no hover styles (walls and tables have no mouse), only pressed states
  - no text selection or tap highlight, except in form fields
  - every button uses touch-action: manipulation so taps are instant
*/
*, *::before, *::after { box-sizing: border-box; }

/* Transparent page: the model drops straight onto the Intuiface scene */
html, body { height: 100%; margin: 0; background: transparent; overflow: hidden; }
body {
  font-family: var(--font-ui); color: var(--ink);
  font-size: calc(var(--tu) * 1.45); line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Line icons: drawn with the text colour */
svg.i {
  width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/*
  The panel surface: paper card with a hairline outline and a soft shadow.
  .chip is the older name for the same thing and is kept so existing markup works.
*/
.panel, .chip {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* ---- Type helpers ---------------------------------------------------------- */

/* Small heading over a group of controls ("Layers", "View", "Function") */
.kicker {
  font-family: var(--font-display); font-style: normal; font-weight: 400;
  font-size: calc(var(--tu) * 1.5); color: var(--muted); letter-spacing: 0;
}
/* Big title (part name, dialog title): Outfit Bold */
.title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  font-size: calc(var(--tu) * 2.6); line-height: 1.12; margin: 0;
}
/* Numbers and counts */
.num { font-family: var(--font-mono); font-size: calc(var(--tu) * 1.2); color: var(--faint); letter-spacing: .02em; }

/* Pressed feedback for anything tappable (no hover on touch screens) */
.pressable:active, .btn:active, .seg button:active, .pill:active, .iconbtn:active { transform: scale(.97); }