/*
 * Parix.ai | Binary to Text Converter - page styles.
 * Loads after tool-ds.css. Everything is scoped to .pxbt so nothing here can
 * reach another page. The live tool keeps its own markup and ids; the .btx-*
 * rules below only restyle it, they never change behaviour.
 */

/* ---------- hero ---------- */
.pxbt .btx-head{text-align:center;max-width:720px;margin:0 auto 6px}
.pxbt .btx-badge{display:inline-block;font-size:14px;font-weight:700;color:#eb600e;
  background:none;padding:0;margin:14px 0 0;letter-spacing:0;text-transform:none}
.pxbt .btx-head h1{font:800 clamp(2.3rem,5vw,3.6rem)/1.05 var(--font-head);letter-spacing:-.02em;
  color:var(--ink);margin:.25em 0 .3em}
.pxbt .btx-head p{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto}

/* ---------- the converter, restyled in place ---------- */
.pxbt .bt{max-width:1100px;margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;
  gap:14px;align-items:start;text-align:left}
.pxbt .btx-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;
  margin:0;box-shadow:0 1px 2px rgba(58,42,33,.04),0 24px 48px -30px rgba(58,42,33,.28);
  display:grid;gap:10px}
.pxbt .btx-label{display:block;font-weight:700;font-size:14px;margin:0}
.pxbt .btx-ta{width:100%;padding:12px;border:1px solid var(--line-2);border-radius:12px;
  font:15px/1.6 ui-monospace,Menlo,Consolas,monospace;resize:vertical;color:var(--ink);
  min-height:150px;background:#fff}
.pxbt .btx-ta:focus{outline:2px solid #eb600e;outline-offset:0;border-color:#eb600e}
.pxbt .btx-ta.err{border-color:#c2410c}
.pxbt .btx-btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.pxbt .btx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border-radius:999px;font:600 14px/1.2 var(--font-body);cursor:pointer;
  border:1px solid var(--line-2);background:#fff;color:var(--ink);transition:border-color .2s,background .2s}
.pxbt .btx-btn:hover{border-color:#eb600e}
.pxbt .btx-btn.primary{background:#eb600e;border-color:#eb600e;color:#fff}
.pxbt .btx-btn.primary:hover{background:#d4560c;border-color:#d4560c}
.pxbt .btx-btn.ok{border-color:#eb600e;color:#eb600e}

/* ---------- letter -> number -> bits ---------- */
.pxbt .tb{display:grid;gap:10px}
.pxbt .tb-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pxbt .tb-col{display:grid;gap:6px;text-align:center;opacity:.25;transition:opacity .4s}
.pxbt .tb-col.in{opacity:1}
.pxbt .tb-col b{font:800 1.6rem/1.2 var(--font-head);background:#fef1e8;border-radius:10px;padding:6px 0}
.pxbt .tb-col span{font:700 14px/1 var(--font-head);color:#eb600e}
.pxbt .tb-bits{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.pxbt .tb-bits i{font:700 11px/1.7 ui-monospace,Menlo,Consolas,monospace;font-style:normal;
  border-radius:4px;background:#f6ebe3;color:var(--muted);transition:background .25s,color .25s}
.pxbt .tb-bits i.on{background:#eb600e;color:#fff}
.pxbt .tb-cap{margin:0;font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:center}

/* ---------- build a byte ---------- */
.pxbt .by{display:grid;gap:14px}
.pxbt .by-bits{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.pxbt .by-bits button{display:grid;gap:4px;justify-items:center;border:1.5px solid var(--line-2);
  background:#fff;border-radius:10px;padding:8px 0;cursor:pointer;font:inherit;transition:all .2s}
.pxbt .by-bits button b{font:800 1.3rem/1 ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
.pxbt .by-bits button small{font-size:10.5px;font-weight:700;color:var(--muted)}
.pxbt .by-bits button[aria-pressed=true]{background:#eb600e;border-color:#eb600e}
.pxbt .by-bits button[aria-pressed=true] b,
.pxbt .by-bits button[aria-pressed=true] small{color:#fff}
.pxbt .by-res{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.pxbt .by-res div{background:var(--mist);border-radius:12px;padding:10px}
.pxbt .by-res small{display:block;font-size:12px;font-weight:700;color:var(--muted)}
.pxbt .by-res b,.pxbt .by-res code{font:800 1.3rem/1.2 var(--font-head);font-variant-numeric:tabular-nums}
.pxbt .by-res code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem}
.pxbt .by-res .hot{background:#eb600e}
.pxbt .by-res .hot small,.pxbt .by-res .hot b{color:#fff}

/* ---------- live character table ---------- */
.pxbt .ct-wrap{max-width:820px;margin:0 auto;overflow-x:auto;border:1px solid #f8e6da;
  border-radius:18px;background:#fff}
.pxbt .ctab{width:100%;border-collapse:collapse;font-size:15px}
.pxbt .ctab th{background:#fef3ec;text-align:left;padding:10px 14px;font-size:13px;color:var(--ink-2)}
.pxbt .ctab td{padding:9px 14px;border-top:1px solid #f6ebe3;font-family:ui-monospace,Menlo,Consolas,monospace}
.pxbt .ctab td:first-child{font:800 1.1rem/1 var(--font-head);color:#eb600e}
.pxbt .ctab tr{animation:bxin .3s ease both}
.pxbt .bi{font:800 18px/1 var(--font-head);color:#eb600e}

@media (max-width:800px){
  .pxbt .bt{grid-template-columns:1fr}
  .pxbt .by-res{grid-template-columns:1fr 1fr}
  .pxbt .by-res div:first-child{grid-column:1/-1}
}
@media (max-width:420px){
  .pxbt .by-bits{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pxbt .ctab tr{animation:none}
  .pxbt .tb-col,.pxbt .tb-bits i{transition:none}
}