/* faxbin.org — "signal lab" design system. Dark telecom-instrument aesthetic. */
:root {
  --bg:#0c0f13; --bg-2:#0f141a; --surface:#141b23; --surface-2:#1a222c;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055);
  --ink:#e9eff6; --muted:#94a3b3; --faint:#62707f;
  --amber:#ffb43f; --amber-soft:rgba(255,180,63,.14); --amber-glow:rgba(255,180,63,.45);
  --teal:#36d6cd; --blue:#5aa2ff;
  --ok:#49c46e; --ok-soft:rgba(73,196,110,.14);
  --fail:#ff5d54; --fail-soft:rgba(255,93,84,.13);
  --warn:#ffb43f; --warn-soft:rgba(255,180,63,.13);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --r:14px; --r-sm:9px; --pad:clamp(1rem,3vw,2rem);
  --shadow:0 16px 40px -18px rgba(0,0,0,.7);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(54,214,205,.07), transparent 60%),
    radial-gradient(900px 500px at -5% 0%, rgba(255,180,63,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
/* faint engineering dot-grid over everything */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%);
          mask-image:linear-gradient(180deg,#000,transparent 90%);
}
.wrap { position:relative; z-index:1; max-width:64rem; margin:0 auto; padding:0 var(--pad) 4rem; }
a { color:var(--teal); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
code, .mono { font-family:var(--mono); }
h1,h2,h3 { line-height:1.2; }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--pad);
  background:rgba(12,15,19,.72); backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand { font-family:var(--mono); font-weight:600; font-size:1.15rem; letter-spacing:.02em; color:var(--ink); display:flex; align-items:center; gap:.55rem; text-decoration:none; }
.brand:hover { color:var(--amber); }
.brand .wm { display:inline; }
.brand .sig { width:.7rem; height:.7rem; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 var(--amber-glow); animation:beacon 2.4s infinite; }
.brand b { color:var(--amber); }
.conn { font-family:var(--mono); font-size:.74rem; color:var(--faint); display:flex; align-items:center; gap:.4rem; }
.conn::before { content:''; width:.5rem; height:.5rem; border-radius:50%; background:var(--faint); }
.conn.on { color:var(--ok); } .conn.on::before { background:var(--ok); box-shadow:0 0 8px var(--ok); }
.toplink { font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.toplink:hover { color:var(--teal); }

/* ── hero / dial card ────────────────────────────────────── */
.hero { padding:2.4rem 0 1.4rem; animation:fadeUp .5s both; }
.hero .kicker { font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.22em; color:var(--teal); }
.hero h1 { font-size:clamp(1.9rem,5vw,2.9rem); margin:.3rem 0 .2rem; letter-spacing:-.02em; }
.hero p.lede { color:var(--muted); margin:.2rem 0 1.4rem; max-width:42rem; }
.dial {
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  padding:1.1rem 1.3rem; border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.dial .label { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); display:block; }
.dial .number { font-family:var(--mono); font-weight:600; font-size:clamp(1.4rem,4vw,2rem); color:var(--ink); letter-spacing:.01em; }
.dial .badges { margin-left:auto; display:flex; gap:.5rem; flex-wrap:wrap; }
.badge { font-family:var(--mono); font-size:.72rem; padding:.3em .7em; border-radius:999px; border:1px solid currentColor; white-space:nowrap; }
.badge.live-cap { color:var(--ok); } .badge.soon { color:var(--amber); }
.pill.sg3 { color:#b699ff; border-color:#5b46a0; background:rgba(122,92,255,.10); }

/* ── generic card / section ──────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.section-h { font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin:1.8rem 0 .7rem; }

/* ── fax table ───────────────────────────────────────────── */
.tablecard { margin-top:1.6rem; overflow:hidden; animation:fadeUp .6s .1s both; }
table.faxes { border-collapse:collapse; width:100%; }
table.faxes th { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); text-align:left; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--bg-2); }
table.faxes td { padding:.7rem 1rem; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.faxes tr:last-child td { border-bottom:0; }
tr.fax { cursor:pointer; transition:background .15s; }
tr.fax:hover td { background:rgba(255,255,255,.025); }
tr.fax.sel td { background:var(--amber-soft); }
tr.fax.sel td:first-child { box-shadow:inset 3px 0 0 var(--amber); }
td .when, td.when { font-family:var(--mono); font-size:.82rem; color:var(--muted); }
.thumb { height:44px; border:1px solid var(--line); border-radius:5px; vertical-align:middle; background:#fff; }
.pill { font-family:var(--mono); font-size:.78rem; font-weight:500; }
.pill.ok { color:var(--ok); } .pill.fail { color:var(--fail); }
.live { color:var(--amber); font-family:var(--mono); font-weight:500; font-size:.82rem; display:inline-flex; align-items:center; gap:.4rem; }
.dot { width:.55em; height:.55em; border-radius:50%; background:var(--amber); box-shadow:0 0 0 0 var(--amber-glow); animation:beacon 1.4s infinite; }
.go { color:var(--faint); font-family:var(--mono); font-size:.78rem; }
tr.fax:hover .go { color:var(--teal); }
.muted { color:var(--faint); }
.small { font-size:.8rem; color:var(--faint); }

/* ── live panel ──────────────────────────────────────────── */
#panel { display:none; margin-top:1.6rem; padding:1.2rem 1.3rem; border-left:3px solid var(--amber); position:relative; animation:fadeUp .3s both; }
#panel.show { display:block; }
#panel h2 { font-size:1.05rem; margin:.1rem 0 .8rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
#panel h2 code { color:var(--amber); font-size:.85rem; }
#pclose { position:absolute; top:.9rem; right:1.1rem; cursor:pointer; color:var(--faint); font-size:1.1rem; }
#pclose:hover { color:var(--ink); }

/* ── detail page ─────────────────────────────────────────── */
.meta { display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.4rem; margin:.6rem 0; }
.meta dt { color:var(--faint); font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.meta dd { margin:0; font-variant-numeric:tabular-nums; }
.dl { display:flex; flex-wrap:wrap; gap:.5rem; }
.dl a { font-family:var(--mono); font-size:.8rem; padding:.4rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); background:var(--surface-2); transition:border-color .15s,color .15s; }
.dl a:hover { border-color:var(--teal); color:var(--teal); text-decoration:none; }
pre.trace, pre.block { background:var(--bg-2); border:1px solid var(--line-soft); padding:1rem; border-radius:var(--r-sm); overflow:auto; font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--muted); }
.pages-img img { max-width:100%; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:1rem; background:#fff; }

/* ── timed event timeline (detail page) ──────────────────── */
table.tl { border-collapse:collapse; width:100%; font-size:.9rem; }
table.tl th { font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); text-align:left; padding:.45rem .7rem; border-bottom:1px solid var(--line); background:var(--bg-2); position:sticky; top:0; }
table.tl td { padding:.4rem .7rem; border-bottom:1px solid var(--line-soft); vertical-align:top; white-space:nowrap; }
table.tl td:last-child { white-space:normal; color:var(--muted); }
table.tl tr:last-child td { border-bottom:0; }
table.tl .tl-tag { font-weight:500; color:var(--ink); }
table.tl tr.tl-sys  { background:rgba(90,162,255,.07); }
table.tl tr.tl-v34  { background:rgba(170,120,255,.07); }   /* Super-G3 negotiation (V.8 / V.34 startup / MPh rate) */
table.tl tr.tl-v34 .tl-tag { color:#b48cff; }
table.tl tr.tl-page { background:rgba(73,196,110,.07); }
table.tl tr.tl-page .tl-tag { color:var(--ok); }
table.tl tr.tl-ok   { background:var(--ok-soft); }   table.tl tr.tl-ok .tl-tag   { color:var(--ok); }
table.tl tr.tl-fail { background:var(--fail-soft); } table.tl tr.tl-fail .tl-tag { color:var(--fail); }
table.tl .rx { color:var(--teal); font-family:var(--mono); }
table.tl .tx { color:var(--amber); font-family:var(--mono); }
/* click-to-expand event detail */
table.tl tr.has-detail { cursor:pointer; }
table.tl tr.has-detail:hover td { background:rgba(255,255,255,.03); }
table.tl tr.has-detail .tl-tag::after { content:'▸'; color:var(--faint); margin-left:.4em; font-size:.8em; }
table.tl tr.has-detail.open .tl-tag::after { content:'▾'; color:var(--teal); }
table.tl tr.tl-detail { display:none; }
table.tl tr.tl-detail.open { display:table-row; }
table.tl tr.tl-detail td { background:var(--bg-2); white-space:normal; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1.1rem; padding:.4rem .2rem; font-size:.85rem; }
.kv .k { color:var(--faint); font-family:var(--mono); font-size:.76rem; }
.kv .v { word-break:break-all; color:var(--ink); }
/* full DIS/DCS/DTC field decode */
.decode { margin-top:.7rem; }
.decode-h { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-bottom:.3rem; }
table.dec { border-collapse:collapse; width:100%; font-size:.85rem; }
table.dec td { padding:.18rem .6rem; border-bottom:1px solid var(--line-soft); }
table.dec td:first-child { color:var(--muted); }
table.dec td.v { color:var(--teal); text-align:right; white-space:nowrap; }
table.dec.off td { color:var(--faint); }
.decode details summary { cursor:pointer; color:var(--faint); font-size:.8rem; margin-top:.4rem; font-family:var(--mono); }
.decode details summary:hover { color:var(--teal); }

footer { margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--line-soft); color:var(--faint); font-size:.82rem; font-family:var(--mono); }

/* ── motion ──────────────────────────────────────────────── */
@keyframes beacon { 0%{box-shadow:0 0 0 0 var(--amber-glow);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes fadeUp { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* ── phase timing bar ────────────────────────────────────── */
.phase-bar { display:flex; height:1.4rem; border-radius:4px; overflow:hidden; margin:.5rem 0 .3rem; gap:2px; }
.phase-seg { display:flex; align-items:center; justify-content:center; font-size:.68rem; font-family:var(--mono); font-weight:600; color:#000; overflow:hidden; cursor:default; transition:filter .15s; }
.phase-seg:hover { filter:brightness(1.15); }
.phase-seg span { white-space:nowrap; overflow:hidden; text-overflow:clip; padding:0 2px; }
.phase-b { background:#ffb43f; }
.phase-c { background:#36d6cd; }
.phase-d { background:#49c46e; }
.phase-e { background:#ff5d54; }
.phase-legend { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; color:var(--dim); margin-bottom:.5rem; }
.phase-dot { display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-right:.25rem; vertical-align:middle; }
.phase-dot.phase-b { background:#ffb43f; }
.phase-dot.phase-c { background:#36d6cd; }
.phase-dot.phase-d { background:#49c46e; }
.phase-dot.phase-e { background:#ff5d54; }

/* ── mobile: table rows become cards ─────────────────────── */
@media (max-width:640px){
  table.faxes thead { display:none; }
  table.faxes, table.faxes tbody, table.faxes tr, table.faxes td { display:block; width:100%; }
  table.faxes tr.fax { padding:.5rem .2rem; border-bottom:1px solid var(--line); }
  table.faxes tr.fax.sel td:first-child { box-shadow:none; }
  table.faxes td { border:0!important; padding:.2rem 1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  table.faxes td::before { content:attr(data-label); font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); flex:0 0 auto; }
  table.faxes td[data-label=""]::before { content:none; }
  .meta { grid-template-columns:1fr; gap:.1rem; }
  .meta dt { margin-top:.5rem; }
}

/* fullscreen page lightbox (fax detail) */
.lb { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:1000; display:flex; flex-direction:column; }
.lb[hidden] { display:none; }
.lb-bar { display:flex; align-items:center; gap:.7rem; padding:.6rem 1rem; color:#e9eff6; font-family:var(--mono,monospace); }
.lb-title { margin-right:auto; font-size:.95rem; }
.lb-hd, .lb-x { background:transparent; border:1px solid rgba(255,255,255,.35); color:#e9eff6; border-radius:5px; padding:.2rem .6rem; cursor:pointer; font:inherit; }
.lb-dl { color:#e9eff6; border:1px solid rgba(255,255,255,.35); border-radius:5px; padding:.2rem .6rem; text-decoration:none; }
.lb-hd:hover, .lb-x:hover, .lb-dl:hover { border-color:#36d6cd; color:#36d6cd; }
.lb-stage { flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:1rem; }
.lb-img { max-width:100%; height:auto; background:#fff; image-rendering:auto; object-fit:fill; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(26,34,44,.7); color:#e9eff6; border:1px solid rgba(255,255,255,.25); border-radius:50%; width:2.6rem; height:2.6rem; font-size:1.5rem; line-height:1; cursor:pointer; }
.lb-arrow:hover { border-color:#36d6cd; color:#36d6cd; }
.lb-prev { left:1rem; } .lb-next { right:1rem; }

/* system-failure (interrupted reception: FS/gateway crash) — distinct from a fax-protocol failure */
.pill.sys { background:rgba(170,120,255,.16); color:#b48cff; }
.pill.live { background:var(--amber-soft,rgba(255,180,63,.13)); color:var(--amber,#ffb43f); }

/* dashboard date-group header rows */
tr.daygroup td { padding:.7rem 1rem .3rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--faint,#62707f); border:0; background:transparent; }
/* thinner Received column (time only) */
table.faxes td[data-label="Received"], table.faxes th:first-child { white-space:nowrap; width:4.5rem; }
/* page count actively changing -> glow pulse */
.pgcount.rxing { color:var(--teal,#36d6cd); font-weight:700; animation:pgpulse 1.1s ease-in-out infinite; }
@keyframes pgpulse { 0%,100%{ text-shadow:0 0 0 transparent; opacity:.65; } 50%{ text-shadow:0 0 10px var(--teal,#36d6cd); opacity:1; } }
/* hover thumbnail popup */
.thumbpop { position:fixed; z-index:1200; width:240px; background:#fff; border:1px solid var(--line,rgba(255,255,255,.2)); border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); padding:4px; pointer-events:none; }
.thumbpop img { width:100%; height:auto; display:block; background:#fff; }
.thumbpop-cap { font-family:var(--mono); font-size:.7rem; color:#333; text-align:center; padding:2px 0 1px; }

/* fax.php page viewer: horizontal strip selector + big stage + arrows */
.pageview { margin:.5rem 0 1.2rem; }
.pv-strip { display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:thin; }
.pv-th { flex:0 0 auto; width:54px; height:auto; border:2px solid transparent; border-radius:4px; background:#fff; cursor:pointer; opacity:.7; }
.pv-th.sel { border-color:var(--teal,#36d6cd); opacity:1; }
.pv-th:hover { opacity:1; }
.pv-stage { position:relative; display:flex; align-items:flex-start; gap:.5rem; margin-top:.6rem; }
.pv-main { flex:1; text-align:center; background:var(--bg-2,#0f141a); border:1px solid var(--line,rgba(255,255,255,.09)); border-radius:8px; padding:.6rem; max-height:80vh; overflow:auto; }
.pv-img { max-width:100%; height:auto; background:#fff; object-fit:fill; }
.pv-arrow { flex:0 0 auto; align-self:center; background:var(--surface-2,#1a222c); color:var(--ink,#e9eff6); border:1px solid var(--line,rgba(255,255,255,.12)); border-radius:50%; width:2.2rem; height:2.2rem; font-size:1.3rem; line-height:1; cursor:pointer; }
.pv-arrow:hover { border-color:var(--teal,#36d6cd); color:var(--teal,#36d6cd); }
.pv-tools { position:absolute; top:.6rem; right:.6rem; display:flex; gap:.4rem; align-items:center; font-family:var(--mono); font-size:.72rem; background:rgba(15,20,26,.7); padding:.2rem .4rem; border-radius:6px; }
.pv-cap { color:var(--muted,#94a3b3); margin-right:.3rem; }
.pv-hd, .pv-zoom { background:transparent; border:1px solid rgba(255,255,255,.3); color:var(--ink,#e9eff6); border-radius:4px; padding:.1rem .45rem; cursor:pointer; font:inherit; }
.pv-dl { color:var(--ink,#e9eff6); border:1px solid rgba(255,255,255,.3); border-radius:4px; padding:.1rem .45rem; text-decoration:none; }
.pv-hd:hover,.pv-zoom:hover,.pv-dl:hover { border-color:var(--teal,#36d6cd); color:var(--teal,#36d6cd); }
@media (max-width:640px){ .pv-tools{ position:static; margin-top:.4rem; justify-content:flex-end; flex-wrap:wrap; } .pv-stage{ flex-direction:column; } .pv-arrow{ display:none; } }

/* viewer size toggle (S / M / fullscreen) */
.pv-sizes { display:inline-flex; gap:1px; border:1px solid rgba(255,255,255,.25); border-radius:5px; overflow:hidden; margin-right:.35rem; }
.pv-sizes button { background:transparent; border:0; color:var(--ink,#e9eff6); padding:.12rem .5rem; cursor:pointer; font:inherit; font-size:.72rem; line-height:1.4; }
.pv-sizes button.sel { background:var(--teal,#36d6cd); color:#06221f; }
.pv-sizes button:hover:not(.sel) { background:rgba(255,255,255,.14); }
.pv-stage.sz-s .pv-main { flex:0 1 460px; margin:0 auto; }

/* compact detail-page summary header */
.fax-head { margin:1.3rem 0 .4rem; }
.fax-head-top { display:flex; align-items:center; gap:.6rem .75rem; flex-wrap:wrap; }
.fax-kicker { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); }
.fax-head-recv { color:var(--muted); font-size:.85rem; margin-left:auto; }
.uuid-copy { font-size:.76rem; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:6px; padding:.12rem .5rem; cursor:pointer; }
.uuid-copy:hover { border-color:var(--teal); color:var(--teal); }
.statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:.6rem 1.3rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:.85rem 1.1rem; margin-top:.7rem; }
.statgrid .stat { display:flex; flex-direction:column; gap:.12rem; min-width:0; }
.statgrid .s-l { font-size:.63rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-family:var(--mono); }
.statgrid .s-v { font-variant-numeric:tabular-nums; word-break:break-word; }

/* page counter: flip the number when a new page arrives */
.pgcount .pgnum { display:inline-block; }
.pgcount.flip .pgnum { animation:pgflip .5s cubic-bezier(.2,.8,.2,1); }
@keyframes pgflip {
  0%   { transform:translateY(-0.7em) rotateX(80deg); opacity:0; }
  60%  { transform:translateY(0) rotateX(0); opacity:1; }
  100% { transform:none; }
}