/* THE MARKED SCENT MAP — the whole catalogue, with some rows named on it.
 *
 * Its own sheet because TWO pages draw it and they load different stylesheets:
 * a Journal post (post-embeds.css) and /catalogue/{id}/near (app.css only).
 * Leaving it in post-embeds.css would mean the catalogue page silently drew an
 * unstyled field; putting it in app.css would charge every page on the site for
 * rules two of them use.
 *
 * Scoped under `.tm-field`, which both callers put on the block.
 */

/* -------------------------------------------------------- the terrain ground
 *
 * The whole catalogue behind the bottles a post names. Faint on purpose: it is
 * the scale, not the subject, and a reader should see the two marks first and
 * the cloud second.
 */
/* THE FIELD IS CAPPED, and the cap is doing two jobs.
 *
 * The drawing is SQUARE, so an uncapped field in a wide panel is as tall as the
 * panel is wide — 930px of map above a table nobody has reached yet.
 *
 * And every length inside a viewBox is in USER UNITS, so the type scales with
 * the field: at 930px wide the 200-unit box magnifies 4.65x and a 6.5-unit
 * label renders at thirty pixels. Capping the width caps the magnification,
 * which is what makes a label size predictable at all. 560/200 = 2.8x, so the
 * sizes below land where the comments say they do. */
.tm-field .post-map-field svg {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

/* One path, one dot per row: a zero-length subpath with a round cap IS the dot,
   which is why there is no fill here and the whole cloud costs one element. */
.tm-field .tm-ground {
  fill: none;
  stroke: var(--faint-lt);
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: .42;
}

.tm-field .tm-dot {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 1.2;
}

.tm-field .tm-lab {
  font-family: var(--ui);
  /* 5px INSIDE A VIEWBOX IS 5 USER UNITS, which the cap above magnifies 2.8x
     to about 14 device pixels. The unit is not optional and this is why: a
     bare `font-size: 5` is invalid CSS, the declaration is dropped, and the
     text inherits 16 — sixteen USER units, forty device pixels, which is how
     this first shipped with rank labels the size of headlines. A unitless
     value is legal as an SVG presentation attribute and never in a
     stylesheet. */
  font-size: 5px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.tm-field a:hover .tm-dot { fill: var(--ink); }


/* ---------------------------------------------------------------- the anchor
 *
 * The bottle a neighbourhood is ABOUT, as against the neighbours. Ink rather
 * than accent, and a ring: on /catalogue/{id}/near every other mark is a
 * ranked neighbour and the one they are ranked against must not read as
 * rank zero.
 */
.tm-field .tm-anchor {
  fill: var(--ink);
  stroke: var(--card);
  stroke-width: 1.6;
}

/* A heavier halo as well as a heavier weight: this label sits in the densest
   part of its own map by construction — every mark around it was chosen for
   being near it — so it has to hold against marks, not just against the
   ground. */
.tm-field .tm-lab-anchor {
  font-weight: 600;
  stroke-width: 3.4px;
}

/* A rank label is a figure in a numeric face, and it sits on a dot rather than
   beside one, so it is set tighter than a name. */
/* A rank is a figure in the numeric face and it sits ON its dot rather than
   beside one, so it is set smaller and tighter than a name: 4 units at 2.8x is
   11.2px, which clears the type floor with nothing to spare and keeps
   twenty-five of them from becoming a thicket. */
.tm-field.tm-ranked .tm-lab {
  font-family: var(--num);
  font-size: 4px;
  letter-spacing: -.02em;
}

/* the anchor keeps its name, so it keeps the reading size */
.tm-field.tm-ranked .tm-lab-anchor { font-size: 5px; }

/* The field on /catalogue/{id}/near sits inside the panel that carries the
   price chips, so it takes the panel's rhythm rather than a post's 2em. */
.near-field { margin: 0 0 20px; }

/* ---------------------------------------------- the field on a narrow screen
 *
 * TYPE INSIDE A viewBox SCALES WITH THE FIELD, so a size that is right at the
 * 560px cap is wrong the moment the field is narrower than that — and it is
 * smallest exactly where nobody checks. The arithmetic, at the 320px viewport
 * `tests/test_stylesheets.py` measures against:
 *
 *     field ~252px / 200-unit box = 1.26x
 *     a 4-unit rank label renders at 5.0px      <- under the 11px floor
 *     a 5-unit name label renders at 6.3px      <- under it too
 *
 * So the user-unit sizes GROW as the field shrinks, which is the opposite of
 * how type usually behaves and is correct here for the same reason: the unit
 * itself is getting smaller. At 1.26x, 9 units is 11.3px and 11 units is 13.9px,
 * so both clear the floor on the smallest screen the site supports.
 *
 * The breakpoint is where the field stops reaching its cap: below about 620px
 * of viewport the panel's own padding means the field is narrower than 560.
 */
@media (max-width: 620px) {
  .tm-field .tm-lab { font-size: 11px; stroke-width: 3px; }
  .tm-field.tm-ranked .tm-lab { font-size: 9px; }
  .tm-field.tm-ranked .tm-lab-anchor { font-size: 11px; }
  /* the marks have to grow with their labels or the dot vanishes under them */
  .tm-field .tm-ground { stroke-width: 2.4px; }
}