/* Daily board ranking matrix; one scroll container works at desktop and phone widths. */
.rotation-notice, .rotation-footnote { margin:8px 0; padding:0 3px; color:var(--color-text-secondary); font-size:11px; line-height:1.65; }
.rotation-notice.is-stale { color:var(--color-warning); background:var(--color-warning-bg); padding:8px; border-radius:7px; }
.rotation-hint { margin:5px 0; color:var(--color-text-tertiary); font-size:10px; text-align:center; }
.rotation-hint[hidden] { display:none; }
.rotation-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; border:1px solid var(--color-border-light); border-radius:10px; background:var(--color-surface); }
.rotation-table { width:max-content; min-width:100%; table-layout:fixed; border-spacing:0; border-collapse:separate; font-size:11px; }
.rotation-table th, .rotation-table td { box-sizing:border-box; min-width:118px; height:58px; padding:0; text-align:center; border-right:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); }
.rotation-table tr:last-child th, .rotation-table tr:last-child td { border-bottom:0; }
.rotation-table tr th:last-child, .rotation-table tr td:last-child { border-right:0; }
.rotation-table thead th { height:65px; font-weight:500; background:var(--color-surface); }
.rotation-table thead th strong, .rotation-table thead th small, .rotation-table thead th em { display:block; }
.rotation-table thead th strong { color:var(--color-primary); font-size:12px; }
.rotation-table thead th small { color:var(--color-text-tertiary); font-size:10px; }
.rotation-table thead th em { font-size:9px; color:var(--color-text-tertiary); font-style:normal; }
.rotation-table .rotation-rank-head, .rotation-table .rotation-rank { position:sticky; left:0; z-index:2; min-width:48px; width:48px; background:var(--color-surface); }
.rotation-table .rotation-rank-head { z-index:3; }
.rotation-table .rotation-rank { color:var(--color-text-secondary); font-weight:600; }
.rotation-table .is-latest { background:var(--color-surface-alt); }
.rotation-cell { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:100%; height:100%; padding:5px; border:0; background:transparent; color:var(--color-text); cursor:pointer; }
.rotation-cell:hover, .rotation-cell:focus-visible { background:var(--color-primary-soft, #e9edff); outline:2px solid var(--color-primary); outline-offset:-2px; }
.rotation-name { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rotation-change { padding:2px 5px; border-radius:4px; font-size:10px; font-variant-numeric:tabular-nums; }
.rotation-change.up { color:var(--color-up); background:#faedf0; }
.rotation-change.down { color:var(--color-down); background:#eaf8f1; }
.rotation-change.flat { color:var(--color-text-tertiary); background:var(--color-surface-alt); }
.rotation-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:9px; border-radius:9px; background:var(--color-surface-alt); }
.rotation-metric { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; text-align:center; }
.rotation-metric small, .rotation-metric span { color:var(--color-text-tertiary); font-size:9px; line-height:1.45; }
.rotation-metric strong { font-size:12px; font-variant-numeric:tabular-nums; }
.rotation-interpretation { margin-top:12px; padding:12px; border-radius:9px; background:var(--color-surface-alt); font-size:11px; line-height:1.7; }
.rotation-interpretation p { margin:7px 0 0; }
.rotation-source { color:var(--color-text-tertiary); font-size:10px; line-height:1.7; }
@media (max-width:480px) { .rotation-table th, .rotation-table td { min-width:108px; } .rotation-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:12px; } }