/* WideMath binary, programmer and IEEE-754 calculator (2026-10-13).
   Loaded after wm-tools.css. Every selector is scoped to .wmb (the tool card),
   except the print rules, which only apply on a page that contains .wmb. */

.wmb .wmb-mono, .wmb .wm-row .wmb-mono { font-family: Consolas, 'Cascadia Mono', 'SF Mono', Menlo, 'Courier New', monospace; }
.wmb .wmb-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wmb .wmb-segw { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.wmb .wmb-lbl { font-size: .86rem; font-weight: 600; color: var(--wm-text); }
.wmb .wm-seg button { min-height: 42px; padding: 0 12px; font-size: .84rem; letter-spacing: 0; }
.wmb .wm-seg button:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: -2px; }
.wmb .wm-note code { font-size: .86rem; }

/* result rows: label, value, copy */
.wmb .wmb-results { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.wmb .wmb-res { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--wm-soft); border: 1px solid var(--wm-line); border-radius: 10px; padding: 7px 8px 7px 12px; }
.wmb .wmb-res > span { font-size: .8rem; color: var(--wm-mute); }
.wmb .wmb-res > b { font-size: 1.08rem; color: var(--wm-ink); overflow-wrap: anywhere; font-weight: 600; }
.wmb .wmb-copy { min-height: 40px; }
.wmb .wmb-long { word-break: break-all; }
.wmb .wmb-rep { text-decoration: overline; text-decoration-thickness: 2px; }
.wmb .wm-result b { overflow-wrap: anywhere; font-weight: 700; }
.wmb .wmb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.wmb .wmb-actions .wm-btn { min-height: 40px; }
.wmb .wmb-copied { font-size: .84rem; color: var(--wm-green); font-weight: 600; }
@media (max-width: 600px) {
  .wmb .wmb-res { grid-template-columns: minmax(0, 1fr) auto; }
  .wmb .wmb-res > span { grid-column: 1 / -1; }
}

/* clickable bit grid: one byte per group, nibbles split by a small gap */
.wmb .wmb-grid { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.wmb .wmb-byte { display: flex; gap: 2px; }
.wmb .wmb-bit { width: 28px; height: 44px; border: 1px solid var(--wm-line); border-radius: 6px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-family: Consolas, 'Cascadia Mono', Menlo, monospace; transition: background var(--wm-fast), border-color var(--wm-fast); }
.wmb .wmb-bit:nth-child(4) { margin-right: 5px; }
.wmb .wmb-bit .v { font-size: 1.02rem; font-weight: 700; color: #94a3b8; line-height: 1.1; }
.wmb .wmb-bit .i { font-size: .6rem; color: #94a3b8; line-height: 1.2; }
.wmb .wmb-bit:hover { border-color: var(--wm-green-line); }
.wmb .wmb-bit.on { background: var(--wm-green-bg); border-color: var(--wm-green-line); }
.wmb .wmb-bit.on .v { color: var(--wm-green); }
.wmb .wmb-bit:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: 1px; }
/* IEEE fields: sign, exponent, mantissa */
.wmb .wmb-bit.s { border-bottom: 3px solid #e11d48; }
.wmb .wmb-bit.e { border-bottom: 3px solid #2563eb; }
.wmb .wmb-bit.m { border-bottom: 3px solid #d97706; }
.wmb .wmb-bit.s.on { background: #fff1f2; } .wmb .wmb-bit.s.on .v { color: #be123c; }
.wmb .wmb-bit.e.on { background: #eff6ff; } .wmb .wmb-bit.e.on .v { color: #1d4ed8; }
.wmb .wmb-bit.m.on { background: #fffbeb; } .wmb .wmb-bit.m.on .v { color: #b45309; }
.wmb .wmb-fields { font-size: 1.05rem; overflow-wrap: anywhere; }
.wmb .wmb-fields .s { color: #be123c; } .wmb .wmb-fields .e { color: #1d4ed8; } .wmb .wmb-fields .m { color: #b45309; }
.wmb .wm-result .wmc-alt { display: block; font: 600 .95rem Consolas, 'Cascadia Mono', Menlo, monospace; margin-top: 2px; }
@media (max-width: 600px) {
  .wmb .wmb-byte { flex: 1 1 100%; }
  .wmb .wmb-bit { flex: 1 1 0; width: auto; min-width: 0; }
}

/* flags and warnings */
.wmb .wmb-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wmb .wmb-flag { font-size: .84rem; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--wm-line); background: #fff; color: var(--wm-mute); }
.wmb .wmb-flag.on { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.wmb .wmb-warn { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; font-size: .92rem; line-height: 1.5; }
.wmb .wmb-err { margin-top: 10px; }

/* error and ulp cards (same look as the complex tool's forms) */
.wmb .wmc-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.wmb .wmc-forms div { background: var(--wm-soft); border: 1px solid var(--wm-line); border-radius: 10px; padding: 9px 12px; min-width: 0; }
.wmb .wmc-forms span { display: block; font-size: .76rem; color: var(--wm-mute); }
.wmb .wmc-forms b { display: block; font: 600 .98rem/1.4 var(--wm-math); color: var(--wm-ink); overflow-wrap: anywhere; }

/* working */
.wmb .wmb-work { margin-top: 16px; }
.wmb .wmb-work details { margin-top: 8px; }
.wmb .wmb-work summary { padding: 6px 0; }
.wmb .wmb-workhead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; }
.wmb .wmb-workhead label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 600; color: var(--wm-text); }
.wmb .wmb-workhead select { width: auto; min-height: 40px; }
.wmb .wmb-h { font-size: 1rem; margin: 0; padding: 0; border: 0; }
.wmb .wmb-table { font: .95rem Consolas, 'Cascadia Mono', Menlo, monospace; width: auto; min-width: 280px; }
.wmb .wmb-table td, .wmb .wmb-table th { white-space: nowrap; }
.wmb .wmb-table th { text-transform: none; letter-spacing: 0; font: 600 .82rem 'Segoe UI', system-ui, sans-serif; }
.wmb .wmb-cols { border-collapse: collapse; font: 1rem Consolas, 'Cascadia Mono', Menlo, monospace; width: auto; border: 0; margin: 6px 0; }
.wmb .wmb-cols th { text-align: left; font: 600 .8rem 'Segoe UI', system-ui, sans-serif; color: var(--wm-mute); padding: 3px 14px 3px 0; border: 0; background: none; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.wmb .wmb-cols td { white-space: pre; text-align: right; letter-spacing: .06em; padding: 3px 0; border: 0; }
.wmb .wmb-cols tr.res td { border-top: 2px solid var(--wm-ink); font-weight: 700; color: var(--wm-green); }
.wmb .wmb-cols tr.carry td { color: #c2410c; font-size: .92rem; }
.wmb .wm-steps .m.wmb-mono { font-family: Consolas, 'Cascadia Mono', Menlo, monospace; font-size: .95rem; overflow-wrap: anywhere; }

@media print {
  body:has(.wmb) .nav, body:has(.wmb) .breadcrumb, body:has(.wmb) .wm-examples, body:has(.wmb) footer, body:has(.wmb) .related,
  body:has(.wmb) .author-box, body:has(.wmb) ins.adsbygoogle, body:has(.wmb) .content { display: none !important; }
  .wmb .wm-tabs, .wmb .wmb-actions, .wmb .wmb-copy { display: none !important; }
  .wmb { box-shadow: none; border: 0; }
}