/* The X-ray, live tracker, next man up and share buttons. */
.nextman, .xray, .sweat { padding: 10px 12px; background: var(--x-panel, var(--surface)); color: var(--x-ink, var(--ink)); border-radius: var(--radius, 4px); font-size: 13.5px; line-height: 1.35; }
.nextman h3, .xray h3, .sweat h3 { margin-bottom: 4px; font-size: 16px; font-weight: 800; }
.nm-out + .nm-out { margin-top: 8px; }
.nm-who { font-weight: 700; }
.nm-who em { font-style: normal; font-weight: 500; opacity: .75; }
.nextman li { padding: 2px 0; }
.nm-num { font-family: var(--mono); }
.nextman small { opacity: .75; }
.nm-note { margin-top: 6px; font-size: 12px; opacity: .75; }
.xray ul, .sweat ul { display: grid; gap: 4px; margin: 6px 0; }
.xray li { display: grid; grid-template-columns: minmax(0, 1fr) 60px 46px; gap: 8px; align-items: center; }
.xray li span:first-child, .sweat li span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xray li > b { text-align: right; font-family: var(--mono); font-weight: 500; }
.xr-bar, .sw-bar { display: block; height: 6px; background: rgb(128 128 128 / .3); overflow: hidden; }
.xr-bar i, .sw-bar i { display: block; height: 100%; width: var(--w); background: var(--x-accent, var(--accent)); }
.xray .drag { font-weight: 700; }
.sweat li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 92px; gap: 8px; align-items: center; }
.sweat li > b { text-align: right; font-family: var(--mono); font-weight: 500; font-size: 12.5px; }
.sw-detail { font-size: 12.5px; opacity: .8; }
.sw-hit .sw-bar i { background: #2fae62; }
.sw-dead .sw-bar i { background: #d6432c; }
.sw-dead > span:first-child { text-decoration: line-through; opacity: .7; }
.sweat.won { box-shadow: inset 0 0 0 2px #2fae62; }
.sweat.lost { box-shadow: inset 0 0 0 2px #d6432c; }
.slip-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.slip-actions button, .slip-actions a { display: grid; place-items: center; min-height: 38px; padding: 4px 6px; background: none; border: 1px solid currentColor; border-radius: var(--radius, 4px); color: inherit; font-size: 13.5px; font-weight: 700; text-align: center; text-decoration: none; }
.ladder .fd { font-family: var(--mono); }

.tier { border-bottom: 1px solid var(--tier-line, rgb(128 128 128 / .35)); }
.tier summary { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 10px; cursor: pointer; list-style: none; }
.tier summary::-webkit-details-marker { display: none; }
.tier summary::before { content: ""; align-self: center; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .14s ease; }
.tier[open] summary::before { transform: rotate(45deg); }
.tier-name { font-weight: 800; font-size: 17px; }
.tier-range { font-size: 13.5px; opacity: .75; }
.tier-count { margin-left: auto; font-size: 13.5px; opacity: .8; white-space: nowrap; }
.tier summary:hover .tier-name { text-decoration: underline; }
.tier-steady .tier-name { color: var(--tier-steady, inherit); }
.tier-long .tier-name { color: var(--tier-long, inherit); }

.odds-build { display: grid; gap: 5px; }
.odds-build label { font-size: 13.5px; font-weight: 700; }
.odds-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.odds-row input { width: 100%; min-width: 0; height: 42px; padding: 0 12px; font-family: var(--mono, monospace); font-size: 16px; border: 1px solid var(--line, #777); border-radius: var(--radius, 4px); background: #fff; color: #17120a; caret-color: #17120a; }
.odds-row .build { padding: 0 16px; white-space: nowrap; }
.odds-note { font-size: 13px; line-height: 1.3; }
.odds-note.warn { font-weight: 700; }

.notice { padding: 9px 20px; background: #ffd23f; color: #17120a; font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; }
.notice[hidden] { display: none; }
.notice strong { display: inline-block; margin-right: 8px; padding: 1px 8px; background: #17120a; color: #ffd23f; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }

button.leg-body { width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.leg-body:hover strong { text-decoration: underline; }
tr.jumped th, tr.jumped td { box-shadow: inset 0 2px 0 var(--jump, currentColor), inset 0 -2px 0 var(--jump, currentColor); }