/* ══════════════════════════════════════════════════════════════════════════
   fechter — THE FIELD

   The layout primitive everything stands on. A card is one thing that stands
   on it; a specimen strip, a diagram row and a set of readings are others.

   This was inside card.css and called .card-field, which was the wrong name
   for it in a way that kept costing something: it pushed every surface toward
   wrapping things in cards so they could be laid out at all. The field does
   not care what a tile contains. It only cares that the tile is a whole
   number of modules and one of two shapes.

   Specified by:  law/the-field.html
   Depends on:    ../tokens/colors_and_type.css   (values)
   Tested by:     ../test/field.test.ts
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE FIELD DOUBLES ─────────────────────────────────────────────────
   [Decided — Rafael, 2026-09-02] A field has 1, 2, 4, 8 or 16 columns. Never
   3, never 5, never 12 or 17, and never auto-fit — an auto-fit field has no
   declared count at all, so it lands on whatever the viewport allows, which
   is how a page ends up with a five-column row nobody chose.

   the-common-measure §01 states the distinction this rests on: "Rungs are
   powers of two. Counts are free." The FIELD is a rung. The number of tiles
   standing on it is a count, and counts are free — five tiles are legal, and
   so are three. What is never legal is giving each of five things a column.

   §00's metaphor strip was the clearest case: five items, auto-fit, so five
   columns. It is one 2x2 and four 1x1 now — five tiles, eight modules, a
   field of four. Nothing about the count had to change.
   ────────────────────────────────────────────────────────────────────────── */

.field {
  --field-cols: 4;
  --field-gap: var(--space-s);

  /* container-type is what makes the module derivable without a length.
     100cqw inside the field is the field's own inline size, so a child can
     be sized in modules while the field itself stays fluid. It is the whole
     reason nothing here is written in px — a hardcoded module only ever
     resolves on the final panel. */
  container-type: inline-size;

  display: grid;
  grid-template-columns: repeat(var(--field-cols), 1fr);
  gap: 0;
  margin: calc(var(--field-gap) / -2);
  width: calc(100% + var(--field-gap));
}

/* ── 2 · THE SLOT IS NOT THE PLATE ─────────────────────────────────────────
   The ratio belongs to the SLOT. The plate is the slot less half a gap on
   every side, and that is where the space between tiles comes from.

   the-common-measure §05, the Slot Law [Rafael]: "A gap is never added
   between two things. It is reserved inside each of them. The grid is a grid
   of slots, and what you draw is the slot less half a gap on every side. Two
   neighbours therefore make a whole gap between them, and the field closes
   exactly — because nothing was ever added to it."

   Its worked example fixes the arithmetic. With module M and gap g,

       slot(N)   =  N · M              ← the ratio lives here. 2x1 IS 2:1.
       drawn(N)  =  N · M − g          ← the plate. 48 for M=64, g=16.

   Rafael states the same thing in matter: "We always measure the room without
   walls and the walls are overlapping — the MU always fits, the wall is just
   drawn above it. In the UI case that means border, border-radius and even
   padding are part of the unit, not additions around it."

   [Corrected 2026-09-02] An earlier pass read "a 2x1 must be 2:1" as a claim
   about the DRAWN plate, proved N·M − g = N·(M − g) only at g = 0, and
   removed the gap — so every card on the page went edge to edge. The proof
   was sound and the premise was wrong: the ratio was never a claim about the
   plate. box-sizing is border-box for the same reason — the rim and the
   padding live inside the plate, never outside it.
   ────────────────────────────────────────────────────────────────────────── */

.field > * {
  --module: calc(100cqw / var(--field-cols));
  margin: calc(var(--field-gap) / 2);
  min-width: 0;
  box-sizing: border-box;
}

/* ── 3 · THE TILE ──────────────────────────────────────────────────────────
   [Decided — Rafael, 2026-09-02] Every tile is a whole number of modules and
   its shape is 1:1 or 1:2, in either orientation. Nothing else exists.
   the-house-is-the-interface §04: "every tile is 1:1 or 1:2. Nothing else may
   be placed."

   The height is measured, not declared — it comes from the module, so the
   shape is a fact about the drawn box at every viewport rather than a label
   on a class name. This retired five bespoke min-heights (144, 220, 300, 380
   and 480px), not one of which was a token or on the scale.

   These are NOT scoped to .card. A tile is whatever stands in the slot.
   ────────────────────────────────────────────────────────────────────────── */

