/* Keep the three reference cards; omit detailed token activity on mobile devices. */
@media(max-width:1100px),(hover:none) and (pointer:coarse){
  body[data-theme] header.profile-bar #theme-toggle{display:none}
  body[data-theme] .overview-cards [data-integration=codex] .codex-activity{display:none}
  body[data-theme=glass] .page-footer::before{width:calc(100% + var(--page-gap)*2)}
}

@media(max-width:580px){
  body[data-theme] .overview-cards [data-integration=codex]{padding:9px 7px}
  body[data-theme] [data-integration=electricity] .electricity-value{flex-wrap:wrap;gap:4px}
  body[data-theme] [data-integration=electricity] .electricity-power{flex-basis:100%;max-width:100%;margin-left:0;text-align:left;white-space:normal}
}

/* Phone quota and reset rings each get a full row. */
@media(max-width:767px){
  body[data-theme]{--tablet-overview-height:260px}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows,
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)){grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:10px;align-content:center}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .quota-item{grid-column:auto;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;line-height:1.25;text-align:center}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .quota-item small{font-size:8px;line-height:1.3;white-space:normal}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .empty-ring,
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)) .empty-ring{width:min(64px,100cqw);height:auto;aspect-ratio:1;container-type:inline-size}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .empty-ring>span,
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)) .empty-ring>span{font-size:28cqw}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .reset-ring>span,
  body[data-theme] .dashboard [data-integration=codex] #codex-windows:has(.quota-item:nth-child(3)) .reset-ring>span{font-size:17cqw}
  body[data-theme] .dashboard [data-integration=codex] #codex-windows .remaining-ring::before{inset:5px}
  body[data-theme] .dashboard:has(#codex-windows .quota-item:nth-child(3)){--tablet-overview-height:340px}
}