/* Load status (ladestatus.js): 2 px line on the header's top edge + status word (the detail panel brings
   ladestatus-panel.css itself). Only transform and
   opacity transitions (compositor), fixed sizes (no layout shift), square edges (<= 4 px). */
.ls-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; pointer-events: none; transition: opacity 0.6s ease; }
.ls-fill { display: block; height: 100%; background: var(--accent); transform: scaleX(0.04); transform-origin: 0 50%; transition: transform 0.35s ease-out; will-change: transform; }
.ls-line[data-state="fail"] .ls-fill { background: #EF4444; }
.ls-line.ls-done { opacity: 0; }
.ls-word { flex: none; display: inline-flex; align-items: center; gap: 6px; width: 10.5em; min-height: var(--target); padding: 0 8px; margin-left: -12px;
  background: transparent; border: 1px solid transparent; border-radius: 2px; color: var(--muted); font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.ls-word:hover, .ls-word[aria-expanded="true"] { color: var(--text); border-color: var(--border); }
.ls-sym { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; font-size: 0.7rem; line-height: 1; color: #0E1014;
  background: var(--accent); border-radius: 2px; }
.ls-short { display: none; }
.ls-sym:empty { background: radial-gradient(circle, var(--accent) 3px, transparent 3.5px); }   /* pending: a dot, same box (no shift) */
.ls-word[data-state="ok"] .ls-sym { background: #22C55E; }
.ls-word[data-state="warn"] .ls-sym { background: #F59E0B; }
.ls-word[data-state="fail"] { color: var(--text); }
.ls-word[data-state="fail"] .ls-sym { background: #EF4444; }
@media (max-width: 760px) {
  .ls-word { width: 5.6em; margin-left: -16px; padding: 0 6px; }
  .ls-long { display: none; }
  .ls-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .ls-line, .ls-fill { transition: none; } }