/* laden.css -- the shared loading look (laden.js, #0000-3078): a thin bar at the top of a screen and under its tab title, a message with "Try again",
 * and the grey build-up lines. Tokens from core.css; light and dark follow the theme; a phone gets the same bar. */

.ld-host { position: relative; }
.ld-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .12s; }
.ld-bar.on { opacity: 1; }
.ld-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: var(--accent-hi, var(--accent)); border-radius: 2px; animation: ld-slide 1.2s ease-in-out infinite; }
.ld-bar:not(.on)::before { animation: none; }
@keyframes ld-slide { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* the same bar under the title in the tab */
.e3bviewtab { position: relative; }
.e3bviewtab.ld-on::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent-hi, var(--accent)); animation: ld-pulse 1.2s ease-in-out infinite; }
@keyframes ld-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

.ld-err { position: absolute; z-index: 7; top: 8px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100% - 20px)); box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  padding: 6px 10px; background: var(--surface, var(--bg)); border: 1px solid var(--danger); border-radius: var(--radius-sm); color: var(--text-strong); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ld-err-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ld-err-b { flex: none; font: inherit; color: var(--text-strong); background: var(--hover, transparent); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 3px 10px; cursor: pointer; min-height: 28px; }
.ld-err-b:hover { border-color: var(--text-dim); }
.ld-err-b:focus-visible { outline: 1px solid var(--focus); outline-offset: 1px; }

.ld-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.ld-line { display: block; height: 14px; border-radius: 4px; background: var(--rule); opacity: .55; animation: ld-pulse 1.6s ease-in-out infinite; }
.ld-line:nth-child(3n+1) { width: 92%; }
.ld-line:nth-child(3n+2) { width: 74%; }
.ld-line:nth-child(3n) { width: 58%; }

@media (prefers-reduced-motion: reduce) {
  .ld-bar::before { animation: none; width: 100%; opacity: .55; }
  .e3bviewtab.ld-on::after { animation: none; opacity: .8; }
  .ld-line { animation: none; }
}