/* web/css/style.css */
:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; }
header h1 { margin: 0 0 .5rem; font-size: 1.3rem; }
.controls { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
#status { margin: .25rem 0 1rem; opacity: .8; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .35rem .6rem; border-bottom: 1px solid #8884; }
th:nth-child(3), td:nth-child(3) { text-align: left; }  /* Symbol column (after pick + rank) */
thead th { position: sticky; top: 0; background: Canvas; cursor: default; }
@media (max-width: 600px) { body { padding: .5rem; } th, td { padding: .3rem .4rem; } }

#comparePanel { margin-top: 1.5rem; border-top: 1px solid #8883; padding-top: 1rem; }
.compareBar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.compareBar .spacer { flex: 1; }
.chip { border: 1px solid #8886; background: #8881; border-radius: 999px; padding: .15rem .6rem; cursor: pointer; font-size: .85rem; }
.chip:hover { background: #f45b6933; border-color: #f45b69; }
.seg button { border: 1px solid #8884; background: transparent; padding: .3rem .7rem; cursor: pointer; }
.seg button:first-child { border-radius: 7px 0 0 7px; }
.seg button:last-child { border-radius: 0 7px 7px 0; }
.seg button.active { background: #4f8cff; color: #fff; border-color: #4f8cff; }
td.pick, th.pick { width: 28px; text-align: center; }
#chartStatus { opacity: .7; font-size: .85rem; }