/* Keep the line identity frozen while allowing the summary columns to move right. */
:root{--fixed-width:306px}
.fixed-week,.fixed-days,.line-info,.fixed-month{grid-template-columns:18px 26px 22px 42px 36px 38px 36px 40px 48px}
.fixed-week>span:nth-child(4),.fixed-days>span:nth-child(4),.line-info>.rank-number{display:none}
.metric-week>span,.metric-labels>.compact-label{display:none}
.compact-view-toggle{grid-column:1/-1;justify-self:start;align-self:center;margin:0 0 0 5px;padding:5px 10px;min-height:27px;border:1px solid #a8bfcc;border-radius:4px;background:#fff;color:#486273;font:700 11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;white-space:nowrap;cursor:pointer}
.compact-view-toggle[aria-pressed="true"]{border-color:#3488a7;background:#e5f3f8;color:#1c617c}
.compact-view{--fixed-width:144px;--metrics-width:294px}
.compact-view .fixed-week,.compact-view .fixed-days,.compact-view .line-info,.compact-view .fixed-month{grid-template-columns:18px 26px 22px 42px 36px}
.compact-view .fixed-week>span:nth-child(n+7),.compact-view .fixed-days>span:nth-child(n+7),.compact-view .line-info>.pay-value,.compact-view .line-info>.tc-value,.compact-view .line-info>.sort-percent-value,.compact-view .line-info>.commute-percent-value{display:none}
.compact-view .metric-week,.compact-view .metrics,.compact-view .metric-labels{display:grid;grid-template-columns:repeat(3,38px) repeat(4,45px);align-items:center;text-align:center}
.compact-view .metric-week{justify-content:end;color:#60707b;font:700 8px ui-monospace,SFMono-Regular,Menlo,monospace}
.compact-view .metric-week::before{content:"";grid-column:span 3}
.compact-view .metric-week>span,.compact-view .metric-labels>.compact-label{display:block}
.compact-view .compact-metric-value{font-size:9px;text-align:center}
@media(max-width:1300px){:root{--fixed-width:286px}.fixed-week,.fixed-days,.line-info,.fixed-month{grid-template-columns:18px 24px 20px 40px 34px 36px 34px 36px 44px}.compact-view{--fixed-width:136px}}
@media(max-width:900px){:root{--fixed-width:264px}.fixed-week,.fixed-days,.line-info,.fixed-month{grid-template-columns:16px 23px 18px 36px 32px 32px 30px 34px 43px}.compact-view{--fixed-width:125px}}
body.not-commuter .fixed-month{grid-template-columns:18px 26px 22px 30px 42px 38px 36px 40px}
body.compact-view.not-commuter{--fixed-width:144px;--metrics-width:249px}
body.compact-view.not-commuter .fixed-week,body.compact-view.not-commuter .fixed-days,body.compact-view.not-commuter .line-info,body.compact-view.not-commuter .fixed-month{grid-template-columns:18px 26px 22px 42px 36px}
body.compact-view.not-commuter .metric-week,body.compact-view.not-commuter .metrics,body.compact-view.not-commuter .metric-labels{grid-template-columns:repeat(3,38px) repeat(3,45px)}
@media(max-width:1300px){body.not-commuter .fixed-month{grid-template-columns:18px 24px 20px 28px 40px 36px 34px 36px}body.compact-view.not-commuter{--fixed-width:136px}}
@media(max-width:900px){body.not-commuter .fixed-month{grid-template-columns:16px 23px 18px 25px 36px 32px 30px 34px}body.compact-view.not-commuter{--fixed-width:125px}body.compact-view.not-commuter .fixed-week,body.compact-view.not-commuter .fixed-days,body.compact-view.not-commuter .line-info,body.compact-view.not-commuter .fixed-month{grid-template-columns:16px 23px 18px 36px 32px}}

/* Compact View keeps trip count and ranking alongside the frozen line identity. */
body.compact-view{--fixed-width:279px;--metrics-width:159px}
body.compact-view .fixed-week,body.compact-view .fixed-days,body.compact-view .line-info,body.compact-view .fixed-month{grid-template-columns:18px 26px 22px 42px 36px repeat(3,45px)}
body.compact-view .fixed-week>span:nth-child(8),body.compact-view .fixed-week>span:nth-child(9),body.compact-view .fixed-week>.com-ease-debug-trigger,body.compact-view .fixed-days>span:nth-child(n+7),body.compact-view .line-info>.tc-value,body.compact-view .line-info>.sort-percent-value,body.compact-view .line-info>.commute-percent-value{display:block}
body.compact-view .metric-week,body.compact-view .metrics,body.compact-view .metric-labels{grid-template-columns:repeat(3,38px) 45px}
body.compact-view .metric-week>span:nth-child(n+2),body.compact-view .metric-week>.com-ease-debug-trigger,body.compact-view .metric-labels>.compact-label:nth-child(n+5),body.compact-view .metric-labels>.com-ease-debug-trigger,body.compact-view .metrics>.tc-value.compact-metric-value,body.compact-view .metrics>.sort-percent-value.compact-metric-value,body.compact-view .metrics>.commute-percent-value.compact-metric-value{display:none}
body.compact-view.not-commuter{--fixed-width:234px;--metrics-width:159px}
body.compact-view.not-commuter .fixed-week,body.compact-view.not-commuter .fixed-days,body.compact-view.not-commuter .line-info,body.compact-view.not-commuter .fixed-month{grid-template-columns:18px 26px 22px 42px 36px repeat(2,45px)}
body.compact-view.not-commuter .fixed-week>.com-ease-debug-trigger,body.compact-view.not-commuter .line-info>.commute-percent-value{display:none}
body.compact-view.not-commuter .fixed-days>span:nth-child(9){display:none}
@media(max-width:1300px){body.compact-view{--fixed-width:271px}body.compact-view .fixed-week,body.compact-view .fixed-days,body.compact-view .line-info,body.compact-view .fixed-month{grid-template-columns:18px 24px 20px 40px 34px repeat(3,45px)}body.compact-view.not-commuter{--fixed-width:226px}body.compact-view.not-commuter .fixed-week,body.compact-view.not-commuter .fixed-days,body.compact-view.not-commuter .line-info,body.compact-view.not-commuter .fixed-month{grid-template-columns:18px 24px 20px 40px 34px repeat(2,45px)}}
@media(max-width:900px){body.compact-view{--fixed-width:260px}body.compact-view .fixed-week,body.compact-view .fixed-days,body.compact-view .line-info,body.compact-view .fixed-month{grid-template-columns:16px 23px 18px 36px 32px repeat(3,45px)}body.compact-view.not-commuter{--fixed-width:215px}body.compact-view.not-commuter .fixed-week,body.compact-view.not-commuter .fixed-days,body.compact-view.not-commuter .line-info,body.compact-view.not-commuter .fixed-month{grid-template-columns:16px 23px 18px 36px 32px repeat(2,45px)}}
