.option-day-page { max-width: 1800px; --day-chart-height: calc(680px + 5.25rem); }
.option-day-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: .8rem; align-items: start; }
#option-canvas { height: var(--day-chart-height); }
.day-strikes { display: flex; flex-direction: column; height: var(--day-chart-height); border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); overflow: hidden; }
.day-strikes-heading { display: flex; justify-content: space-between; gap: .4rem; padding: .8rem .6rem; font-size: .8rem; border-bottom: 1px solid var(--line); }
.day-strikes-scroll { overflow-y: auto; overflow-x: hidden; min-height: 0; flex: 1; }
.day-strikes table { border-collapse: collapse; width: 100%; min-width: 0; table-layout: fixed; font-size: .85rem; }
.option-day-page #option-canvas table { min-width: 0; }
.day-strikes thead { position: sticky; top: 0; z-index: 1; background: #eef2f5; }
.day-strikes td, .day-strikes th { padding: .35rem .25rem; text-align: center; border-bottom: 1px solid #e3e8ee; }
.day-strikes td:nth-child(2) { color: #087a38; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-strikes tr.is-atm td { background: #fff7d6; }
.day-strikes input { accent-color: var(--accent); width: 1rem; height: 1rem; cursor: pointer; }
.day-strikes input:disabled { cursor: default; }
#day-updated { color: var(--muted); font-size: .85rem; margin-left: auto; align-self: center; }
#day-fetch { color: #fff; background: var(--accent); border-color: var(--accent); }
#day-progress-panel { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; font-size: .85rem; }
#day-progress-panel[hidden] { display: none; }
#day-progress { width: min(360px, 40%); height: 1rem; accent-color: var(--accent); }
@media (max-width: 1000px) { .option-day-layout { grid-template-columns: 155px minmax(0, 1fr); } #option-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .option-day-page { padding: .6rem; --day-chart-height: 650px; } .option-day-layout { grid-template-columns: 125px minmax(0, 1fr); gap: .35rem; } .day-strikes-heading { flex-direction: column; } #option-legend { grid-template-columns: minmax(0, 1fr); } #day-updated { margin-left: 0; } }