/**
 * map-tree.css — the Map tab of the wireless network page, recreated from
 * the design file: device cards on a dotted canvas, wired parent to child,
 * every link labelled with the reading it carries.
 *
 * Read off Figma node 10654:9899 in Field Guide. This is the subset the
 * figure on /wireless-network needs; the style's own page — the declaration
 * format, both firmware ladders drawn side by side, and the full list of
 * what was measured rather than read — is in /diagrams and does not deploy.
 *
 * Sibling of device-card.css, and the same two departures apply:
 *
 *   The face. The product sets Codec Warm, which is not a webfont here. The
 *   cards inherit the site's Inter. Every size, weight, line-height and
 *   tracking is written out below, so the substitution changes the
 *   letterforms and the measured card widths and nothing else — widths are
 *   measured at run time, so they follow the face rather than fighting it.
 *
 *   The palette is scoped to .mt rather than :root. It has no business being
 *   global, and the source file's reset is dropped.
 *
 * The one reset kept is box-sizing, scoped to .mt. style.css already sets it
 * globally so it is redundant here, but it is load-bearing rather than
 * cosmetic — see the note on the rule — and keeping it means this file still
 * works dropped into a page that does not.
 */

.mt {
  /* Runwise palette, src/stylesheets/config/_runwise.scss, as the
     design file names it. */
  --mt-grey-050: #fafafa;
  --mt-grey-100: #f0f0f0;
  --mt-grey-300: #c9c9c8;
  --mt-grey-500: #8e8d8c;
  --mt-grey-900: #191918;
  --mt-green-100: #effae9;
  --mt-green-700: #07ad00;
  --mt-red-600: #ff6262;
  --mt-yellow-600: #ffd249;
  --mt-blue-600: #0085ff;
  --mt-white: #fff;

  /* Canvas. MEASURED: the map tab renders a tile grid behind the tree,
     and in this frame every tile is the same 64px dot swatch — so the
     backdrop is a pattern, not a map, and can be drawn rather than
     shipped. Sampled from Figma's render: #f0f0f0 ground, #c9c9c9 dots,
     2px square, 16px apart. The ground is Grey/100 exactly; the dots are
     one value off Grey/300, which is the PNG, not a second colour. */
  --mt-canvas: var(--mt-grey-100);
  --mt-dot: var(--mt-grey-300);
  --mt-dot-size: 2px;
  --mt-dot-pitch: 16px;
  --mt-pad: 48px;

  /* Cards. The height is not a taste call and not a minimum: 12 padding
     + 44 artwork + 8 gap + 20 title + 4 gap + 20 pills + 12 padding is
     exactly the 120 the design file reports, so a card that comes out a
     different height means something above has drifted. */
  --mt-card-h: 120px;
  --mt-card-pad: 12px;
  --mt-card-radius: 20px;
  --mt-art: 44px;

  /* Lanes. Cards are auto-width — a card is as wide as its name — so a
     fixed pitch is a starting point rather than a promise: map-tree.js
     widens any pair of lanes whose cards would come closer than
     --mt-col-gap. 300px is the design's own pitch, to the pixel it
     varies by (295.5, 308.5, 300 across the four lanes). */
  --mt-col: 300px;
  --mt-col-gap: 40px;

  /* Rows. 208px pitch, which is the 120px card plus this gutter. Every
     link label sits in the middle of the gutter under its source card,
     so the gutter is also what stops two labels touching. */
  --mt-gutter: 88px;

  /* Wiring. The elbow radius is the card radius — the same 20 — which is
     what makes a turn read as belonging to the same drawing as the boxes.
     Both came off the exported vector: a quarter circle of radius 20, and
     a port drawn as r=5 under a 2px stroke, so 8px of white inside a
     12px outer diameter. */
  --mt-stroke: 2px;
  --mt-radius: 20px;
  --mt-port-r: 5px;

  /* The face is a token so this file can serve both places it is used. On the
     site the cards inherit Inter, as the device card beside them does; the
     workshop page sets --mt-font to Figtree, which stands in for Runwise's
     Codec Warm. Every measurement below is the design file's either way —
     widths are measured at run time, so they follow the face rather than
     fighting it. */
  --mt-font: inherit;

  font-family: var(--mt-font);
  font-weight: 500;

  /* Scoped rather than a global reset, because this file has to stay
     copy-pasteable into a case study without changing the page around it.
     It is not optional: every width map-tree.js pins is a border-box width
     it measured, and every card height and pill height in the design file
     is a border-box height. Under content-box the 12px of card padding and
     the 2px of pill padding get added on top of numbers that already
     contain them, and each card comes out 24px too wide and 24px too tall.
     Nothing looks broken — it looks like a slightly different design. */
  box-sizing: border-box;

  /* A fixed pixel coordinate space, so a diagram wider than its column
     scrolls sideways rather than squashing. Contained, or on a phone a
     sideways swipe across the diagram triggers the browser's back
     gesture. min-width:0 so the scrolling still works when the host is a
     grid or flex container, where an item's auto min-width would widen
     the page instead. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  min-width: 0;
}

.mt *,
.mt *::before,
.mt *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------- canvas */

.mt-canvas {
  position: relative;
  min-width: 100%;
  background-color: var(--mt-canvas);
  /* Two gradients rather than a radial one, because the design's dots are
     square. The top layer is ground for 14px of each 16px cell and
     transparent for the last 2; the bottom layer is a 2px column of dot
     colour. What survives both is a 2px square. */
  background-image:
    linear-gradient(
      to bottom,
      var(--mt-canvas) calc(var(--mt-dot-pitch) - var(--mt-dot-size)),
      transparent 0
    ),
    linear-gradient(to right, var(--mt-dot) var(--mt-dot-size), transparent 0);
  background-size: var(--mt-dot-pitch) var(--mt-dot-pitch);
}

/* Wires under the cards, ports and labels over them — the order the design
   file layers them in, so a port reads as sitting on the card's edge rather
   than tucked behind it. */
.mt-wires,
.mt-ports {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.mt-wires {
  z-index: 0;
}

.mt-ports {
  z-index: 2;
}

.mt-wire {
  fill: none;
  stroke-width: var(--mt-stroke);
}

.mt-port {
  fill: var(--mt-white);
  stroke-width: var(--mt-stroke);
}

/* One class per rung of the ladder, on the wire, the port and the label
   alike, so the three parts of a link cannot end up saying different
   things about the same reading. */
.mt-good {
  stroke: var(--mt-blue-600);
}

.mt-fair {
  stroke: var(--mt-yellow-600);
}

.mt-weak {
  stroke: var(--mt-red-600);
}

/* ---------------------------------------------------------------- card */

.mt-card {
  position: absolute;
  z-index: 1;
  display: flex;
  height: var(--mt-card-h);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--mt-card-pad);
  border-radius: var(--mt-card-radius);
  background: var(--mt-white);
  /* Figma reports a drop shadow's blur as its radius; the exported filter
     halves it into a Gaussian stdDeviation, and a CSS blur-radius is twice
     that again. So Shadow/Base's radius 3 and radius 2 are 3px and 2px
     here, not the 1.5px and 1px the Tailwind export prints. */
  box-shadow:
    0 1px 3px rgb(0 0 0 / 10%),
    0 1px 2px rgb(0 0 0 / 6%);
}

.mt-card__head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
}

