/* --- Kostenarten: who pays, and how it is shared (#149) --- */

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

/* The number is the building's own chart, and the one in the last column is
   SKR03. 36 of the 141 numbers appear in both and mean different things there,
   so neither is ever shown as a bare figure. */
.ka-nummer {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-faint);
}

.ka-schluessel {
  display: grid;
  gap: 0.1rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  min-width: 0;
}

.ka-anteil {
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.ka-anteil__prozent {
  flex: none;
  width: 2.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.field--breit {
  grid-column: 1 / -1;
}

/* Every field on this form owns the whole row. Nothing here pairs with anything
   except a key and its share, and that pair has its own row below. */
.ka-form {
  grid-template-columns: minmax(0, 1fr);
}

.ka-paar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: 0.9rem;
  align-items: start;
}

.ka-paar[hidden] {
  display: none;
}

/* What the form will mean once it is saved, in the words somebody would use to
   say it. It sits between the fields and the buttons because that is where the
   decision is made. */
.ka-satz {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* --- Jahresspiegel: a year beside the year before (#150) --- */

.datarow--kosten {
  grid-template-columns: minmax(0, 1fr) 8rem 8rem 6rem;
}

/* Four columns need 22rem of fixed width before the name gets any. Below that
   the year and the year before stack under the account rather than the row
   running 500px past the screen. */
@media (max-width: 40rem) {
  .datarow--kosten {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .datarow--kosten .datarow__quote {
    text-align: right;
  }
}

.kn-jahr {
  flex: none;
  width: 7rem;
}

/* How many accounts the chosen year holds, in the toolbar it stands in. This
   register was `.dtable__count`'s and was borrowed from it, until that class
   moved under the table and went quiet with it (#443). A toolbar chip beside a
   select and a badge is the one place it still belongs. */
.kn-count {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* The sign is the point: a cost that rose reads differently from one that fell,
   and neither should read as an error. */
.kn-mehr {
  color: var(--neg);
}

.kn-weniger {
  color: var(--pos);
}

/* A cost split across two keys is two rows on the printed statement. Stacked in
   one cell they stay on the Kostenart's own line while still showing the
   working, which is what a tenant asking "why" is owed. */
.ab-teile {
  display: grid;
  gap: 0.2rem;
}

.ab-teil:not(:first-child) {
  color: var(--text-dim);
}

/* Each sub-line stays on one line so the key, the units and the amount line up
   across the three stacked columns. A wrapped key would slide its 86,80 € up
   against the wrong Umlageschlüssel. The table scrolls inside its own panel,
   which is where the width goes. */
.ab-teil {
  white-space: nowrap;
}

/* A reading that no longer counts, kept on the meter rather than removed from it
   (#452). Struck through and dimmed: the row is evidence §259 BGB may yet ask
   for, and a reader has to be able to tell at a glance that no figure was
   computed from it. The reason is on the row's title. */
.ab-teil--zurueckgezogen {
  text-decoration: line-through;
  color: var(--text-dim);
}

/* The reading grid (#192). One row per meter in walking order, the last reading
   beside the field so a wrong digit shows while the hand is still on the
   keyboard. Wide enough to type down, narrow enough to survive a phone. */
.ablesung {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  min-width: 0;
}

/* The row keeps its columns rather than squeezing the input below usefulness, so
   the grid scrolls inside itself the way every table on the platform does — and
   downward too, because this is a grid somebody types down rather than reads. */
.ablesung__scroll {
  max-height: var(--table-max);
  overflow-x: auto;
  overflow-y: auto;
  min-width: 0;
}

.ablesung__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 120px 100px auto;
  gap: 12px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}

/* Pinned: which column is the old reading and which the new has to stay on
   screen while the hand is on the keyboard at meter forty. */
.ablesung__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}

.ablesung__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The label column is a stack, so a badge dropped straight into it would be a
   bar the width of the flat's name. Both marks of a doubled meter share one
   line of that stack instead (#495). */
.ablesung__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.ablesung__input {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

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

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

.ablesung__delta.is-warn {
  color: var(--neg);
  font-weight: 600;
}

.ablesung__tausch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ablesung__row {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
    row-gap: 2px;
  }

  .ablesung__label {
    grid-column: 1;
    grid-row: 1;
  }

  .ablesung__vorher {
    grid-column: 1;
    grid-row: 2;
  }

  .ablesung__input {
    grid-column: 2;
    grid-row: 1;
  }

  .ablesung__delta {
    grid-column: 2;
    grid-row: 2;
  }

  .ablesung__tausch {
    grid-column: 1 / -1;
    grid-row: 3;
    white-space: normal;
  }

  .ablesung__head {
    display: none;
  }
}