/* ---------------------------------------------------------------- fonts --- */

@font-face {
  font-family: 'PPMondwest';
  src: url('fonts/PPMondwest-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'PPNeueBit';
  src: url('fonts/PPNeueBit-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: block;
}
@font-face {
  font-family: 'Micro5';
  src: url('fonts/Micro5-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}

:root {
  /* Set every frame from the visible Colectivo/Individuo ratio. The initial
     value is the ramp midpoint, so the first paint is never black. */
  --field-bg: #993171;
  --hud: rgba(255, 255, 255, 0.72);

  /* Written by main.js on every relayout. --sub is one subtile (a quarter of
     a tile edge) in CSS px: the module all the panel chrome is measured in.
     --field-w is the tile field's width, snapped to a whole number of tiles. */
  --sub: 4px;
  --field-w: 60vw;
  --panel-w: 40vw;
}

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

html, body {
  height: 100%;
  overflow: hidden;              /* the field and the panel scroll, never the page */
  background: var(--field-bg);
  color: #fff;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 100mm reference used to derive device px-per-mm. */
#mmprobe {
  position: absolute;
  top: -1000px;
  left: 0;
  width: 100mm;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Background plate, full viewport, under both columns. Add gradients, noise,
   blend modes or animation here without touching the tile renderer. */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--field-bg);
  pointer-events: none;
}

/* ------------------------------------------------- left 3/5: tile field --- */

#field {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  pointer-events: none;
}

#scroller {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--field-w);
  height: 100%;
  z-index: 2;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
  scrollbar-width: none;
}
#scroller::-webkit-scrollbar { width: 0; height: 0; }
#spacer { width: 1px; }

/* ------------------------------------------------------ right 2/5: text --- */

#panel {
  position: fixed;
  top: 0;
  left: var(--field-w);
  right: 0;
  bottom: 0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: calc(var(--sub) * 6) calc(var(--sub) * 5) calc(var(--sub) * 20);
  /* The reference art is aliased pixel type; keep the edges hard. */
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}
#panel::-webkit-scrollbar { width: 0; height: 0; }

/* --- manifiesto --- */

#manifiesto { margin-bottom: calc(var(--sub) * 22); }

#mf-title {
  font-family: 'PPMondwest', serif;
  font-weight: 400;
  font-size: calc(var(--panel-w) * 0.105);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin-bottom: calc(var(--sub) * 3);
}

#mf-subtitle {
  font-family: 'PPNeueBit', monospace;
  font-weight: 700;
  font-size: calc(var(--panel-w) * 0.061);
  line-height: 1.02;
  margin-bottom: calc(var(--sub) * 11);
}

#mf-body {
  font-family: 'PPNeueBit', monospace;
  font-weight: 700;
  font-size: calc(var(--panel-w) * 0.038);
  line-height: 1.14;
}

/* --- explorer --- */

#explorer {
  border: calc(var(--sub) * 2) solid #fff;
}

#legend {
  margin: calc(var(--sub) * 2);
  border: calc(var(--sub) * 2) solid #fff;
  padding: calc(var(--sub) * 3);
}

#legend-title {
  font-family: 'PPMondwest', serif;
  font-size: calc(var(--panel-w) * 0.115);
  line-height: 0.9;
  margin-bottom: calc(var(--sub) * 3);
}

/* Micro5 is a pixel face with a small cap height inside its em; it needs to
   run large to read at all. Everything in the legend below the title uses it. */
#legend, #legend-hex, #meter, #legend-tallies {
  font-family: 'Micro5', monospace;
  font-size: calc(var(--panel-w) * 0.046);
  line-height: 1;
  letter-spacing: 0.06em;
}

/* Colectivo <-> Individuo meter: a solid white bar with the labels knocked
   out in the background colour, and a marker tracking the ratio inside the
   seeker. */
#meter {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  color: var(--field-bg);
  padding: 0 calc(var(--sub) * 0.75);
  height: calc(var(--sub) * 6);
}

#meter-track {
  position: relative;
  height: calc(var(--sub) * 5);
}

#meter-mark {
  position: absolute;
  top: calc(var(--sub) * 0.5);
  /* --meter-t is 0 at Colectivo, 1 at Individuo. */
  left: calc(var(--meter-t, 0.5) * 100%);
  width: calc(var(--sub) * 2);
  height: calc(var(--sub) * 2);
  margin-left: calc(var(--sub) * -1);
  background: #fff;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  font-size: 0;
}

#legend-hex {
  margin-bottom: calc(var(--sub) * 5);
  text-transform: uppercase;
}

#legend-tallies {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  column-gap: calc(var(--sub) * 2);
  row-gap: calc(var(--sub) * 3.5);
  padding-left: calc(var(--sub) * 3);
}
#legend-tallies span[data-kind] { white-space: nowrap; }
#legend-tallies .glyph {
  width: 0.75em;
  height: 0.75em;
  display: block;
}

/* --- one explanation per tile kind --- */

#entries { padding: calc(var(--sub) * 3) calc(var(--sub) * 3) calc(var(--sub) * 5); }

.entry { margin-bottom: calc(var(--sub) * 11); }
.entry:last-child { margin-bottom: 0; }

.entry h2 {
  display: inline-block;
  font-family: 'PPMondwest', serif;
  font-weight: 400;
  font-size: calc(var(--panel-w) * 0.078);
  line-height: 1;
  border-bottom: max(2px, calc(var(--sub) * 0.5)) solid #fff;
  margin-bottom: calc(var(--sub) * 13);
}

