/* basics.css (shared, s1103c): search / help / suggest layers. Flat: hairline borders, no glows or gradients.
   Colors come from --bx-* tokens that each site maps to its own palette (light and dark); the fallbacks are the
   browser's system colors (Canvas/CanvasText), which follow the page's color-scheme, so the box is never a white
   slab on a dark page. */
.bx-layer{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-start;justify-content:center;padding:max(10vh,16px) 12px 12px;background:rgba(0,0,0,.6)}
.bx-box{width:min(640px,100%);max-height:80vh;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--bx-bg,Canvas);color:var(--bx-ink,CanvasText);border:1px solid var(--bx-line,GrayText);border-radius:var(--bx-r,6px);padding:16px;font:16px/1.45 var(--bx-font,system-ui,sans-serif);box-sizing:border-box;text-align:left}
.bx-box :where(h2,p,label,li){color:inherit}
.bx-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.bx-h{margin:0;font-size:20px;font-weight:650;flex:1;color:inherit;letter-spacing:-.01em}
.bx-in{flex:1;min-width:0;min-height:44px;padding:0 12px;font:inherit;font-size:17px;color:inherit;background:var(--bx-field,transparent);border:1px solid var(--bx-line,GrayText);border-radius:var(--bx-r,6px);box-sizing:border-box}
.bx-in-full{display:block;width:100%;margin-top:6px}
.bx-in::placeholder,.bx-ta::placeholder{color:var(--bx-muted,GrayText);opacity:1}
.bx-in:focus,.bx-ta:focus{outline:2px solid var(--bx-accent,CanvasText);outline-offset:1px}
.bx-x{min-height:44px;min-width:44px;padding:0 12px;font:inherit;font-size:15px;color:inherit;background:transparent;border:1px solid var(--bx-line,GrayText);border-radius:var(--bx-r,6px);cursor:pointer}
.bx-res{list-style:none;margin:0;padding:0;border-top:1px solid var(--bx-line,GrayText)}
.bx-res li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;min-height:44px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--bx-hair,var(--bx-line,GrayText));cursor:pointer}
.bx-res li.on{background:var(--bx-sel,rgba(127,127,127,.16));outline:1px solid var(--bx-accent,CanvasText);outline-offset:-1px}
.bx-t{font-weight:500;overflow-wrap:anywhere}
.bx-k{font-size:14px;color:var(--bx-muted,inherit)}
.bx-count,.bx-hint,.bx-p{margin:8px 0 0;font-size:15px;color:var(--bx-muted,inherit)}
.bx-keys{border-collapse:collapse;width:100%;font-size:15px}
.bx-keys th,.bx-keys td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--bx-hair,var(--bx-line,GrayText));font-weight:400}
.bx-keys kbd{font:14px/1 var(--bx-mono,ui-monospace,monospace);border:1px solid var(--bx-line,GrayText);border-radius:3px;padding:3px 6px}
.bx-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.bx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;font:inherit;font-size:16px;font-weight:600;text-decoration:none;color:var(--bx-on-accent,Canvas);background:var(--bx-accent,CanvasText);border:1px solid var(--bx-accent,CanvasText);border-radius:var(--bx-r,6px);cursor:pointer}
.bx-btn:disabled{opacity:.7;cursor:progress}
.bx-btn.bx-ghost{color:inherit;background:transparent;border-color:var(--bx-line,GrayText)}
.bx-btn[hidden]{display:none}
.bx-lab{display:block;margin-top:12px;font-size:15px;font-weight:600}
.bx-opt{font-weight:400;color:var(--bx-muted,inherit)}
.bx-ta{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px 12px;font:inherit;font-size:17px;color:inherit;background:var(--bx-field,transparent);border:1px solid var(--bx-line,GrayText);border-radius:var(--bx-r,6px);resize:vertical}
.bx-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.bx-status:empty{display:none}
.bx-err{color:var(--bx-err,#b3261e);font-weight:600}
.bx-ok{margin:4px 0 0;font-size:22px;font-weight:700;color:var(--bx-ok,inherit)}
.bx-done:focus{outline:none}
.bx-hit{outline:2px solid var(--bx-accent,CanvasText)!important;outline-offset:3px}
.bx-open body{overflow:hidden}
/* floating "Suggest a change" pill (data-fab="scrollup"): shown only after the reader scrolls back up */
.bx-fab{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font:600 15px/1 var(--bx-font,system-ui,sans-serif);color:var(--bx-on-accent,Canvas);background:var(--bx-accent,CanvasText);border:1px solid var(--bx-accent,CanvasText);border-radius:999px;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .18s,transform .18s}
.bx-fab.on{opacity:1;transform:none;pointer-events:auto}
.bx-fab-i{font-size:17px}
.bx-open .bx-fab{display:none}
@media (prefers-reduced-motion:reduce){.bx-fab{transition:none}}
@media print{.bx-fab{display:none}}
@media (max-width:520px){.bx-layer{padding:8px}.bx-box{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}}
/* s1103c context: kind chips, quoted selection, what gets sent */
.bx-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bx-kind{position:relative;display:inline-flex}
.bx-kind input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bx-kind span{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;font-size:15px;border:1px solid var(--bx-line,GrayText);border-radius:999px;color:inherit}
.bx-kind input:checked+span{background:var(--bx-accent,CanvasText);color:var(--bx-on-accent,Canvas);border-color:var(--bx-accent,CanvasText);font-weight:600}
.bx-kind input:focus-visible+span{outline:2px solid var(--bx-accent,CanvasText);outline-offset:2px}
.bx-quote{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px;padding:10px 12px;border-left:3px solid var(--bx-accent,CanvasText);background:var(--bx-field,transparent);font-size:15px}
.bx-quote[hidden]{display:none}
.bx-quote q{flex:1 1 100%;order:2;font-style:italic;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bx-quote .bx-link{order:1;margin-left:auto}
.bx-link{min-height:44px;padding:0 4px;font:inherit;font-size:15px;color:inherit;background:none;border:0;text-decoration:underline;cursor:pointer}
.bx-send{align-items:center}
.bx-kbd{font-size:13px;color:var(--bx-muted,inherit)}
@media (pointer:coarse){.bx-kbd{display:none}.bx-kind span{min-height:44px}}
.bx-ctx{margin:10px 0 0;font-size:14px;color:var(--bx-muted,inherit)}
/* Kaspa Explained tokens (light and :root[data-theme=dark] both come from site.css variables) */
:root{--bx-bg:var(--bg-2);--bx-field:var(--bg);--bx-ink:var(--text);--bx-muted:var(--muted);--bx-line:var(--faint);--bx-hair:var(--line-bright);--bx-accent:var(--text);--bx-on-accent:var(--bg);--bx-err:var(--red);--bx-ok:var(--green);--bx-font:var(--font);--bx-mono:var(--mono);--bx-r:var(--r);--bx-sel:var(--bg-3)}
/* the footer "Suggest a change" button is the filled one, so it never blends into the page */
.foot-basics button[data-basics=suggest]{background:var(--text);color:var(--bg);border-color:var(--text)}
.bx-res li.bx-best{display:grid;gap:4px;padding:12px 12px 14px;border:1px solid var(--bx-accent,CanvasText);border-radius:8px;margin:4px 0 8px}
.bx-bl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-accent,inherit);font-weight:600}
.bx-best .bx-t{font-size:18px;font-weight:600}
.bx-a{font-size:15px;line-height:1.45;color:var(--bx-fg,inherit)}