/* Hex viewer (141b). Site tokens only. Row height is fixed at 20px: hex-viewer.js scrolls in whole rows. */
.hx-tool { max-width: 1100px; min-width: 0; }
.tool-ui .hx-lede { color: var(--color-muted); font-size: .92rem; margin: -.5rem 0 .75rem; }
.hx-drop { border: 2px dashed var(--color-border); border-radius: var(--radius-panel); padding: 1rem; background: var(--color-surface); }
.hx-drop.is-over { border-color: var(--color-link); }
.hx-drop input[type=file] { max-width: 100%; }
.tool-ui .hx-hint { margin: .5rem 0 0; color: var(--color-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hx-hint button { padding: 10px 16px; }
.hx-status:empty, .hx-msg:empty, .hx-where:empty { display: none; }
.hx-summary { font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.hx-type { overflow-wrap: anywhere; }
.hx-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: .5rem 1.5rem; margin: 1rem 0 .5rem; }
.hx-controls form { min-width: 0; }
.hx-controls label { font-size: .9rem; color: var(--color-muted); }
.hx-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hx-inline input, .hx-inline select { margin: 0; min-height: 44px; }
.hx-inline input[type=text], .hx-inline input[type=search] { flex: 1 1 9rem; min-width: 0; width: auto; }
.hx-inline select { width: auto; flex: 0 0 auto; }
.hx-inline button { min-height: 44px; }
.hx-find-more { margin-top: .5rem; }
.hx-check { display: inline-flex; align-items: center; gap: .4rem; margin-right: auto; min-height: 44px; }
.hx-check input { width: auto; min-height: 0; }
.hx-check[hidden] { display: none; }
.hx-msg { color: var(--color-muted); font-size: .9rem; margin: .35rem 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hx-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1rem; align-items: start; }
.hx-where { color: var(--color-muted); font-size: .85rem; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; }
.hx-view { height: min(30rem, 62vh); overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--color-surface); font: 13px/20px var(--font-label); font-variant-numeric: tabular-nums; overscroll-behavior: contain; }
.hx-view:focus-visible { outline: 3px solid var(--color-link); outline-offset: 2px; }
.hx-pane { position: sticky; top: 0; width: max-content; min-width: 100%; overflow: hidden; padding: 0 .5rem; box-sizing: border-box; }
.hx-row { display: flex; height: 20px; white-space: pre; }
.hx-row[hidden] { display: none; }
.hx-head { color: var(--color-muted); border-bottom: 1px solid var(--line); background: var(--color-surface); }
.hx-off { color: var(--color-muted); margin-right: 1.25ch; }
.hx-hex { display: flex; margin-right: 1.25ch; }
.hx-b { width: 3ch; text-align: center; cursor: pointer; }
.hx-b:nth-child(8) { margin-right: 1ch; }
.hx-asc { display: flex; }
.hx-head .hx-asc { color: var(--color-muted); }
.hx-c { width: 1ch; text-align: center; cursor: pointer; }
.hx-b.is-zero, .hx-c.is-zero { color: color-mix(in srgb, var(--color-muted) 55%, transparent); }
.hx-c.is-ctrl { color: var(--color-muted); }
.hx-b.is-match, .hx-c.is-match { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.hx-b.is-current, .hx-c.is-current { background: var(--color-accent); color: var(--color-on-accent); }
.hx-b.is-selected, .hx-c.is-selected { outline: 2px solid var(--color-link); outline-offset: -2px; background: color-mix(in srgb, var(--color-link) 25%, transparent); color: var(--color-text); }
.hx-b:hover, .hx-c:hover { background: var(--color-surface-raised); }
.hx-inspect { background: var(--color-surface); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .75rem; min-width: 0; font-variant-numeric: tabular-nums; }
.tool-ui .hx-inspect h2 { font-size: 1rem; margin: .1rem 0 .4rem; overflow-wrap: anywhere; }
.hx-bits { font-family: var(--font-label); font-size: .85rem; overflow-wrap: anywhere; margin: 0 0 .5rem; }
.hx-values { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hx-values th, .hx-values td { text-align: left; padding: .2rem .35rem; border-top: 1px solid var(--line); }
.hx-values td { font-family: var(--font-label); overflow-wrap: anywhere; }
.hx-values thead th { color: var(--color-muted); font-weight: 400; border-top: 0; }
.hx-note { color: var(--color-muted); font-size: .85rem; margin: .5rem 0 0; }
@media (max-width: 760px) {
  .hx-layout { grid-template-columns: minmax(0, 1fr); }
  .hx-view { font-size: 12px; }
}