/* Only the real-sheet surface: longer exact amounts and source notes. */
.balance p { font-size: 37px; letter-spacing: -1px; }
#balance-note { display: block; color: #deeadf; font-size: 12px; }
.totals .total p { font-size: 25px; }
.electric-latest strong { font-size: 24px; }
.finance-bottom { flex-basis: 145px; }
.recent li { align-items: center; }
.recent-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-spend { font-size: 27px; }
.sheet-note { font-size: 12px; color: #89694f; margin-top: 5px; line-height: 1.4; }
footer { flex-basis: 43px; align-items: center; }
footer > div { min-width: 0; }
#data-note { margin-top: 4px; color: #786f62; }
@media (max-width: 1300px) {
  .balance p { font-size: 34px; }
  .totals .total p { font-size: 23px; }
}
@media (min-width: 1600px) and (min-height: 900px) {
  .balance p { font-size: 50px; }
  .totals .total p { font-size: 33px; }
  .electric-latest strong { font-size: 32px; }
  .month-spend { font-size: 36px; }
  .finance-bottom { flex-basis: 190px; }
  .sheet-note { font-size: 16px; }
  footer { flex-basis: 56px; }
}

.brand h1 { display:block !important; font-size:36px; line-height:1.05; }
.brand p::before { content:none; display:none; }

/* Keep the expense plot readable when TV browser chrome reduces height. */
@media (max-height: 760px) {
  .totals { padding-top: 10px; padding-bottom: 10px; }
  .finance-bottom { flex-basis: 120px; }
  .residents { flex-basis: 48px; }
  .chart-note { padding-bottom: 7px; }
  footer { flex-basis: 36px; }
}