/* The reset, the font, and the page. The desk layout is in pf-desk.js; the catalog layout is in src/pages/components.js. */
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist.woff2') format('woff2');
  font-weight: 100 900;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: 'ss01', 'tnum';
  -webkit-font-smoothing: antialiased;
}
/* The grain of the desk: white noise on whole pixels, under all parts. --grain: 0 turns it off. The flat ui has none. */
body:not(.ui)::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/grain.png') 0 0 / 256px 256px; image-rendering: pixelated;
  mix-blend-mode: overlay; opacity: calc(.22 * var(--grain));
}

/* The header of each page: the name, and the nav to each page. It has the same size on each page, and the side space of
   the pages (--edge). On the desk it lies over the desk, and only its links take a click. */
.pf-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--edge) 0; font: 600 13px / 1 var(--font); }
.pf-header > b { font-weight: 600; white-space: nowrap; }
/* The header stays at the top as the page scrolls, on the color and the grain of the page (body::before). */
.pf-header { position: sticky; top: 0; z-index: 50; background: var(--desk); }
body:not(.ui, .desk) .pf-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('../assets/grain.png') 0 0 / 256px 256px fixed; image-rendering: pixelated; mix-blend-mode: overlay; opacity: calc(.22 * var(--grain)); }
body.desk .pf-header { position: fixed; z-index: 5; inset: 0 0 auto; pointer-events: none; background: none; }
body.desk .pf-header a { pointer-events: auto; }
.pf-nav { display: flex; gap: 16px; font: 500 13px / 1 var(--font); }
.pf-nav a { padding: 8px 0; color: var(--ink-soft); text-decoration: none; }
.pf-nav a[aria-current] { color: var(--accent); }
@media (max-width: 420px) { .pf-nav { flex-wrap: wrap; justify-content: flex-end; gap: 0 12px; } }   /* on a phone the links wrap, so all fit next to a title */
.pf-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Print on a device: its name with its icon, its code, the labels of its parts, and small specs. */
.pf-name, .pf-code, .pf-label, .pf-spec { color: var(--ink); white-space: nowrap; pointer-events: none; }
.pf-name { display: flex; align-items: center; gap: calc(.4 * var(--u)); font: 600 calc(1 * var(--u)) / 1 var(--font); letter-spacing: -.01em; }
.pf-name .pf-icon { width: calc(1.15 * var(--u)); height: calc(1.15 * var(--u)); fill: currentColor; }
.pf-code { font: 500 calc(.6 * var(--u)) / 1 var(--font); letter-spacing: .08em; color: var(--ink-soft); }
.pf-label { font: 500 calc(var(--label-size) * var(--u)) / 1 var(--font); letter-spacing: .02em; }
.pf-spec { font: 400 calc(.58 * var(--u)) / 1.35 var(--font); letter-spacing: .03em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- the desk ----------
   On a desktop, the devices are in a row and the cables lie in the bay under them.
   On a phone in portrait, the devices are in two columns, with a bay under each row.
   The jacks are on the sides of the devices, so a column gap holds two plugs and the bend of a cable. */
body.desk { overflow: hidden; overscroll-behavior: none; }
pf-desk {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; height: 100vh; height: 100dvh;
  grid-template:
    "bat  dial pad  lamp" auto
    "bay  bay  bay  bay " calc(15 * var(--u))
    / auto auto auto auto;
  place-content: center;
  gap: calc(3 * var(--u)) calc(8 * var(--u));
  align-items: start;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
pf-desk > .pf-bay { grid-area: bay; align-self: stretch; }
pf-desk > .pf-bay + .pf-bay { display: none; }
pf-desk > [area=bat] { grid-area: bat; }
pf-desk > [area=dial] { grid-area: dial; }
pf-desk > [area=pad] { grid-area: pad; }
pf-desk > [area=lamp] { grid-area: lamp; }
@media (max-width: 720px) and (orientation: portrait) {
  pf-desk {
    grid-template:
      "bat  lamp" auto
      "bay  bay " calc(13 * var(--u))
      "dial pad " auto
      "bay2 bay2" calc(11 * var(--u))
      / auto auto;
    gap: calc(2 * var(--u)) calc(8 * var(--u));
  }
  pf-desk > .pf-bay + .pf-bay { display: block; grid-area: bay2; }
}

/* The canvas of the cables lies above the devices; the buttons of the plugs lie above it. */
.pf-cables { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
pf-cable { position: absolute; inset: 0; pointer-events: none; }
/* A desk in a page that scrolls (pf-desk.js): its canvas is fixed on the screen, and the desk lies above the other
   parts of the page, so a cable can go anywhere on it. */
pf-desk[page] { display: block; height: auto; overflow: visible; padding: 0; z-index: 5; touch-action: auto; }
pf-desk[page] > .pf-cables { position: fixed; }
/* A desk that zooms (zoom.js) is --zoom times the screen, and it and its canvas are fixed on the screen. A desk in the
   flow makes the page as large as the desk, and a phone then puts the fixed parts, such as the header, off the screen. */
pf-desk[zoom] { position: fixed; width: calc(var(--zoom, 1) * 100%); height: calc(var(--zoom, 1) * 100dvh); }
pf-desk[zoom] > .pf-cables { position: fixed; }
.pf-plug, .pf-tie { position: absolute; z-index: 4; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; pointer-events: auto;
  cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pf-plug:active, .pf-tie:active { cursor: grabbing; }
.pf-plug:focus-visible, .pf-tie:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* The light dot of a page (src/pages/light-dot.js), as in src/dev/tweak.js. */
.light { position: fixed; z-index: 100; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; cursor: move; touch-action: none; }
.light::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 40%, #fff1d6);
  box-shadow: 0 0 0 1px #0000001f, 0 0 10px 3px #fffc, 0 0 30px 10px #ffffff59; }
.light:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }