/* One state, set by the script: hover, focus and click all open through it,
   because a fixed bubble has to be placed at the moment it is shown and CSS
   cannot place it. The right-edge override that used to sit here is gone with
   it — the placement clamps every bubble into the window now. */
.hint.is-open .hint__bubble {
  display: block;
}

/* --- Verteilung: one question at a time (#148) --- */

/* The toolbar and what it acts on are two things, not one: without this the
   button's own border sat on the edge of the panel below it. */
.screen-stack {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.vt-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.vt-bar .segmented {
  flex: 0 1 auto;
}

.vt-bar .menu {
  margin-left: auto;
}

/* The count of what is open rides the segment it opens, so a finding is visible
   from every view without a panel that pushes the answer off the screen. */
.vt-mark {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--neg);
  color: var(--surface);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.vt {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

/* The list of keys stays put while the answer beside it scrolls: picking the
   next key is one click from anywhere in a house with 81 units.

   Capped like every other scrolling list: at the full window it outgrew the
   column it sticks inside and slid off the top instead of staying put. */
.vt-rail {
  position: sticky;
  top: 1rem;
  display: grid;
  align-content: start;
  gap: 1px;
  max-height: var(--table-max);
  overflow-y: auto;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.vt-pick {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.8rem 0.55rem 0.7rem;
  border: 0;
  border-left: 2px solid transparent;
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

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

.vt-pick:focus-visible,
.datarow:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.vt-pick.is-active {
  background: var(--surface-2);
  border-left-color: var(--brass);
}

.vt-pick__name {
  font-size: 0.9rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.vt-pick.is-active .vt-pick__name {
  color: var(--brass);
  font-weight: 550;
}

.vt-pick__warn {
  margin-left: 0.35rem;
  color: var(--neg);
}

.vt-pick__meta {
  font-size: 0.75rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.vt-tafel {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

/* Two figures belong beside each other, not one at either end of the panel:
   auto-fit with 1fr stretches two facts across 1.000 pixels. */
.vt-tafel .record-facts {
  grid-template-columns: repeat(auto-fit, minmax(9rem, auto));
  justify-content: start;
  gap: 1.05rem 2.4rem;
}

.vt-kopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

.vt-kopf__titel {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* The actions sit together at the end of the line: auto on every one of them
   would push each to its own edge and leave a hole between the two. */
.vt-kopf__zeile .btn {
  margin-left: auto;
}

.vt-kopf__zeile .btn + .btn {
  margin-left: 0;
}

.vt-satz {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.vt-satz--leise {
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.82rem;
}

/* The other table on the platform: a grid of rows with a header of its own
   rather than a `<table>`. Its own scroll container, so it needs no wrapper. */
.datalist {
  display: grid;
  max-height: var(--table-max);
  overflow-y: auto;
}

/* One line of a list: a name on the left, figures on the right, the whole row
   the thing you click. Every screen that lists records uses it and sets its own
   columns — the chrome is shared so that two lists never drift apart. */
.datarow {
  display: grid;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.4rem 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.datarow--verteilung {
  grid-template-columns: minmax(0, 1fr) 6rem 5rem 4rem;
}

.datarow--kostenart {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

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

/* Opaque and pinned, the bargain `.ledger th` makes: rows scroll under the
   column names rather than past them. Transparent was safe only while nothing
   moved beneath it. */
.datarow--kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  cursor: default;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.datarow__name {
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}

.datarow__neben {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.datarow__zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.datarow__quote {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.vt-balken {
  height: 3px;
  border-radius: 999px;
  background: var(--surface-2);
}

.vt-balken__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brass);
}

/* A unit with no weight does not take part, and that is the whole mechanism —
   there is no flag anywhere that could contradict it. So the ones left out are
   named under the ones that pay, quietly, each one click from being taken in. */
.vt-offen {
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}

.datarow--offen {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--text-dim);
}

.datarow--offen:last-child {
  border-bottom: 0;
}

.datarow__aufnehmen {
  font-size: 0.82rem;
  color: var(--brass);
}

/* A finding is one line: what it is about, what is wrong, and the thing that
   answers it. The IBAN row this borrowed from carries four lines of metadata. */
.befund-list {
  display: grid;
}

.befund {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 4rem;
  align-items: center;
  gap: 0.5rem 0.9rem;
  width: 100%;
  padding: 0.45rem 0.3rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

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

.befund:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -2px;
}

.befund .badge {
  justify-self: start;
}

.befund:last-child {
  border-bottom: 0;
}

.befund__name {
  font-size: 0.93rem;
  overflow-wrap: anywhere;
}

.befund__oeffnen {
  text-align: right;
  font-size: 0.82rem;
  color: var(--brass);
}
/* One granted Nachlass: the scope and its reason on the left, the amount on the
   right, who decided it underneath. It borrows `.datarow` rather than
   `.position` because it is a row you click, and `.position` is the div-shaped
   row — laid out for a lease position and carrying none of the reset a button
   needs (#377). */
.nachlass-list {
  display: grid;
}

.datarow--nachlass {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 0.9rem;
  padding: 0.55rem 0.3rem;
}

.datarow--nachlass:last-child {
  border-bottom: 0;
}

/* A row that opens nothing must not offer to. `.datarow` is a button's chrome —
   pointer and a hover ground — and a building-wide Nachlass is read here and
   changed on the Kostenart, so the row is a div and has to look like one (#597). */
.datarow--fest,
.datarow--fest:hover {
  background: transparent;
  cursor: default;
}

/* The scope badge sits against the Kostenart it qualifies, and `.datarow__name`
   is a block: without this the border touches the last letter. Half the gap
   `.datarow__neben` carries on the other side of it, because the badge belongs
   to the name and the reason beside it does not. */
.datarow__name .badge {
  margin-left: 0.45rem;
}

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

/* The slot the form opens into. `display: contents` so that an empty one is not
   a grid child: the card puts a gap between its parts, and an empty div would
   hold that gap open under the heading whenever no form was open. */
.nachlass-slot {
  display: contents;
}

/* Granting one, in place under the heading it belongs to rather than on a screen
   of its own. Sunk, so it reads as a thing opened inside the card and not as a
   second card that happens to be adjacent. */
.nachlass-form {
  display: grid;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sunk);
}

@media (max-width: 68rem) {
  .vt {
    grid-template-columns: minmax(0, 1fr);
  }

  .vt-rail {
    position: static;
    max-height: 18rem;
  }
}

/* One period's decisions inside the building's card. Separated by a rule rather
   than by a card of its own: eighteen years of them would be eighteen panels. */
.nachlass-gruppe {
  display: grid;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

/* The window a Kennzahl is true for, under the figure rather than beside it. */
.record__fenster {
  margin: -0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--text-faint);
}