.entry p {
  font-family: 'PPNeueBit', monospace;
  font-weight: 700;
  font-size: calc(var(--panel-w) * 0.036);
  line-height: 1.12;
  text-align: justify;
}

/* ------------------------------------------------------------ dev chrome --- */

#hud {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 10px 12px;
  min-width: 260px;
  background: rgba(8, 10, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  backdrop-filter: blur(8px);
  color: var(--hud);
  pointer-events: none;
  white-space: nowrap;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#hud[hidden] { display: none; }
#hud .row + .row { margin-top: 2px; }
#hud b { color: #fff; font-weight: 600; }
#hud .dim { opacity: 0.45; }
#hud .live { color: #6ee7a8; }
#hud .connecting { color: #f5d06f; }
#hud .offline { color: #f57b7b; }
#hud .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  vertical-align: -1px;
}

#banner {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--field-w);
  height: 100%;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.5;
}
#banner[hidden] { display: none; }

/* ------------------------------------------------------------ the drawer --- */
/* Phone only. A bottom sheet holding the explorer, opened by tapping a block
   of tiles. Hidden entirely on desktop, where the explorer lives in #panel. */

#drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: 74vh;
  background: var(--field-bg);
  border-top: calc(var(--sub) * 2) solid #fff;
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
#drawer[hidden] { display: none; }
#drawer.open { transform: translateY(0); }
#drawer.dragging { transition: none; }

/* The head is the drag handle: touch-action none so the browser does not
   claim the gesture for scrolling. */
#drawer-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--sub) * 9);
  touch-action: none;
  cursor: grab;
}
#drawer-head:active { cursor: grabbing; }

#drawer-grip {
  width: calc(var(--sub) * 14);
  height: calc(var(--sub) * 1.5);
  background: #fff;
}

#drawer-close {
  position: absolute;
  top: 50%;
  right: calc(var(--sub) * 3);
  transform: translateY(-50%);
  width: calc(var(--sub) * 6);
  height: calc(var(--sub) * 6);
  padding: calc(var(--sub) * 1);
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
#drawer-close svg { width: 100%; height: 100%; display: block; }

#drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 0 calc(var(--sub) * 3) calc(var(--sub) * 8);
  -webkit-font-smoothing: none;
}
#drawer-body::-webkit-scrollbar { width: 0; height: 0; }

/* ------------------------------------------------------------- phone --- */

@media (max-width: 820px) {
  /* One column: the manifesto scrolls above an endless field. */
  #panel { display: none; }
  #scroller { width: 100%; }
  #hud { display: none; }

  /* The manifesto is moved into #scroller by main.js and scrolls with it. */
  #manifiesto {
    position: relative;
    z-index: 1;
    padding: calc(var(--sub) * 8) calc(var(--sub) * 4) calc(var(--sub) * 10);
    margin-bottom: 0;
  }

  #mf-title    { font-size: calc(var(--panel-w) * 0.125); }
  #mf-subtitle { font-size: calc(var(--panel-w) * 0.070); }
  #mf-body     { font-size: calc(var(--panel-w) * 0.046); }

  #legend-title { font-size: calc(var(--panel-w) * 0.135); }
  #legend, #legend-hex, #meter, #legend-tallies {
    font-size: calc(var(--panel-w) * 0.055);
  }
  .entry h2 { font-size: calc(var(--panel-w) * 0.092); }
  .entry p  { font-size: calc(var(--panel-w) * 0.044); }

  /* In the drawer the explorer is already framed by the sheet's own edge. */
  #explorer { border: none; }
  #legend { margin: 0 0 calc(var(--sub) * 4); }

  /* One tally per line: a two-up row wraps at this width. */
  #legend-tallies {
    grid-template-columns: auto 1fr;
    padding-left: calc(var(--sub) * 2);
    row-gap: calc(var(--sub) * 3);
  }
}

/* ---------------------------------------------------------- the preamble --- */
/* Holding page on arrival: the Mechanical Turk over the ramp's red end, with
   the notice set in PPMondwest. Sits above everything and blocks interaction
   until it lifts; `display:none` afterwards so it can never intercept. */

#preamble {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* Must match COLECTIVO_COLOR in palette.js — main.js re-asserts it at boot.
     Kept here too so the first paint is red before any script runs. */
  background: #eb1c24;
  padding: calc(var(--sub) * 4) calc(var(--sub) * 4) calc(var(--sub) * 3);
  -webkit-font-smoothing: none;
  opacity: 1;
  transition: opacity 600ms ease;
}
#preamble.leaving { opacity: 0; }
#preamble[hidden] { display: none; }

/* The animated backdrop. Absolute, so it sits under the flex children without
   taking part in the layout. Cover-cropped: these are atmosphere, not
   composition, and the solid red behind matches their field exactly. */
#preamble-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#preamble-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}

/* <picture> is the flex item; the <img> inside fits within it. */
#preamble-art {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
}
#preamble-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 1-bit dithered art: never let the browser smooth it. */
  image-rendering: pixelated;
}

#preamble-text {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: calc(var(--sub) * 3);
  max-width: 116ch;
  font-family: 'PPMondwest', serif;
  font-weight: 400;
  color: #fff;
  text-align: center;
  font-size: clamp(13px, 1.65vw, 42px);
  line-height: 1.16;
}

@media (max-width: 820px) {
  /* Keep the desktop composition — art filling the space above, notice on the
     baseline. Centring the pair instead leaves a dead band under the text. */
  #preamble { padding: calc(var(--sub) * 6) calc(var(--sub) * 4) calc(var(--sub) * 6); }
  #preamble-text { font-size: clamp(15px, 3.9vw, 30px); }
}