/* --- The record page — a searchable list opening one entity, shared by Portfolio and Properties --- */
#eigentuemer-list {
  max-width: 68rem;
}

/* The Kennung is an identifier, not prose: mono, so it reads as a key. */
.cell-key {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
  color: var(--text-faint);
  white-space: nowrap;
}

.record {
  display: grid;
  gap: 1.35rem;
  align-content: start;
  max-width: 68rem;
  animation: record-in 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes record-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

.record__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line);
}

.record__ident {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.record__key {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
}

.record__name {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
}

.record__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

/* The walk through the list the record was opened from (#600).

   It is placed by the caller rather than by `recordHead`, and it lands in two
   different containers — beside Aktionen in the record head, and in the meter
   sheet's own card head — so it carries its own alignment instead of borrowing
   whatever the container happens to give it. */
.record__pager {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

/* An end of the walk is refused rather than hidden: the arrow that is left is
   the one that still leads somewhere. */
.record__pager .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Tabular figures, or the count shifts under the arrows as the walk passes 9. */
.record__pager-position {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-dim);
}

/* Two columns that fill rather than pair off.

   As a grid every row was as tall as its tallest card, so a short card left a
   hole the height of its neighbour: on a tenancy's Stammdaten, Parteien (123px)
   beside Vertrag (453px) left 330 of them, and the left column ran to 1520px
   against the right's 798. The cards are independent of one another and nothing
   is read across a row, so there is nothing for the pairing to preserve.

   Columns pack each card under the one before it and balance the two heights.
   `break-inside: avoid` keeps a card whole; the gap between cards is a margin
   rather than `gap`, which multi-column applies between columns only. */
.record__cards {
  columns: 2;
  column-gap: 1rem;
}

.record__cards > *,
.record__slot > * {
  break-inside: avoid;
  margin-bottom: 1rem;
}

@media (max-width: 780px) {
  .record__cards {
    columns: 1;
  }
}

.record-card {
  padding: 1.3rem 1.4rem;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

/* A badge sitting directly in a card is a label, not a bar: the card is a grid
   and would otherwise stretch it edge to edge. */
.record-card > .badge {
  justify-self: start;
}

/* A note and the mark that its wording was corrected (#451). The mark is *about*
   the note rather than part of it, and it is not a state the reader scans for —
   so it is a quiet second line under the sentence, the same shape `.cell-note`
   already gives a figure's qualifier, rather than a bordered chip competing with
   the text beside it.

   A chip in the sentence's flow also lands in two places for one fact: inline
   after a short note, on its own line after a long one. Beneath, it is in the
   same place on every row. */
.notiz-zelle {
  display: grid;
  gap: 0.15rem;
}

/* The date and the author are one value each; the note is the prose. Left to
   wrap they break mid-value — *26.08.2026,* over *16:45*, *Johannes* over
   *Langhein* — while the note column keeps width it does not need. The table
   scrolls inside its own panel, which is where any width goes (#408). */
.notiz-kurz {
  white-space: nowrap;
}

/* A card that carries commands of its own puts them beside its eyebrow. The
   record's Actions button at the top of the page belongs to the record: reaching
   for it to retire the meter you just clicked means crossing the whole screen to
   a control that said something else a moment ago. */
.record-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.record-card__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.record-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
  gap: 1.05rem 1.4rem;
}

/* A card with nothing in it yet. The quiet cousin of `.empty`, which owns a
   whole panel and centres three rems of nothing: under a heading that has
   already named the card, that reads as a fault rather than as a card with no
   rows. Ten screens had been asking for it by name since #148 and getting body
   text. */
.record__empty {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-faint);
}

.record__crumb {
  justify-self: start;
  margin-bottom: -0.5rem;
}

.fact {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.fact__label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.fact__value {
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.fact__value--data {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.fact__value--empty {
  color: var(--text-faint);
}

/* The signature: the owner exactly as it prints on correspondence. */
/* Across both columns, which is what it was before `.record__cards` stopped
   being a grid: `grid-column` is inert outside one, and the letterhead is the
   one child of that container the pairing was ever preserving. */
.letterhead {
  column-span: all;
  padding: 1.6rem 1.7rem;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

/* The rule and the card's own command on one line, so the letterhead keeps its
   shape while carrying a `Bearbeiten` like every other card on the record. */
.letterhead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.letterhead__rule {
  width: 2.75rem;
  height: 2px;
  background: var(--brass);
}

.letterhead__block {
  display: grid;
  gap: 0.12rem;
  font-size: 1.02rem;
  line-height: 1.5;
}

.letterhead__name {
  font-weight: 500;
  letter-spacing: -0.005em;
}

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

/* The reachable line: how a Mieter answers the letter. */
.letterhead__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.83rem;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}

.letterhead__reach {
  white-space: nowrap;
}

.letterhead__note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

/* Tabs divide one record, so the rule runs the full width and the active tab
   sits on it — the brass mark the rail already uses for "where you are". */
.tabs {
  display: flex;
  gap: 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}

/* `flex-shrink: 0` is what makes the bar above actually scroll. Without it flex
   squeezes each tab below its own text, and `nowrap` then spills the label out
   of the button rather than letting the row overflow — seven tabs on Grundstücke
   at 430 px overflowed all seven at once. */
.tab {
  flex-shrink: 0;
  padding: 0 0 0.7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.93rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 120ms ease,
    border-color 120ms ease;
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  color: var(--brass);
  border-bottom-color: var(--brass);
  font-weight: 550;
}

/* Segmented switch inside a card: one set of rows, three time windows. */
.segmented {
  display: flex;
  padding: 0.2rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Grow from the content, never from zero. `flex: 1` sizes every option the same
   regardless of what is in it, so the longest one overflows the box it sits in —
   the count on "Findings" hung 6 px past the border. */
.segmented__option {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: calc(var(--r-sm) - 3px);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 120ms ease,
    color 120ms ease;
}

.segmented__option:hover {
  color: var(--text);
}

.segmented__option.is-active {
  background: var(--surface);
  border-color: var(--line);
  color: var(--brass);
  font-weight: 550;
}

/* A count riding inside an option, not standing on its own in a row. The plain
   badge carries a dot and a pill border sized to be read from across a card; at
   this size it welded a second button onto the first and its text ran into the
   label. The dot goes, the padding halves, and the gap above holds it off. */
.segmented__option .badge {
  padding: 0.05em 0.42em;
  font-size: 0.9em;
  font-weight: 600;
}

.segmented__option .badge::before {
  display: none;
}

.lease-list {
  display: grid;
  gap: 0.55rem;
}

.lease {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  align-items: center;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

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

.lease__name {
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.lease__span {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.lease .badge {
  grid-row: 1 / span 2;
  grid-column: 2;
}

/* Occupancy over the unit's recorded history: let against vacant. */
.track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.track__let {
  height: 100%;
  background: var(--pos);
}

.track__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.track__vacant {
  color: var(--text-faint);
}

/* A slot that fills itself later, and holds no cell while it is empty.

   Every child of `record__cards` is a column item and carries the margin that
   separates the cards, so an empty one still pushes the next card down. A card
   fetched after the record is painted needs a wrapper all the same —
   `display: contents` gives that role to whatever the fetch puts inside, and to
   nobody while it has nothing to show. */
.record__slot {
  display: contents;
}