/* A group as a box (src/group_box.rs; the 20 Oct handoff's *Items, the happy path*): an ink hairline
   with the heavy rule down its left edge, its first row tinted, its rows on a tree rail. The rows'
   own columns are the page's; this draws the box, the tint and the rail. Square, cut from the shell. */
.group-box {
  margin-top: var(--space-3);
  border: var(--hairline) solid var(--color-ink);
  border-left-width: var(--group-box-edge);
  background: var(--color-shell);
}

.group-box-nested {
  margin: var(--space-2) var(--space-2) var(--space-2) var(--group-rail-left);
}

.group-box-head {
  background: var(--color-group-head);
  border-bottom: var(--hairline) solid var(--color-field-line);
}

/* A row hanging off the rail: the rail down its left at `--group-rail-left`, its elbow to the row. */
.group-box-rail {
  position: relative;
}

.group-box-rail::before {
  content: "";
  position: absolute;
  left: var(--group-rail-left);
  top: 0;
  bottom: 0;
  width: var(--hairline);
  background: var(--color-line-hatch);
}

.group-box-rail:last-child::before {
  bottom: 50%;
}

.group-box-rail::after {
  content: "";
  position: absolute;
  left: var(--group-rail-left);
  top: 50%;
  width: var(--group-rail-elbow);
  height: var(--hairline);
  background: var(--color-line-hatch);
}