.lease__parteien {
  display: grid;
  gap: 0.15rem;
  justify-items: start;
}

/* A merge proposal is a judgement, so the rows stack full width rather than
   sitting side by side: the row that stays is read first, then what folds into
   it, each with everything it holds. */
.record__cards--single {
  columns: 1;
}

.merge {
  display: grid;
  gap: 0.85rem;
}

.merge__row {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.merge__row--keep {
  border-color: var(--pos);
  background: var(--pos-soft);
}

.merge__ident {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.merge__name {
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.merge__meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.merge__reason {
  font-size: 0.92rem;
  color: var(--text-dim);
}

/* The Lieferant block folds away when a partner is not one, rather than
   offering a Gewerk to fill in on a tenant. */
.record-form__section {
  display: grid;
  gap: 1.1rem;
  padding-top: 0.4rem;
}

.record-form__section[hidden] {
  display: none;
}

/* --- Contract positions on the Mietverhältnis (#105) --- */
/* Above the list rather than under it: the offer follows from every position on
   the card, not from the last one a reader's eye lands on.

   `.previous-rent` on the new-tenancy form is the same strip and wears it rather
   than a second copy of these nine declarations: a figure the reader checks at
   one end, the command that acts on it at the other, and it wraps on a phone
   instead of pushing the button off the edge (#726). */
.position-backfill,
.previous-rent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.position-backfill__count,
.previous-rent__figures {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.previous-rent__lead {
  color: var(--text-dim);
}

/* The sum of what the list shows, under the list (#725). A div and not a button:
   a row you can click opens something, and this one is the arithmetic on the
   rows above it. The rule beneath the last position is what separates them —
   `.position:last-child` gives up its own, so the total brings one. */
.position-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-strong);
}

.position-total__label {
  font-size: 0.88rem;
  color: var(--text-dim);
}

.position-total__betrag {
  min-width: 0;
}

.position-list {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

/* A row is its own affordance since #636: a button that opens the sheet, so it
   carries none of a button's own face. */
.position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.9rem;
  width: 100%;
  padding: 0 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.position:hover .position__art {
  color: var(--brass);
}

.position:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.position__main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.position__art {
  font-size: 1rem;
}

.position__bezeichnung {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.position__betrag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.position__zeitraum,
.position__meta {
  grid-column: 1 / -1;
  font-size: 0.76rem;
  color: var(--text-faint);
}

.position--beendet .position__art,
.position--beendet .position__betrag {
  color: var(--text-dim);
}

.position-more {
  grid-column: 1 / -1;
}

.position-more summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.position-more[open] summary {
  margin-bottom: 0.8rem;
}

.position-plan__section {
  display: grid;
  gap: 0.5rem;
}

.position-plan__section > p {
  margin: 0;
}

/* The quiet half of a required field's label — present enough to read before
   the form is submitted, never loud enough to compete with the label itself. */
.field__required {
  font-style: normal;
  color: var(--brass);
  margin-left: 0.15rem;
}

/* A fact about the field, under the field. Not advice: what stands here is a
   date or a figure the reader would otherwise have to go and look up. */
/* `.field > span` is the uppercase, letterspaced label rule, and it outranks a
   bare class. These two are sentences under the field, not a second label. */
.field > .field__hinweis {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* --- A date you type the way you write it ---
   **One field.** `.datum` is the box — it carries the border, the background
   and the padding every other input has, and the two controls inside it carry
   none. What the reader sees is a single date field with a calendar at its
   right edge, which is what an `input[type=date]` looks like; only its text is
   ours, because Chrome renders that text in the browser's language and ignores
   `lang`. See #241. */
.datum {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.datum:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
}

.datum.is-invalid,
input.is-invalid {
  border-color: var(--neg);
}

.field--compact .datum {
  padding: 0.42rem 0.6rem;
  font-size: 0.9rem;
}

/* The controls hand their frame to the box around them. */
.datum__text {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}

.datum__text:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.datum__knopf {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 120ms ease;
}

.datum:hover .datum__knopf,
.datum__knopf:focus-visible {
  opacity: 1;
}

.datum__knopf svg {
  width: 100%;
  height: 100%;
}

/* --- The calendar sheet ---
   Drawn rather than borrowed: a native picker speaks the browser's language,
   which is the whole reason this field exists.

   The layout is Rentvine's, from `learning/rentvine/date_picker` — month and
   year set large on the left with a caret that swaps the days for years, the
   two month arrows on the right, round cells, today ringed and the chosen day
   filled. Its blue is kontor's brass, and two things stay German because they
   are language rather than design: the week begins on Monday, and the columns
   carry two letters. One would not do — `M D M D F S S` cannot tell Montag from
   Mittwoch. */
.kalender {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 34px rgb(0 0 0 / 16%);
}

.kalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.kalender__titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.1rem 0.2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.kalender__caret {
  display: grid;
  place-items: center;
  width: 0.62rem;
  color: var(--text-dim);
}

.kalender__caret svg {
  width: 100%;
  fill: currentColor;
  transition: transform 120ms ease;
}

.kalender__titel[aria-expanded="true"] .kalender__caret svg {
  transform: rotate(180deg);
}

.kalender__pfeile {
  display: flex;
  gap: 0.15rem;
}

/* Round, and quiet until reached for — the grey disc is the hover, not the
   resting state. */
.kalender__pfeil {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.kalender__pfeil svg {
  width: 1.15rem;
  height: 1.15rem;
}

.kalender__pfeil:hover {
  background: var(--surface-2);
}

.kalender__raster {
  display: grid;
  grid-template-columns: repeat(7, 2.5rem);
  gap: 0.2rem;
}

.kalender__wochentag {
  display: grid;
  place-items: center;
  height: 2.1rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.kalender__tag {
  display: grid;
  place-items: center;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 120ms ease;
}