/* faxbin.org — FaxLive progress widget (themed to the signal-lab system) */
.fl-status { font-family:var(--mono,monospace); font-size:1.05rem; font-weight:500; padding:.6rem .85rem; border-radius:var(--r-sm,9px); background:var(--surface-2,#1a222c); border:1px solid var(--line,rgba(255,255,255,.09)); color:var(--ink,#e9eff6); }
.fl-status.ok   { background:var(--ok-soft,rgba(73,196,110,.14));  color:var(--ok,#49c46e);  border-color:transparent; }
.fl-status.fail { background:var(--fail-soft,rgba(255,93,84,.13)); color:var(--fail,#ff5d54); border-color:transparent; }
.fl-status.warn { background:var(--warn-soft,rgba(255,180,63,.13));color:var(--warn,#ffb43f); border-color:transparent; }
.fl-conn { color:var(--muted,#94a3b3); font-size:.82rem; font-family:var(--mono,monospace); margin:.5rem 0 .2rem; }

/* ONE horizontal line of compact page cells, newest at the LEFT, with a
   scrollbar — a 200-page vertical list was unusable. */
.fl-pages { margin:.9rem 0; display:flex; flex-wrap:nowrap; gap:.35rem; overflow-x:auto; padding-bottom:.35rem; scrollbar-width:thin; }
.fl-page { flex:0 0 auto; width:4.6rem; display:flex; flex-direction:column; align-items:center; gap:.15rem;
           border:1px solid var(--line-soft,rgba(255,255,255,.055)); border-radius:6px; padding:.3rem .25rem; background:var(--bg-2,#0f141a); }
.fl-page.done { color:var(--ok,#49c46e); border-color:rgba(73,196,110,.35); }
.fl-pg-ic { width:1.2em; text-align:center; }
.fl-pg-n { font-family:var(--mono,monospace); font-size:.78rem; white-space:nowrap; }
.fl-pg-bar { width:100%; height:6px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.fl-pg-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--teal,#36d6cd),var(--blue,#5aa2ff)); border-radius:6px; transition:width .3s ease; }
.fl-page.done .fl-pg-bar i { background:var(--ok,#49c46e); }
.fl-page.fail { color:var(--fail,#ff5d54); }
.fl-pg-bar.fail i { width:100%!important; background:var(--fail,#ff5d54); opacity:.5; animation:none; }
.fl-pg-bar.indet i { width:100%!important; background:linear-gradient(90deg, transparent 0%, var(--teal,#36d6cd) 50%, transparent 100%); background-size:40% 100%; background-repeat:no-repeat; animation:fl-indet 1.1s linear infinite; }
@keyframes fl-indet { 0%{background-position:-40% 0;} 100%{background-position:140% 0;} }
.fl-pg-lbl { font-family:var(--mono,monospace); font-size:.7rem; color:var(--muted,#94a3b3); font-variant-numeric:tabular-nums; min-height:.9rem; white-space:nowrap; }

.fl-tl-wrap { max-height:15rem; overflow:auto; border:1px solid var(--line-soft,rgba(255,255,255,.055)); border-radius:var(--r-sm,9px); padding:.4rem .8rem; background:var(--bg-2,#0f141a); }
.fl-tl-h { font-family:var(--mono,monospace); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint,#62707f); margin:.3rem 0; }
.fl-tl { list-style:none; margin:0; padding:0; font-size:.88rem; font-family:var(--mono,monospace); }
.fl-tl li { padding:.18rem 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.055)); color:var(--ink,#e9eff6); }
.fl-tl li:last-child { border-bottom:0; }
.fl-tl li.fl-ok   { color:var(--ok,#49c46e); }
.fl-tl li.fl-warn { color:var(--warn,#ffb43f); }
.fl-tl li.fl-fail { color:var(--fail,#ff5d54); font-weight:600; }
.fl-t { color:var(--faint,#62707f); margin-right:.5rem; }

/* live scanline preview */
/* previews: one horizontal scrollable line, newest page at the LEFT */
.fl-previews { display:flex; flex-wrap:nowrap; gap:1rem; margin:.6rem 0; overflow-x:auto; padding-bottom:.4rem; scrollbar-width:thin; }
.fl-preview-page { flex:0 0 auto; }
.fl-preview-page { display:flex; flex-direction:column; gap:.3rem; }
.fl-preview-lbl { font-family:var(--mono,monospace); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint,#62707f); }
/* container for stacked strip <img>s (was a single <img>; strips are 1/4-scale
   box-sampled grayscale = already anti-aliased, so no pixelated rendering) */
.fl-preview-img { max-width:280px; width:100%; height:auto; border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:4px; background:#fff; display:block; overflow:hidden; line-height:0; }

.fl-raw { margin-top:.9rem; }
.fl-raw summary { cursor:pointer; color:var(--faint,#62707f); font-family:var(--mono,monospace); font-size:.8rem; }
.fl-raw summary:hover { color:var(--teal,#36d6cd); }
.fl-rawpre { background:var(--bg-2,#0f141a); border:1px solid var(--line-soft,rgba(255,255,255,.055)); padding:.7rem; border-radius:var(--r-sm,9px); font-family:var(--mono,monospace); font-size:12px; line-height:1.45; max-height:15rem; overflow:auto; margin-top:.5rem; color:var(--muted,#94a3b3); }

@media (max-width:640px){
  .fl-page { width:3.8rem; }
}

.fl-preview-hd { font-size:.7rem; color:var(--teal,#36d6cd); text-decoration:none; border:1px solid var(--teal,#36d6cd); border-radius:3px; padding:0 .3em; margin-left:.4em; }
.fl-preview-hd:hover { background:var(--teal,#36d6cd); color:#0f141a; }

/* live T.30 protocol trace */
.fl-trace { width:100%; border-collapse:collapse; font-family:var(--mono,monospace); font-size:.78rem; }
.fl-trace td { padding:.12rem .5rem .12rem 0; border-bottom:1px solid var(--line-soft,rgba(255,255,255,.055)); white-space:nowrap; }
.fl-trace td.fdesc { white-space:normal; color:var(--ink,#e9eff6); }
.fl-trace td.dir { color:var(--faint,#62707f); }
.fl-trace tr.rx td.ftype { color:var(--teal,#36d6cd); }
.fl-trace tr.tx td.ftype { color:var(--blue,#5aa2ff); }
.fl-trace .fx { color:var(--muted,#94a3b3); }

/* concurrent-call chooser (waiting page) + in-call switcher */
.fl-choose { display:block; margin:.4rem 0; padding:.6rem .8rem; border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:8px; color:var(--ink,#e9eff6); text-decoration:none; font-family:var(--mono,monospace); }
.fl-choose:hover { border-color:var(--teal,#36d6cd); color:var(--teal,#36d6cd); }
.fl-switch { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.6rem 0; }
.fl-chip { font-family:var(--mono,monospace); font-size:.78rem; padding:.15rem .5rem; border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:999px; color:var(--muted,#94a3b3); text-decoration:none; }
.fl-chip.on { background:var(--teal,#36d6cd); color:#0f141a; border-color:transparent; font-weight:600; }
.fl-chip:hover { color:var(--teal,#36d6cd); } .fl-chip.on:hover { color:#0f141a; }