/* HISTORY TAB (2026-10-13) - history.js. Layered after night.css / desk.css /
   market.css, so it wins by order where it has to. Phone first. */
.hs-page{max-width:1480px}
.hs-form .chips label .blogo{width:18px; height:18px; border-radius:5px; background:#fff; padding:1px; box-sizing:border-box; object-fit:cover}
.hs-form .chips label .glyph{font-size:12px}
.hs-form .p-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px}
.hs-form .p-grid .field > label{font-size:11.5px}
.hs-form input[type=date]{min-width:0; width:100%}
.hs-form select,.hs-form input:not([type=checkbox]){min-width:0; width:100%}
.hs-note{margin:10px 0 0; font-size:12px; color:var(--ink-3)}
.hs-range{margin-top:6px}
.hs-range button{padding:5px 11px; font-size:12px}
@media(min-width:760px){ .hs-form .p-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

#hs-confirm{margin-top:14px}
.hs-confirm{border:1px solid var(--gold-line); background:var(--gold-wash); border-radius:16px; padding:14px 16px; font-size:13.5px; line-height:1.55}
.hs-confirm p{margin:6px 0 0; color:var(--ink-2)}
.hs-confirm.ok{border-color:rgba(48,209,88,.35); background:rgba(48,209,88,.08)}
.hs-confirm.bad{border-color:rgba(220,100,105,.4); background:rgba(220,100,105,.08)}
.hs-cbtn{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

#hs-out{margin-top:18px}
.hs-empty{text-align:center; color:var(--ink-2); font-size:14px}
.hs-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media(min-width:620px){ .hs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1180px){ .hs-tiles{grid-template-columns:repeat(6,minmax(0,1fr))} }
.hs-tile{background:var(--sur-1); border:1px solid var(--line-2); border-radius:16px; padding:12px 14px 11px; min-width:0}
.hs-tile small{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.hs-tile b{display:block; font-size:22px; font-weight:650; letter-spacing:-.01em; margin-top:5px; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hs-tile i{display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.hs-tile b.pos,.hs-tables .pos,.hs-tip .pos{color:var(--pos)}
.hs-tile b.neg,.hs-tables .neg,.hs-tip .neg{color:var(--neg)}
.hs-sub{font-size:12.5px; color:var(--ink-3); margin:10px 2px 14px; line-height:1.55}

.hs-two{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media(min-width:1000px){ .hs-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.hs-chart{min-width:0}
.hs-chart h3,.hs-tables h3{margin:0 0 8px; font-size:14.5px; font-weight:650; letter-spacing:-.01em; color:var(--ink-1)}
.hs-tables h3{margin:20px 0 8px}
.hs-tables h3:first-child{margin-top:0}
.hs-tables h3 .dim{font-weight:500; font-size:12.5px}
.hs-plot svg{display:block; overflow:visible; touch-action:pan-y}
.hs-grid line{stroke:var(--line-2); stroke-width:1}
.hs-grid line.zero{stroke:var(--line-3)}
.hs-ax text{fill:var(--ink-3); font-size:10.5px; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.hs-ln{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.hs-end{fill:var(--gold); stroke:var(--sur-1); stroke-width:2}
.hs-cross{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3}
.hs-dot{fill:var(--gold); stroke:var(--sur-1); stroke-width:2}
.hs-hit,.hs-ghit{fill:transparent; cursor:crosshair}
.hs-legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--ink-2); margin:0 0 8px}
.hs-legend span{display:inline-flex; align-items:center; gap:6px}
.hs-legend i,.hs-tip i{width:10px; height:10px; border-radius:3px; display:inline-block; flex:none}
.hs-num{margin-top:8px; font-size:12.5px; color:var(--ink-2)}
.hs-num summary{cursor:pointer; color:var(--ink-3)}
.hs-num .hs-tbl{max-height:260px; overflow:auto; margin-top:8px}

.hs-tip{position:fixed; z-index:90; pointer-events:none; background:rgba(28,28,31,.97); border:1px solid var(--line-3);
  border-radius:12px; padding:9px 11px; font-size:12.5px; color:var(--ink-2); box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:flex; flex-direction:column; gap:3px; max-width:240px}
.hs-tip[hidden]{display:none}
.hs-tip b{color:var(--ink-1); font-weight:650}
.hs-tip span{display:flex; align-items:center; gap:6px}
.hs-tip em{font-style:normal; font-family:var(--f-mono); color:var(--ink-1); margin-left:auto}

.hs-tables{margin-top:14px; padding:16px 0 6px}
.hs-tables h3{padding:0 16px}
.hs-tbl{overflow-x:auto; -webkit-overflow-scrolling:touch}
.hs-tbl table{width:100%; min-width:560px}
.hs-tables .hs-bets{min-width:820px}
.hs-tbl .p-tbl td{white-space:nowrap}
.hs-tbl .p-tbl td.hs-bet{white-space:normal; min-width:200px; max-width:340px}
.hs-bk{display:flex; align-items:center; gap:8px}
td.hs-bk{display:table-cell}
td.hs-bk .blogo{width:20px; height:20px; border-radius:6px; background:#fff; padding:1px; box-sizing:border-box; vertical-align:middle; margin-right:7px}
td.hs-bk .glyph{margin-right:6px}
.hs-tbl .p-tbl td b{font-weight:650}
.hs-foot{font-size:12px; color:var(--ink-3); line-height:1.6; margin:14px 16px 10px}
/* the dock's six phone-width rows already lost a hair at 370px; eight tabs need the same */
@media(max-width:420px){ .tabs a{font-size:10px; padding:0 1px} .tabs svg{width:18px; height:18px} }
/* the board's table rules are global (fixed layout, sticky clickable heads,
   and night.css hides a .p-tbl's third column under 600px) - none of that is
   right for these tables */
.hs-tbl table{table-layout:auto}
.hs-tbl thead th{position:static; cursor:default; border-radius:0 !important; background:transparent}
@media(max-width:600px){ .hs-tbl .p-tbl th:nth-child(3),.hs-tbl .p-tbl td:nth-child(3){display:table-cell} }

/* THE BETS LIST: a row per bet on a computer, three short lines on a phone */
.hs-bl{border-top:1px solid var(--line-2)}
.hs-bh,.hs-br{display:grid; grid-template-columns:minmax(0,2.6fr) minmax(0,1.25fr) repeat(5,minmax(52px,.55fr)) minmax(96px,1fr); gap:0 10px; align-items:start; padding:9px 16px}
.hs-bh{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-weight:700; padding-top:10px; padding-bottom:10px}
.hs-bh .r,.hs-c-n,.hs-c-res{text-align:right}
.hs-br{border-top:1px solid var(--line-2); font-size:13.5px}
.hs-c-bet b{display:block; font-weight:600; color:var(--ink-1); overflow-wrap:anywhere}
.hs-c-bet small,.hs-c-res small{display:block; margin-top:2px; font-size:11.5px; color:var(--ink-3); overflow-wrap:anywhere}
.hs-c-book{display:flex; align-items:center; gap:7px; min-width:0; color:var(--ink-2)}
.hs-c-book span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hs-c-book .blogo{width:20px; height:20px; border-radius:6px; background:#fff; padding:1px; box-sizing:border-box; flex:none}
.hs-c-n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.hs-c-n.pos,.hs-c-res .pos{color:var(--pos)} .hs-c-n.neg,.hs-c-res .neg{color:var(--neg)}
.hs-c-res b{font-family:var(--f-mono); font-weight:650; white-space:nowrap}
.hs-more{display:flex; justify-content:center; padding:12px 16px 4px}
.hs-more .btn[hidden]{display:none}
@media(max-width:760px){
  .hs-bh{display:none}
  .hs-br{grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-areas:"bet bet bet res res" "book book book book book" "n1 n2 n3 n4 n5"; gap:6px 8px; padding:12px 16px}
  .hs-c-bet{grid-area:bet} .hs-c-res{grid-area:res} .hs-c-book{grid-area:book; font-size:12.5px}
  .hs-c-n{text-align:left; font-size:13px}
  .hs-c-n::before{content:attr(data-l); display:block; font-family:var(--f-body); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:2px}
}
@media(max-width:760px){
  .hs-tbl .p-tbl th.ph-hide,.hs-tbl .p-tbl td.ph-hide{display:none !important}
  .hs-tbl table{min-width:0}
  .hs-tbl .p-tbl td,.hs-tbl .p-tbl th{padding:9px 8px; font-size:12.5px}
  .hs-tbl .p-tbl td:first-child,.hs-tbl .p-tbl th:first-child{padding-left:16px}
}
.hs-tbl .p-tbl td:last-child,.hs-tbl .p-tbl th:last-child{padding-right:16px}