.field > .u-1x1,
.field > .u-2x1 { height: calc(var(--module) - var(--field-gap)); }

.field > .u-1x2,
.field > .u-2x2,
.field > .u-4x2 { height: calc(var(--module) * 2 - var(--field-gap)); }

.u-1x1,
.u-1x2 { grid-column: span 1; }
.u-2x1,
.u-2x2 { grid-column: span 2; }
.u-4x2 { grid-column: span 4; }
.u-1x2,
.u-2x2,
.u-4x2 { grid-row: span 2; }

/* A field halves rather than reflowing: 4 -> 2 -> 1. Every slot keeps its
   shape, because the shape belongs to the tile and not to the breakpoint. */
@media (max-width: 900px) {
  .field { --field-cols: 2; }
  .u-4x2 { grid-column: span 2; }
}
@media (max-width: 600px) {
  .field { --field-cols: 1; }
  .u-2x1, .u-2x2, .u-4x2 { grid-column: span 1; }
  .u-2x2, .u-4x2, .u-1x2 { grid-row: auto; }
  .field > .u-1x2,
  .field > .u-2x2,
  .field > .u-4x2 { height: calc(var(--module) - var(--field-gap)); }

  /* [Proposed — Claude, 2026-09-29] A TILE WHOSE PAYLOAD IS PROSE stands 1:2
     at one column instead of 1:1 — the other shape the law allows. A square
     of the phone's width holds a picture, not three paragraphs, and the card
     clips what does not fit. */
  .field > .phone-1x2 { height: calc(var(--module) * 2 - var(--field-gap)); }

  /* A module left empty to push a tile across has nothing to push at one
     column; it would only stand as a blank square. */
  .field > [aria-hidden="true"]:empty { display: none; }
}

/* ── 4 · A MODULE MAY BE LEFT UNSPENT ──────────────────────────────────────
   the-common-measure §03: "The empty cells are not gaps. They are modules the
   composition chose not to spend, and they sit on the grid exactly as the
   filled ones do."

   So a field of four holding three tiles is finished, not broken. This class
   exists to say so out loud where the emptiness would otherwise read as a
   mistake; most of the time the module is simply left empty.
   ────────────────────────────────────────────────────────────────────────── */
.unspent {
  display: flex;
  align-items: flex-end;
  padding: var(--space-s);
  border: var(--theme-rim-subtle);
  border-style: dashed;
  border-radius: var(--radius-s);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--theme-ink-3);
}

/* ── 5 · THE FIELD NESTS ───────────────────────────────────────────────────
   [Decided — Rafael, 2026-09-02] The inside of a tile obeys the same grammar
   as the outside. A card that holds several readings holds them on a field,
   not in a free-form flex row — which is what §06's console tiles and §19's
   telemetry strip were doing, and why their inner spacing never matched
   anything around them.

   A nested field is the same primitive: it establishes its own container, so
   its module is ITS width over ITS column count, and every rule above applies
   unchanged. The gap steps down one rung, which is the Composition Law's
   grouping rule — the gap inside a group is smaller than the gap around it.
   ────────────────────────────────────────────────────────────────────────── */
.field .field {
  --field-gap: var(--space-xs);
  --field-cols: 2;
  flex: 1 1 auto;
  align-content: start;
}

/* ── 6 · A NESTED FIELD MAY STATE FOUR ─────────────────────────────────────
   [Proposed — Claude, 2026-09-28] A nested field is two columns, and a
   picture's four captions are four things in one row. Four is a rung (§1),
   so saying it is legal. It is .field-4 and not .f-4 because .f-4 already
   belongs to the engines' slot field.
   It halves the way the outer field does: 4 -> 2 -> 1. Its children are
   readings, not tiles, so they take no footprint and size to their words. */
.field.field-4 { --field-cols: 4; }

@media (max-width: 900px) {
  .field.field-4 { --field-cols: 2; }
}
@media (max-width: 600px) {
  .field.field-4 { --field-cols: 1; }
}