/* Android speed layer (2026-11-09) - only applies under <html class="sl-android"> (js/perf.js).
   iPhone, desktop and the look of the app are unchanged; only the costly effects go. */
html.sl-android *, html.sl-android *::before, html.sl-android *::after {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;   /* re-blurs behind a bar on EVERY scroll frame */
  -webkit-tap-highlight-color: transparent;
}
html.sl-android a, html.sl-android button, html.sl-android [role="button"], html.sl-android input,
html.sl-android select, html.sl-android textarea, html.sl-android label, html.sl-android summary { touch-action: manipulation; }
/* Big blurred decorative circles / grids behind the sign-in screen. */
html.sl-android .orb, html.sl-android .cta-aurora, html.sl-android .hero-aurora { display: none !important; }
/* The fixed bars sit on their own layer so scrolling never repaints them. */
html.sl-android .topbar, html.sl-android .bottom-nav, html.sl-android .tabbar, html.sl-android .header, html.sl-android .bottomnav { transform: translateZ(0); }
/* Screen change: one quick fade, no card-by-card stagger (the stagger made every screen feel late). */
html.sl-android #view.view-enter { animation: slAndFade .16s ease-out both; }
html.sl-android #view.view-enter > * { animation: none !important; }
@keyframes slAndFade { from { opacity: .0; } to { opacity: 1; } }
/* Sheets and popups: shorter. */
html.sl-android .modal, html.sl-android .sheet, html.sl-android .modal-card { animation-duration: .18s !important; }
/* Smooth, native-feeling scrolling inside panels. */
html.sl-android .modal-body, html.sl-android .sheet-body, html.sl-android .chat-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Long lists on Android: rows past the first 40 stay hidden until scrolled to (js/perf.js SLPerf.defer). */
html.sl-android body table tbody tr.sl-defer.sl-defer, html.sl-android .sl-defer.sl-defer.sl-defer { display: none !important; }   /* must outrank the tbl-cols display:table-row !important */
.sl-more { display: flex; justify-content: center; padding: 14px 12px 22px; }
.sl-more .btn { min-height: 44px; }

html.sl-android .sl-flat, html.sl-android .sl-flat-card { overflow: visible !important; }

/* "New updates available" chip (js/app.js showFreshChip): all devices. */
.sl-fresh { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 58;
  max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 700;
  color: #fff; background: #2f55d4; box-shadow: 0 6px 18px rgba(15, 23, 42, .28); -webkit-user-select: none; user-select: none; }
:root[data-theme="dark"] .sl-fresh { background: #5b7cff; color: #0b1020; }

/* Live search: rows that do not match are simply hidden (js/shared.js liveSearch). */
body #view table tbody tr.sl-nomatch.sl-nomatch { display: none !important; }
.sl-nomatch-msg { padding: 16px 14px; color: var(--muted, #64748b); font-size: 14px; text-align: center; }

/* Rent receipts, month-wise (js/receipts.js). All devices, light + dark. */
.rc-months { padding: 12px; margin-bottom: 12px; }
.mstrip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 4px; scroll-snap-type: x proximity; }
.mstrip::-webkit-scrollbar { display: none; }
.mstrip-m { flex: none; min-width: 84px; min-height: 52px; padding: 7px 12px; border-radius: 14px; border: 1.5px solid var(--line, #e2e8f0); background: var(--card, #fff);
  color: var(--ink, #0f172a); text-align: center; font: inherit; cursor: pointer; scroll-snap-align: center; }
.mstrip-m b { display: block; font-size: 13.5px; white-space: nowrap; }
.mstrip-m small { display: block; font-size: 11.5px; color: var(--muted, #64748b); white-space: nowrap; }
.mstrip-m.is-on { background: var(--brand-600, #2f55d4); border-color: var(--brand-600, #2f55d4); color: #fff; }
.mstrip-m.is-on small { color: rgba(255, 255, 255, .85); }
.mstrip-m.is-next { border-style: dashed; opacity: .55; cursor: default; }
.mrange { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mrange-c { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line, #e2e8f0); background: var(--card, #fff); color: var(--ink, #0f172a);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.mrange-c[aria-pressed="true"] { background: color-mix(in srgb, var(--brand-600, #2f55d4) 12%, var(--card, #fff)); border-color: var(--brand-600, #2f55d4); color: var(--brand-600, #2f55d4); }
:root[data-theme="dark"] .mrange-c[aria-pressed="true"] { color: #a5b8ff; border-color: #5b7cff; }
.rc-actions { align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-actions .btn { min-height: 40px; }
.rc-actions .btn:disabled { opacity: .5; filter: grayscale(1); cursor: not-allowed; }
.rc-actions-hint { font-weight: 700; }
tr.rc-grp td { padding: 0 !important; background: color-mix(in srgb, var(--brand-600, #2f55d4) 8%, var(--card, #fff)) !important; }
.rc-grp-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 14px; border: 0; background: transparent; color: var(--ink, #0f172a);
  font: inherit; text-align: left; cursor: pointer; }
.rc-grp-h b { font-size: 15px; }
.rc-grp-h span { flex: 1; color: var(--muted, #64748b); font-size: 13px; font-weight: 600; text-align: right; }
.rc-grp-h i { font-style: normal; flex: none; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--brand-600, #2f55d4); background: var(--card, #fff); border: 1px solid color-mix(in srgb, var(--brand-600, #2f55d4) 35%, transparent); }
:root[data-theme="dark"] .rc-grp-h i { color: #a5b8ff; }
body #view table tbody tr.rc-fold.rc-fold { display: none !important; }
@media (max-width: 820px) {
  /* The table can scroll sideways on a phone: keep the month heading pinned to the left edge. */
  .rc-grp-h { position: sticky; left: 0; width: auto; max-width: calc(100vw - 40px); }
  tr.rc-grp td::before { content: none !important; }
  .rc-actions .grow { display: none; }
  .rc-actions-hint { flex: 1 1 100%; }
  .rc-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Month strip above the monthly lists (App.monthStrip): rents, expenses, tenants. */
.mstrip-card { padding: 10px 12px; margin-bottom: 12px; }
/* Forms open without flicker on Android (owner 2026-11-16). The opening fade (opacity 0 -> 1)
   dropped frames in the Android WebView, so the half-transparent form showed the page behind it
   for a few frames. On Android the form now arrives fully solid and only slides up a little;
   while it is being built (#modalRoot.is-prep) nothing is shown at all. iPhone/website unchanged. */
html.sl-android #modalRoot.is-prep { visibility: hidden !important; }
html.sl-android #modalRoot.is-prep .modal, html.sl-android #modalRoot.is-prep .modal-veil { animation: none !important; }
html.sl-android #modalRoot .modal,
html.sl-android body[data-from-profile] #modalRoot .modal { animation: slAndRise .16s cubic-bezier(.2, .8, .2, 1) both !important; opacity: 1 !important; }
html.sl-android #modalRoot .modal-veil { animation: none !important; opacity: 1 !important; }
html.sl-android #modalRoot.over-sheet .modal { animation: slAndPush .16s cubic-bezier(.2, .8, .2, 1) both !important; }
@keyframes slAndRise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes slAndPush { from { transform: translateX(18px); } to { transform: none; } }