/* The design file puts a second copy of the open icon on the left at zero
   opacity, so the artwork centres between two equal boxes. An empty box of
   the same size does the same job without shipping an invisible icon. */
.mt-card__spacer {
  width: 12px;
  height: 12px;
  flex: none;
}

.mt-card__open {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--mt-grey-500);
}

/* The renders were made on a grey ground, and the design file drops that
   ground out with blend modes rather than with a cleaned-up export. Doing
   the same keeps the artwork the artwork that was exported.

   Three layers, in the file's own order, which is worth keeping because a
   flatter arrangement does not survive: hard-light against the card's white
   turns the near-white ground to white and leaves the device standing; the
   one render whose ground is too dark for that gets burnt first; and the
   white vignette goes on top of the blend group rather than inside it. Put
   the vignette inside and it is blended too, which blows the device out
   until there is nothing left to look at. */
.mt-card__art {
  position: relative;
  display: block;
  width: var(--mt-art);
  height: var(--mt-art);
  flex: none;
}

.mt-card__art-layer {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
}

.mt-card__art-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-card__art--burn .mt-card__art-layer img {
  mix-blend-mode: color-burn;
}

/* The file's own gradient: a 22px circle on the 44px box, transparent at
   the centre, 90% white at seven tenths, solid at the edge. */
.mt-card__art--burn::after {
  position: absolute;
  content: "";
  inset: 0;
  background: radial-gradient(
    circle 22px at 50% 50%,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 90%) 70%,
    #fff 100%
  );
}

.mt-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mt-card__name {
  margin: 0;
  color: var(--mt-grey-900);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.25px;
  text-align: center;
  white-space: nowrap;
}

.mt-card__pills {
  display: flex;
  gap: 4px;
}

/* ---------------------------------------------------------------- pills */

.mt-pill {
  display: inline-flex;
  height: 20px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.mt-pill--count {
  background: var(--mt-grey-050);
  color: var(--mt-grey-900);
}

.mt-pill--battery {
  background: var(--mt-green-100);
  color: var(--mt-green-700);
}

.mt-pill--offline {
  background: var(--mt-red-600);
  color: var(--mt-white);
}

/* ------------------------------------------------------------- the label */

/* The 2px border is the canvas colour, not a border: it is how a label
   punches a hole in the wire it sits on instead of overlapping it. Change
   --mt-canvas and this follows, which is the point of naming it. */
.mt-label {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  border: var(--mt-stroke) solid var(--mt-canvas);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0;
  white-space: nowrap;
}

.mt-label.mt-good {
  background: var(--mt-blue-600);
  color: var(--mt-white);
}

.mt-label.mt-fair {
  background: var(--mt-yellow-600);
  color: var(--mt-grey-900);
}

.mt-label.mt-weak {
  background: var(--mt-red-600);
  color: var(--mt-white);
}

/* ---------------------------------------------------------------- icons */

/* Font Awesome renders at a fixed height with the width following the
   glyph. These are the Free 6.7.2 vectors standing in for the Pro names
   the design file uses; each width is the glyph's own aspect ratio at
   12px tall. The signal box comes out at 15px, which is the width the
   design file reports for it — the one place the two can be checked
   against each other, and they agree. */
.mt-fa {
  display: inline-flex;
  height: 12px;
  flex: none;
  align-items: center;
}

.mt-fa svg {
  height: 12px;
  fill: currentColor;
}

.mt-fa--plug svg { width: 9px; }
.mt-fa--battery-half svg { width: 13.5px; }
.mt-fa--triangle-exclamation svg { width: 12px; }
.mt-fa--signal svg { width: 15px; }

/* fa-arrow-up-right is Pro-only; Free has no diagonal arrow that is not
   also in a box. This is Free's arrow-right on the diagonal — the same
   arrowhead on the same shaft, turned rather than redrawn. */
.mt-fa--arrow-up-right svg {
  width: 10.5px;
  transform: rotate(-45deg);
}