/* Loading placeholders (src/skeleton.rs) and the rules that keep layouts still while data loads.
   Placeholders reuse the real components' classes (list-row, tx-row, hero…), so they take the
   same heights; this file only paints them. Builds on the tokens in style.css. */

:root {
  --skel: var(--surface-2);
  --skel-hi: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}
@media (prefers-color-scheme: dark) {
  :root { --skel-hi: color-mix(in srgb, var(--surface-2) 90%, var(--text)); }
}

/* A placeholder block: give it a size (or use it on a sized component, e.g. `tx-icon skel`). */
.skel, .skel-text::before {
  background: linear-gradient(100deg, var(--skel) 30%, var(--skel-hi) 50%, var(--skel) 70%) var(--skel);
  background-size: 300% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
.skel { color: transparent !important; border-color: transparent !important; box-shadow: none !important; }

/* A line of text: as tall as its parent's line, painted at roughly cap height. */
.skel-text {
  position: relative; display: inline-block; vertical-align: top; max-width: 100%; width: 60%;
  color: transparent; user-select: none;
}
.skel-text::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.8em; transform: translateY(-50%);
  border-radius: 0.4em;
}

@keyframes skel-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel, .skel-text::before { animation: none; background: var(--skel); }
}

/* Placeholder rows aren't buttons. */
.skel-list .list-row, .skel-row, .skel-budget { cursor: default; }
.skel-row:active, .skel-budget:active { background: transparent; }
.skel-budget::before { background: var(--skel); }
/* Transparent wrappers: their parts sit in the parent like the real content would. */
.skel-tx, .skel-tiles { display: contents; }
.skel-card { display: flex; flex-direction: column; gap: 8px; }
/* The totals cards are <section>s, which are flex columns with a gap. */
.skel-totals { display: flex; flex-direction: column; gap: 10px; }
.skel-amount { flex: none; }

/* A column with the page's gap: wraps several cards in one element without changing their spacing. */
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Rows kept on screen while new ones load (Query::keep_previous): dimmed after a moment, so a
   quick load doesn't flicker. */
.stale { opacity: 0.55; transition: opacity 0.2s ease 0.15s; }

/* For screen readers only. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Placeholders for particular screens. */
.skel-input { display: block; height: 46px; border-radius: 12px; }
.skel-chart { border-radius: 10px; }
[aria-busy="true"] .trend-col { cursor: default; }
.trends[aria-busy="true"] .trend-col:hover { background: transparent; }
/* Forms: a field is laid out like a <label> (text, input, hint). */
.skel-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.skel-btn { display: block; height: 44px; border-radius: 12px; }
/* A detail sheet's top: its parts sit in the sheet like the real ones. */
.skel-detail { display: contents; }
/* A file badge without its folded corner. */
.doc-badge.skel::before { display: none; }
/* A collapsed <details>' summary line. */
.skel-summary { font-size: 0.9rem; padding: 8px 0 0; }
/* A checkbox row (label.check). */
.skel-check { width: 20px; height: 20px; border-radius: 4px; flex: none; }