/* Well: a hole cut through the shell to the ground (the Design pass, "THE GROUND"). Its rim is the
   ground; its floor is paper, with an inset shadow from the rim saying how deep. Square edges: no
   chamfered corners anywhere (docs/decisions.md, 12 Oct 2026, "Where an order stands, built",
   (1)). Two papers: the lattice, a grid at the lattice pitch for anything drawn, and the
   ruled sheet, a rule every ruled pitch for anything written, where a line of text is one pitch tall
   so it sits on its rule.

   The customer's form has no rim: the paper square on an ink hairline, and four registration marks
   in the ground's colour at its corners, drawn as eight background bars on the well itself so no
   element is added for them. */
.well {
  margin: var(--space-4) 0;
}

.well-rim {
  padding: 0 var(--well-rim) var(--well-rim);
  background: var(--color-ground);
}

/* Without a lip the rim is as deep at the top as everywhere else. */
.well-rim > .well-paper:first-child {
  margin-top: var(--well-rim);
}

/* The lip: the rim's top edge widened into a line, on the ground: what the well holds on the left in
   the ground's grey, what can be done to all of it on the right in its white. */
.well-lip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-5);
  color: var(--color-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}

.well-lip > :last-child:not(:first-child) {
  color: var(--color-ink);
}

.well-lip > * {
  margin: 0;
}

.well-paper {
  position: relative;
  box-shadow: var(--shadow-well);
}

.well-paper-lattice {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background-color: var(--color-paper-lattice);
  background-image:
    linear-gradient(var(--color-rule) var(--hairline), transparent var(--hairline)),
    linear-gradient(90deg, var(--color-rule) var(--hairline), transparent var(--hairline));
  background-size: var(--lattice-pitch) var(--lattice-pitch);
}

/* The ruled sheet: a rule at the foot of every pitch, and text one pitch tall so it stands on one. */
.well-paper-ruled {
  padding: 0 var(--space-5);
  line-height: var(--ruled-pitch);
  background-color: var(--color-paper-ruled);
  background-image: repeating-linear-gradient(
    transparent 0 calc(var(--ruled-pitch) - var(--hairline)),
    var(--color-rule) calc(var(--ruled-pitch) - var(--hairline)) var(--ruled-pitch)
  );
}

.well-paper-ruled > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Plain paper: the sheet with nothing drawn on it, for what is written in blocks rather than in
   rows (Reed, 8 Oct 2026, of the Change tab). The ruled sheet has no padding at its top and foot
   because its first line stands on its first rule; with no rules there is nothing to stand on, so
   the sheet is inset the same as any other block of writing. */
.well-paper-plain {
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-paper-ruled);
}

/* ---- the customer's form: registration marks, no rim ---- */
.well-marks {
  --marks-ink: linear-gradient(var(--color-ground), var(--color-ground));
  padding: var(--marks-gap);
  background:
    var(--marks-ink) left top / var(--marks-arm) var(--marks-weight),
    var(--marks-ink) left top / var(--marks-weight) var(--marks-arm),
    var(--marks-ink) right top / var(--marks-arm) var(--marks-weight),
    var(--marks-ink) right top / var(--marks-weight) var(--marks-arm),
    var(--marks-ink) left bottom / var(--marks-arm) var(--marks-weight),
    var(--marks-ink) left bottom / var(--marks-weight) var(--marks-arm),
    var(--marks-ink) right bottom / var(--marks-arm) var(--marks-weight),
    var(--marks-ink) right bottom / var(--marks-weight) var(--marks-arm);
  background-repeat: no-repeat;
}

.well-marks .well-paper {
  border: var(--hairline) solid var(--color-ink);
  box-shadow: var(--shadow-well-marks);
}