.xh-label { position: absolute; z-index: 20; pointer-events: none; background: #131722; color: #fff; font: 11px system-ui, sans-serif;
            padding: 2px 5px; border-radius: 2px; white-space: nowrap; }
.xh-head { position: absolute; z-index: 10; pointer-events: none; display: flex; flex-wrap: wrap; gap: 0 14px; overflow: hidden;
           font: 12px/18px system-ui, sans-serif; white-space: nowrap; }
.xh-head .xh-title { color: #666; font-weight: 600; }
.xh-head .xh-date { font-weight: 600; }
.xh-head .xh-item { pointer-events: auto; cursor: pointer; user-select: none; }
.xh-head .xh-off { opacity: .35; text-decoration: line-through; }
.xh-head .xh-cat { color: #fff; background: #8a94a6; border-radius: 3px; padding: 0 6px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; align-self: center; line-height: 16px; }
.xh-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: none; gap: 14px; align-items: center; padding: 6px 16px;
              background: rgba(255,255,255,.96); border-bottom: 1px solid #ddd; font: 12px/18px system-ui, sans-serif; white-space: nowrap;
              overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }  /* a phone is too narrow for it all: swipe sideways */
.xh-sticky::-webkit-scrollbar { display: none; }
.xh-sticky > * { flex: none; }  /* keep each readout whole and let the bar scroll, rather than squeezing them */
.xh-sticky .xh-date { font-weight: 600; }
.xh-shadow { color: #8a8a8a; }

.xh-main { display: flex; gap: 16px; align-items: flex-start; }
.xh-main > :first-child { flex: 1 1 auto; min-width: 0; }
.xh-docs-col { position: relative; flex: none; width: 300px; display: none; }
.xh-doc { position: absolute; left: 0; right: 0; overflow: auto; box-sizing: border-box; padding: 6px 10px; border-left: 3px solid #cfd4dc;
          background: #f8f9fb; font: 12px/1.45 system-ui, sans-serif; color: #444; }
.xh-doc h4 { margin: 0 0 4px; font-size: 12px; color: #222; }
.xh-doc p { margin: 0 0 4px; }
.xh-help { pointer-events: auto; cursor: pointer; display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; align-self: center;
           border-radius: 50%; background: #e4e7ec; color: #555; font: 600 11px system-ui, sans-serif; user-select: none; }
.xh-help:hover { background: #cfd4dc; }
.xh-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.xh-modal .xh-doc { position: static; width: min(460px, 90vw); max-height: 80vh; padding: 14px 18px; border: 0; border-radius: 8px; background: #fff;
                    box-shadow: 0 8px 30px rgba(0,0,0,.25); font-size: 13px; }
.xh-modal h4 { font-size: 14px; }
@media (min-width: 1400px) { .xh-docs-col { display: block; } .xh-help { display: none; } }