/* --- Statement coverage: one cell per month, per account (#263) --- */
.deckung {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.deckung__konto {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
}

.deckung__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}

.deckung__wer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
}

.deckung__name {
  font-size: 1.05rem;
  font-weight: 500;
}

.deckung__iban {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.deckung__spanne {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.deckung__jahre {
  display: grid;
  gap: 0.45rem;
}

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

.deckung__jahrzahl {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  min-width: 2.8rem;
}

.deckung__monate {
  display: flex;
  gap: 3px;
}

.deckung__monat {
  width: 2rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  background: var(--sunk);
}

/* The legend swatch carries the same modifiers as a cell, so it is declared
   before them: equal specificity, and the later rule would otherwise repaint
   every swatch with the neutral background. */
.deckung__probe {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--sunk);
}

.deckung__monat--gedeckt {
  background: var(--pos-soft);
  border-color: color-mix(in srgb, var(--pos) 45%, var(--line));
  color: var(--pos);
}

.deckung__monat--unvollstaendig {
  background: var(--brass-soft);
  border-color: color-mix(in srgb, var(--brass) 50%, var(--line));
  color: var(--brass);
}

.deckung__monat--luecke {
  background: var(--neg-soft);
  border-color: color-mix(in srgb, var(--neg) 50%, var(--line));
  color: var(--neg);
  font-weight: 600;
}

.deckung__fehlstellen {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--neg);
  font-variant-numeric: tabular-nums;
}

.deckung__abgewiesen {
  display: grid;
  gap: 0.4rem;
}

.abgewiesen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.15rem 0.9rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--neg-soft);
  color: var(--neg);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.abgewiesen:hover {
  border-color: color-mix(in srgb, var(--neg) 45%, var(--line));
}

.abgewiesen.is-geklaert {
  background: var(--sunk);
  color: var(--text-dim);
}

.abgewiesen.is-geklaert:hover {
  border-color: var(--line-strong, var(--line));
}

.abgewiesen__datei {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

.abgewiesen__notiz {
  grid-column: 1 / -1;
  color: var(--text-faint);
}

.deckung__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.deckung__legende span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* --- The Mandant, at the head of the rail (#262) ---
   The switcher answers *whose books am I in*, which is the same kind of question
   the user card at the foot answers about *who am I*. It therefore borrows that
   card's shape and its popover rather than the detail sheet's form field: flat
   until hover, a name that wraps instead of truncating, the app's own chevron,
   and a menu that belongs to this application. A native select was the only
   boxed white control in the rail and dropped a list styled by the browser.

   No monogram, though the user card has an avatar. A person's initials are a
   thing people use; `WW` for Wiebke und Wolfgang Boden is not, and the 40 px it
   cost were the difference between reading `Boden` and not. */
.mandant {
  position: relative;
}

.mandant__card {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.mandant__card:hover,
.mandant__card[aria-expanded="true"] {
  background: var(--surface-2);
}

.mandant__id {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.mandant__eyebrow {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Three lines, which is what the longest name in the portfolio needs —
   `Wiebke und Wolfgang Boden Gedächtnis gGmbH`. Clipping it hid the one thing
   every figure on the screen is scoped by, and a Mandant is chosen rarely
   enough that the rail can afford the height. */
.mandant__name {
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mandant__chev {
  flex: none;
  margin-left: auto;
  color: var(--text-faint);
}

/* Opens downward, unlike the user menu at the foot which opens up. Both sit
   against the edge they hang from.

   Wider than the rail on purpose. Constrained to it, the longest names wrapped
   to three lines each and the list read as five paragraphs; the nav's own
   scrollbar sat on the right edge too, which made it look cut off. It grows to
   its content and stops at a width where `Wiebke und Wolfgang Boden Gedächtnis
   gGmbH` still fits, spilling over the main area the way a menu should. */
.mandant__pop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 17rem;
  margin-top: 0.3rem;
  padding: 0.25rem;
  display: grid;
  gap: 0.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.mandant__pop[hidden] {
  display: none;
}

.mandant__wahl {
  display: flex;
  align-items: start;
  gap: 0.45rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

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

/* The one you are in is named, not merely highlighted: a background alone reads
   as hover to anybody who arrived with the keyboard. */
.mandant__wahl[aria-checked="true"] {
  color: var(--brass);
}

.mandant__haken {
  flex: none;
  width: 0.9rem;
  margin-top: 0.15rem;
  color: var(--brass);
}

.mandant__wahl[aria-checked="false"] .mandant__haken {
  visibility: hidden;
}

/* The reach question replaces the save button rather than sitting beside it:
   two primary buttons offering different blast radii is how the wrong one gets
   clicked (#303). */
.record-form__reach {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

/* The siblings of one payer, ticked. It scrolls because a Zahlstelle has 56 of
   them and the box sits between the tenancy picker and the Aktionen menu; the
   menu is outside it, so nothing here is clipped by the scroll. */
.reach-pick {
  display: grid;
  gap: 0;
  max-height: 18rem;
  overflow-y: auto;
}

.reach-pick__row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.3rem 0.1rem;
  border-top: 1px solid var(--line);
}

.reach-pick__row:first-child {
  border-top: 0;
}

.reach-pick__row:hover {
  background: var(--sunk);
}

/* The cost side ticks the same rows and names two more things about each: what
   kind of cost it is and the period it pays for. That is what tells twelve
   instalments from the Jahresrechnung that closes them, and the kind decides
   which year the money lands in (#663). */
/* The cost picker's columns live on the list, not on each row.

   A grid per row means every width is measured within that row: the head's
   `Art` is narrower than an `Abschlag` badge, so the head sat a few pixels off
   its own column and every column after it followed. Subgrid lets each row take
   the list's columns, so the head and twenty-one rows are measured once,
   together — which is what a column is. */
.reach-pick--kosten {
  grid-template-columns:
    auto 5.5rem minmax(5rem, 1fr) minmax(max-content, 7rem)
    minmax(6.5rem, auto);
  column-gap: 0.5rem;
}

.reach-pick__row--kosten {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

/* Named widths rather than `auto`, because `auto` let the longest word in a
   column set it for every row: `Jahresrechnung` widened the kind, the period
   lost what was left and wrapped onto a second line in all twenty-one rows.
   Each column is now as wide as the thing it holds — a date, a figure, a badge,
   a month — and only the purpose line takes what is left over (#663). */

.reach-pick__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  cursor: default;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.reach-pick__head:hover {
  background: var(--surface);
}

/* The figure is what the eye runs down a list of two dozen, so the decimals
   line up and it is the one thing in the row set in the text's own colour. */
.reach-pick__betrag {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A kind is a state — twelve instalments against the Jahresrechnung that closes
   them — and states are badges everywhere else on this screen. */
.reach-pick__art {
  justify-self: start;
}

/* The global input rule stretches every control to 100%; a checkbox keeps its
   own size so the row reads as a row. */
.reach-pick__row input {
  width: auto;
  accent-color: var(--brass);
}

/* The statement is twelve fields and the sheet is 27 rem wide. As stacked cards
   it ran past a screen and a half; as label-against-value it is one glance. */
.beleg {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1.1rem;
  margin: 0;
  align-items: baseline;
}

.beleg__label {
  color: var(--text-dim);
  font-size: 0.8rem;
  white-space: nowrap;
}

.beleg__value {
  margin: 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}