/* ── history-page task 3 (R2, R3, D3): the history rail screen ───────────────
   Every rule for the screen lives here — app.css is not edited (the range /
   gex-page / alerts containment precedent). Visibility follows the shared
   body[data-screen] switch. The table is the scanner's (`table.term
   .mws-table`, app.css) — only the leading VIEWED column, the unserved row and
   the panel chrome are styled here. Tokens only (no hex), sharp corners,
   borders not shadows, mono, tabular numbers, no transitions. */
#history-screen{display:none}
body[data-screen="history"] #history-screen{display:flex}
body[data-screen="history"] .container{display:none}
body[data-screen="history"]{--filter-w:0px}
body[data-screen="history"] #filterHandle{display:none}

#history-screen{position:fixed;top:var(--topbar-h,40px);left:var(--rail-w,56px);right:0;bottom:var(--statusbar-h,24px);flex-direction:column;background:var(--bg-1);z-index:1;font-family:var(--font-mono);min-width:0}
.hpg-panel{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;min-width:0;border:0;border-radius:0}
.hpg-hd{flex-wrap:nowrap;min-width:0;gap:8px}
.hpg-count{font-variant-numeric:tabular-nums}
.hpg-note{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem;color:var(--fg-mute)}
.hpg-note--err{color:var(--red)}
.hpg-note .mws-btn{margin-left:2px}
.hpg-clear{display:flex;align-items:center;gap:4px;flex:0 0 auto;white-space:nowrap}
.hpg-clear__q{font-size:.62rem;color:var(--amber)}
.hpg-msg{padding:12px;font-size:.7rem;color:var(--fg-mute)}
.hpg-msg[hidden],.hpg-wrap[hidden]{display:none}
/* R3.8: the table scrolls inside its panel, both ways — never the page */
.hpg-wrap{flex:1 1 auto;min-height:0;min-width:0;overflow:auto}

/* the leading VIEWED column */
#hpg-table th.hpg-viewed{width:calc(var(--td-col-unit) * 30)}
#hpg-table td.hpg-viewed{color:var(--fg-mute);font-variant-numeric:tabular-nums}
#hpg-table .hpg-src{color:var(--cyan);letter-spacing:1px}
/* the ticker cell is the SECOND column here: collapse its company-name line
   the way app.css does for the scanner's first column */
#hpg-table td:nth-child(2)>div:last-child{display:none}
/* app.css pins th/td:first-child (the scanner's ticker). Here the first
   column is VIEWED, so un-pin it and pin the TICKER (2nd) instead: a
   horizontal scroll keeps the ticker in view, VIEWED slides under it. The
   row hover / focus / active accents follow the ticker cell. */
#hpg-table th:first-child{left:auto;z-index:10}   /* keeps app.css's top:0 header stickiness */
#hpg-table td:first-child{position:static}
#hpg-table th:nth-child(2){position:sticky;left:0;z-index:20}
#hpg-table td:nth-child(2){position:sticky;left:0;z-index:5;background:var(--bg-2)}
#hpg-table tbody tr:hover td:nth-child(2){background:var(--bg-4)}
#hpg-table tbody tr:focus td:first-child{box-shadow:none}
#hpg-table tbody tr:focus td:nth-child(2){box-shadow:inset 3px 0 0 0 var(--green),inset 0 2px 0 0 var(--green),inset 0 -2px 0 0 var(--green)}
#hpg-table tbody tr.active-row td:first-child,#hpg-table tbody tr:active td:first-child{background:transparent;box-shadow:none}
#hpg-table tbody tr.active-row td:nth-child(2){background:var(--green-bg);box-shadow:inset 3px 0 0 0 var(--green)}
#hpg-table tbody tr:active td:nth-child(2){background:var(--bg-4)}
#hpg-table tbody tr{cursor:pointer}
/* header sort (R3.3) */
#hpg-table th.hpg-sortable{cursor:pointer}
#hpg-table th.hpg-sortable:hover{background:var(--bg-4)}
#hpg-table th.hpg-sorted{color:var(--green)}
#hpg-table th.hpg-sorted[aria-sort="descending"]::after{content:' ▼';font-size:.5rem}
#hpg-table th.hpg-sorted[aria-sort="ascending"]::after{content:' ▲';font-size:.5rem}
/* an unserved ticker (R3.4): muted, "—" cells, `no served row` */
#hpg-table tr.hpg-row--unserved td{color:var(--fg-mute)}
#hpg-table .hpg-tick__t{letter-spacing:2px;margin-right:8px}
#hpg-table .hpg-tick__miss{font-size:.6rem}

/* phone: the rail is a bottom tab bar (app.css), so the screen spans the width
   and stops above it — the range / gex-page / alerts rule */
@media (max-width:768px){
  #history-screen{left:0;bottom:calc(var(--statusbar-h,24px) + var(--mtab-h,44px))}
  /* the destructive confirm keeps saying what it clears; it wraps instead */
  .hpg-clear{flex-wrap:wrap;white-space:normal;flex-shrink:1;min-width:0}
}